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 Brothers Product Development Manager

2. Who Am I? Worked for Rapid Intake - 6 years Worked for eLearning DevCon - 6 Years (Part of it as the Director of the Conferences) Currently Product Development Manager at eLearning Brothers (Since Jan) Graduated at Utah Valley University in Digital Media - Emphasis in Web Development Passion for learning new tools Love teaching people about new technology

3. www.kinetic-media.com www.youtube.com/jeffbatt01 twitter.com/kineticmedia01 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)www.kinetic-media.com

4. Download Files Files to download: TBA

5. 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

6. Differences between Titanium & Phonegap Appcelerator TitaniumjQuery Mobile & Phonegap

7. Alloy VS Classic VS Alloy Classic

8. Alloy - MVC

9. Starting a New Project

10. Classic: Alloy:

11. Windows and Views Window 1 View 1 View 2 View 3

12. Windows and Views Window 1 Image View Table View Scroll View

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

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

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

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

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

18. 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 }

19. 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)

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

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

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

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

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

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

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

27. 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 }

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

29. Adding Content to Views - Creating a Switch Alloy Code: index.xml index.js function outputState(e) { alert('Switch Value: ' + e.value); }

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

31. 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 }

32. Creating Tables Classic Code: app.js var tableData = [ {title:'Apples'}, {title: 'Bananas'}, {title: 'Potatoes'} ]; var table = Ti.UI.createTableView({ data: tableData }) window.add(table);

33. Creating Tables Alloy Code: index.xml

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

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

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

37. Creating Tables Sections Alloy Code: index.xml

38. Creating Tables Sections Alloy Code: index.xml I am Window 1 I am Window 2

39. Creating a Web View Classic Code: app.js var webView = Ti.UI.createWebView({ url:'http://www.kinetic-media.com/jquery'http://www.kinetic-media.com/jquery' }); window.add(webView);

40. Creating a Web View Alloy Code: index.xml http://www.kinetic-media.com/jquery

41. Playing Sound **NOTE** Classic assets have to be within the a folder Classic Code: app.js var player = Ti.Media.createSound({ url:'audio/Wrong.mp3' }) player.play();

42. 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/Wrong.mp3' }) player.play();

43. 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

44. 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

45. Playing Video Classic Code: app.js **NOTE** Classic assets have to be within the 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);

46. 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' }

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

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