SYCS 402 Mobile App Development

Day 13 - 3/12/2015

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

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

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

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}

Alloy ListView

Adding the data to the ListView

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

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

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

!

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(); });}

Capturing Click Events in ListView

• Create a new controller/view/style set named PhotoDetail

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">

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

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);}

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>

Initializing PhotoDetail Controller - Setting UI Element Values

// arguments from initializing the controller, arg.items// holds the information on the selected imagevar 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();});

Sample Code https://github.com/aaronksaunders/testInClass

aaron@clearlyinnovative.com @aaronksaunders

github:aaronksaunders