OSCON Titanium Tutorial


Published on

A Titanium Mobile tutorial given at OSCON 2010.

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

OSCON Titanium Tutorial

  1. 1. Before You Begin <ul><li>Prerequisite Software </li></ul><ul><ul><li>Latest iPhone SDK </li></ul></ul><ul><ul><li>Android SDK with 1.6 and any later SDKs installed </li></ul></ul><ul><ul><li>Titanium Developer </li></ul></ul><ul><li>Getting Started Guide </li></ul><ul><ul><li>http://developer.appcelerator.com/doc/mobile/get_started </li></ul></ul><ul><ul><li>Linked in tutorial notes at http://oscon.com </li></ul></ul>
  2. 2. Native Mobile Applications USING Open Source
  3. 3. Want to give this talk? <ul><li>Your local user group </li></ul><ul><li>Your company </li></ul><ul><li>To your wife and kids </li></ul><ul><li>Package includes: </li></ul><ul><ul><li>Slides in various formats </li></ul></ul><ul><ul><li>Example code </li></ul></ul><ul><ul><li>Resources for presenters </li></ul></ul>http://github.com/kwhinnery/MeetupPack
  4. 4. Today’s Agenda <ul><li>Titanium Mobile Overview </li></ul><ul><li>Hello World and Project Walkthrough </li></ul><ul><li>Building Titanium Apps: Fundamentals </li></ul><ul><li>Code By Numbers: Oh Snap! </li></ul><ul><li>Where To Go From Here </li></ul><ul><li>Questions and Answers </li></ul><ul><li>Independent Hacking </li></ul>
  5. 5. About Me <ul><li>Kevin Whinnery </li></ul><ul><li>Engineer/Platform Evangelist </li></ul><ul><li>http://kevinwhinnery.com </li></ul><ul><li>Twitter: @kevinwhinnery </li></ul><ul><li>Web developer by trade and training, lover of JavaScript and open web technologies in general </li></ul>
  6. 6. About Appcelerator <ul><li>Open Source Software Company based in Mountain View </li></ul><ul><li>~25 employees and growing </li></ul><ul><li>Developing Titanium for about two years, with Mobile coming in the last year </li></ul><ul><li>95% Developers </li></ul>
  7. 7. About You New To Mobile Development Mobile Dev Veteran
  8. 8. Either way, you’ve come to the right place.
  9. 9. Amazing Mobile Platforms
  10. 10. Which is great and exciting!
  11. 11. ...only how do we target all these cool platforms?
  12. 12. Well, you could build native, but... <ul><li>Which platforms do you choose? </li></ul><ul><li>How many codebases do you want to (or even can you) support? </li></ul><ul><li>How long will it take to build native on N platforms? </li></ul><ul><li>How much effort will be duplicated? </li></ul><ul><li>What if you bet on the wrong platform? </li></ul><ul><li>Who writes the code? Hire out? Retrain/retool yourself or your devs? </li></ul>
  13. 13. The Web Is An Option... <ul><li>...and should be preferred when feasible </li></ul><ul><li>Mobile browsers are progressing fast and converging around WebKit </li></ul><ul><li>But there are limitations </li></ul><ul><li>Native apps are inherently more capable than web apps </li></ul><ul><li>Native apps run faster and smoother on resource constrained devices </li></ul>
  14. 14. Ideally, we build cross-platform native apps...
  15. 15. ...but we don’t want to “write once, suck everywhere”* *Loren Brichter, creator “Twitter for iPhone”/Tweetie
  16. 16. X-Platform Requirements <ul><li>Target multiple platforms from a single codebase </li></ul><ul><li>Apps must feel like they belong on the platform </li></ul><ul><li>Apps need to perform like native </li></ul><ul><li>Bonus: Open source and extensible </li></ul><ul><li>Bonus: Use skills we already have </li></ul>Hmmm, I wonder if he has a specific technology in mind...
  17. 17. Enter Titanium Titanium is an open source framework for building native mobile (or desktop) applications using open web technologies (JavaScript - optionally HTML and CSS)
  18. 18. Titanium Key Facts <ul><li>Open Source (Apache 2.0) </li></ul><ul><li>Professional Services, SLA Support, Training, and Analytics available from Appcelerator </li></ul><ul><li>Titanium Platforms </li></ul><ul><li>Desktop: Win32, OS X, Linux </li></ul><ul><li>Mobile: iOS, Android, BlackBerry, webOS (soon) </li></ul>
  19. 19. Titanium Projects <ul><li>Titanium Developer (1.2.1) </li></ul><ul><li>Titanium Mobile SDK (1.3.0) </li></ul><ul><li>Titanium Desktop SDK (1.0.0) </li></ul><ul><li>Versioned separately, different release schedules </li></ul><ul><li>We will focus on Developer and the Mobile SDK </li></ul>
  20. 20. Titanium Features Native UI Location APIs Local and Remote Data Social APIs Rich Media APIs Open Source and Extensible Integrated Analytics Development Tools Real native tables, tabs, sliders, and views Native Maps, Compass, and Geolocation Local SQL Database, Lightweight Key/Value Store, XHR Integrated Facebook Connect and YQL Local and streaming audio and video, media recording Extend Titanium with custom modules in native code Baked-in analytics APIs to measure results and behavior Develop and distribute your app for multiple platforms from a single tool
  21. 21. Who Uses Titanium? <ul><li>NBC Universal </li></ul><ul><li>PayPal </li></ul><ul><li>MTV </li></ul><ul><li>Anheuser-Busch </li></ul><ul><li>Computer Sciences Corporation </li></ul><ul><li>Intridea (Oil Reporter) </li></ul><ul><li>100s of Titanium apps hitting the stores each month (should soon eclipse 1000/month) </li></ul>
  22. 22. Titanium Architecture <ul><li>Desktop is HTML focused </li></ul><ul><li>Can use other scripting languages </li></ul><ul><li>Mobile: JavaScript interpreted at runtime </li></ul><ul><li>JavaScript API >> native APIs </li></ul>
  23. 23. What Titanium Mobile is not: <ul><li>Not a native wrapper around a web view </li></ul><ul><li>However, you do have a web view component for HTML/CSS UI if that is your preference </li></ul><ul><li>Your JavaScript code is invoking native APIs for UI and other native functions </li></ul><ul><li>Think MacRuby/Hot Cocoa on the desktop or some AAA mobile games which ship with a Lua interpreter </li></ul>
  24. 24. Example
  25. 25. Example
  26. 26. Example
  27. 27. Titanium Developer <ul><li>Manage and run Titanium applications </li></ul><ul><li>Package applications for distribution </li></ul><ul><li>Run on a device for testing </li></ul><ul><li>Manage Appcelerator account </li></ul>
  28. 28. Demo: Hello World! <ul><li>Creating a mobile project </li></ul><ul><li>Mobile project structure </li></ul><ul><li>Editing code, adding UI widgets to the app </li></ul><ul><li>Deploy to simulator </li></ul>
  29. 29. Demo: Kitchen Sink <ul><li>Example Code </li></ul><ul><li>Living Reference Document </li></ul><ul><li>Demonstrates API coverage </li></ul>
  30. 30. Questions So Far? <ul><li>Titanium as a product </li></ul><ul><li>Titanium capabilities </li></ul><ul><li>About Appcelerator </li></ul>
  31. 31. Titanium Fundamentals <ul><li>A Titanium application is a JavaScript program that is interpreted at runtime on the device </li></ul><ul><li>app.js defines the root execution context of the app </li></ul><ul><li>Note that we are not running in a browser </li></ul><ul><li>We use the WebKit KJS JavaScript engine (iOS) or Rhino (Android/BB) </li></ul>
  32. 32. Titanium JavaScript API <ul><li>Organized into logical namespaces </li></ul><ul><li>“Titanium” (or just “Ti” for short) is the root namespace for all Titanium functionality </li></ul><ul><li>A few other odds and ends in the global space </li></ul><ul><ul><li>setTimeout/setInterval </li></ul></ul><ul><ul><li>alert </li></ul></ul><ul><ul><li>JSON </li></ul></ul>
  33. 33. Typical App Composition <ul><li>A single window or stack of windows </li></ul><ul><li>Tab Group containing many windows </li></ul><ul><li>Windows contain views </li></ul>
  34. 34. Windows and Contexts <ul><li>Windows are the top level container for Titanium applications </li></ul><ul><li>Applications usually consist of one window or several windows in a tab group </li></ul><ul><li>Windows usually create new execution contexts </li></ul><ul><li>Execution context == A unique JavaScript symbol space </li></ul><ul><li>Such windows are “Heavyweight” windows </li></ul><ul><li>Can also create “Lightweight” windows (for apps that run in a single context) </li></ul>3
  35. 35. Demo: Contexts <ul><li>New Project - Two Tabs with “Lightweight” windows </li></ul><ul><li>Switch to contain urls and contexts </li></ul><ul><li>Symbols not defined in other contexts </li></ul>
  36. 36. The View Hierarchy <ul><li>Views are the building blocks of Titanium UIs </li></ul><ul><ul><li>Specialized views: table views, image views, map views, etc. </li></ul></ul><ul><li>Views can contain child views, which are positioned relative to the parent </li></ul><ul><li>Layout Options: Absolute, vertical, or horizontal (currently iPhone only) </li></ul><ul><li>Vertical layouts require height to be set </li></ul>
  37. 37. Custom Events <ul><li>Use for cross-context messaging </li></ul><ul><li>Events are received across all ACTIVE contexts </li></ul><ul><li>Windows not yet open do not receive events </li></ul><ul><li>Use also as an inversion of control mechanism </li></ul><ul><ul><li>Publish message when the database has been updated </li></ul></ul><ul><ul><li>Publish message when contacting a server </li></ul></ul><ul><ul><li>Using pub/sub messaging is very useful in a component-oriented framework like Titanium </li></ul></ul>
  38. 38. Demo: Custom Events <ul><li>Now lets use custom events in our new app </li></ul><ul><li>Events can have a data payload </li></ul><ul><li>Remember that events are only received in active contexts </li></ul>
  39. 39. Hey, what about layouts? We’ll demo that later in the tutorial...
  40. 40. Cross-Platform Development <ul><li>Not all UI is available across platforms </li></ul><ul><li>Titanium != “Write Once, Run Everywhere” </li></ul><ul><li>We try to enable native apps that look and feel like they were created in Objective-C or Java </li></ul><ul><li>Also note that even cross-platform UI components (like table views) will render differently cross platform </li></ul><ul><li>Cross Platform testing is critical during dev cycle </li></ul>
  41. 41. Cross-Platform Tips <ul><li>iPhone/Android subdirectories </li></ul><ul><li>Ti.Platform.osname </li></ul><ul><li>Display height/width </li></ul><ul><li>OS version </li></ul><ul><li>Check Out Kitchen Sink Platform example </li></ul>10
  42. 42. Questions? <ul><li>App Composition </li></ul><ul><li>Runtime environment </li></ul><ul><li>UI Layouts </li></ul>
  43. 43. “Code By Numbers” <ul><li>Demo App: Oh Snap! </li></ul><ul><li>Condensed version of Snapost </li></ul><ul><ul><li>Source: http://github.com/kwhinnery/Snapost </li></ul></ul><ul><li>App Features: </li></ul><ul><ul><li>Multiple Window/Tabbed UI </li></ul></ul><ul><ul><li>Properties API </li></ul></ul><ul><ul><li>Camera and Local Photo Gallery </li></ul></ul><ul><ul><li>Upload to remote web service (TwitPic) </li></ul></ul><ul><li>Want to develop and deploy to a device in the space of a few minutes </li></ul>
  44. 44. A Nicer Version... <ul><li>Our example will be somewhat basic </li></ul><ul><li>For a nicer example with better styling and slightly more robust handling of images, check out Snapost </li></ul><ul><li>3D iPhone transitions, laser noises! </li></ul>http://github.com/kwhinnery/Snapost
  45. 45. iPhone SDK Users <ul><li>Will need to download build to address iOS 4 issues that is not in basic 1.3.0 release </li></ul><ul><li>Nightly Builds: </li></ul><ul><ul><li>http://builds.appcelerator.com.s3.amazonaws.com/index.html </li></ul></ul><ul><li>Let’s go through install of “latest and greatest” build... </li></ul>
  46. 46. 0: Create “Oh Snap!” <ul><li>New Project via Titanium Developer </li></ul><ul><li>Grab new icons from Glyphish </li></ul><ul><li>Configure tab icons, new windows/execution contexts </li></ul>http://gist.github.com/481044
  47. 47. 1: Arrange Basic UI <ul><li>Create necessary buttons, image placeholders, text labels </li></ul><ul><li>Arrange using vertical layout </li></ul><ul><li>Check out styling options </li></ul>http://gist.github.com/481058
  48. 48. 2: Persist Un/Pw Combo <ul><li>Pre-populate text fields with Properties </li></ul><ul><li>Persist un/pw combo </li></ul><ul><li>Add event listener to save button </li></ul>http://gist.github.com/481078
  49. 49. 3: Select Media <ul><li>Open Photo Gallery </li></ul><ul><li>Show Camera </li></ul><ul><li>Dynamically update ImageView source file </li></ul>http://gist.github.com/481081
  50. 50. 4: Upload Image <ul><li>Create HTTPClient object </li></ul><ul><li>Open a POST request </li></ul><ul><li>Upload image media and Twitter update </li></ul>http://gist.github.com/481111
  51. 51. 5: Deploy to a device <ul><li>Demo: Deploy via Titanium Developer </li></ul><ul><li>On your own, provision your system for development on device </li></ul><ul><li>Android == super easy </li></ul><ul><li>iPhone... not so much </li></ul><ul><li>Video Tutorial: </li></ul><ul><ul><li>http://vimeo.com/10278960 </li></ul></ul><ul><li>All Appcelerator Videos: </li></ul><ul><ul><li>http://vimeo.com/appcelerator </li></ul></ul>
  52. 52. Recapping Oh Snap! <ul><li>< 200 Lines of code </li></ul><ul><li>Persistent App Preferences </li></ul><ul><li>Fully native UI (ugly, but see Snapost for the pretty...) </li></ul><ul><li>Integrated camera/photo gallery </li></ul><ul><li>XHR Upload to remote server </li></ul><ul><li>100% Cross-Platform </li></ul>
  53. 53. But wait, there’s more! <ul><li>Animation APIs </li></ul><ul><li>Social Networks </li></ul><ul><li>Custom Module Development </li></ul><ul><li>iPad Development </li></ul><ul><li>HTML 5 and CSS 3 </li></ul><ul><li>Explore Desktop!!! </li></ul>
  54. 54. Resources <ul><li>Community Q&A </li></ul><ul><li>Reference Docs (new getting started guides just finished) </li></ul><ul><li>Premium Support (Pro Subscribers) </li></ul><ul><li>Kitchen Sink and Demo Apps </li></ul><ul><li>Dev Blog: Tutorials, Updates from dev team, developer-focused content </li></ul><ul><li>Follow @appcelerator for news and updates </li></ul>
  55. 55. You Call It <ul><li>Questions? Comments? </li></ul><ul><li>Need Help? Let’s hack your project! </li></ul><ul><li>Want to get in contact with someone regarding X, Y, or Z? I’ll direct you to the right folks. </li></ul><ul><li>Anything else at all </li></ul>Kevin Whinnery http://kevinwhinnery.com http://twitter.com/kevinwhinnery IRC (irc.freenode.net): #titanium_app