Building Native Cross Platform Mobile Applications

Building Native Cross-Platform
Mobile Applications
Rob Rusher
Twitter: @robrusher | http://robrusher.com

More Information:
Twitter: @appcelerator | http://appcelerator.com

http://www.on3solutions.com | Yeah, I built an app for that! 1

Why listen to me
Rob Rusher
Principal Consultant

•Rich Client Application Team Mentor
•Mobile Application Architect
•Adobe Technologies Expert

http://www.on3solutions.com | Elements to grow from within 2

About this Session


About this Session
• The Good, the Bad and the Ugly


About this Session
• An alternative
•Titanium Mobile
•API Overview


About this Session
• An alternative
•Titanium Mobile
•API Overview
• Example App


The Good
• The Apps!


The Bad
• Xcode and Interface Builder


And the ugly
• The worst thing about iPhone development
• Objective-C
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath
*)indexPath
{
UITableViewCell *cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:nil]
autorelease];

cell.text = [photoNames objectAtIndex:indexPath.row];

NSData *imageData = [NSData dataWithContentsOfURL:[photoURLs objectAtIndex:indexPath.row]];
cell.image = [UIImage imageWithData:imageData];

return cell;
}

• Seriously?!


Reality sets in...
How do you target all these
platforms


Reality sets in...
platforms
Build them all separately


Reality sets in...
platforms
Web Browser version


Reality sets in...
platforms
Web Browser version
Write once, suck everywhere


Our Requirements


Our Requirements
• Target multiple platforms from a single codebase


Our Requirements
• Apps must feel like they belong on the platform


Our Requirements
• Apps need to perform like native


Our Requirements
• Bonus: Open source and extensible


Our Requirements
• Bonus: Open source and extensible
• Bonus: Use skills we already have


A Solution
• Titanium Mobile
• JavaScript library for building native applications
• Open Source (Apache 2.0 License)
• Mobile Platforms
• iPhone, Android, Blackberry, webOS (soon)
• Desktop Platforms
• Win32, Mac, Linux
• Website: http://appcelerator.com


Why Titanium Mobile?
• Build Native Apps (not WebKit apps)
• Responsive
• Leverage Device Capabilities
• Use Web Technologies
• Common Skill Set
• Very Fast Development
• No Objective-C
• Best of both worlds
• One set of technologies, many platforms

Titanium Mobile – Architecture

UI API contains mappings to native
UI components Application Source Files
• Navbar, Tabbar, Toolbar, Menus (HTML, CSS, and JavaScript)
• Dialogs, Alerts, Buttons

Phone API contains mappings to native
phone capabilities
• Geo, Accelerometer, Maps, Sound
• Database, File System, Network

Your Application Your Application

UI API Phone API UI API Phone API

JavaScript - Objective-C Bridge JavaScript - Java Bridge

iPhone Objective-C API Android Java API

Native iPhone App Native Android App
http://www.on3solutions.com | Elements to grow from within

Titanium Features
Native UI Rich Media APIs
Real native tables, tabs, sliders, Local and streaming audio and
and views video, media recording

Location APIs Open Source and Extensible
Native Maps, Compass, and Extend Titanium with custom
Geolocation modules in native code

Local and Remote Data Integrated Analytics
Local SQL Database, Lightweight Baked-in analytics APIs to measure
Key/Value Store, XHR results and behavior

Social APIs Development Tools
Integrated Facebook Connect Develop and distribute your app for
and YQL multiple platforms from a single tool


What its not
• Not a native wrapper around a web view
(PhoneGap being an example of this approach)
• However, you do have a web view component for
HTML/CSS UI if that is your preference
• Your JavaScript code is invoking native APIs for
UI and other native functions
• Think MacRuby/Hot Cocoa on the desktop or
some AAA mobile games which ship with a Lua
interpreter


Example


Titanium Developer
• Manage and run Titanium
applications
• Package applications for
distribution
• Run on a device for
testing
• Manage Appcelerator
account


Getting started
• Project created/managed via Titanium
Developer
• Titanium Developer
• deploys code to simulators
• helps with testing and packaging for devices
• Requires sign-up for Appcelerator Network
(support, e-mail list, other services)


Getting started
• Project created/managed via Titanium
Developer
• deploys code to simulators
• helps with testing and packaging for devices
• Requires sign-up for Appcelerator Network
(support, e-mail list, other services)
Its FREE (as in beer!)


Hello World
• Prerequisites
• iPhone and/or Android SDK
• Your First Project
•Creating a mobile project
•Mobile project structure
•Editing code, adding UI widgets to the app
•Deploy to simulator


KitchenSink
• Example Code
• Living Reference Document
• Demonstrates API coverage


Titanium Fundamentals
• Titanium application is a
JavaScript program that is
interpreted at runtime on the
device
• app.js defines the root
execution context of the app
• Note: not running in a browser
• It uses the WebKit KJS
JavaScript engine (iOS) or
Rhino (Android/BB)

