titanium presentation 1

8/3/2019 Titanium Presentation 1

http://slidepdf.com/reader/full/titanium-presentation-1 1/25

- Avinash J

TITANIUM MOBILE

1



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

2



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 doesn‟t 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.

3



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

4



TITANIUM – APPLICATION STRUCTURE

The constituents of a Titanium Mobile Project are

• LICENSE – Appcelerator‟s 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.

5



GETTING STARTED WITH TITANIUM

iOS

• Latest version of XCode.

• iOS SDK

• Titanium Developer / Titanium Studio

Android

• Latest Android SDK

• Titanium Developer / Titanium Studio

6



DESIGNING THE UI

• The platform independent UI (visual) components are listed in the namespace

Titanium.UI.

• The platform dependent UI components are placed under their respective platform

namespaces.

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.

7



COMMON USER INTERFACE COMPONENTS

• ActivityIndicator • AlertDialog • Button • ButtonBar

• CoverFlowView • DashboardItem • DashboardView • EmailDialog

• ImageView • Label • OptionDialog • Picker

• Picker • PickerColumn • PickerRow • ProgressBar

• ScrollView • ScrollableView • SearchBar • Slider

• Switch • Tab • TabGroup • TabbedBar

• TableView • TableViewRow • TableViewSection • TextArea

• TextField • Toolbar • View • WebView

•

Window•

Animation•

2DMatrix•

3DMatrix

8



CREATING & OPENING A WINDOW

// creating a window

var window = Titanium.UI.createWindow({

title : “My Window”,

exitOnClose : true /* Android Only */

});

// opening a window

window.open();

9



ADDING EVENTS

window.addEventListener (“focus”, function(e){

/* Print window‟s Title to LOG */

Ti.API.info(e.title);

});

Window Events are more useful for preparing window‟s 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 thecontext 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% .

var view = Ti.UI.createView({

/* Titanum views doesn‟t have title */

backgroundColor : “#333” });

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; /* 3 rd 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

23

• Label control is used to display static text.

• Android supports Ell ipsis 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'

});



SCROLL VIEW

24

• 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);



SCROLLABLE VIEW

25

• 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);

titanium presentation 1

Documents