Jeff Batt eLearning Brothers Product Development Manager B.Y.O.L.: Titanium - Create Mobile Training as a Native App Using Javascript Jeff Batt eLearning Brothers Product Development Manager

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 (

Download Files Files to download: titanium/

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

Differences between Titanium & Phonegap Appcelerator TitaniumjQuery Mobile & Phonegap

Alloy VS Classic VS Alloy Classic

Alloy - MVC index.xml index.jsindex.tss

Starting a New Project

Classic: Alloy:

Creating a Window Classic Code: app.js //Establish the window and color var window = Titanium.UI.createWindow({ backgroundColor:'red' }); //Open the window window.open();

Creating a Window Alloy Code: index.xml index.tss ".container": { backgroundColor:"red" }

Windows and Views Window 1 View 1 View 2 View 3

Different Types of Views Window 1 Image View Table View Scroll View

Analogy - Creating Objects then Adding to Window Get the Actor var actor = Ti.UI.createView({ }); Get the Object

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

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'); })

Analogy - Creating Objects then Adding to Window 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 }

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

Creating a View Alloy Code: index.xml index.tss ".container": { backgroundColor:"white" }, "#view": { backgroundColor:"red", width: 50, height: 50, top: 10 }

Adding Objects to 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 }); //Create the object and its attributes var view2 = Ti.UI.createView({ backgroundColor:'black', width: 20, height: 20, top: 10 }); //Add the second object to the view not the window view1.add(view2); //Add the view to the window or view window.add(view1);

Adding Objects to a View Alloy Code: index.xml index.tss "#view": { backgroundColor:"red", 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)

Adding Content to Views - Creating Labels Alloy Code: index.xml index.tss This is a text "#label1": { top: 30, textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER } "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000" }

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" />

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

Adding Content to Views - Image View Alloy Code: index.xml index.tss "#image": { } **NOTE** Alloy assets have to be within the assets folder

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'); })

Adding Event Listeners Alloy Code: index.xml index.js function doClick(e) { alert("This is a test"); }

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') })

Adding Content to Views - Creating a Button Alloy Code: index.xml index.js function doClick(e) { alert("This is a test"); } index.tss "#button":{ top: 10, width: 100, height: 50 }

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); button.addEventListener('click', function(){ alert('You clicked me') })

Adding Content to Views - Creating a CUSTOM Button Alloy Code: index.xml index.js 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

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) })

Adding Content to Views - Creating a Switch Alloy Code: index.xml 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);

Adding Content to Views - Creating a Text Field Alloy Code: index.xml index.tss "#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: 'Potatoes'} ]; var table = Ti.UI.createTableView({ data: tableData }) window.add(table);

Creating Tables Alloy Code: index.xml

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') } })

Adding Events to Tables Alloy Code: index.xml index.js function tableCheck(e) { if(e.index == 0){ alert('You clicked 1') } else if (e.index == 1){ alert('You clicked 2') }

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 Tables Sections Alloy Code: index.xml

Creating Tabs Classic Code: app.js var tabsGroup = Titanium.UI.createTabGroup(); //Create the Win1 var 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();

Creating Tabs Alloy Code: index.xml I am Window 1 I am Window 2 index.tss "#window1":{ backgroundColor:"white" }, "#window2":{ backgroundColor:"white" }

Creating a Web View Classic Code: app.js var webView = Ti.UI.createWebView({ url:' }); window.add(webView);

Creating a Web View Alloy Code: index.xml

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

Creating a Scroll View Alloy Code: index.xml

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

Creating a Scrollable View Alloy Code: index.xml

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

Playing Sound **NOTE** Alloy assets have to be within the assets folder Alloy Code: index.xml index.js var player = Ti.Media.createSound({ url:'audio/start_race.mp3' }) player.play();

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

Playing Sound in a Function Alloy Code: index.xml index.js var player = Ti.Media.createSound({ url:'audio/Wrong.mp3' }) function doClick(e) { player.play(); } **NOTE** Alloy assets have to be within the assets folder

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

Playing Video Alloy Code: index.xml index.tss **NOTE** Alloy assets have to be within the assets folder "#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') } })

Swiping Events Alloy Code: index.xml index.tss function swipeEvent(e){ 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

Two Finger Tap Alloy Code: index.xml index.js function twoFingers(){ alert("Two fingers"); }

Shake Events Classic Code: app.js Titanium.Gesture.addEventListener('shake', function(e){ alert('Stop shaking me') })

Shake Events Alloy Code: index.js Titanium.Gesture.addEventListener('shake', function(e){ alert('Stop shaking me') })

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

Toolbar Alloy Code: index.xml I am Window 1

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

Tabbed Bar Alloy Code: index.xml One Two Three

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 displayed picker.setSelectedRow(0, 2, false); // select Mangos Classic Code:

Toolbar Alloy Code: index.xml

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

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

Opening Up Another Page - Part 1 Classic Code: app.js var window = Titanium.UI.createWindow({ backgroundColor:'#336699', 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({ 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);

Opening Up Another Page - Part 1 XML Alloy Code: index.xml I'm Window 1 win2.xml I'm Window 2

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" }

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(); };