How it works
• Titanium takes the Javascript code
•Analyzes and preprocesses it
•Pre-compiles it into a set of symbols
•Symbols are resolved based on your applications uses
of the Titanium APIs
• From this symbol hierarchy
•Build a symbol dependency matrix that maps to the
underlying Titanium library symbols
•Understand which APIs specifically your app needs
• Compiled almost one to one into the representative
symbols in native-land


Scripts and Stylesheets
• Organized into logical namespaces
• “Titanium” (or just “Ti” for short) is the root
namespace for all Titanium functionality
• A few other odds and ends in the global space
– setTimeout/setInterval
– alert
– JSON


Design the UI
• A single window
or stack of
windows
• Tab Group
containing many
windows
• Windows contain
views


Windows and Context
• Windows are the top level container for Titanium
applications
• Applications usually consist of one window or
several windows in a tab group
• Windows usually create new execution contexts
•Execution context == A unique JavaScript symbol
space
• Such windows are “Heavyweight” windows
• Can also create “Lightweight” windows (for apps
that run in a single context)


Demo Contexts
• New Project - Two Tabs with “Lightweight”
windows
• Switch to contain urls and contexts
• Symbols not defined in other contexts


View Hierarchy
• Views are the building blocks of
Titanium UIs
– Specialized views: table views,
image views, map views, etc.
• Views can contain child views,
which are positioned relative to
the parent
• Layout Options: Absolute,
vertical, or horizontal (currently
iPhone only)
• Vertical layouts require height to
be set

Custom Events
• Use for cross-context messaging
• Events are received across all ACTIVE contexts
• Windows not yet open do not receive events
• Use also as an inversion of control mechanism
– Publish message when the database has been updated
– Publish message when contacting a server
– Using pub/sub messaging is very useful in a
component-oriented framework like Titanium


Demo: Events
• Now lets use custom events in our new app
• Events can have a data payload
• Remember that events are only received in
active contexts


Cross Platform
• Not all UI is available across platforms
• Titanium != Write Once, Run Everywhere
• It tries to enable native apps that look and feel
like they were created in Objective-C or Java
• Also note that even cross-platform UI
components (like table views) will render
differently cross platform
• Cross Platform testing is critical during
development cycle


Cross Platform Tips
• iPhone/Android
subdirectories
• Ti.Platform.osname
• Display height/width
• OS version
• Check Out Kitchen
Sink Platform
example


Build an Example
• App Features:
– Multiple Window/Tabbed UI
– Properties API
– Camera and Local Photo Gallery
– Upload to remote web service (TwitPic)
• Want to develop and deploy to a device in the
space of a few minutes


iPhone SDK Users
• Will need to download build to address iOS 4
issues that is not in basic 1.3.0 release
• Nightly Builds:
– http://builds.appcelerator.com.s3.amazonaws.com/index.html

• Let’s go through install of “latest and greatest”
build...


OhSnap!

• New Project via
Titanium Developer
• Grab new icons
from Glyphish
• Configure tab icons,
new windows/
execution contexts


1. Gather UI

• Create necessary
buttons, image
placeholders, text
labels
• Arrange using
vertical layout
• Check out styling
options


2. Login Screen

• Pre-populate text
fields with
Properties
• Persist un/pw
combo
• Add event listener
to save button


3. Media

• Open Photo Gallery
• Show Camera
• Dynamically update
ImageView source
file


4. Upload Image

• Create HTTPClient
object
• Open a POST
request
• Upload image media
and Twitter update


Deploy
• Demo: Deploy via Titanium Developer
• On your own, provision your system for
development on device
• Android == super easy
• iPhone... not so much
• Video Tutorial:
– http://vimeo.com/10278960
• All Appcelerator Videos:
– http://vimeo.com/appcelerator


Recap OhSnap!
• < 200 Lines of code
• Persistent App Preferences
• Fully native UI (ugly, but see Snapost for the
pretty...)
• Integrated camera/photo gallery
• XML HTTP Request upload to remote server
• 100% Cross-Platform


Next Steps


Next Steps
• Deploy to device


Next Steps
• Submit to market


Next Steps
• Make (or save) your
company millions!


Next Steps
• Make (or save) your
company millions!
• Buy me a Bookers -->


Thank you
• On3 Grow
Your Own
• Consulting, Mentoring, Training Flex Team
• http://www.on3solutions.com
•Twitter: on3solutions
Tired of IT outsourcing?
Cultivate expertise from within with the help

• Rob Rusher
of On3. We mentor development teams
through the process of implementing,
developing and mastering next-generation

• http://www.robrusher.com technologies. We also o er traditional needs
assessment and e ective instruction. Call On3,
and prepare to watch your capabilities grow.
•Twitter: robrusher On3 Solutions
sales@on3solutions.com 3
www.on3solutions.com
877.885.7044
303.885.7044
On


Resources
• Get Titanium Mobile
• http://www.appcelerator.com
• Titanium Reference
• http://www.codestrong.com
• Kevin Whinnery
• http://kevinwhinnery.com
• Code for this presentation
• http://github.com/kwhinnery


Building Native Cross Platform Mobile Applications

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Recently uploaded

Recently uploaded (20)

Building Native Cross Platform Mobile Applications

Editor's Notes