Appcelerator Titanium at Mobile 2.0

7,496 views
7,280 views

Published on

This is the Appcelerator Titanium presentation titled "Mobile for the rest of us" presented at the Mobile 2.0 conference in Mountain View, California on October 16, 2009. This presentation was given by Jeff Haynie.

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

No Downloads
Views
Total views
7,496
On SlideShare
0
From Embeds
0
Number of Embeds
186
Actions
Shares
0
Downloads
202
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Appcelerator Titanium at Mobile 2.0

  1. 1. Mobile for the rest of us Mobile 2.0 Conference Mountain View, CA Jeff Haynie @jhaynie
  2. 2. About Me • @jhaynie @appcelerator • http://blog.jeffhaynie.us • jhaynie@appcelerator.com • #titanium_app on freenode
  3. 3. Explosion of opportunities 20% year over year growth anticipated for next 5 years in smart phones
  4. 4. Oh no. • iPhone (Objective-C, 28th!) • Android (Java, Google Style) • RIM (Java, Blackberry or Midlet style) • Symbian (old school C) • Palm Pre (Web 2.0) • Windows Mobile (.NET compact) • Maemo (GTK+)
  5. 5. Oh, yeah... • Web Browsers • Desktop Apps • Net books • E-Book readers • Tablets • etc etc.
  6. 6. We Web • HTML, CSS, JavaScript • Presentation / UI can easily be built with HTML/ CSS • JavaScript API for mobile features, platform, UI • Run locally, integrate cloud services
  7. 7. It’s the UX Build applications that fit the use cases that are tailored for the modality
  8. 8. What we want • Skills • Tools • Reusability • Platforms • Portability • Speed / Cost • Open source / Standards
  9. 9. Appcelerator Empower developers to quickly create and commercialize web, desktop and mobile applications
  10. 10. Titanium • Desktop: Win32, OSX, Linux • Mobile: iPhone and Android (Palm WebOS) • 100% code on github.com/appcelerator • Apache Public License • Active Open Source Community
  11. 11. Appcelerator Products Create, test, and commercialize native mobile and desktop applications with the web technologies you use today. Develop Native iPhone Build Desktop apps Cloud services used for Web development tools and Android apps with that can be deployed testing, packaging, that enable rapid RIA full access to each with one code base on distribution, and development. device’s APIs. the PC, Mac, or Linux analytics. platforms.
  12. 12. Product Architecture Mobile Desktop
  13. 13. Programming Model Titanium supports JavaScript, HTML, CSS for building mobile applications
  14. 14. UI • Clean separation of Design from Code • UI is constructed via HTML, CSS • JavaScript access to create native controls, native views, windows, etc.
  15. 15. JavaScript • JavaScript is used to program Mobile Features, Access local Resources, Database, Remote Web Services, etc. • Use your favorite JS Toolkit - jQuery,YUI, Dojo, Mootools, etc etc.
  16. 16. App Assembly Titanium SDK compiles (using Titanium Developer) the application using the Mobile SDK into a native application
  17. 17. Mobile APIs Geolocation Accelerometer Gesture Analytics Media App Network Database Platform Facebook UI Filesystem Yahoo
  18. 18. Building the UI • <html> accepted here (including HTML5) • optimized native UI controls • hybrid UI composition • custom native UI controls
  19. 19. Typical iPhone UI
  20. 20. Typical Android UI
  21. 21. <html>
  22. 22. Native UI views Grouped View Table View
  23. 23. Composite UI
  24. 24. Composite Views
  25. 25. Custom OpenGL UI
  26. 26. Simple APIs Titanium.UI.setTabBadge(10) Titanium.UI.createMenu()
  27. 27. Native UI Controls • Toolbars • Tab Bars • Status Bars • Dialogs • Controls
  28. 28. Native UI (Android)
  29. 29. Databases var db = Titanium.Database.open('mydb'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 1,'Name 1'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 2,'Name 2'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 3,'Name 3'); db.execute('INSERT INTO DATABASETEST (ID, NAME ) VALUES(?,?)', 4,'Name 4');
  30. 30. Camera Titanium.Media.showCamera( {     success:function(image,details)     {         $("status").innerHTML="Uploading...."+image.url; } });
  31. 31. Video var video = Titanium.Media. createVideoPlayer({ contentURL : "movie.mp4"}); var listenerId = video.addEventListener("complete", function() {    video.removeEventListener('complete', listenerId);    var dlg = Titanium.UI.createAlertDialog({     'title' : 'Video Complete',     'message' : 'video completed',     'buttonNames' : [ 'OK' ]    });    dlg.show(); }); video.play();
  32. 32. Gestures function onShake() {    document.getElementById("status").innerHTML = 'Stop Shaking me';   } var listenerId = Titanium.Gesture.addEventListener("shake", onShake);
  33. 33. Accelerometer Titanium.Accelerometer.addEventListener('update',function(e){    document.getElementById('x').innerHTML = e.x;    document.getElementById('y').innerHTML = e.y;    document.getElementById('z').innerHTML = e.z });
  34. 34. Titanium Info • http://www.appcelerator.com • http://github.com/appcelerator • @appcelerator • #titanium_app on irc.freenode.net • http://slideshare.net/jhaynie

×