Appcelerator Titanium Kinetic practices part 1

Jeff BatteLearning Brothers

Product Development ManagerAppelerator Titanium - Create Mobile Apps Using Javascript, CSS & XML: Part 1

Jeff BattKinetic Media

Owner / Head [email protected]

Contact info: [email protected]

www.kinetic-media.com

www.youtube.com/jeffbatt01 twitter.com/jeffbatt01

Access Files

Connect with me:

(www.kinetic-media.com)

Approach:• More hands on. Walk you through how to use the software instead of just talking about it.• Hard to tell who is on what level so I start from the beginning on the basic level.• Additional tutorials can be found free on my blog and YouTube channel.

Differences between Titanium & Phonegap

What is the difference between PhoneGap & Titanium?

- The basic answer is PhoneGap uses straight HTML so you have to use your own elements in CSS or use some library like jQuery but it does not allow you to use native elements like tabs, table views and other elements.


jQuery Mobile & Phonegap




Appcelerator TitaniumjQuery Mobile & Phonegap



Alloy VS Classic

VS

Alloy Classic

Alloy vs Classic?

- Alloy is a new language introduced by Appcelerator. It uses the MVC model. Although both languages can produce the same thing Alloy can do it with less code (most of the times). It also separates your code more for easier maintainability.

- It does come down to preference, which way you prefer to code.

Alloy - MVC

index.xml

index.jsindex.tss

MVC

- Alloy uses uses an MVC model. This separates the code to make it more maintainable.

- The model is used in the index.xml to define the content.

- The view is used in the index.tss to control the look of the elements. The nice thing about this is you can define different visuals based on device, and OS.

- The controller is within the index.js. This controls what happens with elements are clicked on or logic for the app.

Starting a New Project


- To start a new project simply click on File > New > Mobile Project


Classic:Alloy:

Type of Project

- Depending on the type of project you want you can select one of the default templates or just select default to start your own.

Creating a Window

Classic Code:app.js

//Establish the window and colorvar window = Titanium.UI.createWindow({ backgroundColor:'red'});

//Open the windowwindow.open();

Classic://Establish the window and colorvar window = Titanium.UI.createWindow({ backgroundColor:'red'});

//Open the windowwindow.open();

Creating a Window

Alloy Code:index.xml

<Alloy> <Window class="container"> </Window></Alloy>

index.tss

".container": { backgroundColor:"red"}

Alloy:index.xml:<Alloy> <Window class="container"> </Window></Alloy>

index.tss:".container": { backgroundColor:"red"}

Windows and Views

Windows vs Views

- There can only be 1 window open and any time but you can establish a numerous views within the window. You can either add elements to your window or to any view to group them together and then you can position your views form there.

Windows and Views

Window 1

Windows vs Views


Windows and Views

Window 1

View 1

View 2

View 3

Windows vs Views


Different Types of Views

Window 1

Image View

Table View

Scroll View

Different Types of Views

- Like we will learn there are many different types of views you can add or you can have just a normal view.

Analogy - Creating Objects then Adding to Window

Get the Actor

var actor = Ti.UI.createView({});

Get the Object

Compare to Actors on Stage/Camera

- Just like getting an actor ready for the stage defining objects to place on the stage is similar. You first define which actor you want to use for your “production”. For the code you choose from the different objects (actors) available and then wrap them in a variable most of the time using the Ti.UI.create...

- This isn’t all you need to do. In order for them to be ready you need to define some attributes of how you want them to look/act.


Add Attributes to Actor- Makeup- Costume

- etc

var actor = Ti.UI.createView({ backgroundColor:'red', width:100, height:100, top:20});

Add Attributes to the Object- Width- Height

- etc


- Just like an actor cannot just walk off the street and portray the character you have in your mind. You need to define some attributes with them. Such as costume, make up and other things. In this same way you add attributes to your objects such as width, height and others.

- This defines what the actor will look like and how they will appear but it still does not place them where they need to be.


Add the actor to the stage/camera

var actor = Ti.UI.createView({ backgroundColor:'red', width:100, height:100, top:20});

window.add(actor);

Add object to the window or view

image.addEventListener('click', function(){ alert('This is a test');})


- The final step is to place the actor on stage or on camera. This is where they need to be to be viewed by the audience. If they are not on the camera then your end audience will not see them.

- After this is done you then define what the actor should do with the script or in the case of coding javascript or adding event listeners.


<Alloy> <Window class="container"> <ImageView id="actor" onClick="doClick" image="images/Checkmark.png" /> </Window></Alloy>

XML - Get the Actor

