![\"\"](\"http:\/\/bitcows.com\/wp-content\/uploads\/2017\/06\/screens.gif\")
<\/p>\nThere was a question I got a few days ago about how to use the Appcelerator NavigationWindow with multiple layers of navigation. Since I didn’t find an online answer easily, I figured I would write a quick tutorial on this. <\/p>\n
You have a screen with a few layers of screens you would like to be able to navigate into and back out of using the NavigationWindow control. <\/p>\n
<\/p>\n
app\/views\/index.xml<\/em><\/strong> app\/controllers\/index.js<\/em><\/strong> app\/alloy.js<\/em><\/strong> \/apps\/views\/details.xml<\/em><\/strong> \/apps\/views\/moredetails.xml<\/em><\/strong> There was a question I got a few days ago about how to use the Appcelerator NavigationWindow with multiple layers of navigation. Since I didn’t find an online answer easily, I figured I would write a quick tutorial on this. The Problem You have a screen with a few layers of screens you would like…<\/p>\n
\nThe main NavigtionWindow<\/em> view.
\nThe important thing here is to notice the nextWin=\"details\"<\/code> Thats the next window I’m calling.<\/p>\n<Alloy>\n <NavigationWindow platform=\"ios\" id=\"navWindow\">\n <Window id=\"main\" title=\"Nav Example\">\n <RightNavButton>\n <Button onClick=\"Alloy.Globals.openWindow\" nextWin=\"details\">more details<\/Button>\n <\/RightNavButton>\n <Label>Main screen want more details?<\/Label>\n <\/Window>\n <\/NavigationWindow>\n<\/Alloy><\/pre>\n
\nHere we need to do one thing and thats set a navwindow<\/em> globally to access here its the $.navWindow<\/code>.<\/p>\nAlloy.Globals.navwindow = $.navWindow; \/\/ The id of the NavigtionWindow\n\n$.navWindow.open();<\/pre>\n
\nNow here we pick up that nextWin variable I set.<\/p>\nAlloy.Globals = {\n openWindow: function(e) { \n \/\/ This gets the next window name thats defined in the XML\n var nextWin = e.source.nextWin;\n \/\/ Push it on the navigagtion stack\n Alloy.Globals.navwindow.openWindow(Alloy.createController(nexWin).getView());\n }\n};<\/pre>\n
\nThe first details screen notice the next screen is denoted nextWin=\"moredetails\"<\/code><\/p>\n<Alloy>\n <Window id=\"details\" backgroundColor=\"white\">\n <RightNavButton>\n <Button onClick=\"Alloy.Globals.openWindow\" nextWin=\"moredetails\">even more details<\/Button>\n <\/RightNavButton>\n <Label>Here is a detail screen.<\/Label> \n <\/Window>\n<\/Alloy><\/pre>\n
\nThe second more details screen<\/p>\n<Alloy>\n <Window id=\"moredetails\" backgroundColor=\"white\">\n <Label>Here is more details screen.<\/Label> \n <\/Window>\n<\/Alloy><\/pre>\n","protected":false},"excerpt":{"rendered":"