Titanium/ Appcelerator Alloy - Closing multiple parent windows

Question

I have 4 views all with a single button. I want the following simple behaviour.

• home: Clicking the button should go to dashboard. Clicking the Android back button should exit the application
• dashboard: Clicking the button should open profile. Clicking the Android back button should close the current window and return back to home.
• profile: Clicking the button should open settings. Clicking the Android back button should close the current window and return back to dashboard.
• settings: Clicking the button should close the settings, dashboard and profile pages and return the user back to home. Clicking the Android back button should close only the current window and return back to profile.

This is what I have so far:

home

<Alloy>
    <Window class="container">
        <Button onClick="openProfile">Open Dashboard</Button>
    </Window>
</Alloy>

With JS:

function openDashboard() {
    Alloy.createController('dashboard').getView(); 
}

dashboard

<Alloy>
    <Window class="container">
        <Button onClick="openProfile">Open Profile</Button>
    </Window>
</Alloy>

With JS:

function openProfile() {
    Alloy.createController('profile').getView(); 
}

profile

<Alloy>
    <Window class="container">
        <Button onClick="openSettings">Open Settings</Button>
    </Window>
</Alloy>

With JS:

function openSettings() {
    Alloy.createController('settings').getView(); 
}

settings

<Alloy>
    <Window class="container">
        <Button onClick="backToHome">Back To Home</Button>
    </Window>
</Alloy>

However I am unsure on the JS to use to close both parent windows.

Answer 1

The way I managed to do it is by passing the parent windows across like so:

home

function openDashboard() {
    Alloy.createController('dashboard', {'parent': $}).getView(); 
}

dashboard

function openProfile() {
    Alloy.createController('profile', {'parent': $}).getView(); 
}

profile

function openSettings() {
    Alloy.createController('settings', {'parent': $}).getView(); 
}

settings

function backToHome() {
     $.getView().close(); // Close current window
     $.args.parent.getView().close(); // Close profile window
     $.args.parent.args.parent.getView().close(); // Close dashboard
}

Loops can make the above code more readable like so:

function backToHome() {   
     var controller = $;
     for (var i = 0; i < 3; i++) {
         controller.getView().close();
         controller = controller.args.parent;
     }
}

Answer 2

There are 2 best ways to do this:

Method 1: Using JS-only event dispatcher system.

Create and put a file 'EventDispatcher.js' in app-lib folder and put this code in it.

module.exports = _.clone(Backbone.Events)

Put this code in dashboard.js & profile.js

var eventsDispatcher = require('EventDispatcher');
eventsDispatcher.on('closeEventFromSettings', closeMethod);

function closeMethod() {
    eventsDispatcher.off('closeEventFromSettings', closeMethod);
    $.getView().close();
}

Finally use this code on settings.js whenever you want to close dashboard and profile windows

require('EventDispatcher').trigger('closeEventFromSettings');

Method 2: Passing callbacks to window controller.

dashboard.js

function closeMe() {
    $.dashboard.close();
}

function openProfile() {
    Alloy.createController('profile', {cb: closeMe}).getView(); 
}

profile.js

function closeMe() {
    $.args.cb();    // it will close the dashboard
    $.profile.close();
}

function openSettings() {
    Alloy.createController('settings', {cb: closeMe}).getView(); 
}

settings.js

function backToHome() {
    $.args.cb();
}

There are other ways obviously, but I prefer to use these 2 only from performance and maintenance perspective.