Alloy navigation between windows

Question

I have 3 screen with alloy (appcelerator) :

index.xml

<Alloy>
    <Window class="container">
        <ImageView id = "actor" image="/images/f_logo.jpg"></ImageView>
        <Label id = "bienvenue"  onClick="doClick" > Bienvenue </Label>
        <Label id = "apropos"> A propos </Label>
    </Window>
</Alloy>

welcome.xml

<Alloy>
    <Window class = "win2container">
        <ImageView id = "bienvenue2" image="/images/f_logo.jpg"></ImageView>
        <View id="texte" onClick="showTable">
            <Label text="Afficher la liste" ></Label>
        </View>
    </Window>
</Alloy>

liste.xml

<Alloy>
<Tab title="Basic">
    <Window title="Basic">
        <ListView id = "liste" itemClick="onItemClick">
            <ListSection>
                <ListItem title="Row 1"></ListItem>
                <ListItem title="Row 2"></ListItem>
                <ListItem title="Row 3"></ListItem>
                <ListItem title="Row 4"></ListItem>
                <ListItem title="Row 5"></ListItem>
                <ListItem title="Row 6"></ListItem>
                <ListItem title="Row 7"></ListItem>
                <ListItem title="Row 8"></ListItem>
                <ListItem title="Row 9"></ListItem>
                <ListItem title="Row 10"></ListItem>
                <ListItem title="Row 11"></ListItem>
                <ListItem title="Row 12"></ListItem>
            </ListSection>
        </ListView>
    </Window>
</Tab>
</Alloy>

index.js (works)

function doClick(e) {
var win = Alloy.createController("welcome").getView();
win.open();
}

$.index.open();

welcome.js (I want to open liste windows)

function showTable(e){
var liste = Alloy.createController("liste");
liste.getView().open();
}

When i click on index label it open welcome window and when i click on welcome view it do nothing, my aim is to discover how to navigate between many windows (view files) with alloy.

Secondly i see on google, it is a good practice to close previous windows like this :

$.win.close();
$.win = null;

When i put this code inside index.js after $.win.open() it doesn't works (ie: i got error)

function doClick(e) {
var win = Alloy.createController("bienvenue").getView();
win.open();
$.win.close(); // or win.close() ?
$.win = null; // or win = null ?
}

Any suggestions? i tried many times without success.

Thanks all.

David Glass David Glass · Accepted Answer · 2014-10-15T18:37:40

Regarding the close() being good practice, yes and no.

If you want the window to be there when the user navigates back with the back button, then no, because in essence, it will be closed.

function doClick(e) {
 var win = Alloy.createController("bienvenue").getView();
    win.open();
    $.win.close(); // DEFINITELY $.win, as you created a var named win for your new window
    $.win = null; // and $.win is the equivalent of findViewById("win")
}

By the way, the way you're opening windows, you won't be able to leverage the navigation (hadware back in Android, soft-back in iOS navigation)

With Android, I typically write my own manager to determine which window currently has the focus, and what happens when you go back.

With iOS, you should use something like this to add your window succession to the navigation section

var controllerWindow = Alloy.createController("bienvenue") // changed win to controllerWindow for clarity


var nav = Titanium.UI.iOS.createNavigationWindow({
                   window: controllerWindow
                });
nav.open();

Alloy navigation between windows

2 Answers