Techday7, Cross platform application development using Appcelerator Titanium event's Getting started with Appcelerator Titanium By Naga Harish M, Lead Developer of Anubavam Technologies

1. Getting started with Titanium
- Next-Generation Mobile Platform

2. About Me…
• Naga Harish
• AnuBaVam is my company
• Appcelerator Titanium certified developer
• My Blog : ShareOurIdeas.com
• @nagaharishmovva

3. Titanium Mobile
Application Source Files
Our Application
UI API Phone API Optional Modules
Bridge - JavaScript -Java / JavaScript - Objective C
OS - Android / iPhone
Native Android App Native iOS App

4. 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

5. To start development…
• PC or Mac machine (for iOS development)
• XCode with iOS SDK
• Android SDK
• Titanium Studio with SDK

6. Small intro about Titanium Studio…
• Powerful Eclipse-based IDE
• It will help you create, run for test and deploy
(to app store)

7. Ti Studio (why it so powerful)…
• It always notifies you about latest SDK and
Studio updates .

8. Ti Studio (why it so powerful)…
• It is so smart, because it catches mistakes
immediately!

9. Ti Studio (why it so powerful)…
• Syntax highlighting

10. Ti Studio (why it so powerful)…
• Content assist and more…

11. Project structure…

12. LET’S GET INTO THE INTERESTING
PART. CODING…

13. Create Window
We can also set properties like this
win.backgroundColor="#F00";
win.setBackgroundColor("#F00");

14. Create Label

15. Create Button

16. Create Button

17. Create button with add event listener

18. Add sub view to Window or View

19. Log methods

20. Animate with UI elements
Before start
After complete

21. Every software engineer’s first program
IDE
HELLO WORLD Create new project
Folder structure
Build folder
Error handling (@ runtime)
Include JS file

22. Connect to Web Services
open( “GET|POST”, “*HTTP://URL…+”, “*TRUE|FLASE – async call+”+ )
This async parameter only for iOS

23. Connect to Web Services
• How to send data using post method?
• How to stop request

24. Keep your app fresh. Use web services
REQUEST.OPEN(“SHOW”,”DEMO”)

25. Database
• 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

26. Database code snippets
• Running SQL Queries against the DB
• We can also get number of Rows affected

27. Database code snippets
• What about SELECT Query?

28. CRUD operations
DATABASE.OPEN(“DEMO”)

29. Internationalization
• 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
http://bit.ly/TiLang

30. Our App in different languages
• strings.xml
http://bit.ly/TiLang

31. 今すぐデモ...
私のアプリケーション

32. Applying Styles using JSS
• 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

33. CSS and JSS
#idName #idname
{ {
color:#f00; color:#f00;
height:100px; height:100;
width:100px; width:100;
} text:”This is my CSS Text”;
}
.className .className
{ {
backgroundColor:#fff; backgroundColor:#fff;
} }

34. Let’s apply style
JSS {DEMO:’NOW’}

35. Cloud Service
• Create a server backed for your app instantly
• Launch and scale your app automatically
• No server coding or administration required
• Reduced Cost

36. Cloud Service (cont)
• 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
http://bit.ly/TiCloud http://bit.ly/TiCloudBook

37. Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook

38. Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook

39. Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook

40. Cloud Service (cont)
http://bit.ly/TiCloud http://bit.ly/TiCloudBook

41. Cloud Service (cont)
https://api.cloud.appcelerator.com/v1/users/create.json?key=[Key Value]
http://bit.ly/TiCloud http://bit.ly/TiCloudBook

42. Extend Ti API
• 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!
http://bit.ly/TiMarket

43. Useful Ti Modules

44. Macro
• 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..

45. Few more code snippets
File system

46. Few more code snippets (cont)…

47. Few more code snippets (cont)…
iOS
Android

48. To know more….
http://bit.ly/TiMyPage http://bit.ly/TiVimeo http://bit.ly/TiCloud
http://bit.ly/TiTutorial http://bit.ly/TiLearning http://bit.ly/Ti7Days

49. 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_objec
t_query
• https://github.com/railskarthi/acs_android_push
• https://github.com/guilhermechapiewski/titaniu
m-jasmine/

50. http://bit.ly/TiURLs

51. Naga Harish M
ShareOurIdeas.com