Beruflich Dokumente
Kultur Dokumente
- Avinash J
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.
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
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.
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.
TableViewSection TextArea
ADDING EVENTS
window.addEventListener(focus, function(e){
10
11
title : my window
}); Window.open({ modal : true }); /* this window can only be a child
12
}); 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
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
16
17
18
/* 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 });
19
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
/* 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.
/* 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