This document summarizes key points from a mobile app development class. It discusses assignments that are due, including camera/image assignments and wireframes. It also reviews concepts like requiring controllers, ListViews, templates, promises, geo location, and opening new controllers and passing data between them. It provides code samples for implementing a pull to refresh feature, capturing click events in a ListView, and initializing a new controller to display details of the selected item.

1. SYCS 402 Mobile App
Development
Day 13 - 3/12/2015

2. Housekeeping
• Camera/Image View Assignment is DUE TODAY
• Wireframes or some sort of flow document is due
Thursday, if your diagram is not self-explanatory please
provide additional documentation with the wireframes -
DUE TODAY
• Final project overview document due Thursday after break
• Wires, project feature, project overview
• please include team members name on document

3. Today
• Review “require” for including controllers and external
libraries
• Review Titanium ListViews/Templates
• Integrating Promises with Appcelerator Alloy
• Geo Location & Reverse GeoLocation
• Opening new controller and passing data - IOS, will post
sample code for Android
• See: https://github.com/aaronksaunders/scs-backbonetest1

4. Including w/Require
• The “src” identifies where the controller and view
are, and the id is how the item is accessed in the
parent controller

5. Accessing functions in child
controller (PhotoListView.js)
• use the identifier, so in this example it is
“$.photoListView” which would call functions using
this format
!
// in the parent controller
$.photoListView.functionInOtherController();
!
// code in the child controller
$.functionInOtherController = function() {
// DO SOMETHING AMAZING
}

6. Alloy ListView

7. Adding the data to the
ListView

8. Adding the data to the
ListView
• Loop through the array of objects adding them to
the template
• The template has “bindId”s that are mapped to
the properties of the data objects
• The last step is to add the item to the specific
section of the ListView

9. Using gittio for Appcelerator
Modules - Pull to Refresh
• Install the javascript gittio module on your computer
npm
install
-­‐g
gittio
• Got to project directory in the terminal and install the
module in your project
gittio
install
nl.fokkezb.pullToRefresh
• This will install the module in the project for you, then
follow instructions for using it
http://gitt.io/component/nl.fokkezb.pullToRefresh

10. Add Widget to view.xml file -
Pull to Refresh
• Wrap your ListView with the widget object and
specify the function to call to update the view
!

11. Add code to controller.js file
- Pull to Refresh
• Add the function refreshData to your controller to
update the data in the view
• Code is added to PhotoListView.js
/**
* called when user pulls down on list
*
* @param {Object} _event
*/
function refreshData(_event) {
$.loadImages(function() {
_event.hide();
});
}

12. Capturing Click Events in
ListView
• Create a new controller/view/style set named PhotoDetail

13. Capturing Click Events in
ListView - Updating ListView
• Add an eventListener to the listView for an onClick
event in PhotoListView.xml
• REMEMBER Events bubble so we only need to
listen on the whole view and not each item in the list
<ListView id="listView" onItemclick="listItemClicked">

14. Capturing Click Events in ListView
- Updating ListView Controller
• Create new function to respond to onClick event in
PhotoListView.js
• When the event is passed to the function we have
information on the item that was clicked, we use
that to setup the display in details view
PhotoDetail.xml
• Once we have the details, we will create a new
controller and pass it the information to display

15. Capturing Click Events in ListView
- Updating ListView Controller
function listItemClicked(_event) {
!
var currentItem = $.listViewSection.getItemAt(_event.itemIndex);
var selectedObject = currentItem.properties.photoObject;
!
// log for debugging purposes and convert object to
// string that is readable
console.log("selectedObject " + JSON.stringify(selectedObject, null, 2));
!
// create the new controller and pass in the
// model object as an argument 'item'
var ctrl = Alloy.createController('PhotoDetail', {
'item' : selectedObject
});
!
setTimeout(function() {
$.photoListTab.open(ctrl.detailWindow);
}, 200);
}

16. PhotoDetail View - Layout of
UI Element Values
<Alloy>
<Window class="container" id="detailWindow">
<ActionBar displayHomeAsUp="true"
onHomeIconItemSelected="closeWindow"
platform="android"/>
<View class="wrapper">
<Label id="locationInfo" onClick="showMap"></Label>
<View id='imageViewWrapper'>
<ImageView id="imageView"></ImageView>
</View>
</View>
</Window>
</Alloy>

17. Initializing PhotoDetail Controller
- Setting UI Element Values
// arguments from initializing the controller, arg.items
// holds the information on the selected image
var args = arguments[0] || {};
!
// set the image view to the proper URL
$.imageView.image = args.item.urls.medium_500 || args.item.urls.hd;
!
// location information
$.locationInfo.text = args.item.custom_fields.location_address;
!
// free the model-view data binding resources when this
// view-controller closes
$.detailWindow.addEventListener("close", function() {
$.destroy();
});

18. Sample Codehttps://github.com/aaronksaunders/testInClass

19. aaron@clearlyinnovative.com
@aaronksaunders
github:aaronksaunders