1 / 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 Brothers Product Development Manager. Jeff Batt eLearning Brothers Product Development Manager. My Approach. www.kinetic-media.com. twitter.com/jeffbatt01. www.youtube.com/jeffbatt01.

kessie-garrett
Download Presentation

Jeff Batt eLearning Brothers Product Development Manager

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. My Approach www.kinetic-media.com twitter.com/jeffbatt01 www.youtube.com/jeffbatt01 • 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)

  3. Download Files Files to download: http://kinetic-media.com/downloads-titanium/

  4. Session Objectives • What is Appcelerator Titanium? • Playing sound • Where to get Titanium • Playing video • Windows and views • Swiping events • Creating labels • Creating image views • Creating a button • Creating a switch • Adding interactivity • Creating tables • Adding interactivity in tables

  5. Appcelerator Titanium jQuery Mobile & Phonegap Differences between Titanium & Phonegap

  6. Alloy VS Classic Alloy Classic VS

  7. Alloy - MVC index.xml index.tss index.js

  8. Starting a New Project

  9. Starting a New Project Classic: Alloy:

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

  11. Creating a Window Alloy Code: index.xml <Alloy> <Window class="container"> </Window> </Alloy> index.tss ".container": { backgroundColor:"red" }

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

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

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

  15. Analogy - Creating Objects then Adding to Window Add Attributes to Actor - Makeup - Costume - etc Add Attributes to the Object - Width - Height - etc var actor = Ti.UI.createView({ backgroundColor:'red', width:100, height:100, top:20 });

  16. Analogy - Creating Objects then Adding to Window Add the actor to the stage/camera Add object to the window or view var actor = Ti.UI.createView({ backgroundColor:'red', width:100, height:100, top:20 }); window.add(actor); image.addEventListener('click', function(){ alert('This is a test'); })

  17. Analogy - Creating Objects then Adding to Window XML - Get the Actor <Alloy> <Window class="container"> <ImageView id="actor" onClick="doClick" image="images/Checkmark.png" /> </Window> </Alloy> TSS - Define Attributes "#actor":{ top: 10, width: 260, height: 95 } JS - Script what the actor does function doClick(e) { //Tell the actor what to do }

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

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

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

  21. Adding Objects to a View Alloy Code: index.xml <View id="view"> <View id="view2"></View> </View> index.tss "#view": { backgroundColor:"red", width: 50, height: 50, top: 10 } "#view2": { backgroundColor:"black", width: 20, height: 20, top: 5 }

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

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

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

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

  26. Adding Content to Views - Image View Alloy Code: index.xml <ImageView id="image" image="images/Checkmark.png" /> index.tss "#image": { } **NOTE** Alloy assets have to be within the assets folder

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

  28. Adding Event Listeners Alloy Code: index.xml <ImageView id="image" onClick="doClick" image="images/Checkmark.png" /> index.js function doClick(e) { alert("This is a test"); }

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

  30. Adding Content to Views - Creating a Button Alloy Code: index.xml <Button id="button" onClick="doClick" title="Click Me" /> index.js function doClick(e) { alert("This is a test"); } index.tss "#button":{ top: 10, width: 100, height: 50 }

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

  32. Adding Content to Views - Creating a CUSTOM Button Alloy Code: index.xml <Button id="button" onClick="doClick" title="Hello"/> 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

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

  34. Adding Content to Views - Creating a Switch Alloy Code: index.xml <Switch id="basicSwitch" value="true" onChange="outputState"/> index.js function outputState(e) { alert('Switch Value: '+ e.value); }

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

  36. Adding Content to Views - Creating a Text Field Alloy Code: index.xml <TextField id="textField" /> index.tss "#textField": { borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, color: "#336699", top: 10, left: 10, width: 250, height: 60 }

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

  38. Creating Tables Alloy Code: index.xml <TableView id="table"> <TableViewRow title="Apple"/> <TableViewRow title="Bananas"/> <TableViewRow title="Carrots"/> <TableViewRow title="Potatoes"/> </TableView>

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

  40. Adding Events to Tables Alloy Code: index.xml <TableView id="table" onClick="tableCheck"> <TableViewRowtitle="Apple"/> </TableView> index.js function tableCheck(e) { if(e.index == 0){ alert('You clicked 1') } else if (e.index == 1){ alert('You clicked 2') } }

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

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

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

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

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

  46. Creating a Web View Alloy Code: index.xml <WebView id="webview" url="http://www.kinetic-media.com/jquery" />

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

  48. Creating a Scroll View Alloy Code: index.xml <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>

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

  50. Creating a Scrollable View Alloy Code: index.xml <ScrollableView id="scrollableView" showPagingControl="true"> <View id="view1" backgroundColor="#123" /> <View id="view2" backgroundColor="#246" /> <View id="view3" backgroundColor="#48b" /> </ScrollableView>

More Related