Titanium Mobile Intro

8,879 views
8,728 views

Published on

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

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,879
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
236
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Titanium Mobile Intro

    1. 1. Titanium Mobile writing native iPhone and Android apps with web technologies.
    2. 2. About Me Marshall Culpepper Titanium Project Lead / Hacker Extraordinaire @marshall_law http://www.arcaner.com mculpepper@appcelerator.com http://github.com/marshall
    3. 3. Agenda • Titanium Mobile Intro • Mobile Architecture • API Overview • Guided Lab: Snappost
    4. 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. 5. Mobile Architecture
    6. 6. Media API
    7. 7. More Media API
    8. 8. Geolocation API
    9. 9. Accelerometer API
    10. 10. Database API Synchronous and Asynchronous (HTML5) APIs
    11. 11. Network API XHR-style object for remote data requests
    12. 12. Native UI Controls Use native controls with Javascript
    13. 13. Native iPhone UI • Tab Bar / Nav Bar • Table View / Group View • Alert / Options • Buttons / Sliders / Progress / Activity • more...
    14. 14. Native Android UI • Tab Bar • Table View • Alert / Options • Buttons / Sliders / Progress / Activity • more...
    15. 15. Common API iPhone Table View Android Table View Same code
    16. 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. 17. Developer+Mobile • With Mobile projects, Developer deploys code to the simulator/ emulator • Can also deploy directly to device (requires some setup)
    18. 18. Hello World app • Prerequisites • iPhone and/or Android SDK • Titanium Developer + Mobile SDK
    19. 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. 20. Step 1: Configuration • $ROOT/tiapp.xml • Configure tabs, and their properties
    21. 21. Step 2: HTML, CSS, JS • organize $ROOT/index.html • code up simplistic UI, use a native button
    22. 22. Step 3: Create the button • Use Titanium.UI.createButton to create a native button inside the web content
    23. 23. Step 4: Pick a photo • Use Titanium.UI.openPhotoGallery to prompt for a photo
    24. 24. Step 5: Post to TwitPic • Send image blob data directly using our Native XHR
    25. 25. Done!
    26. 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. 27. Q/A, Titanium hackathon

    ×