Question

I think I may be applying too much of my normal context (web app dev) to a new mobile project using Titanium. I have a home screen that contains a few buttons. I need each button to open a new window with completely new content. In my head, I just assumed that windows would work like requests or pages in that creating and opening a new window would entirely replace the existing content with the new. That doesn’t seem to be the case (or I’m doing something horribly, horribly wrong). On my home screen, here’s the event handler for one button:

btn_er_app.addEventListener( 'click', function( e ) {
    var win = Ti.UI.createWindow({
        bottom: 0,
        title: 'Next "Page"',
        top: 0,
        url: 'next_page.js',
    });
    win.open({ animated: true });
});

My next_page.js page looks like this (snippet):

var win = Ti.UI.currentWindow;
win.layout = 'vertical';

var header = Ti.UI.createView({
    backgroundColor: '#f00', 
    height: 60,
    top: 0, 
});
win.add( header );

var body = Ti.UI.createView({
    backgroundColor:'#000',
    backgroundImage: '/images/body.png',
});
var label = Ti.UI.createLabel({
    text: 'Page Bits Go Here',
    textAlign: 'center',
});
body.add( label );

win.add( body );

What I’m finding is that the home screen content is still visible. The red header block shows up, but not the body view. I’ve tried setting properties: height: '100%', bottom: 0, height: 'auto' and even setting the new window’s fullscreen value to true, but nothing works.

First, how does “linking” work in the mobile space? I really think that my entire thought process about this needs to be realigned and, second, what do I need to do to make my new window completely obscure the underlying home screen window?

Thanks for your help.

Answer 1

You should not replace the window, but actually create a new one, and let it open.

Depending on what you are trying to achieve you should probably create a modal window.

Here’s how:

var newWin = Ti.UI.createWindow({
    modal: true,
    title: 'new Window',
    navBarHidden: false
});

// adding a button to close the window again:

var button = Ti.UI.createButton({
    title: 'Close'
});

button.addEventListener('click',function(){
    newWin.close();
    newWin.hide();
});

win.leftNavButton = button;

newWin.open();

With this window you can do all kind of stuff, and add your views etc.