Cross-Platform Mobile Development with Titanium

14,985 views

Published on

Develop full-featured native iPhone and Android apps from a single codebase using Appcelerator's Titanium mobile development platform. Titanium uses a developer-friendly javascript syntax with custom APIs and methods that get translated and cross-compiled to native Objective-C and Java. These apps are not HTML/CSS web views wrapped in a "native" package - they are real native apps with native UI components.

You will be introduced to Titanium, what it is, how it works, what the code looks like, pros and cons of the platform, and just how easy it is to make mobile applications with it with a few live demonstrations. My first experience with Titanium took me from being brand new to the platform to built and submitted Android and iPhone apps with identical functionality in 2 weeks.

Published in: Technology, Education
  • This is my simple titanium application with database to create a table. I created db file in resource with SQLite format. But i couldn't find any change in the database. I want to know whether my coding for database is correct. Please someone verify the code below and tell me if any corrections!!!
    Thanks in advance


    var win = Ti.UI.createWindow({
    title:'Window',
    backgroundColor:'black',
    borderColor:'grey'
    });
    var main = Ti.Database.install('products.db','products');
    var db = Ti.Database.open('products');
    db.execute('CREATE TABLE IF NOT EXISTS login_name(username TEXT,password TEXT,login TEXT);');
    db.close();

    var label1 = Ti.UI.createLabel({
    text:'Welcome to new Window',
    color:'white',
    font:{fontSize:20},
    top:10
    });
    var text1 = Ti.UI.createTextField({
    top:50,width:200
    });
    var text2 = Ti.UI.createTextField({
    top:100,width:200
    });
    win.add(label1);
    win.add(text1);
    win.add(text2);
    win.open({fullscreen:false});
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is my simple titanium application with database to create a table. I created db file in resource with SQLite format. But i couldn’t find any change in the database. I want to know whether my coding for database is correct. Please someone verify the code below and tell me if any corrections!!! Thanks in advance

    var win = Ti.UI.createWindow({ title:’Window’, backgroundColor:’black’, borderColor:’grey’
    });
    var main = Ti.Database.install(’products.db’,’products’);
    var db = Ti.Database.open(’products’); db.execute(’CREATE TABLE IF NOT EXISTS login_name(username TEXT,password TEXT,login TEXT);’); db.close();
    var label1 = Ti.UI.createLabel({ text:’Welcome to new Window’, color:’white’, font:{fontSize:20}, top:10 });
    var text1 = Ti.UI.createTextField({ top:50,width:200
    });
    var text2 = Ti.UI.createTextField({ top:100,width:200
    });
    win.add(label1); win.add(text1); win.add(text2); win.open({fullscreen:false});
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Cross-Platform Mobile Development with Titanium

  1. 1. Cross-Platform Mobile Development with Titanium DevTeach - June 1, 2011 Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  2. 2. Who Am I? Vance Lucas http://vancelucas.com @vlucas Brightbit http://brightb.it Mobile apps, PHP, Javascript/jQuery, Rails, Training, Consulting Vance Lucas (@vlucas) http://brightb.it 2Tuesday, May 31, 2011
  3. 3. Titanium? Open-Source native application development toolkit created by Appcelerator. Goal: Web Technologies for Native Apps Desktop (OSX / Windows / Linux) HTML / CSS / JS - Webkit Mobile (iOS / Android / Blackberry (beta)) Pure Javascript translated to native code (kinda) Vance Lucas (@vlucas) http://brightb.it 3Tuesday, May 31, 2011
  4. 4. The Titanium Promise Fulfilling the original promise of Java “Write once, run anywhere” ... not “write once, suck everywhere” Single codebase => multiple platforms Apps must look and feel like they belong on the platform and be consistent with user expectations Apps need to perform like native apps Vance Lucas (@vlucas) http://brightb.it 4Tuesday, May 31, 2011
  5. 5. What Does It Cost? NOTHING! The whole Titanium platform itself and all the tools required to build an app are free and open source: https://github.com/appcelerator What’s the Catch? Appcelerator sells support and premium modules to use in your app They also do custom development on their own platform Vance Lucas (@vlucas) http://brightb.it 5Tuesday, May 31, 2011
  6. 6. How Does it Work? Pre-Compiler Optimize, Analyze & Find Dependencies Front End Compiler Native code, project, other specific compile code, copy in native modules, package JS interpreter Platform Compiler Compile with native tools (Xcode, Android SDK) Vance Lucas (@vlucas) http://brightb.it 6Tuesday, May 31, 2011
  7. 7. Titanium Environment Vance Lucas (@vlucas) http://brightb.it 7Tuesday, May 31, 2011
  8. 8. Mobile Development Pure Javascript with custom APIs UI, Network, Map, Geo-location, Gestures, Accelerometer, Database, Filesystem, Media, etc. Javascript API calls mapped to native APIs JSON-like property description Vance Lucas (@vlucas) http://brightb.it 8Tuesday, May 31, 2011
  9. 9. Native UI Controls Controls and UI elements are native to the platform Vance Lucas (@vlucas) http://brightb.it 9Tuesday, May 31, 2011
  10. 10. Code Composition View-based and event-driven Fits Javascript perfectly iOS-style layered view hierarchy ~60% UI Construction ~20% Event Handling ~20% Business Logic Vance Lucas (@vlucas) http://brightb.it 10Tuesday, May 31, 2011
  11. 11. Windows & Application Flow Navigating your App Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  12. 12. Project Structure Resources directory has the “meat” of your project app.js is the “bootstrap” file - always the first loaded Do whatever you want after that! Vance Lucas (@vlucas) http://brightb.it 12Tuesday, May 31, 2011
  13. 13. Platform-Specifics Special iphone and android folders will be used on respective platforms & moved at compile time Vance Lucas (@vlucas) http://brightb.it 13Tuesday, May 31, 2011
  14. 14. Screen Densities iOS / iPhone (3GS vs Retina) Android (Cluster*@^#) Vance Lucas (@vlucas) http://brightb.it 14Tuesday, May 31, 2011
  15. 15. Windows Base UI structure that other views and UI widgets and components are placed on Controlled programmatically with a single JS file JS file then creates UI components and adds them to itself in layers (button here, text here, etc.) Vance Lucas (@vlucas) http://brightb.it 15Tuesday, May 31, 2011
  16. 16. Code Execution Context Vance Lucas (@vlucas) http://brightb.it 16Tuesday, May 31, 2011
  17. 17. Includes Includes are the primary way to use global variables across different contexts and windows Configuration, database, JS framework, etc. Vance Lucas (@vlucas) http://brightb.it 17Tuesday, May 31, 2011
  18. 18. Tabs Tab-based apps are most common and the easiest to make Window transitions/navigation are built-in and automatic One window per tab Can open window within tab (shows “Back” button in iOS) Vance Lucas (@vlucas) http://brightb.it 18Tuesday, May 31, 2011
  19. 19. Tabs Code Example Vance Lucas (@vlucas) http://brightb.it 19Tuesday, May 31, 2011
  20. 20. Vance Lucas (@vlucas) http://brightb.it 20Tuesday, May 31, 2011
  21. 21. Sometimes have to account for platform differences iOS has title with tabs, Android does not Vance Lucas (@vlucas) http://brightb.it 21Tuesday, May 31, 2011
  22. 22. Custom UI Much more more difficult, but very possible Have to create a stack of views and keep track of position (esp. previous for “back” button) Have to do everything by hand Listen for “back” button (Android) Transition animations etc... Vance Lucas (@vlucas) http://brightb.it 22Tuesday, May 31, 2011
  23. 23. Tweetanium Mobile Vance Lucas (@vlucas) http://brightb.it 23Tuesday, May 31, 2011
  24. 24. Views The DIVs of Native UIs Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  25. 25. View & UI Positioning Views are Stackable & Nestable Similar to absolute-positioned HTML/CSS elements Left, top coordinate system (0,0 = top left) Smart defaults: Center position, 100% of parent size Transparent until BG color or image specified Vance Lucas (@vlucas) http://brightb.it 25Tuesday, May 31, 2011
  26. 26. Vance Lucas (@vlucas) http://brightb.it 26Tuesday, May 31, 2011
  27. 27. Stacking Views Vance Lucas (@vlucas) http://brightb.it 27Tuesday, May 31, 2011
  28. 28. UI Controls & Widgets Buttons and Tables and Pickers, oh my! Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  29. 29. Titanium.UI Module Bridge to native UI components Everything you SEE in an app Animations, dialogs, buttons, images, labels, date/ time pickers, scroll views, search bars, sliders, switches, tabs, tables, text & input fields, toolbars, view, webviews, windows, and more... Vance Lucas (@vlucas) http://brightb.it 29Tuesday, May 31, 2011
  30. 30. Vance Lucas (@vlucas) http://brightb.it 30Tuesday, May 31, 2011
  31. 31. JSS - JS Style Sheets JSON-style properties for object creation are nice, but can be repetitive when used across an entire app UI Separate styles from UI component code with JSS Two ways to use: global.jss - Applied to ALL UI components <window>.jss - Overrides for <window>.js only Vance Lucas (@vlucas) http://brightb.it 31Tuesday, May 31, 2011
  32. 32. JSS Example Assign “id” to UI component and reference by id Reference by type Window-specific rules override global ones Vance Lucas (@vlucas) http://brightb.it 32Tuesday, May 31, 2011
  33. 33. Events What to do & When to do it Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  34. 34. Events and Callbacks “Do X when Y happens” Syntax is just like native Javascript UI controls have their own events you can listen to click, blur, focus, change, scroll, etc. Custom events supported - “app_customevent” Extremely useful for triggering activity in other parts of your app from anywhere else in the app Vance Lucas (@vlucas) http://brightb.it 34Tuesday, May 31, 2011
  35. 35. Event Contexts Vance Lucas (@vlucas) http://brightb.it 35Tuesday, May 31, 2011
  36. 36. Handling Button Clicks Vance Lucas (@vlucas) http://brightb.it 36Tuesday, May 31, 2011
  37. 37. Ti.API TI.API log /info / debug / warn / error addEventListener / removeEventListener global context for custom events fireEvent - Trigger named event from anywhere Vance Lucas (@vlucas) http://brightb.it 37Tuesday, May 31, 2011
  38. 38. domains/list.js Table view lists domains in local database Event updates active domain on table row click Passes row title (domain) with e.rowData.title Vance Lucas (@vlucas) http://brightb.it 38Tuesday, May 31, 2011
  39. 39. app.js - Defined Event Vance Lucas (@vlucas) http://brightb.it 39Tuesday, May 31, 2011
  40. 40. domains/social.js Event “st_social_fetchAll” fires all fetch events... ...which then update individual counts via events Vance Lucas (@vlucas) http://brightb.it 40Tuesday, May 31, 2011
  41. 41. Many Levels Deep... Vance Lucas (@vlucas) http://brightb.it 41Tuesday, May 31, 2011
  42. 42. SEMTab SEO Pro Vance Lucas (@vlucas) http://brightb.it 42Tuesday, May 31, 2011
  43. 43. APIs The Natives are Exposed Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  44. 44. Hardware & Extras Accelerometer, Geo-location, Locale, Gestures, Filesystem, Device Orientation, Databases, Contacts, Mapping, Camera & Video, Clipboard, and more... Two main ways to interact: Direct APIs with methods Events with callbacks Vance Lucas (@vlucas) http://brightb.it 44Tuesday, May 31, 2011
  45. 45. Ti.Accelerometer Get x, y, z coordinates of the device Listen to event with callback when fired Do something with new coordinates Vance Lucas (@vlucas) http://brightb.it 45Tuesday, May 31, 2011
  46. 46. Ti.Database Direct API interface to SQLite database Pre-installed on iOS & Android devices Create and delete databases Allows for simple query execution and resultSet traversing Any query or syntax supported by SQLite Vance Lucas (@vlucas) http://brightb.it 46Tuesday, May 31, 2011
  47. 47. Ti.Database Setup Open named database Create tables with standard queries Vance Lucas (@vlucas) http://brightb.it 47Tuesday, May 31, 2011
  48. 48. Iterate over Results Create TableView and push data into rows. TableView will take care of all display & formatting Vance Lucas (@vlucas) http://brightb.it 48Tuesday, May 31, 2011
  49. 49. Ti.Network Talk to remote servers! HTTPClient Bonjour Service + Browser TCP Sockets You will most likely be using HTTPClient a lot... Vance Lucas (@vlucas) http://brightb.it 49Tuesday, May 31, 2011
  50. 50. Basic HTTPClient Use Vance Lucas (@vlucas) http://brightb.it 50Tuesday, May 31, 2011
  51. 51. Animations Easier than you might think Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  52. 52. 3 Components Transition Transformation to apply Duration Milliseconds Callback What happens after animation is complete Vance Lucas (@vlucas) http://brightb.it 52Tuesday, May 31, 2011
  53. 53. 3 Types of Animations Basic 2D Matrix 3D Matrix Vance Lucas (@vlucas) http://brightb.it 53Tuesday, May 31, 2011
  54. 54. Basic Animation Simple property changes over duration Color, background, size, position, visibility, etc. Vance Lucas (@vlucas) http://brightb.it 54Tuesday, May 31, 2011
  55. 55. Basic Animation Changes view background from red to black to orange over 2 seconds Vance Lucas (@vlucas) http://brightb.it 55Tuesday, May 31, 2011
  56. 56. 2D Matrix Rotate, scale, skew, invert Oh noes! Maths! Vance Lucas (@vlucas) http://brightb.it 56Tuesday, May 31, 2011
  57. 57. Proportional Rotation: In radians Vance Lucas (@vlucas) http://brightb.it 57Tuesday, May 31, 2011
  58. 58. 3D Matrix Rotate, scale, skew, invert, flip - in 3D space Vance Lucas (@vlucas) http://brightb.it 58Tuesday, May 31, 2011
  59. 59. 3D Transformations Combine matrices to achieve transformations Scaling Distance Rotation Vance Lucas (@vlucas) http://brightb.it 59Tuesday, May 31, 2011
  60. 60. Vance Lucas (@vlucas) http://brightb.it 60Tuesday, May 31, 2011
  61. 61. 2D Matrix Luckily, Titanium has useful helpers... scale, rotate, invert, multiply, translate Automatic degree to radian conversion Vance Lucas (@vlucas) http://brightb.it 61Tuesday, May 31, 2011
  62. 62. 3D Matrix 3D Matrices also have helpers... Vance Lucas (@vlucas) http://brightb.it 62Tuesday, May 31, 2011
  63. 63. No Math Required! Still should read up on Matrices and how they apply to 3D transformations and game design Will pay dividends in understanding how matrix transformations work and why Helps to know what operation to perform to get the desired result What will inverting do? multiplying? There is always the “trial & error” method too... Vance Lucas (@vlucas) http://brightb.it 63Tuesday, May 31, 2011
  64. 64. Modules Native Add-Ons Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  65. 65. Custom Modules Create custom modules with native code that maps to Javascript APIs in Titanium Android - Java iOS - Obj-C BlackBerry - Java Vance Lucas (@vlucas) http://brightb.it 65Tuesday, May 31, 2011
  66. 66. Titanium+Plus Modules Vance Lucas (@vlucas) http://brightb.it 66Tuesday, May 31, 2011
  67. 67. Drawbacks Watch that First Step... Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  68. 68. Testing A lot of testing is “trial and error” style Some UI components and options are iOS-only, and cause crashes in Android No warning during compile cycle for using incompatible components Appcelerator has said improvements are coming Vance Lucas (@vlucas) http://brightb.it 68Tuesday, May 31, 2011
  69. 69. Debugging Debug stack traces from published app crashes are USELESS, because you didn’t write the code The most you can do is get support from Appcelerator by sending in or posting your stack traces Vance Lucas (@vlucas) http://brightb.it 69Tuesday, May 31, 2011
  70. 70. Sources Open and Available for Use Vance Lucas (@vlucas) http://brightb.itTuesday, May 31, 2011
  71. 71. Sources Platform: http://appcelerator.com Animation Guide: http://wiki.appcelerator.org/display/guides/Animations+in+Action API Docs: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.3DMatrix-object Animation Images: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/ Matrix Images: http://en.wikipedia.org/wiki/Matrix_(mathematics) Matrix Math: http://gpwiki.org/index.php/Matrix_math Vance Lucas (@vlucas) http://brightb.it 71Tuesday, May 31, 2011
  72. 72. hello@brightb.it (405) 595-0101 http://brightb.it Oklahoma CityTuesday, May 31, 2011

×