Learning Appcelerator Part 3 (Model and Navigation Controller)

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.

Get the code

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