How to switch between views/windows in titanium?

Question

I'm new to Titanium. I understand that the window is a container that holds different views. But I want to ask when should I create different windows and when should I create views?

I've tried to split the windows in different files and switch between them but it didn't work for me so far, if you know an easy way tell me. If its easier and better to use views, guide me if possible.

I was able to create windows and change them on button click, but the code was in a single file.

EDIT: I want to have two files other than app.js. let's say X.js, Y.js There is a button in X.js that when pressed, the app switches to Y.js, I don't know if window/view is better.

Answer 1

If you are using Alloy it's very. Just create your controllers and views like that:

x.xml

<Alloy>
  <Window>
    <Button id="open" title="Open X window" />
  </Window>
</Alloy>

x.js

$.open.addEventListener('click', function(event) {
    Alloy.createController('x');
});

$.x.open();

y.xml

<Alloy>
  <Window>
    <Button id="open" title="Open Y window" />
  </Window>
</Alloy>

y.js

$.open.addEventListener('click', function(event) {
    Alloy.createController('y');
});

$.y.open();

If you are using plain Titanium SDK you have to can use CommonJS modules:

app.js

var x = require('x');
x.open();

x.js

var win = Ti.UI.createWindow();
var button = Ti.UI.createButton({ title: 'Open Y window' });


button.addEventListener('click', function(event){
    var y = require('y');
    y.open();
});

win.add(button);

module.exports = win;

y.js

var win = Ti.UI.createWindow();
var button = Ti.UI.createButton({ title: 'Open X window' });


button.addEventListener('click', function(event){
    var x = require('x');
    win.close();
    x.open();
});

win.add(button);

module.exports = win;