Sie sind auf Seite 1von 25

TITANIUM MOBILE

- Avinash J

TITANIUM MOBILE SDK


Agenda

1. Introduction
2. Titanium Architecture 3. Titanium Application Structure 4. Getting started with Titanium

5. Designing the UI
6. Handling Device orientation 7. Working with Local Data 8. Working with Remote Data

INTRODUCTION
What is Titanium Mobile?

Titanium Mobile is a set of API which can be used to build applications for iOS and Android.
Mobile Developers can only leverage their JavaScript Knowledge since Titanium doesnt use Generic JavaScript. Myth: Titanium Programs are Write Once and Run Anywhere Programs written in Titanium are not Write Once and Run Anywhere. They are Write Once and Adapt Everywhere because Only Non-Visual Part of code can alone be re-used.

The Visual Components are Platform Dependent.

TITANIUM - ARCHITECTURE
Although each platform that Titanium supports is implemented differently, it is conceptually similar in design. Titanium works by translating your JavaScript code into a native application code and then invoking the underlying platform tools to build the final package. Titanium in conceptual build with three distinctive building blocks: Pre-compiler Front-end compiler Platform compiler & packager

TITANIUM APPLICATION STRUCTURE


The constituents of a Titanium Mobile Project are

LICENSE Appcelerators License file.


License.txt This is our End-User Application License. README Project Description (not added to build). Tiapp.xml Application descriptor file.

Build directory where App specific files are kept (e.g. Resources).
Resources A folder holding the JavaScript files, images, etc. I18n An optional folder where localization resources for each language are kept.

GETTING STARTED WITH TITANIUM


iOS

Latest version of XCode.


iOS SDK Titanium Developer / Titanium Studio

Android
Latest Android SDK Titanium Developer / Titanium Studio

DESIGNING THE UI
The platform independent UI (visual) components are listed in the namespace Titanium.UI. The platform dependent UI components are namespaces. placed under their respective platform

E.g. Titanium.UI.Android, Titanium.UI.iOS, Titanium.UI.iPad. Also the visual components such as Media Player and Maps are available in separate namespaces as TI.Media & Ti.Map. Facebook API is available in Ti.Facebook.

COMMON USER INTERFACE COMPONENTS


ActivityIndicator CoverFlowView ImageView Picker ScrollView Switch TableView TextField Window AlertDialog DashboardItem Label PickerColumn ScrollableView Tab TableViewRow Toolbar Animation Button DashboardView OptionDialog PickerRow SearchBar TabGroup View 2DMatrix ButtonBar EmailDialog Picker ProgressBar Slider TabbedBar WebView 3DMatrix

TableViewSection TextArea

CREATING & OPENING A WINDOW


// creating a window

var window = Titanium.UI.createWindow({


title : My Window, exitOnClose : true }); // opening a window window.open(); /* Android Only */

ADDING EVENTS
window.addEventListener(focus, function(e){

/* Print windows Title to LOG */


Ti.API.info(e.title); });

Window Events are more useful for preparing windows contents.


Parameters can be passed and additional attributes can be set at runtime.

10

REMOVING A WINDOW FROM VIEW


