Upload
aaron-saunders
View
206
Download
2
Embed Size (px)
Citation preview
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