Changing centerWindow in NappDrawer (using nl.fokkezb.drawer widget)

Hi

I am trying to use the NappDrawer module through the nl.fokkezb.drawer widget.

The drawer itself works fine. However, I am having problems setting a new controller/window in the centerWindow.

This is what I am trying to do:

• User opens menu in the left side
• Clicks on an item
• This will load the new page in the centerWindow and close the leftWindow
• Finally, close the old centerWindow to regain memory

I put the drawer object in a global variable so that I have access to it (for changing the centerWindow and closing the leftWindow). The idea is to keep the drawer open and just change the centerWindow that the user sees.

Here is a simple sample to show the problem. To run the sample you need to install the nl.fokkezb.drawer widget as per the instructions:

index.xml

<Alloy>
    <Widget id="drawer" src="nl.fokkezb.drawer">
        <Window module="xp.ui" id="menu" role="leftWindow">
            <Label>I am Menu</Label>
            <Label top="50" left="10" onClick="doOpenWin1">Go Win 1</Label>
            <Label top="70" left="10" onClick="doOpenWin2">Go Win 2</Label>
        </Window>
        <Require src="win1" />
    </Widget>
</Alloy>

win1.xml (and win2.xml just with another text)

<Alloy>
    <Window id="winContent" platform="ios" role="centerWindow">
        <Button top="25" left="5" onClick="toggle">Menu</Button>
        <Label>I am center!! (Win 1)</Label>
    </Window>
</Alloy>

win1.js (and win2.js - same code)

function toggle(e) {
    Alloy.Globals.Drawer.toggleLeftWindow();
}

app.tss

"#drawer": {
    openDrawerGestureMode: "OPEN_MODE_ALL",
    closeDrawerGestureMode: "CLOSE_MODE_ALL",
    leftDrawerWidth: 200
}
 
"Window": {
    statusBarStyle:Titanium.UI.iPhone.StatusBar.LIGHT_CONTENT,
    backgroundColor: 'white'
}
"Label": {
    color: 'white'
}
"#winContent": {
    backgroundColor: 'red'
}
"#menu": {
    backgroundColor: "blue"
}

index.js

function implOpenMenuItem(controllerName, e) {
   console.log("openMenu: " + controllerName);
   Alloy.Globals.Drawer.closeLeftWindow();
   console.log("openMenu: closed left");
//   var oldWin = Alloy.Globals.Drawer.instance.getCenterWindow();   // .instance needed to get win back (seen in debugger)
   var win = Alloy.createController(controllerName).getView();
   console.log("openMenu: win set");
   Alloy.Globals.Drawer.setCenterWindow(win);
   console.log("openMenu: centerWindow set to win");
//   oldWin.close();  // Free memory
//   console.log("openMenu: old centerWindow closed");
}
 
function doOpenWin1(e) {
   console.log("doOpenWin1. center: " + Alloy.Globals.Drawer.instance.centerWindow.id);
   implOpenMenuItem('win1', e);
}
 
function doOpenWin2(e) {
   console.log("doOpenWin2. center: " + Alloy.Globals.Drawer.instance.getCenterWindow().id);
   implOpenMenuItem('win2', e);
}
 
$.drawer.open();
Alloy.Globals.Drawer = $.drawer;

The problem is in the "implOpenMenuItem" function. Sometimes it will handle 2-3 menu selections before it fails - but most times it fails on the first or second selection of a menu link. According to the log info on the console (last line: "openMenu: win set") - the line that fails is:

Alloy.Globals.Drawer.setCenterWindow(win);

The way it fails is just by closing the app - no extra info on the console nor message to the user....

I have tried various combinations without success, like to parse in an open window instead:

Alloy.Globals.Drawer.setCenterWindow(win.open());

and both of the above by calling the setCenterWindow on the instance object like:

Alloy.Globals.Drawer.instance.setCenterWindow(win);

I guess it's probably a simple issue that I just cannot work out. So I would appreciate any insights on this ;-)