window.close() for back buttons

Question

window.close() for back buttons

You must Login before you can answer or comment on any questions.

Hi,

When I do back button click, I am closing the current window to show the previous window. For the back button I just close the window.

The previous window takes some time to get displayed. I can see a transition for 1 to 2 seconds with a background color of the application. How this can be fixed?

Also I heard about exitOnClose. Is it a useful one

— asked 11 months ago by Rebin Joseph

8 Comments

Are you developing for android or iOS (or both)? I'm guessing you mean android.

You really shouldn't have to explicitly handle the "back" button in android. Can you show some code samples?

— commented 11 months ago by Jason Priebe
I develop both app

I have a back button.
I just do this. I have window for each js file in the application

backBtnAppointmentDetail.addEventListener('click', function(e){
```
var appointmentWin = Titanium.UI.createWindow(admn);
```
});

— commented 11 months ago by Rebin Joseph
Some thoughts:
- you don't really want to have a separate js file for each window; instead, you want to build your windows as CommonJS modules and then require() them into your code
- the way you open windows is very important. If you're using a TabGroup, for example, you need to open the windows via the active tab in the tab group.
— commented 11 months ago by Jason Priebe
This is the code I use . this is an example

What is wrong with this file

Titanium.include('common.js');

var forgotPasswordWin = Titanium.UI.currentWindow; var viewTitleForgot = Titanium.UI.createView({ backgroundImage: '/images/top_bar.png', borderColor: '#000000', top: '0dp', width: '100%', height: '46dp' });

var backForgotBtn = Titanium.UI.createButton({ title: 'Back', backgroundImage: '/images/back_btn.png', top: '7dp', width: '50dp', height: '30dp', color: '#ffffff', left: '5dp', borderRadius: 2, font: { fontFamily: 'Arial', fontWeight: 'bold', fontSize: '12sp' } }); viewTitleForgot.add(backForgotBtn);

var ForgotHomeBtn = Titanium.UI.createButton({ backgroundImage: '/images/home_btn.png', top: '7dp', right: '5dp', width: '40dp', height: '30dp', borderRadius: 2 }); viewTitleForgot.add(ForgotHomeBtn);

var forgotlbl = Titanium.UI.createLabel({ text: 'Forgot Password', color: '#FFFFFF', top: '10dp', font: { fontFamily: 'Arial', fontWeight: 'bold', fontSize: '20sp' }, width: 'auto', height: 'auto' });

viewTitleForgot.add(forgotlbl); forgotPasswordWin.add(viewTitleForgot);

var viewForgotBody = Ti.UI.createView({ backgroundImage: '/images/inner_bg.png', top: '46dp', width: '100%', height: '416dp' });

var emailForgot = Titanium.UI.createTextField({ backgroundImage: '/images/text_field.png', font: { fontFamily: 'Arial', fontSize: '12sp' }, paddingLeft: '10dp', paddingRight: '10dp', top: '25dp', width: '294dp', height: '36dp', hintText: 'Email', keyboardType: Titanium.UI.KEYBOARD_EMAIL, borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE });

viewForgotBody.add(emailForgot);

var submitForgotBtn = Titanium.UI.createButton({ title: 'Submit', backgroundImage: '/images/submit_btn.png', color: '#ffffff', top: '74dp', width: '80dp', height: '24dp', borderRadius: 2, font: { fontFamily: 'Arial', fontWeight: 'bold', fontSize: '12sp' } });

viewForgotBody.add(submitForgotBtn); forgotPasswordWin.add(viewForgotBody);

submitForgotBtn.addEventListener('click', function(e){
```
var emailValue = emailForgot.value;
var forgtPass = new authentication_WebClient();
forgtPass.forgotPassword(emailValue, function(response){

    try {
        if (response != null) {
            if (response.hasOwnProperty('success')) {
                if (response.success == 1) {
                    var successText = showSuccessMessage(response);
                    var authAlert = Titanium.UI.createAlertDialog({
                        title: 'Success',
                        message: successText,
                        buttonNames: ['OK']
                    });
                    authAlert.show();
                }
                else 
                    if (response.success == 0) {
                        var errorText = showErrormessage(response);
                        var authAlert = Titanium.UI.createAlertDialog({
                            title: 'Error',
                            message: errorText,
                            buttonNames: ['OK']
                        });
                        authAlert.show();
                    }
            }
            else {
                var authAlert = Titanium.UI.createAlertDialog({
                    title: 'Error',
                    message: 'Service Unavailable',
                    buttonNames: ['OK']
                });
                authAlert.show();

            }
        }
    } 
    catch (e) {
        var msg = e.message;
        var authAlert = Titanium.UI.createAlertDialog({
            title: 'Error',
            message: 'An error occured. Please try again',
            buttonNames: ['OK']
        });
        authAlert.show();
    }
});
```
});

