9 Answers

• Accepted Answer

  Your code:

  var win1 = Titanium.UI.createWindow({  
      title:'Home',
      backgroundImage:"iPad_banner.png",
  
  
  });
  
  var subWindow1 = Titanium.UI.createView({
     Ti.include("js/home_scroll.js"),
     title: 'mysubwindow',
     left:37,
      height:200,
      width:950
  });
  
  Titanium.UI.CurrentTab.open(subWindow1,{animated:true});
  

  Is not valid JavaScript, since the object literal you are passing to createWindow is trying to use the result of Ti.include as a key, with no value assigned - the error you are getting is a syntax error. Ti.include would need to be executed in app.js, at which point the code inside the file you included would be immediately executed in the global context (like including a script tag in an HTML page).

  Since Titanium is based on JavaScript APIs, it is necessary to have a certain base level of JavaScript programming knowledge. As a good online resource, I generally refer people to Mozilla's JavaScript reference, which will assist you in learning JavaScript syntax, control structures, and data types. Once you are comfortable programming basic JavaScript, you will be better able to address a real application.

  In terms of JavaScript sample code to use in Titanium, the best resource is the Kitchen Sink application, which is a tab-based application with multiple sub-windows (which is likely where you found the API for pushing windows onto a stack). I would look at the View examples to see how to create views and add them to a window.

• Hi Dennis

  You can't add a window to a window - you must open it instead. Hence, you'd open your first subwindow like this, most likely in an eventListener:

  subWindow1.open();
  

  In many cases, it is often better to use views instead of windows, but it obviously depends on your intentions.

  You haven't mentioned your target mobile platform, which you should do because often it makes a difference to the answer.

  If you are developing for android, and want to make use of the back button to close your subwindows, you will need to use either navBarHidden or fullscreen properties on the subwindow when they are created (set one of them to false).

  If you would like to explore the views suggestion, but still make sure of the back button, you can override its default behaviour using the following eventListener:

  win.addEventListener('android:back', function(e) {
      Ti.API.Info("Pressing Back Will Not Close The Activity/Window");
  });
  

  Hope this is useful

• Hi Hal

  Thank you so much for your reply. I did already try the "open" function, but as you say, the windows does not close when I enter another window. I am developing for the iPad.

  I am not going to use a close button, but instead having the menu at the buttom visible at all time. So I guess I need to include some sort of "close" function to these buttons?

  For some reason it is opening all the subwindows at one time.

  And more wird, for every fifth time I open it it works fine. all the other times it just opens up alle the subwindows at one time

  Best Dennis

• Please can someone help me? This is getting a little urgent. Is it my including of js files that messes it up?

  to sum up: When i run a simulation, all subwindows open up on top of each other. and 1 time out of five everything seems to work fine. How could this be?

  My UI is just a menu at the buttom of the screen and a main windows with the different content in it. On the top a title bar.

  Hope someone can help me.

• You probably shouldnt be using win3.add(subWindow3);

  I have several tabs with sub windows and I use something like this:

  win2 = Titanium.UI.createWindow({
     url: 'myfilename.js',
     title: 'mysubwindow'
  });
  
  Titanium.UI.CurrentTab.open(win2,{animated:true});
  

  I use this in an event listener, like a click.

  Why are you adding the subwindows immediately? What are you trying to achieve with the subwindows that cant be done in the main windows?

• thank you very much.
  I am now getting an error in the "open" line, can you tell me what I am doing wrong?:

  var win1 = Titanium.UI.createWindow({
  title:'Home',
  backgroundImage:"iPad_banner.png"

  });

  subWindow1 = Titanium.UI.createWindow({
  url: 'js/home_scroll.js',
  title: 'mysubwindow',
  left:37,
  height:200,
  width:950
  });

  Titanium.UI.CurrentTab.open(subWindow1,{animated:true});

  I am using subwindows to lock certain elements at their right positions. for example the scrolling window i do not want to move around the whole screen. I only want it to have a movable background so that a image can be moved from side to side.
  And i do not want to activate the subwindows immideatly, they should first be triggered when i click the menu.

• I think you might have the wrong idea about what you want to do with windows. Windows are, generally speaking, best used as top-level containers for other views and controls (buttons, text fields, etc). If you want your "sub windows" to be displayed over the top of your main tab windows, you probably won't want want to use windows at all. Your 'sub windows' should be views, which you would then add to your windows and programmatically show/hide.

  This of course means that you won't be able to use windows with external JavaScript files, which in this case is probably good. If you'd like to separate out the code for the 'sub windows' into files, you could Ti.include the code to drive the sub views.

  Think of it this way:

  • Windows == "pages" in a web application
  • Views == "div" tags in page

  In this case, I think your sub windows are 'div's, not 'pages'.

• okay that is a good point.

  But if I try and include the JS it will show me an error in that line:

  var win1 = Titanium.UI.createWindow({  
      title:'Home',
      backgroundImage:"iPad_banner.png",
  
  
  });
  
  var subWindow1 = Titanium.UI.createView({
     Ti.include("js/home_scroll.js"),
     title: 'mysubwindow',
     left:37,
      height:200,
      width:950
  });
  
  Titanium.UI.CurrentTab.open(subWindow1,{animated:true});
  

• Could someone maybe make me some sort of small template with 7 windows, 2 views (with 1 .js included) and 1 label in each just to get an idea of how this works?

  This would be so helpful. I am really in a hurry here…

  Thank you all.