Appcelerator Titanium Mobile App Screens?

Question

I am trying to figure out how to make a multi-screen app using Appcelerator Titanium. I am familiar with Android development, so using the Android SDK I would create a few different activities, each doing their different work (login screen, screen displaying list of items, etc.) What is the equivalent in Titanium? I know that app.js is the main part of the app, but I assume it is not recommended to just put all code in that single file. The kitchen sink app has a lot of files and functionality, but I am not sure how they all fit together. So, what is the recommended way to create a project in Titanium for a basic app with a few screens doing different things? I am missing the Titanium concept of a screen.

Answer 1

App.js file is basically the file to initialize different window screens, and use Tabs to load those windows screens.Here is a link to create simple screens Create Window & Tabs

For further properties related to TitaniumUI

Answer 2

no..

you can do it like

var button = Ti.UI.createButton({..});

button.addEventListener('click',function(e){
    var window = Ti.UI.createWindow({
            url:"../newWindow.js",
            title:"newWindow"
    });

    Titanium.UI.currentTab.open(window,{animated:true});
});

i recommend to use the MVC-pattern like i already posted here.

Answer 3

Try doing this:

app.js

Tintanium.include('window1.js', 'window2.js');

...

    var button1 = Titanium.UI.createButton({...});

button1.addEventListener('click',function(){
    window1.open();
    });

window1.js

var window1=Titanium.UI.createWindow({...});

...etc...

Hope this will help ;)

Answer 4

After a lot of time research i i found the solution for opening different windows with a click event attached to a button.

employee.js

//Current window (employee window)
var employeeWin = Ti.UI.currentWindow;

//define button
var moveToDetailBtn = Ti.UI.createButton({
   width      : 200,      //define the width of button
   height      : 50,      //define height of the button
   title         : 'Show Detail'   //Define the text on button
});

//Click event to open the Employee Details window
moveToDetailBtn.addEventListener('click', function(){

   //Call a export function
   var win = require('employeeDetails').getEmployeeDetailSWin;

   //Create new instance
   var employeeDetailsWin = new win();

   //Open the Employee Details window
   employeeDetailsWin.open();
});


//Add the button to the window
employeeWin.add(moveToDetailBtn);

In employeeDetails.js

exports.getEmployeeDetailSWin = function(){

   //Creates a new window
   var empDetailsWin = Ti.UI.createWindow({
      backgroundColor   : '#ffffff'      //Define the backgroundcolor of the window
   });

   //Addin a label to the window
   empDetailsWin.add(Ti.UI.createLabel({
      width      : 100,      //Define width of the label
      height      : 50,      //Define height of the label
      title         : 'Employee Details'
   }));

   return empDetailsWin;
};

I found the solution in this page: http://www.mindfiresolutions.com/Open-New-Window-Without-URL-Property-In-Titanium-2214.php

Answer 5

try using my code below:

    // functions
    function openHomescreen(e)
    {
        settings.close();
        getlucky.close();
        survey.close();

        homescreen.url          = 'homescreen.js';
        homescreen.open();
    }

    function openGetlucky(e)
    {
        settings.close();
        homescreen.close();

        getlucky.url           = 'getlucky.js';
        getlucky.open();
    }

// events
Ti.App.addEventListener('homescreen',openHomescreen);
Ti.App.addEventListener('getlucky',openGetlucky);

openHomescreen({});

To open homescreen in other JS file, use this.

Ti.App.fireEvent('homescreen');