In the first tutorial we learned how to create a simple bio metric login screen. Building on that example we can now do a follow up screen that will transition to a list of Users. <\/p>\n
Get the code for this Demo<\/a><\/p>\n Building on the previous tutorial we will be adding a new View called Like in our previous example we will do some styling for our list.<\/p>\n For our userList controller we are going to call Of course in order to get to our list well need to change the login file In our Alloy.js file we need to set up our data so we can display it. Since Alloy.js gets called first before all our controllers this is the perfect place to add our mock up data. In this case we have a static file with some json data in it. So we can grab this data by looking through the file system and grabbing it. Then we will parse it and add it to our mocx collection. For more on how this file works<\/a>. It basically overrides the backbone.js Sync function to add data to its collection.<\/p>\n The model code is pretty boiler plate too. When you create a new model using Appc Studio it will build this file for you. The only things you will need to make sure are correct are the collection_name and depending on your json structure you might need to add a Our fake data. <\/p>\n In the first tutorial we learned how to create a simple bio metric login screen. Building on that example we can now do a follow up screen that will transition to a list of Users. Get the code for this Demo Building on the previous tutorial we will be adding a new View called userList.xml…<\/p>\nuserList.xml<\/code> This is pretty boiler plate code that contains a ListView<\/code>. The important thing to note in this file is the Collection<\/code> tag. This is what will instantiate the model and get it ready to pull data out of it. When we do it like this our controller can then call fetch and retrieve the list of users. We also are using a templating syntax in for {Status}<\/code> and {Name}<\/code>. Lastly to tell the list to use our model we will add dataCollection<\/code> to our ListSection<\/code>.<\/p>\nVIEW<\/h4>\n
userList.xml<\/h5>\n
\n<Alloy>\n\t<Collection src=\"userModel\"\/>\n\t<Window class=\"container\" id=\"userList\">\n\t\t<ListView width=\"100%\" onItemclick=\"userDetail\" defaultItemTemplate=\"listTemplate\">\n\t\t\t <Templates>\n <ItemTemplate id=\"detailTemplate\" name=\"listTemplate\">\n <ImageView bindId=\"status\" class=\"rowStatus\" text=\"\"\/>\n <Label bindId=\"name\" class=\"rowUserName\" text=\"\"\/>\n <\/ItemTemplate>\n <\/Templates>\n\t\t\t<HeaderView>\n\t\t\t\t<View backgroundColor=\"#ddd\" height=\"30\">\n\t\t\t\t\t<Label class=\"status\">Online<\/Label>\n\t\t\t\t\t<Label class=\"userName\">User Name<\/Label>\n\t\t\t\t<\/View>\n\t\t\t<\/HeaderView>\n\t\t\t<ListSection dataCollection=\"userModel\">\n\t\t\t\t<ListItem status:image=\"\/images\/{status}.png\" name:text=\"{name}\" height=\"40\" \/>\n\t\t\t<\/ListSection>\n\t\t<\/ListView>\n\t<\/Window>\n<\/Alloy>\n<\/pre>\nuserList.tss<\/h5>\n
\n\".container\" : {\n top:75\n},\n\".status\" : {\n left : 5\n},\n\".userName\" : {\n left : 75\n},\n\".rowStatus\" : {\n left : 10,\n width : 25,\n height: 25\n},\n\".rowUserName\" : {\n left : 75\n}\n<\/pre>\nCONTROLLER<\/h4>\n
fetch()<\/code> Fetch is a built in backbone.js<\/a> function that will pull data from our model using the built in Sync functionality of backbone.<\/p>\nuserList.js<\/h5>\n
\nAlloy.Collections.userModel.fetch(); \n<\/pre>\n
index.js<\/code> from an alert to a way to transition to our new screen. Here we grab our userList controller view and we want to call open()<\/code> to transition to it. We are going to make the screen do a flip transition from Left to right at 1\/2 second. Now you will see an condition here because the built in transition on Android won’t flip so in this case we just want to slide it in for Android.<\/p>\nindex.js<\/h5>\n
\nTiAuth.doAuth = function(didPassBio) {\n if (password == $.passWrdTxt.value && userName == $.userNmTxt.value || didPassBio) {\n\n var win1 = Alloy.createController(\"userList\").getView();\n if (OS_IOS) {\n win1.open({\n transition: Ti.UI.iOS.AnimationStyle.FLIP_FROM_LEFT,\n duration: 500\n });\n } else {\n win1.open();\n }\n\n } else {\n alert(\"You have failed to login!\" + Alloy.Globals.isIphoneX);\n }\n\n};\n<\/pre>\nassets\/mockData\/alloy.js<\/h5>\n
\nvar mocx = require(\"mocx\");\n\nAlloy.Globals.isIphoneX = (Ti.Platform.displayCaps.platformHeight == 812);\n\n(function constructor(){\n\n\/\/ Create Mock Users from fake data\nvar file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,'mockData\/users.json');\n\tpreparse = file.read().text,\n\tresponse = JSON.parse(preparse);\n \n\tmocx.createCollection(\"userModel\", response.UserStats);\n})();\n<\/pre>\nMODEL<\/h4>\n
parentNode<\/code> function. In our case we have a parent node of UserStats<\/code>. If we didn’t have that we wouldn’t need to add that parentNode.<\/p>\nuserModel.js<\/h5>\n
\nexports.definition = {\n\tconfig: {\n\t\tadapter: {\n\t\t\ttype: \"sql\", \/\/ <-- name of custom adapter\n\t\t\tcollection_name: \"userModel\"\n\t\t},\n\t\t\/\/ Gets the parent node of our Array\n parentNode: function(data) {\n data = data || [];\n return data.UserStats || data;\n }\n\t},\n\textendModel: function(Model) {\n\t\t_.extend(Model.prototype, {\t\t\t\n\t\t});\n\t\treturn Model;\n\t},\n\textendCollection: function(Collection) {\n\t\t_.extend(Collection.prototype, {\n\t\t});\n\t\treturn Collection;\n\t}\n};\n<\/pre>\nuser.json<\/h4>\n
{\n\t\"UserStats\": [\n\t\t{\n\t\t\t\"name\": \"Darren\",\n\t\t\t\"status\": \"online\"\n\t\t},{\n\t\t\t\"name\": \"Aaron\",\n\t\t\t\"status\": \"online\"\n\t\t},{\n\t\t\t\"name\": \"Bill\",\n\t\t\t\"status\": \"offline\"\n\t\t},{\n\t\t\t\"name\": \"Steve\",\n\t\t\t\"status\": \"online\"\n\t\t}\n\t]\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"