Titanium Kickstart     My First App     Alessio Ricco        @alessioricco              1
Creating an app       2
Choosing a template         3
Application files structure            4
tiapp.xml    5
tiapp.xmlis an XML configuration file thatTitanium uses to generate native      resources and code.Many of the configurations...
Manifest   7
Running on iPhone simulator             8
Running on Android simulator             9
Running on Mobile web simulator               10
Running on Chrome        11
Check version                    Check                   Platform             Cross Platform             Code Branching   ...
Each tab own a                      Window                      Tab creation              Adding Tab to               TabG...
Create a Window                 Create a Widget                      Event Listener        is a Window reference          ...
Factory Pattern     var tab = Ti.UI.CreateTab({         title: L(‘home’),         icon:’/images/KS_nav_ui.png’,         wi...
CommonJSTitanium Mobile is moving toward the adoption of the CommonJSmodule specification as the way in which end users of ...
Javascript Modules: exportstestModule.jsexports.sayHello = function(name) {    Ti.API.info(Hello +name+!);};exports.versio...
Javascript Modules: module.exportspersonModule.jsfunction Person(firstName,lastName) {    this.firstName = firstName;     ...
Localization   Localized strings are replaced at runtime with values appropriate to the users language.   Titanium relies ...
Localization: xml   <?xml version="1.0" encoding="UTF-8"?>   <resources>       <string name="user_agent_message">user agen...
Localization: usagevar str1 = L(welcome_message);var str2 = Ti.Locale.getString(welcome_message);// str1 === str2         ...
Localization: usage var label = Ti.UI.createLabel({ ! titleid: welcome_message }); /* * is equivalent to *   var label = T...
Localization: usagevar formatted = String.format(L(format_test),Kevin);// contains Your name is Kevinvar formatted = Strin...
Titanium Mobile WEB•   NATIVE - access to the hardware features of the    device. Apps can be run without a live network  ...
Titanium Mobile WEB•   Titanium Mobile SDK version 2.0 or newer•   Emulator Preview supported (Android)•   Common UI eleme...
References•   http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/Hello_World•   http://docs.appcelerator.com/tit...
Upcoming SlideShare
Loading in …5
×

Titanium appcelerator my first app

7,552 views

Published on

an introduction to titanium mobile
(cross platform programming seminar at university of pisa, july 2012)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,552
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
119
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Titanium appcelerator my first app

    1. 1. Titanium Kickstart My First App Alessio Ricco @alessioricco 1
    2. 2. Creating an app 2
    3. 3. Choosing a template 3
    4. 4. Application files structure 4
    5. 5. tiapp.xml 5
    6. 6. tiapp.xmlis an XML configuration file thatTitanium uses to generate native resources and code.Many of the configurations that lives in tiapp.xml are CROSS- PLATFORM, but some are platform specific as well 6
    7. 7. Manifest 7
    8. 8. Running on iPhone simulator 8
    9. 9. Running on Android simulator 9
    10. 10. Running on Mobile web simulator 10
    11. 11. Running on Chrome 11
    12. 12. Check version Check Platform Cross Platform Code Branching Main callApp.js 12
    13. 13. Each tab own a Window Tab creation Adding Tab to TabGroup CommonJSApplicationWindow.js 13
    14. 14. Create a Window Create a Widget Event Listener is a Window reference commonJSApplicationWindow.js 14
    15. 15. Factory Pattern var tab = Ti.UI.CreateTab({ title: L(‘home’), icon:’/images/KS_nav_ui.png’, window: win1 })When creating your own functions, you might want to take this convention one step further byadding the Titanium base class to the end of your component type. So you might have functionnames that follow the convention "create"+business view type+Titanium basecomponent: var o = CreateMainApplicationWindow(properties); 15
    16. 16. CommonJSTitanium Mobile is moving toward the adoption of the CommonJSmodule specification as the way in which end users of the platformstructure their JavaScript codeexports - a free variable within a module, to which multipleproperties may be added to create a public interfacemodule.exports - an object within a module, which may bereplaced by an object representing the public interface to themoduleVariable declared within the module file are private. Anything thatneeds to be made public should be added to the exports object 16
    17. 17. Javascript Modules: exportstestModule.jsexports.sayHello = function(name) { Ti.API.info(Hello +name+!);};exports.version = 1.4;exports.author = Don Thorp;Usage:var module = require(‘testModule’);module.sayHello(‘Alex’); 17
    18. 18. Javascript Modules: module.exportspersonModule.jsfunction Person(firstName,lastName) { this.firstName = firstName; constructor this.lastName = lastName;}Person.prototype.fullName = function() { return this.firstName+ +this.lastName;};module.exports = Person;Usage:var Person = require(Person);var don = new Person(Don,Thorp);var donsName = don.fullName(); // "Don Thorp" 18
    19. 19. Localization Localized strings are replaced at runtime with values appropriate to the users language. Titanium relies on resources files and string placeholders to accomplish this task. TestoAt the top level of your Titanium project (the same level as tiapp.xml and the Resourcesdirectory), you will create a folder called i18n. Inside this folder, you will have folders for each ofthe supported languages in your application, named according to the ISO 639-1 standard. 19
    20. 20. Localization: xml <?xml version="1.0" encoding="UTF-8"?> <resources> <string name="user_agent_message">user agent set to</string> <string name="format_test">Your name is %s</string> <string name="base_ui_title">Base UI</string> <string name="controls_win_title">Controls</string> <string name="phone_win_title">Phone</string> <string name="platform_win_title">Platform</string> <string name="mashups_win_title">Mashups</string> <string name="ordered">Hi %1$s, my name is %2$s</string> </resources>String resource names (the "keys") must begin with a letter, and can contain digits, English characters,and the underscore. 20
    21. 21. Localization: usagevar str1 = L(welcome_message);var str2 = Ti.Locale.getString(welcome_message);// str1 === str2 21
    22. 22. Localization: usage var label = Ti.UI.createLabel({ ! titleid: welcome_message }); /* * is equivalent to * var label = Ti.UI.createLabel({ * text: L(welcome_message) * }); */ 22
    23. 23. Localization: usagevar formatted = String.format(L(format_test),Kevin);// contains Your name is Kevinvar formatted = String.format(L(ordered), Jeff, Kevin);// contains Hi Jeff, my name is Kevin 23
    24. 24. Titanium Mobile WEB• NATIVE - access to the hardware features of the device. Apps can be run without a live network connection• WEBAPP - mobile ready web pages. No download, great platform reach, constant network connection• HYBRID - some of all UI and business logic is written in HTML/CSS/JS within a wrapper. Limited access to device hardware, app store. Apps can be run without a live network connection 24
    25. 25. Titanium Mobile WEB• Titanium Mobile SDK version 2.0 or newer• Emulator Preview supported (Android)• Common UI elements• NO Native UI controls• CommonJS support• No platform specific components or features (notifications, iAd, some namespaces)• No Universal access to hardware sensors (e.g. camera)• No Contacts or Calendar and other O.S. specific components 25
    26. 26. References• http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/Hello_World• http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/ CommonJS_Modules_in_Titanium• http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/ Internationalization• http://docs.appcelerator.com/titanium/2.0/index.html#!/guide/ Mobile_Web_Platform_Overview• http://www.slideshare.net/alessioricco 26

    ×