backForgotBtn.addEventListener('click', function(e){

/* var admn = { url: '/main_windows/loginForm.js', backgroundImage: '/images/login_bg.png', }; var login = Titanium.UI.createWindow(admn);/ forgotPasswordWin.close(); /if (Titanium.Platform.name == 'android') { admn.navBarHidden = true; login.open(a);
```
}

else {
    // New window (login) open at -320 px and move to 0 
    login.left = -320;
    login.open(slide_it_screen);

    // // Existing window move from 0 to 320 
    // forgotPasswordWin.animate(slide_it_right);
}*/
```
});

ForgotHomeBtn.addEventListener('click', function(e){
```
var admn = {
    url: '/main_windows/loginForm.js',
    backgroundImage: '/images/login_bg.png',
};
var login = Titanium.UI.createWindow(admn);
//forgotPasswordWin.close();
if (Titanium.Platform.name == 'android') {
    admn.navBarHidden = true;
    login.open(a);
}

else {
    // New window (login) open at -320 px and move to 0 
    login.left = -320;
    login.open(slide_it_screen);

    // // Existing window move from 0 to 320 
    // forgotPasswordWin.animate(slide_it_right);
}
```
});

— commented 11 months ago by Rebin Joseph
I can't read that. Please use the markdown syntax or put your code on pastie.org and post the URL.

— commented 11 months ago by Jason Priebe
ohh sorry. Please find it here http://pastie.org/4255682

— commented 11 months ago by Rebin Joseph
Please advice how can I improve the performance. This is my another page login.js pastie.org/4255869. This one is for forgot password http://pastie.org/4255682

When I navigate between pages, there is jump/ delay in transision. It occurs for my different pages in the app.

— commented 11 months ago by Rebin Joseph
Is the problem happening on android or ios?

I would suggest that you build a very simple test application that opens a window like your forgotPasswordWin (with the title view and a back button) and test it there. If the problem persists, then post your simple app.js so that we can run it and see it for ourselves.

If the problem does not occur in your simple test app, then gradually start adding things to your test app until you figure out exactly what is causing the problem.

If you can distill your problem down to something like this, it's a lot easier for volunteers like myself to reproduce the problem and work with you.

— commented 11 months ago by Jason Priebe
Show 5 more comments

Your Answer

Think you can help? Login to answer this question!

Are you developing for android or iOS (or both)? I'm guessing you mean android.

You really shouldn't have to explicitly handle the "back" button in android. Can you show some code samples?

— commented 11 months ago by Jason Priebe
I develop both app

I have a back button.
I just do this. I have window for each js file in the application

backBtnAppointmentDetail.addEventListener('click', function(e){

var appointmentWin = Titanium.UI.createWindow(admn);

});

— commented 11 months ago by Rebin Joseph
Some thoughts:

you don't really want to have a separate js file for each window; instead, you want to build your windows as CommonJS modules and then require() them into your code

the way you open windows is very important. If you're using a TabGroup, for example, you need to open the windows via the active tab in the tab group.

— commented 11 months ago by Jason Priebe
I can't read that. Please use the markdown syntax or put your code on pastie.org and post the URL.

— commented 11 months ago by Jason Priebe
ohh sorry. Please find it here http://pastie.org/4255682

— commented 11 months ago by Rebin Joseph
Please advice how can I improve the performance. This is my another page login.js pastie.org/4255869. This one is for forgot password http://pastie.org/4255682

When I navigate between pages, there is jump/ delay in transision. It occurs for my different pages in the app.

— commented 11 months ago by Rebin Joseph
Is the problem happening on android or ios?

I would suggest that you build a very simple test application that opens a window like your forgotPasswordWin (with the title view and a back button) and test it there. If the problem persists, then post your simple app.js so that we can run it and see it for ourselves.

If the problem does not occur in your simple test app, then gradually start adding things to your test app until you figure out exactly what is causing the problem.

If you can distill your problem down to something like this, it's a lot easier for volunteers like myself to reproduce the problem and work with you.

— commented 11 months ago by Jason Priebe