Download Cross Platform Mobile Application Development with Titanium

Dane Baldwin
Nathan Brown
David Riggleman




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

The top 5
◦
◦
◦
◦
◦
RhoMobile
Appcelerator (Titanium)
MoSync
PhoneGap
WidgetPad

Titanium
◦ Programming Language
 JavaScript
◦ Debugger support
 Yes (just this year)
◦ Emulator
 3rd party emulators
◦ IDE
 Internal SDK
◦ Cross platform
 iOS, Black Berry, and android

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
◦ 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
◦ 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
◦ 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 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

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 workings
◦ Pre-compiler
◦ Front-end compiler
◦ Platform compiler and packager

Pre-compiler
◦ Optimize/format
◦ Creates a hierarchy for all of the APIs

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

Bad things
◦
◦
◦
◦
Moving too quickly
Support
Debugger glitches
After compile glitches

Good things
◦
◦
◦
◦
◦
Compiles to native code
Progressive
Many Users
Documentation
Developer Blog
 http://developer.appcelerator.com/blog/

Where is Titanium headed
◦
◦
◦
◦
Pressing forward at a fast rate
Android faster
Improvements to everything
Introducing Appcelerator’s Open Mobile
Marketplace (September 19)
Get out your wrench…

Python

Git

SCons

Java JDK

Android SDK Tools

Overview
◦ Programming language

Requirements
◦ Version: 2.6 or greater (Java JDK 6)
◦ Type: 32-bit (sCons)

Recommended path: C:\Program Files\Python[nn
: version]

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

Overview
◦ Software construction tool – Python script
◦ Similar to make

Requirements
◦ Must have Python installed first

Recommended path: %Python%\Scripts

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



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-sdkwindows
◦ Delete virtual devices after each update
Recommended path: %Android_SDK%\platformtools

Install

Log in with username and password

Configure Android SDK settings
As intuitive as a flyswatter…

Breakpoints

Dynamic Variable Editing

Dynamic Variable Views

Dynamic Call Stack Views

Stepping
The 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

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

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

app.js
◦ Most important file
◦ Entry point into application (“bootstrap file”)
◦ All coding of any mobile application starts here


Allows for customization of resources for
each platform
Files placed in Resources/PLATFORM/
◦ Resources/android
◦ Resources/iphone

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

Allows for different resolution of pictures
depending on capability of device
◦ iPhone
 Low-res version: myButton.png
 High-res version: [email protected]
 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

Splash Screen
◦ Specified by Default.png

Application Icon
◦ Controlled by <icon> entry in tiapp.xml

var win = Titanium.UI.createWindow({
title:'My Window',
backgroundColor:'#cccccc'
});
win.open(); // open 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

Titanium Comparison/Background
◦ http://en.wikipedia.org/wiki/Mobile_application_development
◦ http://mashable.com/2010/08/11/cross-platform-mobiledevelopment-tools/
◦ http://devlup.com/mobile/cross-platform-mobile-developmenttools/2416/
◦ http://mobiledevices.about.com/od/mobileappbasics/tp/Top-5Tools-Multi-Platform-Mobile-App-Development.htm
◦ http://en.wikipedia.org/wiki/Appcelerator_Titanium
◦ http://surgeworks.com/blog/lab-mobile/iphone/mobile-appscross-platform-development-challenge-phonegap-vs-titaniumvs-rhodes
◦ http://wiki.appcelerator.org/display/guides/The+Titanium+Archi
tecture
◦ http://developer.appcelerator.com/blog/2011
◦ http://www.toolsjournal.com/tools-world/item/157-10-of-bestcross-platform-mobile-development-tools

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




http://wiki.appcelerator.org/display/guides/Inst
alling+on+Windows+7
http://wiki.appcelerator.org/display/guides/Tita
nium+Compatibility+Matrix
http://wiki.appcelerator.org/display/guides/Inst
alling+on+Windows+7++Install+Diagnostics+Output
http://developer.appcelerator.com/blog/2011/0
7/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