Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

need help with navigationGroup

I'm new to Titanium, and am having a problem with navigationGroups I cannot figure out. I'm sure it's just me being a noob, and should be a simple fix. I just need an explanation.

I am building an app that starts out with a window (app.js) that has no tabs, only buttons. When I click a button, I want the next window (about.js) to use a navGroup, so the About screen 'slides' in. I just cannot get this to work. Guess I just don't understand how navGroups work. Any help is greatly appreciated. I've looked at the examples in KitchenSync, and still can't figure it out! Do I put the NavGroup in app.js, or in about.js?

Here's my code:

app.js:

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create root window
var rootWin = Titanium.UI.createWindow({
backgroundColor:'#000'
});

// create main window
var mainWin = Titanium.UI.createWindow({
backgroundColor:'#000',
backgroundImage:'images/background.png'
});

// add the about button
var aboutBtn = Titanium.UI.createButton({
title:'About',
color:'#ff6',
font:{fontSize:15, fontWeight:'bold', fontFamily:'Helvetica Neue'},
backgroundImage:'images/button.png',
top:110,
height:34,
width:160
});

var aboutWin = Titanium.UI.createWindow({
url:'subWindows/about.js',
title:'About'
});

aboutBtn.addEventListener('click', function(e){
aboutWin.open();
});

mainWin.add(aboutBtn);

// open the root window
rootWin.add(mainWin);
rootWin.open();

about.js:

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create root window
var rootWin = Titanium.UI.createWindow();

// create main window
var mainWin = Titanium.UI.createWindow({
backgroundColor:'#000',
backgroundImage:'../images/background.png'
});
// ———————————————–

// create the navigation group
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window:mainWin
});

rootWin.add(mainWin);
rootWin.add(navGroup);

// open the main window
navGroup.open(mainWin);

— asked November 6th 2010 by Brian Hunkins
  • navigationgroup
1 Comment
  • Thanks for the help… I finally got it to work. Think I undrstand it now!

    — commented November 6th 2010 by Brian Hunkins

5 Answers

  • Accepted Answer

    to use navgroup in 2 or more file .js
    check this out

    http://blog.clearlyinnovative.com/post/1624173028/titanium-appcelerator-quickie-navigation-groups

    it pass navgroup through window

    — answered December 4th 2010 by Wilson Wijaya
    permalink
    0 Comments
  • you can take a peek at the Tut. here

    — answered November 6th 2010 by Satta Ravi
    permalink
    1 Comment
    • Thanks for the info. I looked at that the other day, but I am still confused by one thing. I want to split my code into separate .js files to help organize things. So in my case, I want the initial window drawn with a button on it, all done within app.js. My About screen I want to use a about.js file to handle the drawing of the screen and it's functionality. How do I add a navGroup between the 2 .js files? Do I create the 2 windows in app.js, and use nav.open() to open the about screen? Or does the navGroup code exist in the about.js file? This is where I am stuck.

      — commented November 6th 2010 by Brian Hunkins
  • Study the kitchensink app; most examples can be found there …

    — answered November 6th 2010 by Peter Lum
    permalink
    0 Comments
  • Here is what I'm using:

    app.js

    var win = Titanium.UI.createWindow({});
    
    var win1 = Titanium.UI.createWindow({
        url:'prod_win.js',
        backgrowdColor: "#999", 
        title: 'Products'
    });
    
    var nav = Titanium.UI.iPhone.createNavigationGroup({
           window: win1
    });
    win.add(nav);
    win.nav = win1.nav = nav;
    
    win.open({
        transition:Titanium.UI.iPhone.AnimationStyle.CURL_UP
    });
    

    And I passed the navigation group reference to the opened window, so in it I can open another one, to add it to the app flow, like so:

    _prodwin.js

    
    var win = Titanium.UI.currentWindow;
    var win_detail = Titanium.UI.createWindow({
        url:'prod_detail_win.js'
    });
    
    win.nav.open(win_detail, {animated:true});
    

    Hope this helps.

    — answered November 6th 2010 by Vali Filip
    permalink
    0 Comments
  • to use navgroup in 2 or more file .js
    check this out

    http://blog.clearlyinnovative.com/post/1624173028/titanium-appcelerator-quickie-navigation-groups

    it pass navgroup through window

    — answered December 4th 2010 by Wilson Wijaya
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.