A 1 hour introduction to Titanium Mobile based on Kevin Whinnery's excellent material

1. Titanium Mobile
writing native iPhone and Android apps with web technologies.

2. About Me
Marshall Culpepper
Titanium Project Lead / Hacker Extraordinaire
@marshall_law
http://www.arcaner.com
mculpepper@appcelerator.com
http://github.com/marshall

3. Agenda
• Titanium Mobile Intro
• Mobile Architecture
• API Overview
• Guided Lab: Snappost

4. Titanium Mobile
• UI with HTML5, CSS, Canvas. The best of the open web.
• iPhone 2.2.1 -> 3.x support, Android 1.5 support
• Native widgets, views with Javascript APIs - fast!
• No need to learn multiple languages (Objective-C, Java) to be
productive
• Resources get compiled into a native executable - non editable
by mere mortals

5. Mobile Architecture

6. Media API

7. More Media API

8. Geolocation API

9. Accelerometer API

10. Database API
Synchronous and Asynchronous (HTML5) APIs

11. Network API
XHR-style object for remote data requests

12. Native UI Controls
Use native controls with Javascript

13. Native iPhone UI
• Tab Bar / Nav Bar
• Table View / Group View
• Alert / Options
• Buttons / Sliders / Progress / Activity
• more...

14. Native Android UI
• Tab Bar
• Table View
• Alert / Options
• Buttons / Sliders / Progress / Activity
• more...

15. Common API
iPhone Table View Android Table View
Same code

16. Useful Resources
• KitchenSink : Full API demo
• Full API Reference, Platform Guides, Docs:
• http://codestrong.com
• #titanium_app on irc.freenode.net
• Support: http://support.appcelerator.net

17. Developer+Mobile
• With Mobile projects, Developer deploys code to the simulator/
emulator
• Can also deploy directly to device (requires some setup)

18. Hello World app
• Prerequisites
• iPhone and/or Android SDK
• Titanium Developer + Mobile SDK

19. Snappost: Our first app
• An app that can post a photo and a message to Twitter via
TwitPic
• Use TwitPic REST API, Titanium, jQuery
• Basic TwitPic spec:
• POST to REST API @ https://twitpic.com/api/uploadAndPost
• message: update message
• username: twitter username
• password: twitter password
• media: image binary data

20. Step 1: Configuration
• $ROOT/tiapp.xml
• Configure tabs, and their properties

21. Step 2: HTML, CSS, JS
• organize $ROOT/index.html
• code up simplistic UI, use a native button

22. Step 3: Create the button
• Use Titanium.UI.createButton to create a native button
inside the web content

23. Step 4: Pick a photo
• Use Titanium.UI.openPhotoGallery to prompt for a photo

24. Step 5: Post to TwitPic
• Send image blob data directly using our Native XHR

25. Done!

26. Final Thoughts
• Titanium: Native desktop and mobile apps made simple with
web technologies
• In the future we hope to support Blackberry, Windows Mobile,
Symbian
• See Roadmap for Desktop and Mobile on Codestrong

27. Q/A, Titanium hackathon