Appcelerator Titanium - Cross Platform Navigation Control with Login Screen

Question

Until now when using my apps I have used a navigation control library that I have since using Titanium classic projects (just took it with me when I moved to writing Alloy apps).

I had a look at the Employee Directory source and saw another (similar yet) interesting approach to writing cross-platform navigation in a more "Alloy" way. The controllers are at the index.xml view and the logic in the index.js controller while the app actually starts in a different directory controller and view.

I have to say, that this way is a bit cleaner than my legacy code.

But one thing I do have in my legacy code that is part of an app I need to build now is a login screen. What I do in my code is check if the user is logged in, and if so first window I open is a login screen, else if the user is logged in I open the main app.

In this example, the main window is set in the view itself:

<Alloy>
    <!-- Default App Window -->
    <Require id="index" src="main" platform="android,windows" /> 

    <!-- iOS Window -->
    <NavigationWindow id="nav" platform="ios" class="container">
        <Require src="main" />
    </NavigationWindow>

    <!-- MobileWeb -->
    <Window platform="mobileweb">
    <NavigationGroup id="nav" class="container">
        <Require src="main" />
    </NavigationGroup>
    </Window>
</Alloy>

My dilemma is how to make the login open if user is not logged in. I thought about moving that login in the main window view and if the user is not logged in, require the a login controller, which will return a view that will take the entire screen and add that view to the screen. Once the user logs in, remove that view.

The solution I'm looking for should not affect the performance of the app and I'm trying to avoid showing some "flickering" to the user when he opens the app for the first time (the background image of the login is the same as the splash screen). so the user should not see the white background of the main app and then the login load.

What is the correct answer in such situation (even at the cost of staying with my old code-only navigation controller)?

Nilesh Patel Nilesh Patel · Accepted Answer · 2016-02-01T12:14:22

Try this index.xml

<Alloy>
 <NavigationWindow id="nav" platform="ios" class="container">

</NavigationWindow>
</Alloy>

index.js

if (isloggedIn) {
    var winMain = Alloy.createController('winMain').getView();
    if(OS_IOS){
       $.nav.window = winMain;
       $.nav.open();
    } else {
      winMain.open();
    }
} else {
   var winLogin = Alloy.createController('winLogin').getView();
    if(OS_IOS){
       $.nav.window = winLogin;
       $.nav.open();
    } else {
      winLogin.open();
    }
}

Here 'isloggedIn' is your boolean variable for check is already logged in or not.

Appcelerator Titanium - Cross Platform Navigation Control with Login Screen

1 Answers