Kinetic Titanium

Jeff Batt
eLearning Brothers
Product Development Manager
Appelerator Titanium - Create Mobile Apps Using
Javascript, CSS & XML: Part 1
Jeff Batt
Kinetic Media
Owner / Head Trainer
jeff@kinetic-media.com
Contact info: je!@kinetic-
media.com
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 di!erence 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 Titanium jQuery 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.js index.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 dene 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 dene di!erent 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 color
var window = Titanium.UI.createWindow({
backgroundColor:'red'
});
//Open the window
window.open();
Classic:
//Establish the window and color
});
//Open the window
window.open();
Creating a Window
Alloy Code:
index.xml
<Alloy>
<Window class="container">

</Window>
</Alloy>
index.tss
".container": {
backgroundColor:"red"
}
Alloy:
index.xml:
<Alloy>

</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
Di!erent Types of Views
- Like we will learn there are many di!erent 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 dening objects to place on the stage is
similar. You rst dene which actor you want to use for your production. For the code you
choose from the di!erent objects (actors) available and then wrap them in a variable most of
the time using the Ti.UI.create...
- This isnt all you need to do. In order for them to be ready you need to dene some
attributes of how you want them to look/act.
Add Attributes to Actor
- Makeup
- Costume
- etc
backgroundColor:'red',
width:100,
height:100,
top:20
});
Add Attributes to the Object
- Width
- Height
- etc
- Just like an actor cannot just walk o! the street and portray the character you have in your
mind. You need to dene 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 denes 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
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 nal 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 dene what the actor should do with the script or in the case of
coding javascript or adding event listeners.
<Alloy>
<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 le and
nally add the script within the JS le.
Creating a View
Classic Code:
app.js
//Create the view and it's attributes
var view1 = Ti.UI.createView({
width:100,
height:100,
top:20
});
//Add the view to the window or view
window.add(view1);
Classic:
backgroundColor:'white'
});
width:100,
height:100,
top:20
});
window.add(view1);
window.open();
Creating a View
Alloy Code:
index.xml
<Alloy>
<View id="view" />
</Window>
</Alloy>
index.tss
".container": {
backgroundColor:"white"
},
"#view": {
backgroundColor:"red",
width: 50,
height: 50,
top: 10
}
Alloy:
index.xml:
<Alloy>
<View id="view" />
</Window>
</Alloy>
index.tss:
".container": {
},
"#view": {
width: 50,
height: 50,
top: 10
}
or
index.xml:
<Alloy>
<View id="view" backgroundColor="red" width="50" height="50" />
</Window>
</Alloy>
Adding Objects to a View
Classic Code:
app.js
width:100,
height:100,
top:20
});
//Create the object and its attributes
backgroundColor:'black',
width: 20,
height: 20,
top: 10
});
//Add the second object to the view not the window
view1.add(view2);
window.add(view1);
Classic:
backgroundColor:'#!!!'
});
width:100,
height:100,
top:20
});
//Create the object and its attributes
backgroundColor:'black',
width: 20,
height: 20,
top: 10
});
//Add the second object to the view not the window
view1.add(view2);
window.add(view1);
window.open();
Adding Objects to a View
Alloy Code:
index.xml
index.tss
<View id="view">
<View id="view2"></View>
</View>
"#view": {
width: 50,
height: 50,
top: 10
}
"#view2": {
backgroundColor:"black",
width: 20,
height: 20,
top: 5
}
Alloy:
index.xml:
<Alloy>
<View id="view">
<View id="view2"></View>
</View>
</Window>
</Alloy>
index.tss:
".container": {
},
"#view": {
width: 50,
height: 50,
top: 10
}
"#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 label
var 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 view
window.add(label1)
Classic:
});
//This is the code to create a label
color:'#999',
text:'This is a text',
})
window.add(label1)
window.open();
Alloy Code:
index.xml
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>
<Label id="label1">This is a text</Label>
</Window>
</Alloy>
index.tss:
".container": {
},
"#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>
<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);
Classic:
});
//Create the image and point to the le in a folder
//You can also add position or other attributes
})
//Add the image to the window or view
window.add(image);
window.open();
Adding Content to Views - Image View
Alloy Code:
index.xml
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 folder
Alloy:
index.xml:
<Alloy>
<ImageView id="image" image="images/Checkmark.png" />
</Window>
</Alloy>
index.tss:
(Optional)
"#image": {

}
Adding Event Listeners
Classic Code:
app.js
})
window.add(image);
})
Classic:
});
})
window.add(image);
//You can add an event listener to any view, window or object
})
window.open();
Adding Event Listeners
Alloy Code:
index.xml
index.js
<ImageView id="image" onClick="doClick" image="images/
Checkmark.png" />
alert("This is a test");
}
Alloy:
index.xml:
<Alloy>
<ImageView id="image" onClick="doClick" image="images/Checkmark.png" />
</Window>
</Alloy>
index.js:
}
$.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')
})
Classic:
});
//Create the button and establish it's attributes
title:'Click Me',
top: 10,
width: 100,
height: 50
});
//Add the button to the window or view
window.add(button);
//Add the function to the button that runs when clicked
})
window.open();
Adding Content to Views - Creating a Button
Alloy Code:
index.xml
index.js
<Button id="button" onClick="doClick" title="Click
Me" />
}
index.tss
"#button":{
top: 10,
width: 100,
height: 50
}
Alloy:
index.xml:
<Alloy>
<Button id="button" onClick="doClick" title="Hello"/>
</Window>
</Alloy>
index.tss:
".container": {
},
"#button":{
top: 10,
width: 100,
height: 50
}
index.js:
}
$.index.open();
Adding Content to Views - Creating a CUSTOM Button
Classic Code:
app.js
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);
})
Classic:
});
title:'Click Me',
//Establish Up image
backgroundImage:'images/btn_up.png',
//Establish Selected image
top: 10,
width: 260,
height: 95
});
window.add(button);
})
window.open();
Adding Content to Views - Creating a CUSTOM Button
Alloy Code:
index.xml
index.js
alert("Hello");
}
index.tss
"#button":{
backgroundImage: 'images/btn_up.png',
top: 10,
width: 260,
height: 95
}
**NOTE**
Alloy:
index.xml:
<Alloy>
</Window>
</Alloy>
index.tss:
".container": {
},
"#button":{
backgroundImage: 'images/btn_up.png',
top: 10,
width: 260,
height: 95
}
index.js:
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)
})
Classic:
});
//Create the switch and establish all the attributes for the switch
var basicSwitch = Ti.UI.createSwitch({
value:true,
})
//Add the switch to the window or view
window.add(basicSwitch);
//Add an event listener to re when the switch changes values
basicSwitch.addEventListener('change', function(){
alert('Switch Value: ' + basicSwitch.value)
})
window.open();
Adding Content to Views - Creating a Switch
Alloy Code:
index.xml
index.js
<Switch id="basicSwitch" value="true" onChange="outputState"/>
function outputState(e) {
alert('Switch Value: ' + e.value);
}
Alloy:
index.xml:
<Alloy>
<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);
Classic:
});
//You rst create the text eld and add all of it's attributes
var textField = Ti.UI.createTextField({
color: '#336699',
top: 10, left: 10,
})
//Add the texteld to the window or the view
window.add(textField);
window.open();
Adding Content to Views - Creating a Text Field
Alloy Code:
index.xml
index.tss
<TextField id="textField" />
"#textField": {
color: "#336699",
top: 10, left: 10,
}
Alloy:
index.xml:
<Alloy>
<TextField id="textField" />
</Window>
</Alloy>
index.tss:
".container": {
},
"#textField": {
color: "#336699",
top: 10, left: 10,
}
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);
Classic:
});
//Establish the data for the table - This is just one possible way
var tableData = [{title:'Apples'}, {title: 'Bananas'}, {title: 'Bananas'}, {title: 'Potatoes'} ];
//Create the table view and assign the data from the table data array
data: tableData
})
//Adding the table view to the window or view
window.add(table);
window.open();
Creating Tables
Alloy Code:
index.xml
<TableView id="table">
<TableViewRow title="Apple"/>
<TableViewRow title="Bananas"/>
<TableViewRow title="Carrots"/>
<TableViewRow title="Potatoes"/>
</TableView>
Alloy:
index.xml:
<Alloy>
</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){
}
})
Classic:
});
//Establish the data for the table - This is just one possible way
var tableData = [{title:'Apples'}, {title: 'Bananas'}, {title: 'Bananas'}, {title: 'Potatoes'} ];
//Create the table view and assign the data from the table data array
data: tableData
})
window.add(table);
//Adding events to the table
table.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){
}
})
window.open();
Adding Events to Tables
Alloy Code:
index.xml
index.js
<TableView id="table" onClick="tableCheck">
</TableView>
function tableCheck(e) {
if(e.index == 0){
}
}
Alloy:
index.xml:
<Alloy>
<TableView id="table" onClick="tableCheck">
<TableViewRow title="Cod"/>
<TableViewRow title="Haddock"/>
</TableView>
</Window>
</Alloy>
index.js:
function tableCheck(e) {
if(e.index == 0){
}
}
$.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'}));
data: [sectionFruit, sectionVeg]
})
window.add(table);
Classic:
});
//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 section
sectionFruit.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 section
sectionVeg.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 arrays
//Assigning both sections to the table
data: [sectionFruit, sectionVeg]
})
window.add(table);
window.open();
Creating Tables Sections
Alloy Code:
index.xml
<TableViewSection id="sectionFruit" headerTitle="Fruit">
</TableViewSection>
<TableViewSection id="sectionVeg"
headerTitle="Vegetables">
</TableViewSection>
</TableView>
Alloy:
index.xml:
<Alloy>
<TableViewSection id="sectionFruit" headerTitle="Fruit">
</TableViewSection>
<TableViewSection id="sectionVeg" headerTitle="Vegetables">
</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 Win1
var win1 = Titanium.UI.createWindow({
});
var tab1 = Titanium.UI.createTab({
icon: '/images/44-shoebox.png',
title: 'Reference',
window: win1
});
backgroundColor:'green'
});
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();
title:'Tab 1',
});
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
title:'Tab 2',
backgroundColor:'green'
});
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.open();
Creating Tabs
Alloy Code:
index.xml
<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>
</Tab>
</TabGroup>
index.tss
"#window1":{
},
"#window2":{
}
Alloy:
index.xml:
<Alloy>
<TabGroup>
<Tab title="Tab 1" icon="KS_nav_ui.png">
</Window>
</Tab>
<Tab title="Tab 2" icon="KS_nav_views.png">
</Window>
</Tab>
</TabGroup>
</Alloy>
index.tss:
".container": {
},
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
},
"#window1":{
},
"#window2":{
}
Creating a Web View
Classic Code:
app.js
var webView = Ti.UI.createWebView({
url:'http://www.kinetic-media.com/jquery'
});
window.add(webView);
Classic:
});
//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 view
window.add(webView);
window.open();
Creating a Web View
Alloy Code:
index.xml
<WebView id="webview" url="http://www.kinetic-
media.com/jquery" />
Alloy:
index.xml:
<Alloy>
<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({
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 Code:
index.xml
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="view3" backgroundColor="#48b" />
</ScrollableView>
Alloy Code:
index.xml
Alloy:
index.xml:
<Alloy>
<ScrollableView id="scrollableView" showPagingControl="true">
<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();
Classic:
});
//Create the player element and establish the path to the audio
})
//Play the audio le. This can also be within a function
player.play();
window.open();
Playing Sound
**NOTE**
Alloy Code:
index.xml
index.js
})
player.play();
Alloy:
index.xml:
<Alloy>

