How do I add a js file to titanium mobile project

Question

I keep getting the following error on a simple Titanium Mobile project:

Location:
app.js

Message:
Uncaught ReferenceError: tab2 is not defined

Source: tabGroup.addTab(tab2);

Here is the code in my app.js file:

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

// create the window

var win1 = Ti.UI.createWindow({
width: 320,
height: 440,
top: 0,
left: 0,
backgroundImage: 'background.png',
title: 'loan calculator',
barImage: 'navbar.png'
});

 // creat the view, this will hold all of our UI controls
// note the hight of this view is the height of the window
// minus 134px for the status bar and padding and adjusted for navbar

var view = Ti.UI.createView({
width: 300,
height: win1.height - 134,
left: 10,
top: 10,
backgroundColor: '#fff',
borderRadius: 5
});

// we will give the logo a left margin so it centers neatly
// within our view

var _logoMarginLeft = (view.width - 253) / 2;

// now let's add our logo to an imageview and add that to our 
// view object

 var logo = Ti.UI.createImageView({
backgroundImage: 'logo.png',
width: 253,
height: 96,
left: _logoMarginLeft,
top: 0
  });

 view.add(logo);

 // add the view to our window

 win1.add(view);

// add the first tab and attach our window object (win1) to it

var tab1 = Ti.UI.createTab({
icon: 'icon_calculator.png',
title: 'Calculate',
window: win1
  });

 // create the second window for settings tab

 var win2 = Ti.UI.createWindow({
width: 320,
height: 440,
top: 0,
left: 0,
backgroundImage: 'background.png',
url: 'window2.js',
title: 'Settings',
barImage: 'navbar.png'
  });


  // now add the tabs to our tabGroup object

   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);

  // open the tabgroup to launch the app

  tabGroup.open();

Here is the code in my window2.js:

 // add the second tab and attach our external window object
 // (win2 / window2.js) to it

 var tab2 = Ti.UI.createTab({
icon: 'icon_settings.png',
title: 'Settings',
window: win2
});

How can this be resolved?

Answer 1

Why was the tab2 creation moved to window2.js from app.js? What are you trying to accomplish with this change?

Tab1 is constructed correctly... the tabGroup contains the tab (tab1) which was created as a container for the window (window1). The second tab is being created in the wrong order.

Also, when you use the url form of createWindow, it creates a whole new context. The items within that window cannot access the parent scope, and vice-versa.

Lastly, as an added bonus, the app.js will likely complete before the window2.js executes. The URL load is asynchronous, and context creation takes time, so even if it could access across the contexts, tab2 most likely would not yet have been created by the time it was added to the tab group. I have had lots of "fun" with those sorts of timing issues...