Clearly Innovative

Need Help With A Mobile Development Project?

UPDATE FOR 1.5 RELEASE: It appears that the property “parent” is now used by window and was breaking the sample code below

parent: Titanium.UI.currentWindow

SHOULD NOW BE

_parent: Titanium.UI.currentWindow

Just wanted to put out a simple example of Navigation Groups with two detail levels since I haven’t seen a sample out in the wild.

In the process, I realize there is no way to pop to the root controller like you can do in objective-c… which is a pain.

The special sauce I use in this example is passing the original navigation group object along when the new window is created. This allows for the new context that was created to still have access to the root window.

If you have any question, just post something in the comments.

app.js

Titanium.UI.setBackgroundColor('#000');

var baseWin = Titanium.UI.createWindow({  
    title:'BASE',
    backgroundColor:'#fff'
});

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});


var nextBtn = Titanium.UI.createButton({  
    title:'NEXT',
    height: 25,
    width : 60
});
win1.add(nextBtn);

nextBtn.addEventListener('click', function(data)
{
    Ti.API.info("got click event");
    var detailWindow = Ti.UI.createWindow( {
        title : "test window one",
        layout : 'vertical',
        url: 'detail_window1.js',
        _parent: Titanium.UI.currentWindow,
        navGroup : navGroup,
        rootWindow : win1
    });
    
    navGroup.open(detailWindow);
});

var navGroup = Ti.UI.iPhone.createNavigationGroup( {
    window : win1
});

win1.navGroup = navGroup;
baseWin.add(navGroup);
baseWin.open()

detail_window1.js

var currWindow = Titanium.UI.currentWindow

var nextBtn = Titanium.UI.createButton({  
    title:'NEXT',
    height: 25,
    width : 60
});
currWindow.add(nextBtn);

nextBtn.addEventListener('click', function(data)
{
    Ti.API.info("got click event");
    var detailWindow = Ti.UI.createWindow( {
        title : "test window two",
        layout : 'vertical',
        url: 'detail_window2.js',
        _parent: Titanium.UI.currentWindow,
        navGroup : currWindow.navGroup,
        rootWindow : currWindow.rootWindow        
    });
    
    currWindow.navGroup.open(detailWindow);
});

detail_window2.js

var currWindow = Titanium.UI.currentWindow

var nextBtn = Titanium.UI.createButton({  
    title:'HOME',
    height: 25,
    width : 60
});
currWindow.add(nextBtn);

nextBtn.addEventListener('click', function(data)
{
    Ti.API.info("got click event");
    Ti.API.info(currWindow.rootWindow);
    
    // close the parent, then self to pop back to top
    currWindow.navGroup.close(currWindow._parent);
    currWindow.navGroup.close(currWindow);
});

Need Help With A Mobile Development Project?