My custom window animations dont work when using navbarhidden

Hello,

I have this android app, and i want to animate the different windows, so it looks like they slide on screen, instead of popping up. I got this all working, the old window slides away, while the new window slides in.

The first problem i encountered was that the back button closed the whole application instead of going back to the previous screen, it did not matter at what values i would set the property exitOnClose, it just always closed the application. With alot of tweaking and googling i figured out that the only way to use the hardware close button was by assigning navBarHidden any kind of value. Well i did so and the back button was working again.

You might think that all is solved now, but its not, because when you set the navBarHidden any value, it doesnt matter what value i set it, it wont allow my app to animate windows, so my hard work to animate windows was useless, because for the back button to work, i cant let my windows animate, and for my windows to animate, the backbutton will always quit the app.

Therefore i ask you, is there one more tiny little property that i need to set to allow animated windows while also enabling the backbutton for whatever purpose i have.

If my code is needed, please ask, since the code is pretty much spread over multiple documents to implement some sort of MVC pattern.

Thanks, Hylke

Will you please post the sample code which are you using?..If will help in debugging the issue.

Okay, then lets get started, first of all the app.js is shown below

var win = Ti.UI.createWindow
(
    {
        url:'Controllers/main.js',
        exitOnClose: true,
        navBarHidden: true
    }
);
 
if(Ti.Platform.osname == 'android')
{
    win.open();
}// below doesnt matter on the case because it is not for android
else
{
    var navGroup = Ti.UI.iPhone.createNavigationGroup
    (
        {
            window: win
        }
    );
    win.navGroup = navGroup;
 
    var main = Ti.UI.createWindow();
    main.add(navGroup);
    main.open();
}

In this code shown above, there is created a window, which functions as the controller in my stripped out MVC pattern (only using view and controller on this case)

The code that is opened is the following Controllers/main.js

var win = Ti.UI.currentWindow;
 
Ti.include('../Views/' + Ti.Platform.osname + '/main.js');
 
buttonClick.addEventListener('click',
    function(e)
    {
        buttonClick.title='I clicked you!';
    }
);
buttonNext.addEventListener('click',
    function(e)
    {
        var loginWindow = Ti.UI.createWindow
        (
            {
                url:'login.js',
                navBarHidden: true
            }
        );
        loginWindow.previousWindow = win;
 
        // This method is called from the file attached in the include at the top of this file
        // This means that the View (this is the controller) has the OS specific open window code, 
        // including the required code for animations for android
        OpenWindow(loginWindow);
    }
);

This code contains the eventlisteners for 2 buttons, one button only shows some text, where the other button will open another window (buttonNext will do so)

The actual opening of the next window is done in the view, which is included at the top of this document, the actual path is ../Views/android/main.js which has the following code:

var label = Ti.UI.createLabel
(
    {
        text:'Android!',
        color:'#FFFFFF'
    }
);
win.backgroundColor = "#000000";
win.add(label);
 
var horizontalView = Ti.UI.createView
(
    {
        layout:'horizontal',
        width:'80%'
    }
);
var buttonClick = Ti.UI.createButton
(
    {
        title:'Click Me!',
        width:'50%'
    }
);
var buttonNext = Ti.UI.createButton
(
    {
        title:'Next...',
        width:'50%'
    }
)
horizontalView.add(buttonClick);
horizontalView.add(buttonNext);
 
win.add(horizontalView);
 
function OpenWindow(window)
{
    window.SlideAwayOldWindow = SlideAway;
    window.right = -Ti.Platform.displayCaps.platformWidth;
    window.left = Ti.Platform.displayCaps.platformWidth;
    window.open();
}
 
function SlideAway()
{
    var animation = Ti.UI.createAnimation();
    animation.duration = 700;
    animation.right = Ti.Platform.displayCaps.platformWidth;
    animation.left = -Ti.Platform.displayCaps.platformWidth;
    win.animate(animation);
}

In this code above the UI is set up, creating the actual buttons (note that the UI is generated before assigning the eventlisteners in the controller, since this file gets included before the eventlisteners are assigned).

Also note the function OpenWindow(window). All this function does is assign a function SlideAway() used to slide the current window away and it sets the window that needs to be opened right of the actual screen, so it really slides in from the right when the animation is called (which is done in another document that ill show next).

The function SlideAway() slides the current window to the left, out of the screen, and will be called in the next piece of code. By the way, this code is opened as soon as the window.open() is called in the function OpenWindow(window), because the window given to that function has an url specified in the controller which goes to url:'login.js', (see the file Controllers/main.js for that).

Controllers/login.js:

var win = Ti.UI.currentWindow;
 
Ti.include('../Views/' + Ti.Platform.osname + '/login.js');

All this code currently does is include the view for this controller, which is specified at the following path:

../Views/android/login.js

// window initializing
win.backgroundColor = "#FFFFFF";
// fill window with elements
var label = Ti.UI.createLabel
(
    {
        text:'Login For android!',
        color:'#000000'
    }
);
win.add(label);
 
// define animation
var animation = Titanium.UI.createAnimation();
animation.right = 0;
animation.left = 0;
animation.duration = 700;
 
 
// animate the animation
win.addEventListener('postlayout', function(){win.animate(animation);win.SlideAwayOldWindow();});

This piece of code fills the new window that should slide in.

Once all of the layout has been set using the eventListener postlayout it will first start to animate this window inside the screen (remember that this windows left and right were set to start outside the screen), and right after that it calls the function of the old window using win.SlideAwayOldWindow() to slide away the previous window. Remember that this delegate was set in the old window specified with the file Views/android/main.js with the following piece of code: window.SlideAwayOldWindow = SlideAway;.

This is pretty much the whole architecture of the current app ive got, and when i set the navBarHidden : true OR false in a view, that view wont animate, but just pop up (but the hardware back button will work as it should). When i just ignore the navBarHidden property, and i dont set it, it will animate smoothly, yet when i use the hardware back button in that application, it will just shut down the whole application. I cant even catch the event for this back button, it will just ignore my eventlistener on it when i define it.

Is this some known issue or am i doing something terribly wrong? Or is there maybe a solution to this, which wont solve this particular issue, but it will work the way i want it to work?

Thanks in advance,

Hylke