This document provides a summary of a presentation about cross-platform mobile development with Titanium. Titanium allows developing native mobile apps using web technologies like HTML, CSS, and JavaScript. It supports desktop and mobile platforms. The presentation discusses Titanium's development environment, using JavaScript APIs to access native device capabilities, handling events, and creating custom modules with native code.
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Cross-Platform Mobile Development with Titanium
1. Cross-Platform
Mobile
Development
with Titanium
DevTeach - June 1, 2011
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
2. Who Am I?
Vance Lucas
http://vancelucas.com
@vlucas
Brightbit
http://brightb.it
Mobile apps, PHP, Javascript/jQuery, Rails,
Training, Consulting
Vance Lucas (@vlucas) http://brightb.it 2
Tuesday, May 31, 2011
3. Titanium?
Open-Source native application development toolkit
created by Appcelerator.
Goal: Web Technologies for Native Apps
Desktop (OSX / Windows / Linux)
HTML / CSS / JS - Webkit
Mobile (iOS / Android / Blackberry (beta))
Pure Javascript translated to native code (kinda)
Vance Lucas (@vlucas) http://brightb.it 3
Tuesday, May 31, 2011
4. The Titanium Promise
Fulfilling the original promise of Java
“Write once, run anywhere”
... not “write once, suck everywhere”
Single codebase => multiple platforms
Apps must look and feel like they belong on the
platform and be consistent with user expectations
Apps need to perform like native apps
Vance Lucas (@vlucas) http://brightb.it 4
Tuesday, May 31, 2011
5. What Does It Cost?
NOTHING! The whole Titanium platform itself and
all the tools required to build an app are free and
open source: https://github.com/appcelerator
What’s the Catch?
Appcelerator sells support and premium modules
to use in your app
They also do custom development on their own
platform
Vance Lucas (@vlucas) http://brightb.it 5
Tuesday, May 31, 2011
6. How Does it Work?
Pre-Compiler
Optimize, Analyze & Find Dependencies
Front End Compiler
Native code, project, other specific compile code,
copy in native modules, package JS interpreter
Platform Compiler
Compile with native tools (Xcode, Android SDK)
Vance Lucas (@vlucas) http://brightb.it 6
Tuesday, May 31, 2011
7. Titanium Environment
Vance Lucas (@vlucas) http://brightb.it 7
Tuesday, May 31, 2011
8. Mobile Development
Pure Javascript with custom APIs
UI, Network, Map, Geo-location, Gestures,
Accelerometer, Database, Filesystem, Media, etc.
Javascript API calls mapped to native APIs
JSON-like property description
Vance Lucas (@vlucas) http://brightb.it 8
Tuesday, May 31, 2011
9. Native UI Controls
Controls and UI elements are native to the platform
Vance Lucas (@vlucas) http://brightb.it 9
Tuesday, May 31, 2011
10. Code Composition
View-based and event-driven
Fits Javascript perfectly
iOS-style layered view hierarchy
~60% UI Construction
~20% Event Handling
~20% Business Logic
Vance Lucas (@vlucas) http://brightb.it 10
Tuesday, May 31, 2011
11. Windows &
Application Flow
Navigating your App
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
12. Project Structure
Resources directory has
the “meat” of your project
app.js is the “bootstrap”
file - always the first loaded
Do whatever you want after that!
Vance Lucas (@vlucas) http://brightb.it 12
Tuesday, May 31, 2011
13. Platform-Specifics
Special iphone and android folders will be used on
respective platforms & moved at compile time
Vance Lucas (@vlucas) http://brightb.it 13
Tuesday, May 31, 2011
14. Screen Densities
iOS / iPhone (3GS vs Retina)
Android (Cluster*@^#)
Vance Lucas (@vlucas) http://brightb.it 14
Tuesday, May 31, 2011
15. Windows
Base UI structure that other views and UI widgets
and components are placed on
Controlled programmatically with a single JS file
JS file then creates UI components and adds them to
itself in layers (button here, text here, etc.)
Vance Lucas (@vlucas) http://brightb.it 15
Tuesday, May 31, 2011
17. Includes
Includes are the primary way to use global variables
across different contexts and windows
Configuration, database, JS framework, etc.
Vance Lucas (@vlucas) http://brightb.it 17
Tuesday, May 31, 2011
18. Tabs
Tab-based apps are most
common and the easiest to make
Window transitions/navigation
are built-in and automatic
One window per tab
Can open window within tab
(shows “Back” button in iOS)
Vance Lucas (@vlucas) http://brightb.it 18
Tuesday, May 31, 2011
19. Tabs Code Example
Vance Lucas (@vlucas) http://brightb.it 19
Tuesday, May 31, 2011
21. Sometimes
have to
account for
platform
differences
iOS has
title with
tabs,
Android
does not
Vance Lucas (@vlucas) http://brightb.it 21
Tuesday, May 31, 2011
22. Custom UI
Much more more difficult, but very possible
Have to create a stack of views and keep track of
position (esp. previous for “back” button)
Have to do everything by hand
Listen for “back” button (Android)
Transition animations
etc...
Vance Lucas (@vlucas) http://brightb.it 22
Tuesday, May 31, 2011
23. Tweetanium Mobile
Vance Lucas (@vlucas) http://brightb.it 23
Tuesday, May 31, 2011
24. Views
The DIVs of Native UIs
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
25. View & UI Positioning
Views are Stackable & Nestable
Similar to absolute-positioned HTML/CSS elements
Left, top coordinate system (0,0 = top left)
Smart defaults:
Center position, 100% of parent size
Transparent until BG color or image specified
Vance Lucas (@vlucas) http://brightb.it 25
Tuesday, May 31, 2011
27. Stacking Views
Vance Lucas (@vlucas) http://brightb.it 27
Tuesday, May 31, 2011
28. UI Controls &
Widgets
Buttons and Tables and Pickers, oh my!
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
29. Titanium.UI Module
Bridge to native UI components
Everything you SEE in an app
Animations, dialogs, buttons, images, labels, date/
time pickers, scroll views, search bars, sliders,
switches, tabs, tables, text & input fields, toolbars,
view, webviews, windows, and more...
Vance Lucas (@vlucas) http://brightb.it 29
Tuesday, May 31, 2011
31. JSS - JS Style Sheets
JSON-style properties for object creation are nice, but
can be repetitive when used across an entire app UI
Separate styles from UI component code with JSS
Two ways to use:
global.jss - Applied to ALL UI components
<window>.jss - Overrides for <window>.js only
Vance Lucas (@vlucas) http://brightb.it 31
Tuesday, May 31, 2011
32. JSS Example
Assign “id” to UI
component and
reference by id
Reference by type
Window-specific
rules override global
ones
Vance Lucas (@vlucas) http://brightb.it 32
Tuesday, May 31, 2011
33. Events
What to do & When to do it
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
34. Events and Callbacks
“Do X when Y happens”
Syntax is just like native Javascript
UI controls have their own events you can listen to
click, blur, focus, change, scroll, etc.
Custom events supported - “app_customevent”
Extremely useful for triggering activity in other
parts of your app from anywhere else in the app
Vance Lucas (@vlucas) http://brightb.it 34
Tuesday, May 31, 2011
35. Event Contexts
Vance Lucas (@vlucas) http://brightb.it 35
Tuesday, May 31, 2011
37. Ti.API
TI.API
log /info / debug / warn / error
addEventListener / removeEventListener
global context for custom events
fireEvent - Trigger named event from anywhere
Vance Lucas (@vlucas) http://brightb.it 37
Tuesday, May 31, 2011
38. domains/list.js
Table view lists domains in local database
Event updates active domain on table row click
Passes row title (domain) with e.rowData.title
Vance Lucas (@vlucas) http://brightb.it 38
Tuesday, May 31, 2011
39. app.js - Defined Event
Vance Lucas (@vlucas) http://brightb.it 39
Tuesday, May 31, 2011
40. domains/social.js
Event “st_social_fetchAll” fires all fetch events...
...which then update individual counts via events
Vance Lucas (@vlucas) http://brightb.it 40
Tuesday, May 31, 2011
41. Many Levels Deep...
Vance Lucas (@vlucas) http://brightb.it 41
Tuesday, May 31, 2011
42. SEMTab SEO Pro
Vance Lucas (@vlucas) http://brightb.it 42
Tuesday, May 31, 2011
43. APIs
The Natives are Exposed
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
44. Hardware & Extras
Accelerometer, Geo-location, Locale, Gestures,
Filesystem, Device Orientation, Databases, Contacts,
Mapping, Camera & Video, Clipboard, and more...
Two main ways to interact:
Direct APIs with methods
Events with callbacks
Vance Lucas (@vlucas) http://brightb.it 44
Tuesday, May 31, 2011
45. Ti.Accelerometer
Get x, y, z coordinates of the device
Listen to event with callback when fired
Do something with new coordinates
Vance Lucas (@vlucas) http://brightb.it 45
Tuesday, May 31, 2011
46. Ti.Database
Direct API interface to SQLite database
Pre-installed on iOS & Android devices
Create and delete databases
Allows for simple query execution and resultSet
traversing
Any query or syntax supported by SQLite
Vance Lucas (@vlucas) http://brightb.it 46
Tuesday, May 31, 2011
47. Ti.Database Setup
Open named database
Create tables with standard queries
Vance Lucas (@vlucas) http://brightb.it 47
Tuesday, May 31, 2011
48. Iterate over Results
Create TableView and push data into rows.
TableView will take care of all display & formatting
Vance Lucas (@vlucas) http://brightb.it 48
Tuesday, May 31, 2011
49. Ti.Network
Talk to remote servers!
HTTPClient
Bonjour Service + Browser
TCP Sockets
You will most likely be using HTTPClient a lot...
Vance Lucas (@vlucas) http://brightb.it 49
Tuesday, May 31, 2011
50. Basic HTTPClient Use
Vance Lucas (@vlucas) http://brightb.it 50
Tuesday, May 31, 2011
51. Animations
Easier than you might think
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
52. 3 Components
Transition
Transformation to apply
Duration
Milliseconds
Callback
What happens after animation is complete
Vance Lucas (@vlucas) http://brightb.it 52
Tuesday, May 31, 2011
53. 3 Types of Animations
Basic
2D Matrix
3D Matrix
Vance Lucas (@vlucas) http://brightb.it 53
Tuesday, May 31, 2011
54. Basic Animation
Simple property changes over duration
Color, background, size, position, visibility, etc.
Vance Lucas (@vlucas) http://brightb.it 54
Tuesday, May 31, 2011
55. Basic Animation
Changes view background from red to black to
orange over 2 seconds
Vance Lucas (@vlucas) http://brightb.it 55
Tuesday, May 31, 2011
56. 2D Matrix
Rotate, scale, skew, invert
Oh noes! Maths!
Vance Lucas (@vlucas) http://brightb.it 56
Tuesday, May 31, 2011
57. Proportional Rotation:
In radians
Vance Lucas (@vlucas) http://brightb.it 57
Tuesday, May 31, 2011
58. 3D Matrix
Rotate, scale, skew, invert, flip - in 3D space
Vance Lucas (@vlucas) http://brightb.it 58
Tuesday, May 31, 2011
59. 3D Transformations
Combine matrices to achieve transformations
Scaling Distance
Rotation
Vance Lucas (@vlucas) http://brightb.it 59
Tuesday, May 31, 2011
61. 2D Matrix
Luckily, Titanium has useful helpers...
scale, rotate, invert, multiply, translate
Automatic degree to radian conversion
Vance Lucas (@vlucas) http://brightb.it 61
Tuesday, May 31, 2011
62. 3D Matrix
3D Matrices also have helpers...
Vance Lucas (@vlucas) http://brightb.it 62
Tuesday, May 31, 2011
63. No Math Required!
Still should read up on Matrices and how they apply
to 3D transformations and game design
Will pay dividends in understanding how matrix
transformations work and why
Helps to know what operation to perform to get
the desired result
What will inverting do? multiplying?
There is always the “trial & error” method too...
Vance Lucas (@vlucas) http://brightb.it 63
Tuesday, May 31, 2011
64. Modules
Native Add-Ons
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
65. Custom Modules
Create custom modules with native code that maps
to Javascript APIs in Titanium
Android - Java
iOS - Obj-C
BlackBerry - Java
Vance Lucas (@vlucas) http://brightb.it 65
Tuesday, May 31, 2011
66. Titanium+Plus Modules
Vance Lucas (@vlucas) http://brightb.it 66
Tuesday, May 31, 2011
67. Drawbacks
Watch that First Step...
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
68. Testing
A lot of testing is “trial and error” style
Some UI components and options are iOS-only, and
cause crashes in Android
No warning during compile cycle for using
incompatible components
Appcelerator has said improvements are coming
Vance Lucas (@vlucas) http://brightb.it 68
Tuesday, May 31, 2011
69. Debugging
Debug stack traces from published app crashes are
USELESS, because you didn’t write the code
The most you can do is get support from
Appcelerator by sending in or posting your stack
traces
Vance Lucas (@vlucas) http://brightb.it 69
Tuesday, May 31, 2011
70. Sources
Open and Available for Use
Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011
71. Sources
Platform: http://appcelerator.com
Animation Guide: http://wiki.appcelerator.org/display/guides/Animations+in+Action
API Docs: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.3DMatrix-object
Animation Images: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/
Matrix Images: http://en.wikipedia.org/wiki/Matrix_(mathematics)
Matrix Math: http://gpwiki.org/index.php/Matrix_math
Vance Lucas (@vlucas) http://brightb.it 71
Tuesday, May 31, 2011
72. hello@brightb.it (405) 595-0101
http://brightb.it Oklahoma City
Tuesday, May 31, 2011