</Window>
</Alloy>
index.js:
})
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
})
url:'audio/Wrong.mp3'
})
window.add(buttonSound);
buttonSound.addEventListener('click', function(){
player.play();
});
**NOTE**
Classic assets have to be within the a folder
Classic:
});
var buttonSound = Ti.UI.createButton({
title: 'Play Sound',
width: 100,
height: 50
})
//Create the player element and establish the path to the audio
})
window.add(buttonSound);
//Firing the play audio when the image is tapped
buttonSound.addEventListener('click', function(){
//Play the audio le. This can also be within a function
player.play();
});
window.open();
Playing Sound in a Function
Alloy Code:
index.xml
index.js
})
player.play();
}
**NOTE**
Alloy:
index.xml:
<Alloy>
<Button id="button" onClick="doClick" title="Play Sound"/>
</Window>
</Alloy>
index.js:
})
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);
Classic:
});
//Establish the video player and add all the attributes
var 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 view
window.add(videoPlayer);
window.open();
Playing Video
Alloy Code:
index.xml
index.tss
**NOTE**
<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>
<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')
}
})
Classic:
});
//Add event listener to the object you want to swipe
window.addEventListener('swipe', function(e){
//If the swipe is left or right
}
})
window.open();
Swiping Events
Alloy Code:
index.xml
index.tss
<Alloy>
<Window class="container" onSwipe="swipeEvent">

