Cross Platform Mobile Application Development

with Titanium

Dane BaldwinNathan Brown

David Riggleman

Titanium Titanium is a cross platform mobile

development tool Allows the java script to be compiled into

native mobile code It now powers over 1,000 native apps per

month Gives easy access to over 300 API’s and

location information

Titanium Comparison The top 5

◦ RhoMobile◦ Appcelerator (Titanium)◦ MoSync◦ PhoneGap◦ WidgetPad

Titanium Comparison Titanium

◦ Programming Language JavaScript

◦ Debugger support Yes (just this year)

◦ Emulator 3rd party emulators

◦ IDE Internal SDK

◦ Cross platform iOS, Black Berry, and android

Titanium Comparison RhoMobile

◦ Programming Language Ruby and HTML

◦ Debugger support Yes

◦ Emulator Run in win32 runner

◦ IDE xCode or Eclipse

◦ Cross platform iOS, Mobile Windows, Black Berry, Symbian and

android

Titanium Comparison◦ MoSync◦ Programming Language

C, C++, Lua, HTML , CSS, JavaScript(experimental) ◦ Debugger support

Yes◦ Emulator

Yes◦ IDE

Eclipse, Visual Studio, MoBuild with text editors◦ Cross platform

Java ME, Mobin, Smartphone 2003, iOS, Mobile Windows, Black Berry, Symbian and android

Titanium Comparison◦ PhoneGap◦ Programming Language

HTML, CSS, Java◦ Debugger support

Yes◦ Emulator

None included (can use 3rd party)◦ IDE

None included◦ Cross platform

iOS, Palm, Black Berry, Symbian and android

Titanium Comparison◦ WidgetPad◦ Programming Language

CSS, HTML and JavaScript◦ Debugger support

Yes◦ Emulator

Could not find a good answer on this◦ IDE

Yes, its own web based IDE◦ Cross platform

 iOS, Android and WebOS

Titanium Titanium Studio new features April 4th(free in

June): ◦ iOS and Android debugging◦ Code completion for Titanium Mobile SDK methods◦ Run, Deploy and Package Titanium Mobile and

Titanium Desktop Applications◦ Full-featured HTML, JS, CSS, Ruby, PHP, and Python

editing support◦ FTP/SFTP/FTPS/Capistrano deployment options◦ Integrated Git Support◦ Integrated Terminal◦ Fully scriptable and customizable

Titanium The Titanium website states “While

Titanium applications are written using HTML, CSS and JavaScript – they are compiled into native applications (dependent on the mobile device) and run on the device as standalone applications. These applications have a very powerful API for accessing mobile features such as GPS and Camera, on-device Databases and other awesome features.”

Titanium Titanium workings

◦ Pre-compiler◦ Front-end compiler◦ Platform compiler and packager

Pre-compiler◦ Optimize/format◦ Creates a hierarchy for all of the APIs

Titanium Front-end Compiler

◦ Generate platform specific native code◦ Create native projects (if it needs to)◦ Builds any specific code that is necessary to

compile

Platform Compiler and Packager◦ Uses the each native platform tool to compile◦ Packages the app for running

Titanium Bad things

◦ Moving too quickly◦ Support ◦ Debugger glitches◦ After compile glitches

Titanium Good things

◦ Compiles to native code◦ Progressive◦ Many Users◦ Documentation◦ Developer Blog

http://developer.appcelerator.com/blog/

Titanium Where is Titanium headed

◦ Pressing forward at a fast rate◦ Android faster◦ Improvements to everything◦ Introducing Appcelerator’s Open Mobile

Marketplace (September 19)

Installing TitaniumGet out your wrench…

Dependencies Python

Git

SCons

Java JDK

Android SDK Tools

Python Overview

◦ Programming language

Requirements◦ Version: 2.6 or greater (Java JDK 6)◦ Type: 32-bit (sCons)

Recommended path: C:\Program Files\Python[nn : version]

Git Overview

◦ Version control software native to Titanium◦ Efficient◦ Linux-based

Requirements◦ Useful for repository access◦ Optional if you download manually

◦ Run from Command Prompt◦ No line-ending conversion

Recommended path: C:\Program Files\Git\bin

SCons Overview

◦ Software construction tool – Python script◦ Similar to make

Requirements◦ Must have Python installed first

Recommended path: %Python%\Scripts

Java JDK Overview

◦ Programming language

Requirements◦ Type: 32-bit (Android SDK)◦ Version: 1.6.0_xx◦ JAVA_HOME = C:\Program Files\Java\jdk[n.n.n_xx :

version]◦ Both JDK and JRE

Recommended path: %JAVA_HOME%\bin

Android SDK Overview

◦ Required for Android emulation

