Building on our last two tutorials now we will add more detail to our app. We are going to introduce a Navigation Controller in this and a new Model.
Adding new files
userListNav.xml
userDetails.xml
userDetails.js
userDetails.tss
details.js
CONTROLLER
We are going to change the doAuth function to support our NavigationWindow on both platforms
index.js
TiAuth.doAuth = function(didPassBio) { if (password == $.passWrdTxt.value && userName == $.userNmTxt.value || didPassBio) { var win1 = Alloy.createController("userList").getView(); //android var opt = {}; if (OS_IOS) { win1 = Alloy.createController("userListNav").getView(); //ios opt = { transition: Ti.UI.iOS.AnimationStyle.FLIP_FROM_LEFT, duration: 500 }; } win1.open(opt); } else { alert("You have failed to login!"); } };
Update userList.js
We are adding a userDetail function to allows to navigate to the next screen. Here we will call the next screen userDetails and pass some info to it from our json object pulled from the collection.
userList.js
(function main() { // Hide nav bar if (OS_IOS) { $.userList.hideNavBar(true, { animated : false }); } Alloy.Collections.userModel.fetch(); })(); function userDetail(e) { //put our model on the controller so we can grab them in the UI var opts = { $model : Alloy.Collections.userModel.at(e.itemIndex) }, controllerNm = "userDetails"; if (OS_IOS) { Alloy.Globals.pushViewOnController(controllerNm, opts); } else { var win1 = Alloy.createController(controllerNm, opts).getView(); win1.open(); } }
VIEW
Starting with our new file userListNav we will had a new Component called NavigationWindow. This is an iOS Component that implements a specialized view that manages the navigation of hierarchical content. Android handles this differently so we need to use the platform
attribute to differentiate between the functionality. Then we can “include” the userList into our file so we don’t need to repeat the code in the userList.xml file for each condition.
userListNav.xml
<Alloy> <NavigationWindow class="container" id="userListNav" platform="ios"> <Require src="userList"/> </NavigationWindow> </Alloy>
Adding a click handler to our list.
userList.xml
<ListView width="100%" onItemclick="userDetail" defaultItemTemplate="listTemplate">
Here we templatized our data so we pull the values off the model that we have passed from the userList.js file.
userDetails.xml
<Alloy> <Window class="container" id="userDetails" title="User Details"> <View layout="vertical"> <Label text="NAME: {name}"/> <Label text="STATUS: {status}"/> <Label text="PHONE: {phone}"/> <Label text="LOCATION: {location}"/> </View> </Window> </Alloy>
DATA
Add a few fields to our mock data Phone
and Location
assets/mockData/users.json
{ "name": "Darren", "status": "online", "location" : "Phoenix", "phone" : "555-1234" }