Detect back button click in NavigationWindow in a SplitWindow (Master/Detail) on Titanium Appcelerator

Question

I have a tabbed application (iOS - using Alloy framework) and one of the tab is for showing products. Within this tab, I have a Master / Detail setup using SplitWindow.

In the Master, I have a simple category browser using table view. This is my view xml:

<Alloy>
    <Tab title="Products" icon="Nav_Products.png" id="tabProducts" backgroundColor="white">
        <SplitWindow backgroundColor="white" showMasterInPortrait="true">

            <!-- Categories -->
            <NavigationWindow id="categoriesWindow">
                <Window title="Categories">
                    <TableView id="categories" separatorStyle="Titanium.UI.iPhone.TableViewSeparatorStyle.SINGLE_LINE" />
                </Window>
            </NavigationWindow>

            <!-- Products -->
            <NavigationWindow>
                <Window id="resultsWindow" title="Select a category to browse it's products" backgroundColor="white">
                    <RightNavButton>
                        <Button right="0" id="basketSubTotal" />
                    </RightNavButton>
                    <View left="10" top="10" right="10" bottom="10">
                        <TableView rowHeight="160" id="tblResults" allowsSelection="false" />
                    </View>
                </Window>
            </NavigationWindow>

        </SplitWindow>
    </Tab>
</Alloy>

When the app loads, it renders the root categories like this:

If I click on the category "HAIR", it loads the sub categories in "HAIR" and a "Back" button titled "Categories" appears like this:

So, when I click on "< Categories" (i.e. the back button), it goes back to the root category list. This is all working fine.

What I want to do is, detect when the back button is clicked, and handle the action.

Because at the moment, if I go into 3 level deep into a category, everything works fine. However, when I start going "back", the products that was loaded previously remains in the results table. I want to be able to basically reload the results as you step back through the navigation. For me to achieve this, i need to detect when the back button in navigation window is clicked. How can i achieve this?

Victor Casé Victor Casé · Accepted Answer · 2016-01-28T21:06:24

You can listen the 'close' event that is fired after the back button has been pressed. Per example in your navigation window controller:

var controller = Alloy.createController().getView();
controller.addEventListener('close', function closed(e) {
     controller.removeEventListener('close',closed);
     [...]
});
$.navwindow.openWindow(controller); // .open(controller)

Or, you can listen to an custom event, that will be fired at your next window/controller

Like... your table controller waiting listening for an event, e.g 'need_refresh'

Ti.App.addEventListener('need_reload', function() {
    loadNewContent();
});

And you can fire programmatically at some logic using fireEvent

Ti.App.fireEvent('need_reload');

Then, when the user pressed the back button, your table had been already refreshed.

I hope that help you :)

Detect back button click in NavigationWindow in a SplitWindow (Master/Detail) on Titanium Appcelerator

1 Answers