$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
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
CLI and TiShadow Express! ! ! • Change backgroundColor to red and save Assignment ~ $ [sudo] npm install -g tishadow ~/Tutorial $ ti build -p ios --shadow
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>
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
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
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
(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
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
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 :)
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
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
! 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
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
@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.
• 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