Hi,
I am developing an iPhone app using Titanium Alloy and using Fokke's Napp Drawer module widget for a left and right sliding menu.
Other details : Titanium SDK version 3.2.3.GA
iOS SDK: 7.1
Titanium Alloy 1.3.1
My problem is that - on the leftWindow of the widget, I have a table and on clicking a row of that table, a window is displayed. Some of those windows need to have a sliding menu on the right and others don't. How can I achieve this? All those windows are part of a navigation window. I am not sure if I am doing it in the right way. Please help me out.
My code is -
Code :
index.xml
<Alloy> <Widget id="drawer" src="nl.fokkezb.drawer"> <Window role="leftWindow" id="leftMenuWindow"> <Require src="leftTable"/> </Window> <NavigationWindow id="nav" platform="ios" role="centerWindow"> <Window id="nav" role="centerWindow"> <LeftNavButton> <Button onClick="toggle">Left</Button> </LeftNavButton> </Window> </NavigationWindow> </Widget> </Alloy>index.js
Alloy.Globals.Drawer = $.drawer; Alloy.Globals.NavGroup = $.nav; function toggle(e) { var fn = 'toggle' + e.source.title + 'Window'; $.drawer[fn](); } $.drawer.open();leftTable.xml
<Alloy> <TableView id="leftTable" onClick="openTableRows"> <TableViewRow id="row1" > <Label text="Row 1"> </TableViewRow> <TableViewRow id="row2"> <Label text="Row 2"/> </TableViewRow> </TableView> </Alloy>leftTable.js
function openTableRows(e) { switch(e.index) { case 0: var v = Alloy.createController('win1').getView(); Alloy.Globals.NavGroup.openWindow(v, { animated : true }); Alloy.Globals.Drawer.toggleLeftWindow(); break; case 1: var v = Alloy.createController('win2').getView(); Alloy.Globals.NavGroup.openWindow(v, { animated : true }); Alloy.Globals.Drawer.toggleLeftWindow(); //animate back to center break; } }win1.xml - Now, in win1 I need to have a button on the right which will display a table when the button is clicked.How can I do this?
<Alloy> <Window id="win1" class="window" backgroundColor="blue"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>win1.js -
function doClick(e) { alert('Clicked win1'); }win2.xml - In win2 I don't need to display a button on the right.
<Alloy> <Window id="win2" backgroundColor="red"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>win2.js
function doClick(e) { alert('Clicked win2'); }