Titanium Alloy Tutorial
4 likes2,644 views
Slides for the open-source Titanium Alloy tutorial as taught on Dutch Mobile Conference 2014. Get the source at: https://github.com/fokkezb/tutorial
![Swift? We have Hyperloop!
OBJECTIVE-C
UITableView *myTableView = [[UITableView alloc] initWithFrame:CGRectZero
style:UITableViewStyleGrouped];
SWIFT
let myTableView: UITableView = UITableView(frame: CGRectZero, style: .Grouped)
HYPERLOOP
var myTableView = new UITableView({ frame: CGRectZero(), style: UITableView.Grouped });
TITANIUM
var myTableView = Ti.UI.createTableView({ style: Ti.UI.TableView.GROUPED });](https://image.slidesharecdn.com/slides-150821115630-lva1-app6891/85/Titanium-Alloy-Tutorial-11-320.jpg)
![• Install TiShadow!
!
!
• Run an app using CLI and TiShadow Express!
!
!
• Change backgroundColor to red and save
Assignment
~ $ [sudo] npm install -g tishadow
~/Tutorial $ ti build -p ios --shadow](https://image.slidesharecdn.com/slides-150821115630-lva1-app6891/85/Titanium-Alloy-Tutorial-32-320.jpg)
![Event Handling
• Docs > Search: Alloy XML Markup!
• HTML-like on[Event] attribute!
INDEX.XML
<Button onClick=“talkToMe” />
INDEX.JS
function talkToMe(e) {
alert(“hello world”);
}](https://image.slidesharecdn.com/slides-150821115630-lva1-app6891/85/Titanium-Alloy-Tutorial-42-320.jpg)
![No more handwork
~ $ [sudo] npm install -g ticons](https://image.slidesharecdn.com/slides-150821115630-lva1-app6891/85/Titanium-Alloy-Tutorial-61-320.jpg)
![• Study the Icons and Splash Screens guide!
• Install the ticons CLI or visit the site.!
!
!
• Reset & Switch to artwork branch and run it.!
• Generate icons and splashes using the CLI or
site on the logo.png image.!
• For splashes, find out how to prevent the logo
from being cropped.
Assignment
~ $ [sudo] npm install -g ticons](https://image.slidesharecdn.com/slides-150821115630-lva1-app6891/85/Titanium-Alloy-Tutorial-62-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (17)
![[ICOS2013] Appcelerator Titanium簡介](https://cdn.slidesharecdn.com/ss_thumbnails/20130427appceleratortitanium-130426131856-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
Similar to Titanium Alloy Tutorial (20)
Ad
More from Fokke Zandbergen (20)
Titanium Alloy Tutorial
- 3. Your instructors FokkeJason Titan Certified Instructor Self-‐employed ! @JasonKneen Titan Certified Instructor Self-‐employed ! @FokkeZB
- 4. Program • What is Titanium?! • Finding resources! • Setting up! • What is Alloy?! • Build your first app! • Using TiShadow! • Step by step assignments! • What’s next?
- 5. Titanium … and what is Appcelerator?
- 6. Founded In 2007 Mountain View London Tokyo Beijing 150 Employees $50M Mayfield, Translink, Storm, Sierra, eBay, Red Hat GSMA Global Mobile Awards 2012 Winner Gartner 2013 Magic Quadrant Highest placement in both vision and execution thereof. About Appcelerator
- 8. You’ve probably already used Titanium 600K! Developers 230M! Devices 70K! Apps
- 9. WappZapp
- 10. Native UI
- 11. Swift? We have Hyperloop! OBJECTIVE-C UITableView *myTableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped]; SWIFT let myTableView: UITableView = UITableView(frame: CGRectZero, style: .Grouped) HYPERLOOP var myTableView = new UITableView({ frame: CGRectZero(), style: UITableView.Grouped }); TITANIUM var myTableView = Ti.UI.createTableView({ style: Ti.UI.TableView.GROUPED });
- 12. Resources Where to get your information?
- 13. Resources • tidev.io/resources! ! • appcelerator.com/developers! • docs.appcelerator.com! ! • ticonf.org/#amsterdam June 28-29th, European conference! • amsterdam-titanium.nl July 2nd, every 1st Wednesday / month
- 14. • Repeat after me: “Titanium is Native”! • Bookmark tidev.io/resources! ! • Get a last-minute ticonf.org/#amsterdam Assignment
- 16. What makes Titanium? • NodeJS CLI! ! • SDK! ! • Titanium Studio (optional)! ! • Target platform SDKs
- 17. • Sign up and download Studio! • Install Studio and its dependencies! • JAVA, NodeJS, CLI, SDK! • Use the Platform Configuration Tool! • Create the Classic / Default Project! • Run in a simulator or device! • Investigate Resources/app.js Assignment
- 19. This might be confusing
- 20. Classic vs Alloy CLASSIC: APP.JS var win = Ti.UI.createWindow({backgroundColor:”white”}); win.open(); ALLOY: INDEX.XML <Alloy><Window id=“win” /></Alloy> ALLOY: INDEX.TSS “#win”: { backgroundColor: ‘white’ } ALLOY: INDEX.JS $.win.open();
- 21. Few more things Widgets Build Configuration File Built-‐ins Moment.js Backbone.js Underscore.js Sync adapters Themes Require Dynamic Styling Controller-‐less views Data-‐binding Project Configuration File Source Maps
- 22. Open Source Widgets*! * And Modules http://gitt.io
- 23. • Create the Two-tabbed Alloy Application! • Run in a simulator or device! • Compare index.xml/tss/js with classic! • Unhide the Resources folder! ! ! ! ! ! ! • Compare app.js & iphone/alloy/controllers/index.js! Assignment
- 24. Zero to App What you will build today
- 25. tiDev RSS reader
- 26. Ingredients • JSON feed: tidev.io/feed/json! • Repo: github.com/FokkeZB/Tutorial VS
- 27. • Import a clone of the repository! • File > Import > Git > .. as New Project! ! ! ! ! • Run the app! • Copy @Slides/slides.pdf to your Desktop Assignment
- 29. “If you're not using TiShadow in your Titanium projects, you might be wasting hours per week on builds. Love it.”! ! @kevinwhinnery
- 30. Compile process • Compiling for Alloy! • Compiling for Titanium! • Compiling for Xcode/Android! • Deploying to simulator/device! • Starting the app! • Running your code
- 31. Few more things Express Automated testing Rooms Spies Jasmine REPL Automatic updates Should.js Browser interface Code coverage Server hosting Screengrabbing Dynamic localisation Appify
- 32. • Install TiShadow! ! ! • Run an app using CLI and TiShadow Express! ! ! • Change backgroundColor to red and save Assignment ~ $ [sudo] npm install -g tishadow ~/Tutorial $ ti build -p ios --shadow
- 34. Views • UI components are name-spaced Ti.UI.*! • Most UI components extend Ti.UI.View! • Create components: Ti.UI.create<View>()! • In Alloy <View> ➤ Ti.UI.create<View>()! • XML attributes and TSS properties are merged and passed to the create-method.! • TSS can select by tag, id or class.! • JS can refer to $.<id>
- 35. Classic vs Alloy CLASSIC: APP.JS var win = Ti.UI.createWindow({backgroundColor:”white”}); win.open(); ALLOY: INDEX.XML <Alloy><Window id=“win” /></Alloy> ALLOY: INDEX.TSS “#win”: { backgroundColor: ‘white’ } ALLOY: INDEX.JS $.win.open();
- 36. • Reset any changes:! ! ! • Switch to window branch.! ! ! • Run the app.! • Add a Label saying Hello world.! • Give the label a class.! • Use the class to make the color red. Assignment ~/Tutorial $ git reset —-hard ~/Tutorial $ git checkout window
- 37. ListView Not the most easy component
- 38. ListViews • Docs > Search: guide: ListViews! • Docs > Search: UI.ListView! ! • “Crossing the bridge” has a toll! • ListView vs TableView! • Alloy does most of the hard work
- 39. • Study the ListViews guide.! • Compare the API doc classic & Alloy examples.! • Reset & Switch to the listview branch.! • Run the app.! • Try the first API doc Alloy example JS & TSS.! • Compare Resources/iphone/alloy/ controllers/index.js with the classic examples.! • Remove the blank icons, align the text left, reduce the sections to one and remove the headerTitle of that section. Assignment
- 41. NavigationWindow • Docs > Search: NavigationWindow! • iOS only
- 42. Event Handling • Docs > Search: Alloy XML Markup! • HTML-like on[Event] attribute! INDEX.XML <Button onClick=“talkToMe” /> INDEX.JS function talkToMe(e) { alert(“hello world”); }
- 43. Creating Controllers ~/Tutorial $ alloy generate controller detail
- 44. Using Controllers • Use <Require> to create + add in XML! • Use Alloy.createController in JS INDEX.XML <Window id=“win”> <Require src=“detail” /> </Window> INDEX.JS var detailController = Alloy.createController(‘detail’); var rootView = detailController.getView(); $.win.add(rootView);
- 45. • Study the NavigationWindow API docs.! • Reset & Switch to the navwin branch and run it.! • Wrap the Window in a NavigationWindow For Android add module=“xp.ui” attribute.! • Add an itemclick listener to the ListView.! • Create a new detail controller and make it a Window. Give both windows a title.! • On click, create a detail controller instance and open the window via NavigationWindow.! • Study lib/xp.ui.js. What happends on Android? Assignment
- 47. ☁COLLECTIONSYNC ADAPTERSTORAGE BINDINGS VIEWS Ti.UI ⚡EVENTS
- 48. • Docs > Search: Alloy Models! • Note: Older version (0.9.2)! • In Titanium JS has no DOM! ! • Instantiate a global collection: Collection tag! • Bind a collection to a loop-able view: dataCollection attribute! • Bind a model attribute to a child view property: {<attribute>} value
- 49. • Study the Alloy Data Binding guide.! • Reset & Switch to the collections branch and run it.! • Bind the feed collection to the ListSection so that the list is populated showing the title and excerpt of the items.! • Study models/feed.js and lib/alloy/sync/ json.js. How do they work? And why that second path? Assignment
- 51. WebView • Docs > Search: guide: Communication! • Docs > Search: UI.WebView! ! • Display local, remote and “inline” HTML! • Communicate via events and evalJS! ! • Displaying formatted text native is complex! • Displaying HTML in WebView is easy :)
- 52. • Study the WebView docs.! • Reset & Switch to webview branch and run it.! • Study index.xml to see how we expose the id of the model via itemId.! • Pass the model to the detail controller.! • Add a WebView to the detail Window and use the model to populate it.! • Use the model to set the title of the detail Window. Assignment
- 54. SearchBar • Docs > Search: ListViews > Search Text and View! • Docs > Search: UI.ListView (last examples)! • Docs > Search: UI.SearchBar! ! ! ! • ListView.searchView works together with ListView.searchText & ListItem.searchAbleText! !
- 55. • Study the last two ListView examples.! • Reset & switch to searchbar and run it.! • Add a SearchBar (also for Android) to the list to search on the excerpt.! • If you have time left, try to search on the content, after using the dataTransform attribute to remove HTML tags from it. HINT: Google is your friend. Assignment
- 57. NON-‐RETINA RETINA (2X) .75x 1x 1.5x 2x 3x 4x
- 58. Icons & Splashes
- 59. Platform & Density specific folders assets/iphone/images/[email protected] assets/images/image.png assets/android/images/res-mdpi/image.png assets/android/images/res-xhdpi/image.png assets/android/images/res-xhdpi/some.file ! platform/android/res/drawable-xhdpi/some.file platform/android/res/drawable-nl-port-xhdpi/some.file assets/some_dir/some.file assets/android/some_dir/some.file assets/iphone/some_dir/some.file BEST PRACTICE
- 60. Android 9-Patch
- 61. No more handwork ~ $ [sudo] npm install -g ticons
- 62. • Study the Icons and Splash Screens guide! • Install the ticons CLI or visit the site.! ! ! • Reset & Switch to artwork branch and run it.! • Generate icons and splashes using the CLI or site on the logo.png image.! • For splashes, find out how to prevent the logo from being cropped. Assignment ~ $ [sudo] npm install -g ticons
- 63. Company Confidential You are a TiDev now!
- 64. What’s next? Join the community
- 65. Join the community • Follow @appcelerator & @TiDevIO.! • Follow @FokkeZB & @JasonKneen.! • Find a local Titanium Meetup on DevMap.! • Go to a tiConf on your continent.! • Find help on the Q&A.! • Find widgets & modules on gitTio.! • Share your libraries & widgets on GitHub.
- 67. Thank you!
- 68. • Reset & Switch to master branch and run it.! • Fine-tune the app! For example:! • Replace the list title by the tiDev logo.! • Add the date and category to the list view.! • Add a button to open a blog in the browser.! • Add a button for the user to share a blog.! • Be creative! Bonus Assignment