var w = Titanium.UI.currentWindow;
var menu = Ti.UI.createView({zIndex:100, backgroundColor:'#000', barColor: "#000", width:300, height:375, top:5, left:5, right:5, botttom:5, borderRadius: 10})

// Latest Container
var productsContainer = Ti.UI.createView({backgroundColor:'red', height:215, width:280, left:10, top:42})
// Twitter Container
var twittButton = Ti.UI.createButton({backgroundColor:'red', height:80, width:130, left:10, bottom:20, url:'views/twiiter.js'})
// News Container
var newsButton = Ti.UI.createButton({backgroundColor:'red', height:80, width:130, right:10,  bottom:20, url:'views/blog.js'})

menu.add(productsContainer)
menu.add(newsButton)
menu.add(twittButton)
w.add(menu)

6 Answers

• Steve

  No, there is no tabGroup url-type property for a button; you have to defined a click eventListener and code the result accordingly.

  However, you can create a class to wrap around the button and the associated eventlisteners. The you would put this in a separate script and include() it wherever you need to put a button in your app. The advantage is that it's very easy this way to create buttons, and any other controls, with a consistent look and feel.

• I though as much Hal. I am pretty confident with event handlers and or listeners but I can get my head around phyically forwarding on to a js page. Is this possible i.e.

  newsButton.addEventListener('click',function(e)
  {
     Forward on to views/news.js
  });
  

  I should imagine again this is not going to be possible! - But thought i would ask the question so I know for the future.

  ======================================== MORE INFO

  Ok, I think I may be on the right lines here but tell me if I'm wrong.

  
  win = Ti.UI.CurrentWindow (Or whatever the syntax is for the current window)
  
  newsButton.addEventListener('click',function(e)
  {
     win.close();
     win.open('views/blog.js');
  });
  

• Steve

  You are almost there, yes. ;)

  Your event would look something like this:

  newsButton.addEventListener('click',function(e){
     var winBlog = Ti.UI.createWindow({
         backgroundColor:'white',
         url:'views/blog.js'
     });
  
     winBlog.open();
  });
  

  Although you would probably want to style the window a bit more than I have done here.

  Hope this helps

• Cheers for your help Hal.

  Mad ive done all the hard bits - but that stumped me. Logic Fail of the week. Just a quick one as I am not on my mac at the moment. If I user click ons that link and the same link appears in the tabbed navigation will that highlight (I expect not).

  Cheers once again.

• You're welcome, Steve :)

  No, you would have to programatically change the active using the setActiveTab() method of Titanium.UI.TabGroup.

  Hope that clarifies a lot :)

• Sorry to get back, but I have a couple more questions. My code is looking like this:

  var w = Titanium.UI.currentWindow;
  var menu = Ti.UI.createView({zIndex:100, backgroundColor:'#000', barColor: "#000", width:300, height:375, top:5, left:5, right:5, botttom:5, borderRadius: 10})
  
  // Latest Container
  var productsContainer = Ti.UI.createView({backgroundColor:'red', height:215, width:280, left:10, top:42})
  // Twitter Container
  var twittButton = Ti.UI.createButton({backgroundColor:'red', height:80, width:130, left:10, bottom:20})
  // News Container
  var newsButton = Ti.UI.createButton({backgroundColor:'red', height:80, width:130, right:10,  bottom:20})
  
  newsButton.addEventListener('click',function(e)
  {
     var winBlog = Ti.UI.createWindow({
          title: "Blog", // Set the title
          barColor: "#000",
          backgroundColor: "#fff", // Set the background color to white
           url:'blog.js'
     });
    // tabGroup.setActiveTab(2)
     winBlog.open();
  });
  
  twittButton.addEventListener('click',function(e)
  {
     var twitWin = Ti.UI.createWindow({
            title: "Latest Tweets", // Set the title
          barColor: "#000",
          backgroundColor: "#fff",
          url:'twitter.js' // Set the background color to white
     });
    //tabGroup.setActiveTab(3)
     twitWin.open();
  });
  
  
  menu.add(productsContainer)
  menu.add(newsButton)
  menu.add(twittButton)
  w.add(menu)
  

  Question 1.

  When the window opens I get no top bar just a blank white screen. Is there a hierarchy I need to follow in terms of setting the windows properties.

  Question 2.

  How to access the tabGroup which is set within app.js. Is this a global variable?