Titanium Mobile: cant navigate between pages

Question

i am new to Titanium and i am have 2 seemingly simple problems while trying to use it for the Android.

1) i am trying to navigate to the next page on click of a button. but instead it is showing me a blank black screen. i know my second page CreateNewMeetup.js is correct because i tried displaying it as the landing page of my app and it works. my codes are as follows:-

ApplicationWindow.js

...

var button = Ti.UI.createButton({
    height:44,
    width:'auto',
    title:'Create New Meetup',
    top:20
});
self.add(button);

button.addEventListener('click', function() {
    var newWindow = Ti.UI.createWindow({
        url : "/ui/common/CreateNewMeetupWindow.js",
        fullscreen: false
    });
    newWindow.open();
});

return self;

CreateNewMeetupWindow.js

//CreateNewMeetUpView Component Constructor
function CreateNewMeetupWindow() {
var self = Ti.UI.createWindow({
    layout : 'vertical',
    backgroundColor:'white'
});

var contactsField = Ti.UI.createTextField({
    borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    color : '#336699',
    width : 400,
    height : 60
});
self.add(contactsField);

var locationField = Ti.UI.createTextField({
    borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    color : '#336699',
    width : 400,
    height : 60
});
self.add(locationField);

var lblNotifyMe = Ti.UI.createLabel({
    color : 'black',
    text : 'Notify me when s/he is',
    textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
    width : 'auto',
    height : 'auto'
});
self.add(lblNotifyMe);

var btnGo = Ti.UI.createButton({
    title : 'Go',
    height : 'auto',
    width : 100
});

btnGo.addEventListener('click', function() {
    // Check console
    Ti.API.info('User clicked the button ');

});
self.add(btnGo);

return self;
};

2) after installing the app onto my device, i tried to launch it. the app shows momentarily (about 3 seconds maybe) and then it shuts down by itself. i guess its an app crash? but it works well on the emulator.

Titanium experts please help :$

Answer 1

You can use the following methods in your program to navigate between windows

Method 1

//Your app.js file
var button = Ti.UI.createButton({
    height:44,
    width:'auto',
    title:'Create New Meetup',
    top:20
});
self.add(button);

button.addEventListener('click', function() {
    //By doing this you're opening a new window
    var newWindow = Ti.UI.createWindow({
        url : "ui/common/CreateNewMeetupWindow.js",//Provide the correct path here
        fullscreen: false
    });
    newWindow.open();
});


//Your CreateNewMeetupWindow.js file

var newWindow = Ti.UI.currentWindow;

var contactsField = Ti.UI.createTextField({
    borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    color : '#336699',
    width : 400,
    height : 60
});
newWindow.add(contactsField);

//You can add other controls here just like I added the contactsField

Method 2

var button = Ti.UI.createButton({
    height:44,
    width:'auto',
    title:'Create New Meetup',
    top:20
});
self.add(button);

button.addEventListener('click', function() {
    var window = require('/ui/common/CreateNewMeetupWindow');
var newWindow = new window();
    newWindow.open();
});

//Your CreateNewMeetupWindow.js file

function CreateNewMeetupWindow() {
    var self = Ti.UI.createWindow({
        layout : 'vertical',
        backgroundColor:'white'
    });

    var contactsField = Ti.UI.createTextField({
        borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
        color : '#336699',
        width : 400,
        height : 60
    });
    self.add(contactsField);

    //Add other controls here

    return self;
}
module.exports = CreateNewMeetupWindow;

You can use any single method from above. Do not mix the methods together.

You can use the following link for references

1. http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window-property-url
2. http://docs.appcelerator.com/titanium/latest/#!/api/Global-method-require

Answer 2

For your first problem, you are using the url property with a CommonJS object. So instead instantiate your window like this:

var newWindow = require("/ui/common/CreateNewMeetupWindow");
newWindow.open();

You would use the url property if your CreateNewMeetupWindow.js was not a CommonJS module.

Not sure what your second problem is, check your device logs and crash reports, otherwise there is no way to know what is going on.