function doClick(e) { //Tell the actor what to do}

JS - Script what the actor does

TSS - Define Attributes

"#actor":{ top: 10, width: 260, height: 95}


- Alloy works the same. You add the object in the XML then add attributes in the TSS file and finally add the script within the JS file.

Creating a View

Classic Code:app.js

//Create the view and it's attributes

var view1 = Ti.UI.createView({ backgroundColor:'red', width:100, height:100, top:20});

//Add the view to the window or view

window.add(view1);

Classic:var window = Titanium.UI.createWindow({ backgroundColor:'white'});

//Create the view and it's attributesvar view1 = Ti.UI.createView({ backgroundColor:'red', width:100, height:100, top:20});

//Add the view to the window or viewwindow.add(view1);

window.open();

Creating a View


<Alloy> <Window class="container"> <View id="view" /> </Window></Alloy>

index.tss

".container": { backgroundColor:"white"},

"#view": { backgroundColor:"red", width: 50, height: 50, top: 10}

Alloy:index.xml:<Alloy> <Window class="container"> <View id="view" /> </Window></Alloy>

index.tss:".container": { backgroundColor:"white"},


or

index.xml:<Alloy> <Window class="container"> <View id="view" backgroundColor="red" width="50" height="50" /> </Window></Alloy>

Adding Objects to a View

Classic Code:app.js


//Create the object and its attributesvar view2 = Ti.UI.createView({ backgroundColor:'black', width: 20, height: 20, top: 10});

//Add the second object to the view not the windowview1.add(view2);


Classic:var window = Titanium.UI.createWindow({ backgroundColor:'#ffffff'});


//Create the object and its attributesvar view2 = Ti.UI.createView({ backgroundColor:'black', width: 20, height: 20, top: 10});

//Add the second object to the view not the windowview1.add(view2);


window.open();

Adding Objects to a View


index.tss

<View id="view"> <View id="view2"></View></View>


"#view2": { backgroundColor:"black", width: 20, height: 20, top: 5}

Alloy:index.xml:<Alloy> <Window class="container"> <View id="view"> <View id="view2"></View> </View> </Window></Alloy>



"#view2": { backgroundColor:"black", width: 20, height: 20, top: 5}

Adding Content to Views - Creating Labels

Classic Code:app.js

//This is the code to create a labelvar label1 = Ti.UI.createLabel({ color:'#999', text:'This is a text', font:{fontSize:20, fontfamily:'Helvetica Neue'}, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, width: Ti.UI.SIZE, height: Ti.UI.SIZE,})

//You then add your label to the window or viewwindow.add(label1)


//This is the code to create a labelvar label1 = Ti.UI.createLabel({ color:'#999', text:'This is a text', font:{fontSize:20, fontfamily:'Helvetica Neue'}, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, width: Ti.UI.SIZE, height: Ti.UI.SIZE,})


window.open();



index.tss

<Label id="label1">This is a text</Label>

"#label1": { top: 30, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER}

"Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000"}

Alloy:index.xml:<Alloy> <Window class="container"> <Label id="label1">This is a text</Label> </Window></Alloy>


"#label1": { top: 30, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER}

"Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000"}


Alloy Code (Option 2):index.xml

<Label id="label1" color="#900" text="A simple label" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER"top="30" width="Ti.UI.SIZE" height="Ti.UI.SIZE" />

Alloy (Option 2):index.xml:<Alloy> <Window class="container"> <Label id="label1" color="#900" shadowColor="#aaa" text="A simple label" textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER" top="30" width="Ti.UI.SIZE" height="Ti.UI.SIZE" /> </Window></Alloy>

Adding Content to Views - Image View

Classic Code:app.js

//Create the image and point to the file in a folder

