Cross-Platform Mobile Development with Titanium

Cross-Platform
Mobile
Development
with Titanium
DevTeach - June 1, 2011

Vance Lucas (@vlucas) http://brightb.it
Tuesday, May 31, 2011

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


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)



The Titanium Promise
Fulﬁlling 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



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



How Does it Work?
Pre-Compiler

Optimize, Analyze & Find Dependencies

Front End Compiler

Native code, project, other speciﬁc compile code,
copy in native modules, package JS interpreter

Platform Compiler

Compile with native tools (Xcode, Android SDK)



Titanium Environment



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



Native UI Controls
Controls and UI elements are native to the platform



Code Composition
View-based and event-driven

Fits Javascript perfectly

iOS-style layered view hierarchy

~60% UI Construction

~20% Event Handling

~20% Business Logic



Windows &
Application Flow
Navigating your App


Project Structure
Resources directory has
the “meat” of your project

app.js is the “bootstrap”
ﬁle - always the ﬁrst loaded

Do whatever you want after that!



Platform-Speciﬁcs
Special iphone and android folders will be used on
respective platforms & moved at compile time



Screen Densities
iOS / iPhone (3GS vs Retina)

Android (Cluster*@^#)



Windows
Base UI structure that other views and UI widgets
and components are placed on

Controlled programmatically with a single JS ﬁle

JS ﬁle then creates UI components and adds them to
itself in layers (button here, text here, etc.)



Code Execution Context



Includes
Includes are the primary way to use global variables
across different contexts and windows

Conﬁguration, database, JS framework, etc.



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)



Tabs Code Example



Sometimes
have to
account for
platform
differences

iOS has
title with
tabs,
Android
does not



Custom UI
Much more more difﬁcult, 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...



Tweetanium Mobile



Views
The DIVs of Native UIs


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 speciﬁed



Stacking Views



UI Controls &
Widgets
Buttons and Tables and Pickers, oh my!


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 ﬁelds, toolbars,
view, webviews, windows, and more...



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



JSS Example
Assign “id” to UI
component and
reference by id

Reference by type

Window-speciﬁc
rules override global
ones



Events
What to do & When to do it


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



Event Contexts



Handling Button Clicks



Ti.API
TI.API

log /info / debug / warn / error

addEventListener / removeEventListener

global context for custom events

ﬁreEvent - Trigger named event from anywhere



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



app.js - Deﬁned Event



domains/social.js
Event “st_social_fetchAll” ﬁres all fetch events...

...which then update individual counts via events



Many Levels Deep...



SEMTab SEO Pro



APIs
The Natives are Exposed


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



Ti.Accelerometer
Get x, y, z coordinates of the device

Listen to event with callback when ﬁred

Do something with new coordinates



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



Ti.Database Setup
Open named database

Create tables with standard queries



Iterate over Results
Create TableView and push data into rows.
TableView will take care of all display & formatting



Ti.Network
Talk to remote servers!

HTTPClient

Bonjour Service + Browser

TCP Sockets

You will most likely be using HTTPClient a lot...



Basic HTTPClient Use



Animations
Easier than you might think


3 Components
Transition

Transformation to apply

Duration

Milliseconds

Callback

What happens after animation is complete



3 Types of Animations
Basic

2D Matrix

3D Matrix



Basic Animation
Simple property changes over duration

Color, background, size, position, visibility, etc.



Basic Animation
Changes view background from red to black to
orange over 2 seconds



2D Matrix
Rotate, scale, skew, invert

Oh noes! Maths!



Proportional Rotation:

In radians



3D Matrix
Rotate, scale, skew, invert, ﬂip - in 3D space



3D Transformations
Combine matrices to achieve transformations

Scaling Distance

Rotation



2D Matrix
Luckily, Titanium has useful helpers...

scale, rotate, invert, multiply, translate

Automatic degree to radian conversion



3D Matrix
3D Matrices also have helpers...



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...



Modules
Native Add-Ons


Custom Modules
Create custom modules with native code that maps
to Javascript APIs in Titanium

Android - Java

iOS - Obj-C

BlackBerry - Java



Titanium+Plus Modules



Drawbacks
Watch that First Step...


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



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



Sources
Open and Available for Use


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



hello@brightb.it (405) 595-0101

http://brightb.it Oklahoma City


Cross-Platform Mobile Development with Titanium

More Related Content

Similar to Cross-Platform Mobile Development with Titanium

More from Vance Lucas

Recently uploaded

Cross-Platform Mobile Development with Titanium