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.

Please, provide some example code presenting what you have tried and what you are trying to achieve. — daniula, May 24 '14 at 21:30
I added some more information. I didn't add any code because I have changed the files so many times and now my trials are gone. I hope you can help me with the information I added, sorry for that. I need an expert's opinion to give me the best practice approach. — Poka Yoke, May 25 '14 at 21:08
Thanks @daniula I edited your code a bit, now it works for me. — Poka Yoke, May 26 '14 at 18:48
I saw your suggested edit. I have no idea why reviewers rejected it, looks like they didn't pay too much attention :/ I applied those changes by myself. — daniula, May 26 '14 at 20:46
Thanks for applying the edit, the most important thing is that people can get a working code .. I personally don't care if they approve or reject my edit :) Thanks again for your help — Poka Yoke, May 27 '14 at 09:43

daniula · Accepted Answer · 2014-05-26T20:44:51.407

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;

How to switch between views/windows in titanium?

1 Answers1