Getting started with Titanium
- Next-Generation Mobile Platform
About Me…
• Naga Harish• AnuBaVam is my company• Appcelerator Titanium certified developer
• My Blog : ShareOurIdeas.com• @nagaharishmovva
Our Application
UI API Phone API
Bridge - JavaScript -Java / JavaScript - Objective C
OS - Android / iPhone
Native Android App Native iOS App
Optional Modules
Titanium MobileApplication Source Files
JS files to native objective code
• JS is statically analyzed• Ti’s Python build scripts interact with native SDK
tools .• Native project stub will created• JS precompiled to bytecode(Android) or inlined
in a generated C file(iOS)• Your JS and native code package together with
V8/Rhino or JavaScriptCore to interpret JS code at runtime
• PC or Mac machine (for iOS development)• XCode with iOS SDK• Android SDK• Titanium Studio with SDK
To start development…
• Powerful Eclipse-based IDE• It will help you create, run for test and deploy
(to app store)
Small intro about Titanium Studio…
• It always notifies you about latest SDK and Studio updates .
Ti Studio (why it so powerful)…
• It is so smart, because it catches mistakes immediately!
Ti Studio (why it so powerful)…
• Syntax highlighting
Ti Studio (why it so powerful)…
• Content assist and more…
Ti Studio (why it so powerful)…
Project structure…
LET’S GET INTO THE INTERESTING PART. CODING…
Create Window
We can also set properties like thiswin.backgroundColor="#F00";win.setBackgroundColor("#F00");
Create Label
Create Button
LET’S GUESS…
Create Button
Create button with add event listener
Add sub view to Window or View
Log methods
Animate with UI elementsBefore start
After complete
HELLO WORLDEvery software engineer’s first program
IDECreate new projectFolder structureBuild folderError handling (@ runtime)Include JS file
Connect to Web Services
open( “GET|POST”, “[HTTP://URL…]”, “[TRUE|FLASE – async call]”] )This async parameter only for iOS
Connect to Web Services
• How to send data using post method?
• How to stop request
REQUEST.OPEN(“SHOW”,”DEMO”)Keep your app fresh. Use web services
• Install will copy SQLite database file to device's internal storage. If file is there, it just uses the open method
• We can use Ti.App.Properties to set db install to true. For E.g. Ti.App.Properties. setBool(‘isDbInstalled’,true)
• Open will automatically open the DB to perform CRUD operations
Database
Database code snippets
• Running SQL Queries against the DB
• We can also get number of Rows affected
• What about SELECT Query?
Database code snippets
DATABASE.OPEN(“DEMO”)CRUD operations
• Create 2 letter folder inside “i18n” (18 stands for the number of letters between the first i and last n in internationalization) in root folder.
• Create Locale folder in it• In that Locale folder just keep strings.xml
Internationalization
http://bit.ly/TiLang
• strings.xml
Our App in different languages
http://bit.ly/TiLang
私のアプリケーション今すぐデモ ...
• Just like CSS, we can use this JSS to bring rich user interface to apply styles to elements.
• Yes, here also we can create “Class” and “ID”. Just like .classname or #Idname
• How to include JSS in our view?– Just retain same name for the .JSS file– For Example :- ui.js and the JSS file ui.jss
Applying Styles using JSS
CSS and JSS
#idName{ color:#f00; height:100px; width:100px;}
#idname{ color:#f00; height:100; width:100; text:”This is my CSS Text”;}
.className{backgroundColor:#fff;}
.className{ backgroundColor:#fff;}
JSS {DEMO:’NOW’}Let’s apply style
• Create a server backed for your app instantly• Launch and scale your app automatically• No server coding or administration required• Reduced Cost
Cloud Service
• Standard(Tier 1)– Users– Key Values– Photos– Custom objects– Email Templates– Push notifications
• Advanced(Tier 2)– Chat– Check-ins– Social integration– Photo Collections– Clients– Places– Status– Ratings, Reviews & Likes– Posts
Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook
Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook
Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook
Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook
Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook
Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook
https://api.cloud.appcelerator.com/v1/users/create.json?key=[Key Value]
• We can also create a Module atop Titanium using native code (Objective C or Java)
• We can get more Free/$ modules from the marketplace
• You can also contribute!
Extend Ti API
http://bit.ly/TiMarket
Useful Ti Modules
• Ti for Titanium• L for Titanium.Locale.getString• alert for Titanium.UI.createAlertDialog• And also remember about Code snippets– For e.g. :- button then {ctrl + space} and see the
magic..
Macro
File system
Few more code snippets
Few more code snippets (cont)…
Few more code snippets (cont)…
iOS
Android
To know more….http://bit.ly/TiMyPage http://bit.ly/TiVimeo http://bit.ly/TiCloud
http://bit.ly/TiLearninghttp://bit.ly/TiTutorial http://bit.ly/Ti7Days
To know more (code github)….
• https://github.com/appcelerator• https://github.com/appcelerator-developer-relations • https://github.com/BradBroulik/titanium-mvc• https://github.com/tanin47/silver• https://github.com/railskarthi/
acs_custom_object_query• https://github.com/railskarthi/acs_android_push• https://github.com/guilhermechapiewski/titanium-
jasmine/
http://bit.ly/TiURLs
Thank You
Naga Harish MShareOurIdeas.com