3. Appcelerator Titanium Mobile
• Titanium is a JavaScript runtime that gives you native access
to the platform’s controls
• You are not building a app via html/css/js (i.e. PhoneGap)
JavaScript
4. How Titanium Mobile Works
• You write code in JavaScript
• At runtime, your application has 3 major components:
o JavaScript source code (minified and inlined, but not compiled, into Java/Obj-C strings)
o Titanium API implementation in the native OS
o JavaScript interpreter (V8/Rhino for Android, JavaScriptCore for iOS)
• The JavaScript interpreter runs your JavaScript code in an
environment with proxies for the native objects (windows,
controls, etc)
5. Titanium Mobile
Application Source Files
Our Application
UI API Phone API Optional Modules
Bridge - JavaScript -Java / JavaScript - Objective C
OS - Android / iPhone
Native Android App Native iOS App
6. JS files to native objective code
• JS is statically analyzed
• Ti’s Python build scripts interact with native SDK tools .
• Native project stub will created
• JS precompiled to bytecode(Android) or inlined in a generated
C file(iOS)
• Your JS and native code package together with V8/Rhino or
JavaScriptCore to interpret JS code at runtime
7. To start development…
• PC or Mac machine (for iOS development)
• XCode with iOS SDK
• JDK 6 x86
• Android SDK
• Titanium Studio with SDK
17. app.js
• Starting point of App
• In app.js, we generally take care of a few things:
o Bootstrap the application with any data we need
o Check for dependencies like device type, platform version or network
connection
o Require and open our top-level UI component
o Background service for both iOS and Android
28. Layout (composite )
• composite (or absolute). Default layout. A child view is
positioned based on its positioning properties or "pins" (top,
bottom, left, right and center). If no positioning properties are
specified, the child is centered.
• The child is always sized based on its width and height
properties, if these are specified. If the child's height or width
is not specified explicitly, it may be calculated implicitly from
the positioning properties. For example, if both left and
center.x are specified, they can be used to calculate the width
of the child control.
29. Layout (vertical)
• Children are laid out vertically from top to bottom. The first
child is laid out top units from its parent's bounding box. Each
subsequent child is laid out below the previous child. The
space between children is equal to the upper child's bottom
value plus the lower child's top value.
• Each child is positioned horizontally as in the composite layout
mode.
30. Layout (vertical)
• Horizontal layouts have different behavior depending on
whether wrapping is enabled. Wrapping is enabled by default
(the horizontalWrap property is true).
• With wrapping behavior, the children are laid out horizontally
from left to right, in rows. If a child requires more horizontal
space than exists in the current row, it is wrapped to a new
row. The height of each row is equal to the maximum height
of the children in that row.
31. Include Vs. Require
• Ti.include(‘filename.js');
o is to be used when you want to include some other js file within another file.
o copy-pastes source code every time it's called.
o Used when wanting to define global methods or variables [defined once in top of file.js].
• Require(filename.js).method
o parses module's source code just once and it returns same object that is exported every time
it is called.
o Used when calling a method or variable from another file
o fontSize : require('src/Settings1').getFontNormal()
o var _isAndroidTablet = require('src/GlobalVariables').isAndroidTablet();
o Another File code
exports.isAndroidTablet = function() {
if(scWidth>scHeight && osname=='android')
return true;
return false; }
36. Database
• Install will copy SQLite database file to device's internal
storage. If file is there, it just uses the open method
• We can use Ti.App.Properties to set db install to true. For E.g.
Ti.App.Properties. setBool(‘isDbInstalled’,true)
• Open will automatically open the DB to perform CRUD
operations
37. Database code snippets
• Running SQL Queries against the DB
• We can also get number of Rows affected
40. Internationalization
• Create 2 letter folder inside “i18n” (18 stands for the number
of letters between the first i and last n in internationalization)
in root folder.
• Create Locale folder in it
• In that Locale folder just keep strings.xml
http://bit.ly/TiLang
41. Our App in different languages
• strings.xml
http://bit.ly/TiLang
42. Internationalization example
<resources>
<string name="en_NoOfBills">No of bills</string>
<string name="ar_NoOfBills"> string>
</resources>
var lang = require('src/Settings1').getLang();
var lblTitle = Ti.UI.createLabel({
text:L(lang+’ NoOfBills') }
44. Extending the API: why?
• Accessing specific OS features
• Leveraging existing native libraries
• Optimizing critical portions of the app
• Extending/ameliorating portions of the Titanium Mobile
framework
45. Extending the API: how?
• Creating a fork of Titanium Mobile’s source
code on github
o Unflexible approach
• You put your hands in the heart of the framework
• Maintaining a separate branch can be tedious and
costly
o There are situations where this is the cheaper
approach
• E.g. when needing to extend the functionality of core
modules of the framework (networking, maps, ecc.)
46. Extending the API: how?
• Creating one or more native modules throught the
Titanium Module SDK
o Great flexibility
o Easy to distribute as
• Open Source
• Binary packages
• Appcelerator Ti+Plus Marketplace (?)
• Add files to modules folder to specific
Android or iOS
50. Cross-platform Strategy
• If possible, build and test your application for multiple
platforms from the start
• Understand the cost of using platform-specific native UI
elements
• Separate business logic and UI construction
• Smaller UI components are easier to maintain across
platforms than large ones
• Test on many devices and resolutions
http://www.appcelerator.com | @appcelerator 50
51. Some Tools of the Trade
http://www.appcelerator.com | @appcelerator 51
53. Usage...
use as a convenient way to branch logic
based on operating system, or...
...a convenient way to choose a value
based on operating system
http://www.appcelerator.com | @appcelerator 53
54. Platform Resources
Code files, images, or any other
resource can be swapped out on a
per-platform basis
http://www.appcelerator.com | @appcelerator 54
56. Terms and Concepts
• Resolution: The total number of physical pixels on a screen
• Density: the spread of pixels across an inch of the actual
screen (DPI)
When defining Android user interfaces, the
top/bottom/left/right/height/width/font etc. values you
use are based on RESOLUTION. SCREEN DENSITY can be
used to determine density-appropriate visual assets to use.
http://www.appcelerator.com | @appcelerator 56
57. Example
Smaller Physical Size
Resolution: 240x320
Low Density (120dpi)
Same Physical Size
Resolution: 320x480 Resolution: 480x800
Medium Density (160dpi) High Density (240dpi)
http://www.appcelerator.com | @appcelerator 57
59. Contrast with iOS
• iPhone layout is always
based on a 320x480 point
system, regardless of screen
density/pixels
• Retina display devices (high 480 “points”
density display) require high-
res images (@2x)
320 “points”
http://www.appcelerator.com | @appcelerator 59
60. Multiple Resolutions
• Ti.Platform.displayCaps
o platformWidth
o platformHeight
• Based on available screen real estate, you may change the size
or layout of your UI
• Use the available emulator skins and devices to test layouts
on multiple resolutions
• Use top/bottom/left/right for sizing where possible
http://www.appcelerator.com | @appcelerator 60
61. Multiple Densities
• Even if the available screen resolution is the same, higher
density screens call for higher resolution assets
• Provide density-specific images in the ‘android/images’ resource
directory
• Provide highest resolution images, it will scale to rest of images ,
you can modify by adding other images
http://www.appcelerator.com | @appcelerator 61
62. Structuring your Titanium
application for cross-
platform
http://www.appcelerator.com | @appcelerator 62
63. Rich client applications (like
Ti Mobile apps) should strive
to be:
event-driven
and
component-oriented
http://www.appcelerator.com | @appcelerator 63
64. Interaction Events
• Interaction events you
know:
o click
o swipe
o change
o focus
o blur
http://www.appcelerator.com | @appcelerator 64
65. Custom Events
• Custom events you might not use (but should!)
• Custom events can be app wide
• Custom events can be specific to your app’s components
(business events)
http://www.appcelerator.com | @appcelerator 65
67. Component-Oriented
• Your application is composed of a library of application-
specific components you create
• The smaller the component, the easier it is to make each
components work across platforms
• Encourages the encapsulation and reuse of UI components
http://www.appcelerator.com | @appcelerator 67
68. Macro
• Ti for Titanium
• L for Titanium.Locale.getString
• alert for Titanium.UI.createAlertDialog
• And also remember about Code snippets
o For e.g. :- button then {ctrl + space} and see the magic..
72. Android Manifest
• Android Manifest can be overridden
• Add custom behavior or capabilities to you app
• Copy the one generated by Titanium
• Modify generated file and then put it in
The following folder
73. Tips & Tricks
• Android has a problem in GC so when closing a page it doesn’t
release it’s objects Ex. Used in changing languages.
if(require('src/Settings1').getLang() != lang)
{
if (win1.children)
{
for (var c = win1.children.length - 1; c >= 0; c--)
{
win1.remove(win1.children[c]);
win1.children[c] = null;
}
}
lang = require('src/Settings1').getLang();
Draw();
}
74. Tips & Tricks..
• There is only one map view can be added to view in app
• If a view has MapView and another one have map app will
crash immediately .
• When adding annotations remove previously added
annotation first and event listeners
mapview.removeAllAnnotations();
mapview.removeEventListener('click', annotationListener);
75. Packaging ..
• In order to build applications made for the Android Marketplace, you need
to create a distribution key on your local computer. This key is used to
digitally sign your app.
• Open the Terminal or Prompt type the following
o cd /<path to your android sdk>/tools
• we need to use the Java keytool located in this directory
$ keytool -genkey -v -keystore com.othaim.iktissab -alias Iktissab –keyalg RSA -validity 10000
• Press Enter and execute the command and you'll be asked a series of
questions. You need to provide a password for the keystore - it would be
wise to write it down as you will need it to package your app later.
• Now your key will be exported and saved to the directory you were
currently in.
• Now your key will be exported and saved to the directory you were
currently in. In our case, this is the tools directory under our Android SDK
folder
76. Packaging ..
• Open your project in Titanium Studio. Make sure your project
is selected in the Project explorer page, and then select the
Distribution button followed by the Distribute – Android
option, as seen in the following screenshot
77. Packaging ..
• You will need to enter in the distribution location (where you
want the packaged APK file saved to) and the location of the
keystore file you created in the previous recipe, along with the
password and alias you provided earlier. After you enter in
that information it should look something like the following
screenshot:
78. Pros
• One codebase for two platforms
o You’ll (theoretically) spend less time than writing two native apps
o Maintenance on one codebase should be easier in the long run
• Native interface controls
o Your apps can look just like native ones
• Might be able to reuse your JavaScript in other parts of your project
o eg., Web front-end, Node.js backend
• Platform is open-source
o https://github.com/appcelerator/titanium_mobile
• JavaScript is fun!
79. Cons
• Platform is young and still changing
• Need to learn a new platform / SDK / quirks
o Knowing the ins & outs of native iOS / Android will help
• You’ll still have lots of if(iOS){} and if(android){}
o LEGO Minifig Collector has 24 blocks of code that are Android or iOS specific
• Performance isn’t 100% of a native app
• SDK/API Documentation is weak (but getting better)
• Q&A support forum is a mess (use SO instead)
83. Credits
• Appcelerator Titanium by Nic Jansma @NicJ
• Extending Titanium Mobile through Native Modules by Olivier Morandi
• Native Android Applications with Titanium by Marshall
Culpepper (@marshall_law) and Kevin Whinnery (@kevinwhinnery)
• Getting started with Titanium by Next-Generation Mobile Platform
• Appcelerator Titanium Smartphone App Development Cookbook book