{"id":962,"date":"2017-12-05T22:32:29","date_gmt":"2017-12-05T22:32:29","guid":{"rendered":"http:\/\/bitcows.com\/?p=962"},"modified":"2017-12-05T22:32:29","modified_gmt":"2017-12-05T22:32:29","slug":"learning-appcelerator-part-3","status":"publish","type":"post","link":"https:\/\/bitcows.com\/?p=962","title":{"rendered":"Learning Appcelerator Part 3 (Model and Navigation Controller)"},"content":{"rendered":"

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.<\/p>\n

Get the code<\/a><\/p>\n

Adding new files
\nuserListNav.xml<\/code>
\nuserDetails.xml<\/code>
\nuserDetails.js<\/code>
\nuserDetails.tss<\/code>
\ndetails.js<\/code><\/p>\n

CONTROLLER<\/h4>\n

We are going to change the doAuth function to support our NavigationWindow on both platforms<\/p>\n

index.js<\/h5>\n
\nTiAuth.doAuth = function(didPassBio) {\n    if (password == $.passWrdTxt.value && userName == $.userNmTxt.value || didPassBio) {\n\n        var win1 = Alloy.createController(\"userList\").getView(); \/\/android \n        var opt = {};\n\n        if (OS_IOS) {\n            win1 = Alloy.createController(\"userListNav\").getView(); \/\/ios\n            opt = {\n                transition: Ti.UI.iOS.AnimationStyle.FLIP_FROM_LEFT,\n                duration: 500\n            };\n        }\n\n        win1.open(opt);\n\n    } else {\n        alert(\"You have failed to login!\");\n    }\n\n};\n<\/pre>\n
Update userList.js<\/code>
\nWe 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.<\/p>\n
userList.js<\/h5>\n
\n(function main() {\n\t\/\/ Hide nav bar\n\tif (OS_IOS) {\n\t\t$.userList.hideNavBar(true, {\n\t\t\tanimated : false\n\t\t});\n\t}\n\n\tAlloy.Collections.userModel.fetch();\n})();\n\nfunction userDetail(e) {\n        \/\/put our model on the controller so we can grab them in the UI\n\tvar opts = {\n\t\t$model : Alloy.Collections.userModel.at(e.itemIndex)\n\t},\n\tcontrollerNm = \"userDetails\";\n\n\tif (OS_IOS) {\n\t\tAlloy.Globals.pushViewOnController(controllerNm, opts);\n\t} else {\n\t\tvar win1 = Alloy.createController(controllerNm, opts).getView();\n\t\twin1.open();\n\t}\n\t\n}\n<\/pre>\n
VIEW<\/h4>\n
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<\/code> 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. <\/p>\n
userListNav.xml<\/h5>\n
<Alloy>\n    <NavigationWindow class=\"container\" id=\"userListNav\" platform=\"ios\">\n      <Require src=\"userList\"\/>\n   <\/NavigationWindow>\n<\/Alloy><\/pre>\n
Adding a click handler to our list.<\/p>\n
userList.xml<\/h5>\n
<ListView width=\"100%\" onItemclick=\"userDetail\" defaultItemTemplate=\"listTemplate\"><\/pre>\n
Here we templatized our data so we pull the values off the model that we have passed from the userList.js file.<\/p>\n
userDetails.xml<\/h5>\n
\n<Alloy>\n\t<Window class=\"container\" id=\"userDetails\" title=\"User Details\">\n\t  <View layout=\"vertical\">\n\t    <Label text=\"NAME: {name}\"\/>\n\t    <Label text=\"STATUS: {status}\"\/>\n\t    <Label text=\"PHONE: {phone}\"\/>\n\t    <Label text=\"LOCATION: {location}\"\/>\n          <\/View>\n\t<\/Window>\n<\/Alloy>\n<\/pre>\n
DATA<\/h4>\n
Add a few fields to our mock data Phone<\/code> and Location<\/code><\/p>\n
assets\/mockData\/users.json<\/h5>\n
{\n \"name\": \"Darren\",\n \"status\": \"online\",\n \"location\" : \"Phoenix\",\n \"phone\" : \"555-1234\"\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n
Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":649,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5,15,16,18],"tags":[],"class_list":["post-962","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-appcelerator","category-ios","category-code-examples","category-iphone"],"_links":{"self":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/posts\/962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=962"}],"version-history":[{"count":0,"href":"https:\/\/bitcows.com\/index.php?rest_route=\/wp\/v2\/posts\/962\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=\/"}],"wp:attachment":[{"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitcows.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}