var image = Ti.UI.createImageView({ image: 'images/Checkmark.png',

//You can also add position or other attributes})

//Add the image to the window or view

window.add(image);


//Create the image and point to the file in a foldervar image = Ti.UI.createImageView({ image: 'images/Checkmark.png', //You can also add position or other attributes})

//Add the image to the window or viewwindow.add(image);

window.open();

Adding Content to Views - Image View


index.tss

<ImageView id="image" image="images/Checkmark.png" />

"#image": {}

**NOTE** Alloy assets have to be within the assets folder

//NOTE: Alloy assets have to be within the assets folderAlloy:index.xml:<Alloy> <Window class="container"> <ImageView id="image" image="images/Checkmark.png" /> </Window></Alloy>

index.tss:(Optional)"#image": { }

Adding Event Listeners

Classic Code:app.js

var image = Ti.UI.createImageView({ image: 'images/Checkmark.png',})

window.add(image);

image.addEventListener('click', function(){ alert('This is a test');})


var image = Ti.UI.createImageView({ image: 'images/Checkmark.png',})

window.add(image);

//You can add an event listener to any view, window or objectimage.addEventListener('click', function(){ alert('This is a test');})

window.open();

Adding Event Listeners


index.js

<ImageView id="image" onClick="doClick" image="images/Checkmark.png" />

function doClick(e) { alert("This is a test");}

Alloy:index.xml:<Alloy> <Window class="container"> <ImageView id="image" onClick="doClick" image="images/Checkmark.png" /> </Window></Alloy>

index.js:function doClick(e) { alert("This is a test");}

$.index.open();

Adding Content to Views - Creating a Button

Classic Code:app.js

var button = Ti.UI.createButton({ title:'Click Me', top: 10, width: 100, height: 50});

window.add(button);

button.addEventListener('click', function(){ alert('You clicked me')})


//Create the button and establish it's attributesvar button = Ti.UI.createButton({ title:'Click Me', top: 10, width: 100, height: 50});

//Add the button to the window or viewwindow.add(button);

//Add the function to the button that runs when clickedbutton.addEventListener('click', function(){ alert('You clicked me')})

window.open();

Adding Content to Views - Creating a Button


index.js

<Button id="button" onClick="doClick" title="Click Me" />

function doClick(e) { alert("This is a test");}

index.tss

"#button":{ top: 10, width: 100, height: 50}

Alloy:index.xml:<Alloy> <Window class="container"> <Button id="button" onClick="doClick" title="Hello"/> </Window></Alloy>


"#button":{ top: 10, width: 100, height: 50}

index.js:function doClick(e) { alert("This is a test");}

$.index.open();

Adding Content to Views - Creating a CUSTOM Button

Classic Code:app.js

var button = Ti.UI.createButton({ title:'Click Me', //Establish Up image backgroundImage:'images/btn_up.png', //Establish Selected image backgroundSelectedImage: 'images/btn_down.png', top: 10, width: 260, height: 95});

window.add(button);



var button = Ti.UI.createButton({ title:'Click Me', //Establish Up image backgroundImage:'images/btn_up.png', //Establish Selected image backgroundSelectedImage: 'images/btn_down.png', top: 10, width: 260, height: 95});

window.add(button);


window.open();

Adding Content to Views - Creating a CUSTOM Button


index.js

<Button id="button" onClick="doClick" title="Hello"/>

function doClick(e) { alert("Hello");}

index.tss

"#button":{ backgroundImage: 'images/btn_up.png', backgroundSelectedImage: 'images/btn_down.png', top: 10, width: 260, height: 95} **NOTE**

Alloy assets have to be within the assets folder

//NOTE: Alloy assets have to be within the assets folderAlloy:index.xml:<Alloy> <Window class="container"> <Button id="button" onClick="doClick" title="Hello"/> </Window></Alloy>


"#button":{ backgroundImage: 'images/btn_up.png', backgroundSelectedImage: 'images/btn_down.png', top: 10, width: 260, height: 95}

index.js:function doClick(e) { alert("Hello");}

$.index.open();

Adding Content to Views - Creating a Switch

Classic Code:app.js

var basicSwitch = Ti.UI.createSwitch({ value:true,})

window.add(basicSwitch);

basicSwitch.addEventListener('change', function(){ alert('Switch Value: ' + basicSwitch.value)})


//Create the switch and establish all the attributes for the switchvar basicSwitch = Ti.UI.createSwitch({ value:true,})

//Add the switch to the window or viewwindow.add(basicSwitch);

//Add an event listener to fire when the switch changes valuesbasicSwitch.addEventListener('change', function(){ alert('Switch Value: ' + basicSwitch.value)})

window.open();

Adding Content to Views - Creating a Switch


index.js

<Switch id="basicSwitch" value="true" onChange="outputState"/>

function outputState(e) { alert('Switch Value: ' + e.value);}

Alloy:index.xml:<Alloy> <Window class="container"> <Switch id="basicSwitch" value="true" onChange="outputState"/> </Window></Alloy>

index.js:function outputState(e) { alert('Switch Value: ' + e.value);}

Adding Content to Views - Creating a Text Field

Classic Code:app.js

var textField = Ti.UI.createTextField({ borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, color:’#336699’, top: 10, left: 10, width: 250, height: 60})

window.add(textField);


//You first create the text field and add all of it's attributesvar textField = Ti.UI.createTextField({ borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, color: '#336699', top: 10, left: 10, width: 250, height: 60})

//Add the textfield to the window or the viewwindow.add(textField);

window.open();

Adding Content to Views - Creating a Text Field


index.tss

<TextField id="textField" />

"#textField": { borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, color: "#336699", top: 10, left: 10, width: 250, height: 60}

Alloy:index.xml:<Alloy> <Window class="container"> <TextField id="textField" /> </Window></Alloy>


"#textField": { borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, color: "#336699", top: 10, left: 10, width: 250, height: 60}

Creating Tables

Classic Code:app.js

var tableData = [ {title:'Apples'}, {title: 'Bananas'}, {title: 'Bananas'}, {title: 'Potatoes'} ];

var table = Ti.UI.createTableView({ data: tableData})

window.add(table);


//Establish the data for the table - This is just one possible wayvar tableData = [{title:'Apples'}, {title: 'Bananas'}, {title: 'Bananas'}, {title: 'Potatoes'} ];

//Create the table view and assign the data from the table data arrayvar table = Ti.UI.createTableView({ data: tableData})

//Adding the table view to the window or viewwindow.add(table);

window.open();

Creating Tables


<TableView id="table"><TableViewRow title="Apple"/><TableViewRow title="Bananas"/><TableViewRow title="Carrots"/><TableViewRow title="Potatoes"/>

</TableView>

Alloy:index.xml:<Alloy> <Window class="container"> <TableView id="table"> <TableViewRow title="Apple"/> <TableViewRow title="Bananas"/> <TableViewRow title="Carrots"/> <TableViewRow title="Potatoes"/> </TableView> </Window></Alloy>

Adding Events to Tables

Classic Code:app.js

table.addEventListener('click', function(e){ if(e.index == 0){ alert('You clicked 1') } else if (e.index == 1){ alert('You clicked 2') }})


//Establish the data for the table - This is just one possible wayvar tableData = [{title:'Apples'}, {title: 'Bananas'}, {title: 'Bananas'}, {title: 'Potatoes'} ];

//Create the table view and assign the data from the table data arrayvar table = Ti.UI.createTableView({ data: tableData})


//Adding events to the tabletable.addEventListener('click', function(e){ //Check to see which table row was clicked and then you run the code for the table row if(e.index == 0){ alert('You clicked 1') } else if (e.index == 1){ alert('You clicked 2') }})

window.open();

Adding Events to Tables


index.js

<TableView id="table" onClick="tableCheck"><TableViewRow title="Apple"/>

</TableView>

function tableCheck(e) { if(e.index == 0){ alert('You clicked 1') } else if (e.index == 1){ alert('You clicked 2') }}

Alloy:index.xml:<Alloy> <Window class="container"> <TableView id="table" onClick="tableCheck"> <TableViewRow title="Apple"/> <TableViewRow title="Bananas"/> <TableViewRow title="Carrots"/> <TableViewRow title="Potatoes"/> <TableViewRow title="Cod"/> <TableViewRow title="Haddock"/> </TableView> </Window></Alloy>

index.js:function tableCheck(e) { if(e.index == 0){ alert('You clicked 1') } else if (e.index == 1){ alert('You clicked 2') }}

$.index.open();

Creating Tables Sections

Classic Code:app.js

var sectionFruit = Ti.UI.createTableViewSection({headerTitle: 'Fruit'});sectionFruit.add(Ti.UI.createTableViewRow({title:'Apples'}));sectionFruit.add(Ti.UI.createTableViewRow({title:'Bananas'}));

var sectionVeg = Ti.UI.createTableViewSection({headerTitle: 'Veggies'});sectionVeg.add(Ti.UI.createTableViewRow({title:'Carrots'}));sectionVeg.add(Ti.UI.createTableViewRow({title:'Potatoes'}));

var table = Ti.UI.createTableView({ data: [sectionFruit, sectionVeg]})

window.add(table);


//Creating a section for the table. This includes creating a header for the section.var sectionFruit = Ti.UI.createTableViewSection({headerTitle: 'Fruit'});//Add rows to this sectionsectionFruit.add(Ti.UI.createTableViewRow({title:'Apples'}));sectionFruit.add(Ti.UI.createTableViewRow({title:'Bananas'}));

//Creating a section for the table. This includes creating a header for the section.var sectionVeg = Ti.UI.createTableViewSection({headerTitle: 'Vegetables'});//Add rows to this sectionsectionVeg.add(Ti.UI.createTableViewRow({title:'Carrots'}));sectionVeg.add(Ti.UI.createTableViewRow({title:'Potatoes'}));

//Create the table view and assign the data from the sectionFruit and sectionVeg arraysvar table = Ti.UI.createTableView({ //Assigning both sections to the table data: [sectionFruit, sectionVeg]})


window.open();

Creating Tables Sections


<TableView id="table"><TableViewSection id="sectionFruit" headerTitle="Fruit">

<TableViewRow title="Apple"/><TableViewRow title="Bananas"/>

</TableViewSection><TableViewSection id="sectionVeg" headerTitle="Vegetables">

<TableViewRow title="Carrots"/><TableViewRow title="Potatoes"/>

</TableViewSection></TableView>

Alloy:index.xml:<Alloy> <Window class="container"> <TableView id="table"> <TableViewSection id="sectionFruit" headerTitle="Fruit"> <TableViewRow title="Apple"/> <TableViewRow title="Bananas"/> </TableViewSection> <TableViewSection id="sectionVeg" headerTitle="Vegetables"> <TableViewRow title="Carrots"/> <TableViewRow title="Potatoes"/> </TableViewSection> <TableViewSection id="sectionFish" headerTitle="Fish"> <TableViewRow title="Cod"/> <TableViewRow title="Haddock"/> </TableViewSection> </TableView> </Window></Alloy>

Creating Tabs

Classic Code:app.js

var tabsGroup = Titanium.UI.createTabGroup();

//Create the Win1var win1 = Titanium.UI.createWindow({ backgroundColor:'red'});

var tab1 = Titanium.UI.createTab({ icon: '/images/44-shoebox.png', title: 'Reference', window: win1});

var win2 = Titanium.UI.createWindow({ backgroundColor:'green'});

var tab2 = Titanium.UI.createTab({ icon: '/images/46-movie-2.png', title: 'Sample', window: win2});

tabsGroup.addTab(tab1);tabsGroup.addTab(tab2);

tabsGroup.open();

Titanium.UI.setBackgroundColor('#000');

var tabGroup = Titanium.UI.createTabGroup();

var win1 = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'red'});var tab1 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Tab 1', window:win1});

var win2 = Titanium.UI.createWindow({ title:'Tab 2', backgroundColor:'green'});var tab2 = Titanium.UI.createTab({ icon:'KS_nav_ui.png', title:'Tab 2', window:win2});

tabGroup.addTab(tab1); tabGroup.addTab(tab2);

tabGroup.open();

Creating Tabs


<TabGroup> <Tab title="Tab 1" icon="KS_nav_ui.png"> <Window id="window1" title="Tab 1"> <Label>I am Window 1</Label> </Window> </Tab> <Tab title="Tab 2" icon="KS_nav_views.png"> <Window id="window2" title="Tab 2"> <Label>I am Window 2</Label> </Window> </Tab></TabGroup>

index.tss

"#window1":{ backgroundColor:"white"},"#window2":{ backgroundColor:"white"}

Alloy:index.xml:<Alloy> <TabGroup> <Tab title="Tab 1" icon="KS_nav_ui.png"> <Window id="window1" title="Tab 1"> <Label>I am Window 1</Label> </Window> </Tab> <Tab title="Tab 2" icon="KS_nav_views.png"> <Window id="window2" title="Tab 2"> <Label>I am Window 2</Label> </Window> </Tab> </TabGroup></Alloy>

index.tss:".container": { backgroundColor:"white"},"Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000"},"#window1":{ backgroundColor:"white"},"#window2":{ backgroundColor:"white"}

Creating a Web View

Classic Code:app.js

var webView = Ti.UI.createWebView({ url:'http://www.kinetic-media.com/jquery'});

window.add(webView);


//Create a webView - The only attribute it needs is the URL but you can add other attributes.var webView = Ti.UI.createWebView({ url:'http://www.kinetic-media.com/jquery'});

//Add the webview to the window or viewwindow.add(webView);

window.open();

Creating a Web View


<WebView id="webview" url="http://www.kinetic-media.com/jquery" />

Alloy:index.xml:<Alloy> <Window class="container"> <WebView id="webview" url="http://www.kinetic-media.com/jquery" /> </Window></Alloy>

Creating a Scroll View

Classic Code:app.js

var scrollView = Ti.UI.createScrollView({ contentWidth: '80%', contentHeight: 'auto', showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false, height: '80%', width: '80%'});

var view = Ti.UI.createView({ backgroundColor:'#336699', borderRadius: 10, top: 10, height: 2000, width: 1000});

scrollView.add(view);window.add(scrollView);

Classic:var window = Ti.UI.createWindow({ backgroundColor: 'white', exitOnClose: true, fullscreen: false, title: 'ScrollView Demo'});

var scrollView = Ti.UI.createScrollView({ contentWidth: '80%', contentHeight: 'auto', showVerticalScrollIndicator: true, showHorizontalScrollIndicator: false, height: '80%', width: '80%'});

var view = Ti.UI.createView({ backgroundColor:'#336699', borderRadius: 10, top: 10, height: 2000, width: 1000});

scrollView.add(view);window.add(scrollView);window.open();

Creating a Scroll View

<ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" height="80%" width="80%">

<View id="view" backgroundColor="#336699" borderRadius="10" top="10" height="2000" width="1000" />

</ScrollView>


Alloy:index.xml:<Alloy> <Window class="container" backgroundColor="white" exitOnClose="true" fullscreen="false" title="ScrollView Demo"> <ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" height="80%" width="80%"> <View id="view" backgroundColor="#336699" borderRadius="10" top="10" height="2000" width="1000" /> </ScrollView> </Window></Alloy>

Creating a Scrollable View

Classic Code:app.js

var win = Ti.UI.createWindow();

var view1 = Ti.UI.createView({ backgroundColor:'#123' });var view2 = Ti.UI.createView({ backgroundColor:'#246' });var view3 = Ti.UI.createView({ backgroundColor:'#48b' });

var scrollableView = Ti.UI.createScrollableView({ views:[view1,view2,view3], showPagingControl:true});

win.add(scrollableView);win.open();

Classic:var win = Ti.UI.createWindow({ backgroundColor: 'white'});

var view1 = Ti.UI.createView({ backgroundColor:'#123' });var view2 = Ti.UI.createView({ backgroundColor:'#246' });var view3 = Ti.UI.createView({ backgroundColor:'#48b' });

var scrollableView = Ti.UI.createScrollableView({ views:[view1,view2,view3], showPagingControl:true});

win.add(scrollableView);win.open();

or Images

var img1 = Ti.UI.createImageView({ image:'http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/' + 'Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/' + '402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg'});var img1Wrapper = Ti.UI.createScrollView({ maxZoomScale:4.0,});img1Wrapper.add(img1);

var img2 = Ti.UI.createImageView({ image:'http://www.nasa.gov/images/content/' + '616903main_rover_comparison1600_1600-1200.jpg'});var img2Wrapper = Ti.UI.createScrollView({ maxZoomScale:4.0,});img2Wrapper.add(img2);var photosView = Ti.UI.createScrollableView({ showPagingControl:true, views:[img1Wrapper, img2Wrapper]});win.add(photosView);

Creating a Scrollable View

<ScrollableView id="scrollableView" showPagingControl="true"> <View id="view1" backgroundColor="#123" /> <View id="view2" backgroundColor="#246" /> <View id="view3" backgroundColor="#48b" /></ScrollableView>


Alloy:index.xml:<Alloy> <Window class="container"> <ScrollableView id="scrollableView" showPagingControl="true"> <View id="view1" backgroundColor="#123" /> <View id="view2" backgroundColor="#246" /> <View id="view3" backgroundColor="#48b" /> </ScrollableView> </Window></Alloy>

Playing Sound

**NOTE** Classic assets have to be within a folder

Classic Code:app.js

var player = Ti.Media.createSound({ url:'audio/start_race.mp3'})

player.play();


//Create the player element and establish the path to the audiovar player = Ti.Media.createSound({ url:'audio/start_race.mp3'})

//Play the audio file. This can also be within a functionplayer.play();

window.open();

Playing Sound



index.js


var player = Ti.Media.createSound({ url:'audio/start_race.mp3'})

player.play();

//NOTE: Alloy assets have to be within the assets folderAlloy:index.xml:<Alloy> <Window class="container"> </Window></Alloy>

index.js:var player = Ti.Media.createSound({ url:'audio/start_race.mp3'})

player.play();

$.index.open();

Playing Sound in a Function

Classic Code:app.js

var buttonSound = Ti.UI.createButton({ title: 'Play Sound', width: 100, height: 50})

var player = Ti.Media.createSound({ url:'audio/Wrong.mp3'})

window.add(buttonSound);

buttonSound.addEventListener('click', function(){ player.play();});

**NOTE** Classic assets have to be within the a folder


var buttonSound = Ti.UI.createButton({ title: 'Play Sound', width: 100, height: 50})

//Create the player element and establish the path to the audiovar player = Ti.Media.createSound({ url:'audio/Wrong.mp3'})

window.add(buttonSound);

//Firing the play audio when the image is tappedbuttonSound.addEventListener('click', function(){ //Play the audio file. This can also be within a function player.play();});

window.open();

Playing Sound in a Function


index.js


var player = Ti.Media.createSound({ url:'audio/Wrong.mp3'})

function doClick(e) { player.play();}


Alloy:index.xml:<Alloy> <Window class="container"> <Button id="button" onClick="doClick" title="Play Sound"/> </Window></Alloy>

index.js:var player = Ti.Media.createSound({ url:'audio/Wrong.mp3'})

function doClick(e) { player.play();}

Playing Video

Classic Code:app.js

**NOTE** Classic assets have to be within a folder

var videoPlayer = Ti.Media.createVideoPlayer({ url: 'video/Silly_Walks.mp4', top: 10, autoplay: false, height: 230, width: 300, mediaControlStyle: Ti.Media.VIDEO_CONTROL_DEFAULT, scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT});

window.add(videoPlayer);


//Establish the video player and add all the attributesvar videoPlayer = Ti.Media.createVideoPlayer({ //Video Location url: 'video/Silly_Walks.mp4', //Video position on the stage top: 10, //Audtoplay video autoplay: false, height: 230, width: 300, //Media controller style mediaControlStyle: Ti.Media.VIDEO_CONTROL_DEFAULT, //Video scaling mode scalingMode: Ti.Media.VIDEO_SCALING_ASPECT_FIT});

//Add the video player to the window or viewwindow.add(videoPlayer);

window.open();

Playing Video


index.tss


<VideoPlayer id="videoPlayer" ns="Ti.Media" url="video/Silly_Walks.mp4" autoplay="true" />

"#videoPlayer": { top:2, height:300, width:300, backgroundColor: 'black'}

Alloy:index.xml:<Alloy> <Window class="container"> <VideoPlayer id="videoPlayer" ns="Ti.Media" url="video/Silly_Walks.mp4" autoplay="true" /> </Window></Alloy>

index.tss:"#videoPlayer": { top:2, height:300, width:300, backgroundColor: 'black'}

Swiping Events

Classic Code:app.js

window.addEventListener('swipe', function(e){ if(e.direction == 'left'){ alert('You swiped left') } else if (e.direction == 'right'){ alert('You swiped right') }})


//Add event listener to the object you want to swipewindow.addEventListener('swipe', function(e){ //If the swipe is left or right if(e.direction == 'left'){ alert('You swiped left') } else if (e.direction == 'right'){ alert('You swiped right') }})

window.open();

Swiping Events


index.tss

<Alloy> <Window class="container" onSwipe="swipeEvent"> </Window></Alloy>

function swipeEvent(e){ if(e.direction == 'left'){ alert('You swiped left') } else if (e.direction == 'right'){ alert('You swiped right') }}

Alloy:index.xml:<Alloy> <Window class="container" onSwipe="swipeEvent"> </Window></Alloy>

index.js:function swipeEvent(e){ //If the swipe is left or right if(e.direction == 'left'){ alert('You swiped left') } else if (e.direction == 'right'){ alert('You swiped right') }}

Two Finger Tap

window.addEventListener('twofingertap', function(e){ alert('Two fingers')})

Classic Code:app.js

Classic:var window = Titanium.UI.createWindow({ backgroundColor:'white'});

//Add event listener to any object but in this example it is the window. To test in simulator hold down the option key.window.addEventListener('twofingertap', function(e){ alert('Two fingers')})

window.open();

Two Finger Tap

<Window class="container" onTwofingertap="twoFingers"> </Window>


index.js

function twoFingers(){ alert("Two fingers");}

Alloy:index.xml:<Alloy> <Window class="container" onTwofingertap="twoFingers"> </Window></Alloy>

index.js:function twoFingers(){ alert("Two fingers");}

Shake Events

Classic Code:app.js

Titanium.Gesture.addEventListener('shake', function(e){ alert('Stop shaking me')})


var label1 = Ti.UI.createLabel({ color:'#999', text:'Shake the phone', font:{fontSize:20, fontfamily:'Helvetica Neue'}, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, width: Ti.UI.SIZE, height: Ti.UI.SIZE,})



window.open();

Shake Events

Alloy Code:index.js


Alloy:index.xml:<Alloy> <Window class="container"> <Label id="label">Shake the phone</Label> </Window></Alloy>

index.js:Ti.Gesture.addEventListener('shake', function(e){ alert('Stop shaking me')});

$.index.open();

Shake Events

Classic Code:app.js

Titanium.Gesture.addEventListener('orientationchange', function(e){ if(e.orientation == 1){ alert('You are in PORTRAIT'); } else if (e.orientation == 2){ alert('You are in UPSIDE_PORTRAIT'); } else if (e.orientation == 3){ alert('You are in LANDSCAPE_LEFT'); } else if (e.orientation == 4){ alert('You are in LANDSCAPE_RIGHT'); }});


Shake Events

Alloy Code:index.js



Toolbar

var window = Titanium.UI.createWindow({ backgroundColor:'#336699', title:'Main Window'});

var send = Titanium.UI.createButton({ title: 'Send', style: Titanium.UI.iPhone.SystemButtonStyle.DONE,});

var camera = Titanium.UI.createButton({ systemButton: Titanium.UI.iPhone.SystemButton.CAMERA,});

var cancel = Titanium.UI.createButton({ systemButton: Titanium.UI.iPhone.SystemButton.CANCEL});

var flexSpace = Titanium.UI.createButton({ systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE});

var toolbar = Titanium.UI.iOS.createToolbar({ items:[send, flexSpace, camera, flexSpace, cancel], bottom:0, borderTop:true, borderBottom:false});

window.add(toolbar); window.open();

Classic Code:app.js

Classic:app.js:var window = Titanium.UI.createWindow({ backgroundColor:'#336699', title:'Main Window'});

var send = Titanium.UI.createButton({ title: 'Send', style: Titanium.UI.iPhone.SystemButtonStyle.DONE,});

var camera = Titanium.UI.createButton({ systemButton: Titanium.UI.iPhone.SystemButton.CAMERA,});

var cancel = Titanium.UI.createButton({ systemButton: Titanium.UI.iPhone.SystemButton.CANCEL});

var flexSpace = Titanium.UI.createButton({ systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE});

var toolbar = Titanium.UI.iOS.createToolbar({ items:[send, flexSpace, camera, flexSpace, cancel], bottom:0, borderTop:true, borderBottom:false});

window.add(toolbar); window.open();

Toolbar


<Alloy> <Window class="container"> <Toolbar platform="ios" bottom="0" borderTop="true" borderBottom="false" barColor="#000">

 <Items> <Button id="send" title="Send" style="Ti.UI.iPhone.SystemButtonStyle.DONE" /> <FlexSpace/> <Button id="camera" systemButton="Ti.UI.iPhone.SystemButton.CAMERA" /> <FlexSpace/> <Button id="cancel" systemButton="Ti.UI.iPhone.SystemButton.CANCEL" /> </Items>



</Toolbar>

<Label id="label">I am Window 1</Label> </Window>

</Alloy>

Alloy:index.xml:<Alloy> <Window class="container"> <Toolbar platform="ios" bottom="0" borderTop="true" borderBottom="false" barColor="#000">

 <Items> <Button id="send" title="Send" style="Ti.UI.iPhone.SystemButtonStyle.DONE" /> <FlexSpace/> <Button id="camera" systemButton="Ti.UI.iPhone.SystemButton.CAMERA" /> <FlexSpace/> <Button id="cancel" systemButton="Ti.UI.iPhone.SystemButton.CANCEL" /> </Items>



</Toolbar>

<Label id="label">I am Window 1</Label> </Window>

</Alloy>

Or for top

<Toolbar platform="ios" top="0" borderTop="true" borderBottom="false" barColor="#000">

Tabbed Bar

Classic Code:app.js

var window = Titanium.UI.createWindow({ backgroundColor:'#ffffff'});

var bb1 = Titanium.UI.iOS.createTabbedBar({ labels:['One', 'Two', 'Three'], backgroundColor:'#336699', top:50, style:Titanium.UI.iPhone.SystemButtonStyle.BAR, height:25, width:200});

window.add(bb1);

window.open();


var bb1 = Titanium.UI.iOS.createTabbedBar({ labels:['One', 'Two', 'Three'], backgroundColor:'#336699', top:50, style:Titanium.UI.iPhone.SystemButtonStyle.BAR, height:25, width:200});

window.add(bb1);

window.open();

Tabbed Bar


<Alloy> <Window class="container"> <TabbedBar id="bb1" platform="ios" backgroundColor="#336699" top="50" height="25" width="200" style="Titanium.UI.iPhone.SystemButtonStyle.BAR">

<Labels>

<Label> One</Label> <Label> Two</Label> <Label> Three</Label>

</Labels>

</TabbedBar> </Window> </Alloy>

Alloy:index.xml:<Alloy> <Window class="container"> <TabbedBar id="bb1" platform="ios" backgroundColor="#336699" top="50" height="25" width="200" style="Titanium.UI.iPhone.SystemButtonStyle.BAR">

 <Labels>

 

<Label> One</Label> <Label> Two</Label> <Label> Three</Label>

</Labels>



</TabbedBar> </Window> </Alloy>

Picker

app.js

var picker = Ti.UI.createPicker({ top:50});

var data = [];data[0]=Ti.UI.createPickerRow({title:'Bananas'});data[1]=Ti.UI.createPickerRow({title:'Strawberries'});data[2]=Ti.UI.createPickerRow({title:'Mangos'});data[3]=Ti.UI.createPickerRow({title:'Grapes'});

picker.add(data);picker.selectionIndicator = true;

win.add(picker);win.open();

// must be after picker has been displayedpicker.setSelectedRow(0, 2, false); // select Mangos

Classic Code:

Classic:app.js: Single PickerTi.UI.backgroundColor = 'white';var win = Ti.UI.createWindow({ exitOnClose: true, layout: 'vertical'});

var picker = Ti.UI.createPicker({ top:50});

var data = [];data[0]=Ti.UI.createPickerRow({title:'Bananas'});data[1]=Ti.UI.createPickerRow({title:'Strawberries'});data[2]=Ti.UI.createPickerRow({title:'Mangos'});data[3]=Ti.UI.createPickerRow({title:'Grapes'});

picker.add(data);picker.selectionIndicator = true;


// must be after picker has been displayedpicker.setSelectedRow(0, 2, false); // select Mangos

app.js: Multi-Column PickerTi.UI.backgroundColor = 'white';var win = Ti.UI.createWindow({ exitOnClose: true, layout: 'vertical'});

var picker = Ti.UI.createPicker({ top:50, useSpinner: true});picker.selectionIndicator = true;

var fruit = [ 'Bananas', 'Strawberries', 'Mangos', 'Grapes' ];var color = [ 'red', 'green', 'blue', 'orange' ];

var column1 = Ti.UI.createPickerColumn();

for(var i=0, ilen=fruit.length; i<ilen; i++){ var row = Ti.UI.createPickerRow({ title: fruit[i] }); column1.addRow(row);}

var column2 = Ti.UI.createPickerColumn();

for(var i=0, ilen=color.length; i<ilen; i++){ var row = Ti.UI.createPickerRow({ title: color[i] }); column2.addRow(row);}

picker.add([column1,column2]);

win.add(picker);

win.open();

// must be after picker has been displayedpicker.setSelectedRow(0, 2, false); // select Mangospicker.setSelectedRow(1, 3, false); // select Orange

app.js: Multi-Column PickerTi.UI.backgroundColor = 'white';var win = Ti.UI.createWindow({ exitOnClose: true, layout: 'vertical'});

var picker = Ti.UI.createPicker({ type:Ti.UI.PICKER_TYPE_DATE, minDate:new Date(2009,0,1), maxDate:new Date(2014,11,31), value:new Date(2014,3,12), top:50});


picker.addEventListener('change',function(e){ Ti.API.info("User selected date: " + e.value.toLocaleString());});

Toolbar


<Alloy> <Window class="container"> <Picker id="picker" top="50" selectionIndicator="true" useSpinner="true"> <PickerColumn id="column1"> <PickerRow title="Bananas"/> <PickerRow title="Strawberries"/> <PickerRow title="Mangos"/> <PickerRow title="Grapes"/> </PickerColumn>  <Column id="column2"> <Row title="red"/> <Row title="green"/> <Row title="blue"/> <Row title="orange"/> </Column> </Picker> </Window></Alloy>

Alloy:index.xml:<Alloy> <Window class="container"> <Picker id="picker" top="50" selectionIndicator="true" useSpinner="true"> <PickerColumn id="column1"> <PickerRow title="Bananas"/> <PickerRow title="Strawberries"/> <PickerRow title="Mangos"/> <PickerRow title="Grapes"/> </PickerColumn>  <Column id="column2"> <Row title="red"/> <Row title="green"/> <Row title="blue"/> <Row title="orange"/> </Column> </Picker> </Window></Alloy>

index.js:$.picker.setSelectedRow(0, 2, false);$.picker.setSelectedRow(1, 3, false);

Custom Alerts

Classic Code:app.js


var dialog = Ti.UI.createAlertDialog({ message: 'The file has been deleted', ok: 'Okay', title: 'File Deleted'});

window.addEventListener('click', function(e){ dialog.show();});

window.open();

Classic:Option 1var window = Titanium.UI.createWindow({ backgroundColor:'#ffffff'});

window.addEventListener('click', function(e){ alert('The file has been deleted');});

window.open();

Option 2var window = Titanium.UI.createWindow({ backgroundColor:'#ffffff'});

var dialog = Ti.UI.createAlertDialog({ message: 'The file has been deleted', ok: 'Okay', title: 'File Deleted'});


window.open();

Custom Alerts

Classic Code:app.js


var dialog = Ti.UI.createAlertDialog({ cancel:1, buttonNames: ['Confirm', 'Cancel', 'Help'], message: 'The file has been deleted', title: 'File Deleted'});


dialog.addEventListener('click', function(e){ if(e.index === e.source.cancel){ Ti.API.info('The cancel button was clicked'); } else if (e.index === 1){ Ti.API.info('The help button was clicked'); }});

window.open();

Classic:Option 3 (Three Buttons):var window = Titanium.UI.createWindow({ backgroundColor:'#ffffff'});

var dialog = Ti.UI.createAlertDialog({ cancel:1, buttonNames: ['Confirm', 'Cancel', 'Help'], message: 'The file has been deleted', title: 'File Deleted'});


dialog.addEventListener('click', function(e){ if(e.index === e.source.cancel){ Ti.API.info('The cancel button was clicked'); } else if (e.index === 1){ Ti.API.info('The help button was clicked'); }});

window.open();

Opening Up Another Page - Part 1

Classic Code:app.js

var window = Titanium.UI.createWindow({ backgroundColor:'#336699', title:'Main Window'});//Add button to first windowvar b3 = Titanium.UI.createButton({ title:'Open New Win', width:200, height:40, top:110});window.add(b3);

//Event listener to open new windowb3.addEventListener('click', function(){ var w = Titanium.UI.createWindow({ backgroundColor:'#336699', title:'New Window', barColor:'black', url:'new_window.js' }); w.open();}); window.open();

Classic:var window = Titanium.UI.createWindow({ backgroundColor:'#336699', title:'Main Window'});//Add button to first windowvar b3 = Titanium.UI.createButton({ title:'Open New Win', width:200, height:40, top:110});window.add(b3);

//Event listener to open new windowb3.addEventListener('click', function(){ var w = Titanium.UI.createWindow({ backgroundColor:'#336699', title:'New Window', barColor:'black', url:'new_window.js' }); w.open();}); window.open();

Opening Up Another Page - Part 2

Classic Code:new_window.js

var win = Ti.UI.currentWindow; var label = Ti.UI.createLabel({ color:'#fff', text:'test label on new window', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto', top: 20});

label.addEventListener('click', function(){ win.close();}) win.add(label);

Classic:var win = Ti.UI.currentWindow; var label = Ti.UI.createLabel({ color:'#fff', text:'test label on new window', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto', top: 20});

label.addEventListener('click', function(){ win.close();}) win.add(label);

Opening Up Another Page - Part 1 XML


<Alloy> <Window class="container"> <Label id="label" onClick="showWin1">I'm Window 1</Label> </Window></Alloy>

win2.xml

<Alloy> <Window id="container"> <Label id="thelabel" onClick="closeme">I'm Window 2</Label> </Window></Alloy>

Alloy:index.xml:<Alloy> <Window class="container"> <Label id="label" onClick="showWin1">I'm Window 1</Label> </Window></Alloy>

win2.xml:<Alloy> <Window id="container"> <Label id="thelabel" onClick="closeme">I'm Window 2</Label> </Window></Alloy>

Opening Up Another Page - Part 2 TSS

Alloy Code:index.tss

".container": { backgroundColor:"white"},"#Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000"}

win2.tss

"#container":{ backgroundColor: "#000"},"#thelabel":{ height: Ti.UI.SIZE, width: Ti.UI.SIZE, color: "#fff"}

Alloy:index.tss:".container": { backgroundColor:"white"},"#Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000"}

win2.tss:"#container":{ backgroundColor: "#000"},"#thelabel":{ height: Ti.UI.SIZE, width: Ti.UI.SIZE, color: "#fff"}

Opening Up Another Page - Part 3 JS

Alloy Code:index.js

function showWin1(e) { var w=Alloy.createController('win2').getView(); w.open();}

$.index.open();

win2.js

function closeme(){ $.container.close();};

Alloy:index.js:function showWin1(e) { var w=Alloy.createController('win2').getView(); w.open();}

$.index.open();

win2.js:function closeme(){ $.container.close();};

Software

Appcelerator Titanium Kinetic practices part 1