</Window>
</Alloy>
function swipeEvent(e){
}
}
Alloy:
index.xml:
<Alloy>
<Window class="container" onSwipe="swipeEvent">

</Window>
</Alloy>
index.js:
function swipeEvent(e){
//If the swipe is left or right
}
}
Two Finger Tap
window.addEventListener('twofingertap', function(e){
alert('Two fingers')
})
Classic Code:
app.js
Classic:
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('twongertap', function(e){
alert('Two ngers')
})
window.open();
Two Finger Tap
<Window class="container" onTwofingertap="twoFingers">

</Window>
Alloy Code:
index.xml
index.js
function twoFingers(){
alert("Two fingers");
}
Alloy:
index.xml:
<Alloy>
<Window class="container" onTwongertap="twoFingers">

</Window>
</Alloy>
index.js:
function twoFingers(){
alert("Two ngers");
}
Shake Events
Classic Code:
app.js
Titanium.Gesture.addEventListener('shake', function(e)
{
alert('Stop shaking me')
})
Classic:
});
color:'#999',
text:'Shake the phone',
})
window.add(label1)
Titanium.Gesture.addEventListener('shake', function(e){
})
window.open();
Shake Events
Alloy Code:
index.js
Titanium.Gesture.addEventListener('shake', function(e)
{
})
Alloy:
index.xml:
<Alloy>
<Label id="label">Shake the phone</Label>
</Window>
</Alloy>
index.js:
Ti.Gesture.addEventListener('shake', function(e){
});
$.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');
alert('You are in LANDSCAPE_LEFT');
alert('You are in LANDSCAPE_RIGHT');
}
});
Titanium.Gesture.addEventListener('orientationchange', function(e){
}
});
Shake Events
Alloy Code:
index.js
Titanium.Gesture.addEventListener('orientationchange',
function(e){
}
});
Titanium.Gesture.addEventListener('orientationchange', function(e){
}
});
Toolbar
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:
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 exSpace = Titanium.UI.createButton({
systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var toolbar = Titanium.UI.iOS.createToolbar({
items:[send, exSpace, camera, exSpace, cancel],
bottom:0,
borderTop:true,
borderBottom:false
});
window.add(toolbar);

window.open();
Toolbar
Alloy Code:
index.xml
<Alloy>
<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>
<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
backgroundColor:'#ffffff'
});
var bb1 = Titanium.UI.iOS.createTabbedBar({
labels:['One', 'Two', 'Three'],
top:50,
style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
height:25,
width:200
});
window.add(bb1);
window.open();
Classic:
});
var bb1 = Titanium.UI.iOS.createTabbedBar({
labels:['One', 'Two', 'Three'],
top:50,
style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
height:25,
width:200
});
window.add(bb1);
window.open();
Tabbed Bar
Alloy Code:
index.xml
<Alloy>
<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>
<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 displayed
picker.setSelectedRow(0, 2, false); // select Mangos
Classic Code:
Classic:
app.js: Single Picker
Ti.UI.backgroundColor = 'white';
exitOnClose: true,
layout: 'vertical'
});
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);
win.add(picker);
win.open();
app.js: Multi-Column Picker
exitOnClose: true,
layout: 'vertical'
});
top:50,
useSpinner: 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();
picker.setSelectedRow(1, 3, false); // select Orange
app.js: Multi-Column Picker
exitOnClose: true,
layout: 'vertical'
});
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
});
win.add(picker);
win.open();
picker.addEventListener('change',function(e){
Ti.API.info("User selected date: " + e.value.toLocaleString());
});
Toolbar
Alloy Code:
index.xml
<Alloy>
<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>
<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 1
});
alert('The le has been deleted');
});
window.open();
Option 2
});
message: 'The le has been deleted',
ok: 'Okay',
});
dialog.show();
});
window.open();
Custom Alerts
Classic Code:
app.js
});
cancel:1,
buttonNames: ['Confirm', 'Cancel', 'Help'],
message: 'The file has been deleted',
});
dialog.show();
});
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):
});
cancel:1,
buttonNames: ['Conrm', 'Cancel', 'Help'],
message: 'The le has been deleted',
});
dialog.show();
});
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
title:'Main Window'
});
//Add button to first window
var b3 = Titanium.UI.createButton({
title:'Open New Win',
width:200,
height:40,
top:110
});
window.add(b3);
//Event listener to open new window
b3.addEventListener('click', function()
{
var w = Titanium.UI.createWindow({
title:'New Window',
barColor:'black',
url:'new_window.js'
});
w.open();
});

window.open();
Classic:
title:'Main Window'
});
//Add button to rst window
var b3 = Titanium.UI.createButton({
title:'Open New Win',
width:200,
height:40,
top:110
});
window.add(b3);
//Event listener to open new window
b3.addEventListener('click', function()
{
var w = Titanium.UI.createWindow({
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:'#!f',
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 Code:
index.xml
<Alloy>
<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>
<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": {
},
"#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": {
},
"#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: "#!f"
}
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();
};

Kinetic Titanium

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kinetic Titanium

Uploaded by

Copyright:

Available Formats

Jeff Batt

You might also like