Amazon.com Widgets

Agile Otaku

Sliding Windows with Appcelerator Titanium

In a previous post, you created a very simple list application consisting only of four list items given to a tableview and displayed through a single window.

This time, we will add some window to window sliding functionality.

This behavior is useful when showing master/detail scenarios in a real application.

If you came to this post through Google or through other means, you can get the code for the previous post using the following git command.

$ git clone git@github.com:HugeAim/titanium-list-app.git
$ git checkout part1

First lets create your second file named window2.js. Put the following code there.

var data = [
    {title:'Window 2 Content 1'},
    {title:'Window 2 Content 2'},
    {title:'Window 2 Content 3'},
    {title:'Window 2 Content 4'}
];

// create table view
var tableview = Titanium.UI.createTableView({
    data:data
});

Then change the first item in the data variable of app.js.

var data = [
    {title:'List Content 1', hasChild:true, toUrl:'window2.js'},
];
    ...

There, the necessary indicator is the "hasChild" property to tell Titanium that an item is drillable. An additional arrow indicator will be apparent when you try to run again

Before going any further. Lets contemplate for a while how we would switch windows. The obvious way is to just close the current window then open the next window. That makes sense right? To do that we need a tableview click event handler. Add the following to the bottom of app.js file

// create table view event listener
tableview.addEventListener('click', function(e)
{
    if (e.rowData.toUrl)
    {
        var win2= Titanium.UI.createWindow({url:e.rowData.toUrl});
        win1.close();
                win2.open();
    }
});

That works! But something is wrong. The switching does not slide from right to left. By looking at the API, there is no such thing as right to left animation. We only have curl and flip.

Unfortunately, when switching one window to another using a list view, a user naturally expects it to slide not flip or curl. After some googling, I got pointed to NavigationGroup. The API mentions nothing about it though. Scrap that, lets just modify the code and see if it can solve our problem.

Go back to app.js to do some cleaning first. Basically commenting out the things that you will no longer need (see the highlighted lines).

...
// win1.open();
// create table view event listener
tableview.addEventListener('click', function(e)
{
    if (e.rowData.toUrl)
    {
        var win2= Titanium.UI.createWindow({url:e.rowData.toUrl});
        // win1.close();
        // win2.open();
    }
});

After removing those lines, lets replace it with the new lines.

...
// win1.open();
// create table view event listener
tableview.addEventListener('click', function(e)
{
    if (e.rowData.toUrl)
    {
        var win2= Titanium.UI.createWindow({url:e.rowData.toUrl});
        // win1.close();
        // win2.open();
            navGroup.open(win2);
    }
});
var navGroup = Ti.UI.iPhone.createNavigationGroup({
    window:win1
});
var main = Ti.UI.createWindow();
main.add(navGroup);
main.open();

Run it. Hmm. Something is wrong right? The second window does not show the correct view.

This is because I purposely left out something in window2.js. Add the following line to that file.

Titanium.UI.currentWindow.add(tableview)

Because the window(win2) was created outside "window2.js", we did not have a way to add the tableview there. Titanium provides a way to do just that by providing the "Titanium.UI.currentWindow" which is the currentWindow of our Navigation group.

Now run it again.

This time it works! Congratulations. We have finished our Sliding Window Application.

You may view the finished code through

$ git checkout part2

Comments