window.close(); /* close the window */ Optionally one can do routines when window closes by adding a close event listener on the window. Window.addEventListener(close, function(e){ /* do something */ // pass parameters to other windows });

11

CREATING A LIGHT WEIGHT WINDOW


var window = Ti.UI.createWindow({

title : my window
}); Window.open({ modal : true }); /* this window can only be a child

and has a shared context with the parent window */


Modal window is called a light weight window in Titanium terminology. Its Light Weight since it does share the context of the parent window and does load on the context of the parent window.

12

CREATING & ADDING A VIEW


A view is a transparent / white layer which acts as a container holding other UI controls

If dimensions are not set, the default dimension is 100% X 100% .


/* Titanum views doesnt have title */ backgroundColor : #333

var view = Ti.UI.createView({

}); window.add(view); /* Adding a view to a window */ view.addEventListener(click, function(e){ /* callback function taking the Event Object(e) */ });

13

CREATING ANIMATION
var window = Ti.UI.createWindow({ backgroundColor : #555, opacity : 0.75 }); /* Creating Animation */ var animation = Ti.UI.createAnimation(); /* Applying Animation to the window */ Window.addEventListener(focus, function(e){ e.source.animate({ opacity : 1.0, duration : 1000 }); });

14

CREATE AND ADD TRANSFORMS


/* create 2D Transforms */

var t1 = Ti.UI.create2DMatrix();
/* scaling window by 150% */ var scaleWindow = t1.scale(1.5); /* Adding Transforms to Animation on Animation complete Callback */ animation1.addEventListener(complete, function(e) { e.transform = scaleWindow; window.animate(animation2); });

15

DISPLAYING ACTIVITY INDICATOR


/* create Activity Indicator */

var actInd = Titanium.UI.createActivityIndicator({


height : 50, width : 10 }); /* displaying Activity Indicator */ actInd.show(); /* Hiding activity Indicator */ actInd.hide();

16

DISPLAY ALERT MESSAGES


/* Create Alert Dialog */ var alertDialog = Titanium.UI.createAlertDialog({ title: 'Hello', message: 'You got mail', buttonNames: ['OK',CANCEL'] }); /* display Alert Dialog */ alertDialog.show(); /* Alternate Form not preferred */ alert(You got mail);

17

CREATE AND ADDING EVENTS TO BUTTONS


/* creating a button and adding it to a view */

var button = Titanium.UI.createButton({


title: 'Hello' }); View.add(button); /* Button Events */ button.addEventListener('click',function(e){ Titanium.API.info("You clicked the button"); });

18

CREATE AND DISPLAY BUTTON BAR


A Button Bar is a control where the toolbar has an array of buttons. Its functionality is similar to Tab control in Desktop Applications

/* create a Button Bar */ var bb1 = Titanium.UI.createButtonBar({ labels : ['One', 'Two', 'Three'], /* Array of Buttons */ style : Titanium.UI.iPhone.SystemButtonStyle.BAR, height:25, width:200 });

/*Adding a Button bar to a window*/


win.add(bb1);

19

BUTTON BAR EVENTS


/* Adding Events to Button Bar */

bb1.addEventListener(click, function(e){
switch(e.index){ case 0: win1.open(); break; /* 1st Button is clicked */ case 1: win2.open(); break; /* 2nd Button is clicked */ case 2: win3.open(); break; /* 3rd Button is clicked */ } });

20

COVERFLOW
Coverflow is a view which can be used for displaying carousel of images. /* creating a CoverFlow */ var gallery = Titanium.UI.createCoverFlowView({ images:['a.png','b.png','c.png'], backgroundColor:'#000' }); /* adding the CoverFlow control to a window */ window.add(gallery); /* Events for CoverFlow control */ gallery.addEventListener(change, function(e){ Ti.API.info( e.index ); }); /* index of the currently chosen image */

21

IMAGE VIEW
ImageView control holds the image(s) in Titanium. Image(s) can be loaded from an URL or Local images can be used. Supports animation ( to be used in conjunction with animation control).

/* create and add ImageView to a view */ var image = Titanium.UI.createImageView({ url : 1.png, images : [ 1.png, 2.png, 3.png ] }); view.add(image); NOTE: use either images or url and not both.

22

LABEL
Label control is used to display static text. Android supports Ellipsis character as a part of its default Droid Font.

/* creating a Label Control */ var l2 = Titanium.UI.createLabel({ text:'Appcelerator', height:'auto', width:'auto', shadowColor:'#aaa', shadowOffset:{x:5,y:5}, color:'#900', font:{fontSize:48}, textAlign:'center' });

23

SCROLL VIEW
Scrollable content is supported by Scroll View Control in Titanium

Zooming and scrolling can be controlled at will on runtime

/* creating a scrollView */ var scrollView = Titanium.UI.createScrollView({ contentWidth : 'auto', contentHeight : 'auto }); var view = Ti.UI.createView(); scrollView.add(view); window.add(scrollView);

24

SCROLLABLE VIEW
Scrollable view is similar to the Pagination Control used in Websites.

Views can be scrolled in a scrollable view


Its also called Page flow control.

/* Adding Views to a scrollableView */ var view1 = Titanium.UI.createView({backgroundColor:'#123'}); var view2 = Titanium.UI.createView({backgroundColor:'#123'}); var scrollView = Titanium.UI.createScrollableView({ views:[view1,view2], showPagingControl:true }); win.add(scrollView);

25