Mobile App Development on Multiple
Platforms Using Titanium
Campus Compass Team Student Led Seminar
Adam Plisch, Brian Russell, Jonathan LeFeber
Team/Project Introduction
 Project: Campus Compass Mobile App
 Android and iOS app for Cedarville Admissions Department
 Designed to provide information about Cedarville as well as
directions
 Team and Roles:
 Adam Plisch:
 GUI guru, on-campus connections and testing
 Brian Russell:
 Data master, in-depth code analysis and development
environment
 Jonathan LeFeber:
 Team leader and head of organization/communication
Seminar Introduction
Titanium, Difficulties with Cross-Platform Development,
Handling These Difficulties
Titanium Development Environment
 Free-to-use multi-platform development environment
 Handles multiple target OSs with (mainly) one set of code
 Write your App in Javascript
 Ports out to iOS, Android, Blackberry and HTML5 versions
 Can be run on Mac or PC
Difficulties With Cross-Platform
Development
 Code is being ported from Javascript to several
different languages
 Restricts what can be done
 Functionality added with environment-specific APIs
 Designing for a large variety of device configurations
 Different hardware specifications and software options
available depending on device
 Special ways of handling platform-specific code within
the development environment
Handling These Difficulties
 Built in functions/APIs in the development environment
 Using special cases to determine available
features/settings
 Simplifying everything as much as possible
 Can result in convoluted code
Cross-Platform
Development
The Development Environment
Requirements
 iOS and Android have specific development paths and
environments
 Titanium works within these processes
iOS
 Applications built with Xcode using Objective-C
 iOS SDK
 iOS Simulator
 Xcode obtained via Apple App Store, others obtained
via Xcode
 Requires OSX
Android
 C allowed, but limits targets
 Java preferred, requires JDK
 Android SDK
 Android Emulator
 Eclipse is endorsed Java IDE, but not necessary
Titanium
 Titanium uses Javascript and provides libraries with
access to platform functionality
 IDE with debugging capabilities on both real and virtual
devices
Cross-Platform
Development
Handling Cross-Platform Issues
Differences between Android
and iOS
 Titanium handles most differences between iOS and
Android behind the scenes, but not all of them
 Titanium.Platform.name can be used in an if-statement
to make platform specific decisions
API Examples
 Example 1:
Titanium.Platform.openURL(‘tel:’+phoneNum);
 Example 2: var email =
Titanium.UI.createEmailDialog();
 email.open()
 Example 3: var button = Titanium.UI.createButton();
 Example 4: var view = Titanium.UI.createView();
Some Differences not handled
by Titanium
 Back button
 Android’s has a back button implemented in hardware and
needs no added code
 iPhone requires the addition of a navigation bar at the top of
your app which can include a simple back button
 Gradient colors
 Only supported by iOS
 Set a gradient image as the background
 You can review the whole API at:
 http://docs.appcelerator.com/titanium/latest/#!/api/Titanium
GUI
 While Titanium.Platform.name allows you to separate
functionality by platform, only careful planning can make a
robust GUI that works on all devices
 There are many different types and sizes of devices for both
Android and iOS
 Screen resolution and orientation provide added challenge
 There are 2 different screen sizes and 3 different resolutions
for iPhone, and a really wide variety for Android
 Not even counting tablets!
GUI – Dynamic Sizing
 Titanium provides a call to get the height and width of the current
platform
 Titanium.Platform.displayCaps.platformWidth
 Titanium.Platform.displayCaps.platformHeight
 Start by dividing these values into separate views
 Titanium.UI.SIZE
 Titanium.UI.FILL
 Each view has its own height and width and an array of children
 Each child is confined to a maximum height and width of the
parent view
 Can contain text, images, or buttons
GUI – Portrait-mode only
 If your app does not support Landscape mode, you
must account for what happens when your app
launches from a device held in landscape mode
 Your platform height and width values will be reversed
 The API does not support a call to determine orientation
 If height > width, portrait mode
 Else, landscape mode
GUI – Splash Screen
 Required for all apps in iOS
 Displays an image while the rest of the application
loads in the background
 If your portrait-mode only app is launched from a
device in landscape mode, your splash screen will
rotate
 There is no good solution to this in Titanium
 You could use a black splash screen to get around this
problem
GUI – Font Size
 Every other aspect of a GUI is a percentage of its
parent. What about font size?
 A font size of 18 will use the same number of pixels on
any device
 Density Pixels
 1 dp should look the same relative to the rest of the GUI on
any device
 Javascript is not a strongly-typed language
 fontsize = 18 + “dp”;
Cross-Platform
Deployment
Getting your iOS and Android Apps compiled and out there
Overall Compilation Process
 Platform project is created
 Javascript code is optimized
 Code is either compiled or stored to be interpreted
 Result is packaged and signed
iOS Compilation
 Javascript code compressed and included as a string in
a C file
 Interpreted at runtime through interpreter provided by
Titanium
Android Compilation
 Javascript compiled to Java bytecode with Rhino
 Runs directly on Android’s Dalvik VM
Deployment
 iOS requires distribution through App Store
 Android has official Play Store, but can download apps
from anywhere
 Both require certified accounts
 App Store has a manual review process
 Play Store has automated dynamic analysis
In Closing…
Summary of experience, what you’ll need, where to get
started
Summary of Experience
What You’ll Need
 PC
 Mac if developing for iOS
 Apple Developer Account to test on iOS
 Apple Developer License to deploy to App Store
 Google Development License to deploy to Play Store
 Testing devices
 Best to have one of every type of device you plan on
deploying to
 iPhone, iPad, Android phone, Android tablet
Where to get started
 Example program
 Titanium’s ‘kitchen sink’ app
 Great resources to help you get started






http://docs.appcelerator.com
https://wiki.appcelerator.org
http://developer.appcelerator.com
https://developers.google.com
http://developer.android.com
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium
Any questions?