Cross-Platform                            Mobile                         Development                        with Titanium ...
Who Am I?                  Vance Lucas                        http://vancelucas.com                        @vlucas        ...
Titanium?                  Open-Source native application development toolkit                  created by Appcelerator.   ...
The Titanium Promise                  Fulfilling the original promise of Java                        “Write once, run anywh...
What Does It Cost?                  NOTHING! The whole Titanium platform itself and                  all the tools require...
How Does it Work?                  Pre-Compiler                        Optimize, Analyze & Find Dependencies              ...
Titanium Environment   Vance Lucas (@vlucas)   http://brightb.it   7Tuesday, May 31, 2011
Mobile Development                  Pure Javascript with custom APIs                        UI, Network, Map, Geo-location...
Native UI Controls                  Controls and UI elements are native to the platform   Vance Lucas (@vlucas)           ...
Code Composition                  View-based and event-driven                        Fits Javascript perfectly            ...
Windows &                   Application Flow                           Navigating your App   Vance Lucas (@vlucas)       h...
Project Structure                  Resources directory has                  the “meat” of your project                  ap...
Platform-Specifics                  Special iphone and android folders will be used on                  respective platform...
Screen Densities                  iOS / iPhone (3GS vs Retina)                  Android (Cluster*@^#)   Vance Lucas (@vluc...
Windows                  Base UI structure that other views and UI widgets                  and components are placed on  ...
Code Execution Context   Vance Lucas (@vlucas)   http://brightb.it   16Tuesday, May 31, 2011
Includes                  Includes are the primary way to use global variables                  across different contexts ...
Tabs                  Tab-based apps are most                  common and the easiest to make                  Window tran...
Tabs Code Example   Vance Lucas (@vlucas)   http://brightb.it   19Tuesday, May 31, 2011
Vance Lucas (@vlucas)   http://brightb.it   20Tuesday, May 31, 2011
Sometimes                  have to                  account for                  platform                  differences    ...
Custom UI                  Much more more difficult, but very possible                  Have to create a stack of views and...
Tweetanium Mobile   Vance Lucas (@vlucas)   http://brightb.it   23Tuesday, May 31, 2011
Views                           The DIVs of Native UIs   Vance Lucas (@vlucas)        http://brightb.itTuesday, May 31, 2011
View & UI Positioning                  Views are Stackable & Nestable                  Similar to absolute-positioned HTML...
Vance Lucas (@vlucas)   http://brightb.it   26Tuesday, May 31, 2011
Stacking Views   Vance Lucas (@vlucas)   http://brightb.it   27Tuesday, May 31, 2011
UI Controls &                             Widgets                        Buttons and Tables and Pickers, oh my!   Vance Lu...
Titanium.UI Module                  Bridge to native UI components                  Everything you SEE in an app          ...
Vance Lucas (@vlucas)   http://brightb.it   30Tuesday, May 31, 2011
JSS - JS Style Sheets                  JSON-style properties for object creation are nice, but                  can be rep...
JSS Example                  Assign “id” to UI                  component and                  reference by id            ...
Events                           What to do & When to do it   Vance Lucas (@vlucas)          http://brightb.itTuesday, May...
Events and Callbacks                  “Do X when Y happens”                  Syntax is just like native Javascript        ...
Event Contexts   Vance Lucas (@vlucas)   http://brightb.it   35Tuesday, May 31, 2011
Handling Button Clicks   Vance Lucas (@vlucas)   http://brightb.it   36Tuesday, May 31, 2011
Ti.API                  TI.API                        log /info / debug / warn / error                        addEventList...
domains/list.js                  Table view lists domains in local database                  Event updates active domain o...
app.js - Defined Event   Vance Lucas (@vlucas)   http://brightb.it   39Tuesday, May 31, 2011
domains/social.js                  Event “st_social_fetchAll” fires all fetch events...                  ...which then upda...
Many Levels Deep...   Vance Lucas (@vlucas)      http://brightb.it   41Tuesday, May 31, 2011
SEMTab SEO Pro   Vance Lucas (@vlucas)    http://brightb.it   42Tuesday, May 31, 2011
APIs                           The Natives are Exposed   Vance Lucas (@vlucas)         http://brightb.itTuesday, May 31, 2...
Hardware & Extras                  Accelerometer, Geo-location, Locale, Gestures,                  Filesystem, Device Orie...
Ti.Accelerometer                  Get x, y, z coordinates of the device                  Listen to event with callback whe...
Ti.Database                  Direct API interface to SQLite database                        Pre-installed on iOS & Android...
Ti.Database Setup                  Open named database                  Create tables with standard queries   Vance Lucas ...
Iterate over Results                  Create TableView and push data into rows.                  TableView will take care ...
Ti.Network                  Talk to remote servers!                        HTTPClient                        Bonjour Servi...
Basic HTTPClient Use   Vance Lucas (@vlucas)   http://brightb.it   50Tuesday, May 31, 2011
Animations                        Easier than you might think   Vance Lucas (@vlucas)       http://brightb.itTuesday, May ...
3 Components                  Transition                        Transformation to apply                  Duration         ...
3 Types of Animations                  Basic                  2D Matrix                  3D Matrix   Vance Lucas (@vlucas)...
Basic Animation                  Simple property changes over duration                        Color, background, size, pos...
Basic Animation                  Changes view background from red to black to                  orange over 2 seconds   Van...
2D Matrix                  Rotate, scale, skew, invert                  Oh noes! Maths!   Vance Lucas (@vlucas)           ...
Proportional Rotation:                  In radians   Vance Lucas (@vlucas)            http://brightb.it   57Tuesday, May 3...
3D Matrix                  Rotate, scale, skew, invert, flip - in 3D space   Vance Lucas (@vlucas)             http://brigh...
3D Transformations                  Combine matrices to achieve transformations                  Scaling                  ...
Vance Lucas (@vlucas)   http://brightb.it   60Tuesday, May 31, 2011
2D Matrix                  Luckily, Titanium has useful helpers...                        scale, rotate, invert, multiply,...
3D Matrix                  3D Matrices also have helpers...   Vance Lucas (@vlucas)            http://brightb.it   62Tuesd...
No Math Required!                  Still should read up on Matrices and how they apply                  to 3D transformati...
Modules                            Native Add-Ons   Vance Lucas (@vlucas)     http://brightb.itTuesday, May 31, 2011
Custom Modules                  Create custom modules with native code that maps                  to Javascript APIs in Ti...
Titanium+Plus Modules   Vance Lucas (@vlucas)   http://brightb.it   66Tuesday, May 31, 2011
Drawbacks                           Watch that First Step...   Vance Lucas (@vlucas)        http://brightb.itTuesday, May ...
Testing	                  A lot of testing is “trial and error” style                  Some UI components and options are ...
Debugging                  Debug stack traces from published app crashes are                  USELESS, because you didn’t ...
Sources                           Open and Available for Use   Vance Lucas (@vlucas)          http://brightb.itTuesday, Ma...
Sources                  Platform: http://appcelerator.com                  Animation Guide: http://wiki.appcelerator.org/...
hello@brightb.it    (405) 595-0101                        http://brightb.it   Oklahoma CityTuesday, May 31, 2011
Upcoming SlideShare
Loading in...5
×

Cross-Platform Mobile Development with Titanium

14,156

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
2 Comments
11 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
14,156
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
396
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×