The document provides an overview of creating a first app in Titanium. It discusses setting up the tiapp.xml configuration file, adding platform specific code, using CommonJS modules to organize JavaScript code, implementing localization with resource strings, and differences between developing native and mobile web apps in Titanium.

1. Titanium Kickstart
My First App
Alessio Ricco
@alessioricco
1

2. Creating an app
2

3. Choosing a template
3

4. Application files structure
4

5. tiapp.xml
5

6. tiapp.xml
is an XML configuration file that
Titanium 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. Manifest
7

8. Running on iPhone simulator
8

9. Running on Android simulator
9

10. Running on Mobile web simulator
10

11. Running on Chrome
11

12. Check version
Check
Platform
Cross Platform
Code Branching
Main call
App.js
12

13. Each tab own a
Window
Tab creation
Adding Tab to
TabGroup
CommonJS
ApplicationWindow.js
13

14. Create a Window
Create a Widget
Event Listener
is a Window reference
commonJS
ApplicationWindow.js
14

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 by
adding the Titanium 'base' class to the end of your component type. So you might have function
names that follow the convention "create"+business view type+Titanium base
component:
var o = CreateMainApplicationWindow(properties);
15

16. CommonJS
Titanium Mobile is moving toward the adoption of the CommonJS
module specification as the way in which end users of the platform
structure their JavaScript code
exports - a free variable within a module, to which multiple
properties may be added to create a public interface
module.exports - an object within a module, which may be
replaced by an object representing the public interface to the
module
Variable declared within the module file are private. Anything that
needs to be made public should be added to the exports object
16

17. Javascript Modules: exports
testModule.js
exports.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. Javascript Modules: module.exports
personModule.js
function 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. Localization
Localized strings are replaced at runtime with values appropriate to the user's language.
Titanium relies on resources files and string placeholders to accomplish this task.
Testo
At the top level of your Titanium project (the same level as tiapp.xml and the Resources
directory), you will create a folder called i18n. Inside this folder, you will have folders for each of
the supported languages in your application, named according to the ISO 639-1 standard.
19

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. Localization: usage
var str1 = L('welcome_message');
var str2 = Ti.Locale.getString('welcome_message');
// str1 === str2
21

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. Localization: usage
var formatted = String.format(L('format_test'),'Kevin');
// contains 'Your name is Kevin'
var formatted = String.format(L('ordered'), 'Jeff', 'Kevin');
// contains 'Hi Jeff, my name is Kevin'
23

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