Requirements◦ Match Titanium SDK (see compatibility matrix)◦ No spaces in path (use C:\Program_Files)◦ ANDROID_SDK = C:\Program_Files\android-sdk-

windows◦ Delete virtual devices after each update

Recommended path: %Android_SDK%\platform-tools

Titanium Studio Install

Log in with username and password

Configure Android SDK settings

Debugging With Titanium

As intuitive as a flyswatter…

Features Breakpoints

Dynamic Variable Editing

Dynamic Variable Views

Dynamic Call Stack Views

Stepping

Project BreakdownThe deep, dark insides of Titanium (feat. David Riggleman)

tiapp.xml◦ Main application descriptor file◦ Contains information used by packager and

runtime README

◦ Describes project◦ Not included in final application

LICENSE.txt◦ Contains End User License Agreement (EULA)◦ Currently not used in mobile projects

Application Layout

LICENSE◦ Describes Appcelerator License for reference◦ Apache License Version 2

build (Folder)◦ Contains phone specific project files and

resources◦ Used for compiling, building, and packaging

native distributions of the application◦ Use caution in editing files in this folder

May render application unusable

Application Layout

I18n (Folder)◦ Optional◦ Contains location resources for supporting

multiple languages Resources (Folder)

◦ Contains all project resources (HTML, JavaScript, images, etc.)

◦ All items in folder are packaged and can be used in the application

◦ If working with subversion, must currently edit the builder.py script to specify ignored files and folders

Application Layout

app.js◦ Most important file◦ Entry point into application (“bootstrap file”)◦ All coding of any mobile application starts here

Application Layout

Allows for customization of resources for each platform

Files placed in Resources/PLATFORM/ ◦ Resources/android◦ Resources/iphone

Platform Specific Resources

Example◦ The file Resources/android/foo.png will override

Resources/foo.png◦ When Titanium compiles a project, only one

foo.png file will be included Directory structure preserved

◦ File should be referenced in application as foo.png Platform is not specified in reference

Platform Specific Resources

Allows for different resolution of pictures depending on capability of device◦ iPhone

Low-res version: myButton.png High-res version: myButton@2x.png In code, both referenced as myButton.png

◦ Android (long and notlong refer to aspect ratio) res-long-land-hdpi/myButton.png res-long-port-mdpi/myButton.png res-notlong-port-ldpi/myButton.png

Density Specific Resources

Splash Screen◦ Specified by Default.png

Application Icon◦ Controlled by <icon> entry in tiapp.xml

Special Resources

var win = Titanium.UI.createWindow({   title:'My Window',   backgroundColor:'#cccccc'

}); win.open();  // open window

Creating a Window

var label = Titanium.UI.createLabel({   color:'#999',   text:'Hello World',   font:{fontSize:20},   textAlign:'center'

}); win.add(label); // add label to window win.open();     // open window

Creating a Label

References Titanium Comparison/Background

◦ http://en.wikipedia.org/wiki/Mobile_application_development

◦ http://mashable.com/2010/08/11/cross-platform-mobile-development-tools/

◦ http://devlup.com/mobile/cross-platform-mobile-development-tools/2416/

◦ http://mobiledevices.about.com/od/mobileappbasics/tp/Top-5-Tools-Multi-Platform-Mobile-App-Development.htm

◦ http://en.wikipedia.org/wiki/Appcelerator_Titanium

◦ http://surgeworks.com/blog/lab-mobile/iphone/mobile-apps-cross-platform-development-challenge-phonegap-vs-titanium-vs-rhodes

◦ http://wiki.appcelerator.org/display/guides/The+Titanium+Architecture

◦ http://developer.appcelerator.com/blog/2011◦ http://www.toolsjournal.com/tools-world/item/157

-10-of-best-cross-platform-mobile-development-tools

Tool Websites http://www.python.org/download/

http://git-scm.com/download

http://www.scons.org/download.php

http://www.oracle.com/technetwork/java/javase/downloads/index.html

http://developer.android.com/sdk/index.html

Installation Resources http://wiki.appcelerator.org/display/guides/Instal

ling+on+Windows+7

http://wiki.appcelerator.org/display/guides/Titanium+Compatibility+Matrix

http://wiki.appcelerator.org/display/guides/Installing+on+Windows+7+-+Install+Diagnostics+Output

http://developer.appcelerator.com/blog/2011/07/page/2#debugging

Application Project Structure◦ http://wiki.appcelerator.org/display/guides/The+Application+Project+Structure

Hello World Example◦ http://www.sparklepod.com/myblog/appcelerator-titanium-hello-world/

Ignoring Subversion Files◦ http://developer.appcelerator.com/question/114541/excluding-svn-files

Application Resources