getting started with appcelerator alloy - cross platform mobile development - howard u class day_11
TRANSCRIPT
SYCS 402 Mobile App Development
Day 11 - SPRING 2015
Housekeeping
• Email Project Concepts by midnight tonight
• Set-up Appcelerator Cloud Service Accounts and take a screenshot of your Account page. Turn it in on thursday as an assignment
• Read chapter on Appcelerator Cloud Services to Thursday’s class, there might be a quiz
Next Assignment
• Provide an overview of you final project/application
• You can work in teams
• Choose your team wisely since the team will get a grade
DUE Feburary 24th
Assignment Information UPDATED
• 10 - IonicFramework/Kinvey Assignment
• 10 - Final Project Overview, see documentation provided in class folder on what is expected [Team] - DUE TODAY
• 10 - Screen shot of configured Appcelerator Cloud Services- See Chapter 2 in Book
• 10 - Sample Application that takes a picture from camera or photo gallery and displays it in a view
• 10 - Sample Application that shows picture location on a map
• 15 - Appcelerator Application matching functionality demonstrated in Ionic Framework App. Saving content in Appcelerator Cloud Services
• 15 - Wireframes for final project [Team]
• 10 - Attendance, Class Participation, Basic Interest in what is going on in class
• 50 - Final project [Team]
Appcelerator Overview• Continue to read Chapters in Book - if you do not
have book you will lose points on all Appcelerator assignments
• Review Backbone documentation on Models & Collection - http://backbonejs.org/#Collection
• Review Appcelerator Fugitive Application
https://github.com/aaronksaunders/alloy_fugitive
About Alloy
Alloy is the application framework by Appcelerator for Titanium. It provides a nice MVC framework for
developers that are building Titanium apps.
!http://docs.appcelerator.com/titanium/3.0/#!/guide/
Alloy_Best_Practices_and_Recommendations
Reviewing Models & Collections
• Collection is array of models
• Models are encapsulation of data
• Both are based off of BackboneJS
• Alloy has integrated this library as basis of persistence in Appcelerator Apps
• Interaction is controlled through Sync Adapters, equivalent to Services created in Ionic/Angular
SyncAdapters Support HTTP Verbs
http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Sync_Adapters_and_Migrations
SyncAdapter in Action
http://docs.appcelerato.com/titanium/3.0/#!/guide/Alloy_Sync_Adaprters_and_Migrations
Using Master Detail UI with Models & Collections
• Master/Detail is common UI/UX where list presented on one page, when user clicks row, a more detailed page is rendered
• List is constructed from the “Collection” and the detail is the specific item in the collection or the “Model”
Collection Databinding in TableView
• MVC In Action
• Specify the instance of the Collection, in this case it is a collection of “device” models.
• The “fetch” will trigger the TableView to update itself t reflect the change in the “device” collection
• The data-binding is in the “index.xml” view!
• The “fetch” is executed in the “index.js” controller
UX Using NavigationWindow and TableView on IOS
Alloy Code for Creating Controller and Opening Detail View
Controller Code for Displaying the Detail Window
UI Using Window and Label for Detail View w/Data-Binding
Alloy.Globals.openWindow
Alloy.Globals
• Best to define them in “alloy.js” file; more of a recommendation than a requirement
• A Global Namespace that is available though out your whole application
• Functions, variables and objects can all be associated with Alloy.Globals.
Alloy.Globals.closeWindow
Sample Code https://github.com/aaronksaunders/scs-‐backbonetest1
