Jeff Goldman eLearning Designer Adding More “Character” To Your e-Learning JOHNS HOPKINS MEDICINE…
Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training...
-
Upload
vanessa-knight -
Category
Documents
-
view
225 -
download
0
Transcript of Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training...
![Page 1: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/1.jpg)
Jeff BatteLearning Brothers
Product Development ManagerB.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript
Jeff BatteLearning Brothers
Product Development Manager
![Page 2: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/2.jpg)
www.kinetic-media.com
www.youtube.com/jeffbatt01 twitter.com/jeffbatt01
My Approach
• How to guy - Focus on how you use the tools
• Everyone is on a different level - I’m starting at the beginning
• Tutorials about everything will be found on my blog (www.kinetic-media.com)
![Page 3: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/3.jpg)
Download Files
Files to download: http://kinetic-media.com/downloads-titanium/
![Page 4: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/4.jpg)
Session Objectives
• What is Appcelerator Titanium?• Where to get Titanium
• Windows and views
• Creating labels
• Creating image views
• Creating a button
• Creating a switch
• Adding interactivity
• Creating tables
• Adding interactivity in tables
• Playing sound
• Playing video
• Swiping events
![Page 5: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/5.jpg)
Differences between Titanium & Phonegap
Appcelerator TitaniumjQuery Mobile & Phonegap
![Page 6: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/6.jpg)
Alloy VS Classic
VS
Alloy Classic
![Page 7: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/7.jpg)
Alloy - MVC
index.xml
index.jsindex.tss
![Page 8: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/8.jpg)
Starting a New Project
![Page 9: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/9.jpg)
Starting a New Project
Classic:Alloy:
![Page 10: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/10.jpg)
Creating a Window
Classic Code:app.js
//Establish the window and colorvar window = Titanium.UI.createWindow({
backgroundColor:'red'});
//Open the windowwindow.open();
![Page 11: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/11.jpg)
Creating a Window
Alloy Code:index.xml
<Alloy><Window class="container">
</Window></Alloy>
index.tss
".container": {backgroundColor:"red"
}
![Page 12: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/12.jpg)
Windows and Views
Window 1
View 1
View 2
View 3
![Page 13: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/13.jpg)
Different Types of Views
Window 1
Image View
Table View
Scroll View
![Page 14: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/14.jpg)
Analogy - Creating Objects then Adding to Window
Get the Actor
var actor = Ti.UI.createView({
});
Get the Object
![Page 15: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/15.jpg)
Analogy - Creating Objects then Adding to Window
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
![Page 16: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/16.jpg)
Analogy - Creating Objects then Adding to Window
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');
})
![Page 17: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/17.jpg)
Analogy - Creating Objects then Adding to Window
<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
}
![Page 18: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/18.jpg)
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);
![Page 19: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/19.jpg)
Creating a View
Alloy Code:index.xml
<Alloy><Window class="container">
<View id="view" /></Window>
</Alloy>
index.tss
".container": {backgroundColor:"white"
},
"#view": {backgroundColor:"red",width: 50,height: 50,top: 10
}
![Page 20: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/20.jpg)
Adding Objects to a View
Classic Code:app.js
//Create the view and it's attributesvar view1 = Ti.UI.createView({
backgroundColor:'red',width:100,height:100,top:20
});
//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);
//Add the view to the window or viewwindow.add(view1);
![Page 21: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/21.jpg)
Adding Objects to a View
Alloy Code:index.xml
index.tss
<View id="view"><View id="view2"></View>
</View>
"#view": {backgroundColor:"red",width: 50,height: 50,top: 10
}
"#view2": {backgroundColor:"black",width: 20,height: 20,top: 5
}
![Page 22: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/22.jpg)
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)
![Page 23: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/23.jpg)
Adding Content to Views - Creating Labels
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"
}
![Page 24: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/24.jpg)
Adding Content to Views - Creating Labels
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" />
![Page 25: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/25.jpg)
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);
![Page 26: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/26.jpg)
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
![Page 27: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/27.jpg)
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');
})
![Page 28: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/28.jpg)
Adding Event Listeners
Alloy Code:index.xml
index.js
<ImageView id="image" onClick="doClick" image="images/Checkmark.png" />
function doClick(e) { alert("This is a test");}
![Page 29: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/29.jpg)
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')
})
![Page 30: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/30.jpg)
Adding Content to Views - Creating a Button
Alloy Code:index.xml
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
}
![Page 31: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/31.jpg)
Adding Content to Views - Creating a CUSTOM Button
Classic Code:app.js
var button = Ti.UI.createButton({title:'Click Me',
//Establish Up imagebackgroundImage:'images/btn_up.png',
//Establish Selected imagebackgroundSelectedImage: 'images/btn_down.png',top: 10,width: 260,height: 95
});
window.add(button);
button.addEventListener('click', function(){alert('You clicked me')
})
![Page 32: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/32.jpg)
Adding Content to Views - Creating a CUSTOM Button
Alloy Code:index.xml
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
![Page 33: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/33.jpg)
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)
})
![Page 34: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/34.jpg)
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);}
![Page 35: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/35.jpg)
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);
![Page 36: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/36.jpg)
Adding Content to Views - Creating a Text Field
Alloy Code:index.xml
index.tss
<TextField id="textField" />
"#textField": {borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,color: "#336699",top: 10, left: 10,width: 250, height: 60
}
![Page 37: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/37.jpg)
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);
![Page 38: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/38.jpg)
Creating Tables
Alloy Code:index.xml
<TableView id="table"><TableViewRow title="Apple"/><TableViewRow title="Bananas"/><TableViewRow title="Carrots"/><TableViewRow title="Potatoes"/></TableView>
![Page 39: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/39.jpg)
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')}
})
![Page 40: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/40.jpg)
Adding Events to Tables
Alloy Code:index.xml
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') }}
![Page 41: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/41.jpg)
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);
![Page 42: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/42.jpg)
Creating Tables Sections
Alloy Code:index.xml
<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>
![Page 43: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/43.jpg)
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();
![Page 44: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/44.jpg)
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 id="window2" title="Tab 2"><Label>I am Window 2</Label>
</Window></Tab>
</TabGroup>
index.tss
"#window1":{backgroundColor:"white"
},"#window2":{
backgroundColor:"white"}
![Page 45: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/45.jpg)
Creating a Web View
Classic Code:app.js
var webView = Ti.UI.createWebView({url:'http://www.kinetic-media.com/jquery'
});
window.add(webView);
![Page 46: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/46.jpg)
Creating a Web View
Alloy Code:index.xml
<WebView id="webview" url="http://www.kinetic-media.com/jquery" />
![Page 47: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/47.jpg)
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);
![Page 48: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/48.jpg)
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
![Page 49: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/49.jpg)
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();
![Page 50: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/50.jpg)
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 Code:index.xml
![Page 51: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/51.jpg)
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();
![Page 52: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/52.jpg)
Playing Sound
**NOTE** Alloy assets have to be within the assets folder
Alloy Code:index.xml
index.js
<Button id="button" onClick="doClick" title="Hello"/>
var player = Ti.Media.createSound({url:'audio/start_race.mp3'
})
player.play();
![Page 53: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/53.jpg)
Playing Sound in a Function
Classic Code:app.js
image = Ti.UI.createImageView({image: 'images/Checkmark.png'
})
var player = Ti.Media.createSound({url:'audio/Wrong.mp3'
})
window.add(image);
image.addEventListener('click', function(){player.play();
});
**NOTE** Classic assets have to be within the a folder
![Page 54: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/54.jpg)
Playing Sound in a Function
Alloy Code:index.xml
index.js
<Button id="button" onClick="doClick" title="Hello"/>
var player = Ti.Media.createSound({url:'audio/Wrong.mp3'
})
function doClick(e) { player.play();}
**NOTE** Alloy assets have to be within the assets folder
![Page 55: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/55.jpg)
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);
![Page 56: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/56.jpg)
Playing Video
Alloy Code:index.xml
index.tss
**NOTE** Alloy assets have to be within the assets folder
<VideoPlayer id="videoPlayer" ns="Ti.Media" url="video/Silly_Walks.mp4" autoplay="true" />
"#videoPlayer": {top:2,height:300,width:300,backgroundColor: 'black'
}
![Page 57: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/57.jpg)
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')}
})
![Page 58: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/58.jpg)
Swiping Events
Alloy Code:index.xml
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')}
}
![Page 59: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/59.jpg)
Two Finger Tap
window.addEventListener('twofingertap', function(e){alert('Two fingers')
})
Classic Code:app.js
![Page 60: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/60.jpg)
Two Finger Tap
<Window class="container" onTwofingertap="twoFingers">
</Window>
Alloy Code:index.xml
index.js
function twoFingers(){alert("Two fingers");
}
![Page 61: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/61.jpg)
Shake Events
Classic Code:app.js
Titanium.Gesture.addEventListener('shake', function(e){alert('Stop shaking me')
})
![Page 62: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/62.jpg)
Shake Events
Alloy Code:index.js
Titanium.Gesture.addEventListener('shake', function(e){alert('Stop shaking me')
})
![Page 63: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/63.jpg)
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
![Page 64: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/64.jpg)
Toolbar
Alloy Code:index.xml
<Alloy> <Window class="container"> <Toolbar platform="ios" bottom="0" borderTop="true" borderBottom="false" barColor="#000">
<!-- The Items tag sets the Toolbar.items property. --> <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>
<!-- Place additional views for the Toolbar here. -->
</Toolbar>
<Label id="label">I am Window 1</Label> </Window>
</Alloy>
![Page 65: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/65.jpg)
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();
![Page 66: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/66.jpg)
Tabbed Bar
Alloy Code: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>
![Page 67: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/67.jpg)
Picker
app.js
Ti.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;
win.add(picker);win.open();
// must be after picker has been displayedpicker.setSelectedRow(0, 2, false); // select Mangos
Classic Code:
![Page 68: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/68.jpg)
Toolbar
Alloy Code: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> <!-- Picker shorthand notation --> <Column id="column2"> <Row title="red"/> <Row title="green"/> <Row title="blue"/> <Row title="orange"/> </Column> </Picker> </Window></Alloy>
![Page 69: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/69.jpg)
Custom Alerts
Classic Code:app.js
var window = Titanium.UI.createWindow({backgroundColor:'#ffffff'
});
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();
![Page 70: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/70.jpg)
Custom Alerts
Classic Code:app.js
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'
});
window.addEventListener('click', function(e){ 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();
![Page 71: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/71.jpg)
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();
![Page 72: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/72.jpg)
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);
![Page 73: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/73.jpg)
Opening Up Another Page - Part 1 XML
Alloy Code: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>
![Page 74: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/74.jpg)
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"
}
![Page 75: Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning.](https://reader036.fdocuments.net/reader036/viewer/2022062408/56649ebe5503460f94bc8b36/html5/thumbnails/75.jpg)
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();
};