Question

I have a navigationgroup using which I have a Master and a DetailView. When opening the detailView using the MasterView, the navigationGroup automatically provides a button on the top bar to go back to the MasterView.

What I would like to acheive is to have a button on the detailView. On click of the button on the detailView, would like to process a job and then go back to the MasterView.

I am able to add a listener to the button on detailView and perform the desired job, but how do i close the detailView and go back to the MasterView?

Posted below is the code for 3 files

• ApplicationWindow.js
• MasterView.js
• DetailView.js

ApplicationWindow.js

var MasterView = require('ui/common/MasterView'), DetailView = require('ui/common/DetailView');
    var masterView = new MasterView(), detailView = new DetailView();

    //create master view container
    var masterContainerWindow = Ti.UI.createWindow({
        title : 'Product',
    });
    masterContainerWindow.add(masterView);

    //create detail view container
    var detailContainerWindow = Ti.UI.createWindow({
        title : 'Product Details'
    });
    detailContainerWindow.add(detailView);

    //create iOS specific NavGroup UI
    var navGroup = Ti.UI.iPhone.createNavigationGroup({
        window : masterContainerWindow
    });
    self.add(navGroup);

    //add behavior for master view
    masterView.addEventListener('itemSelected', function(e) {
        detailView.fireEvent('itemSelected', e);
        navGroup.open(detailContainerWindow);
    });

masterContainerWindow.open();

MasterView.js

//Master View Component Constructor
function MasterView() {
    //create object instance, parasitic subclass of Observable
    var self = Ti.UI.createView({
        backgroundColor:'white'
    });

    //some dummy data for our table view
    var tableData = [
        {title:'Apples', price:'1.25', hasChild:true, color: '#000'},
        {title:'Grapes', price:'1.50', hasChild:true, color: '#000'},
        {title:'Oranges', price:'2.50', hasChild:true, color: '#000'},
        {title:'Bananas', price:'1.50', hasChild:true, color: '#000'},
        {title:'Pears', price:'1.40', hasChild:true, color: '#000'},
        {title:'Kiwis', price:'1.00', hasChild:true, color: '#000'}
    ];

    var table = Ti.UI.createTableView({
        data:tableData
    });
    self.add(table);

    //add behavior
    table.addEventListener('click', function(e) {
        self.fireEvent('itemSelected', {
            name:e.rowData.title,
            price:e.rowData.price
        });
    });

    return self;
};

module.exports = MasterView;

DetailView.js

function DetailView() {
    var self = Ti.UI.createView();

    var lbl = Ti.UI.createLabel({
        text : 'Please select an item',
        height : 'auto',
        width : 'auto',
        color : '#000'
    });
    self.add(lbl);

    self.addEventListener('itemSelected', function(e) {
        lbl.text = e.name + ': $' + e.price;
    });

    var btn = Ti.UI.createButton({
        text : 'Close Me'
    });

    btn.addEventListener('click',function(){
        //Do Opertation
        //Close Detail View
    });

    self.add(btn);
    return self;
};

module.exports = DetailView;

On the detailView, I have added a button named ‘btn’ which also has an eventListener. I would like to close the detailview using this button. Please advice.
Thanks and Regards

Abishek R Srikaanth

Answer 1

I created an custom EventListener for the detailView on ApplicationWindow, fired that event on button click. used the navGroup’s close event passing the detailContainerWindow.

ApplicationWindow.js

detailView.addEventListener('closeItem', function(e) {
            Ti.API.info('event called');
            navGroup.close(detailContainerWindow);

        });

DetailView.js

btn.addEventListener('click', function(e) {
            self.fireEvent('closeItem', e);
});