Navigation between table views in tabs

Question

Navigation between table views in tabs

You must Login before you can answer or comment on any questions.

Hello,

im using this code in my app to retrieve videos from youtube on android.

when i click on a playlist in the table view it takes me to the videos in that list.

how can i get back to the first list? i want to be able to navigate through the views.

when i click the back button on an android device it shuts down the app and i have to reopen the app again.

please help, thanks in advance.

app.js

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
 
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
 
//
// create base UI tab and root window
//
var win = Titanium.UI.createWindow({
    title : 'Youtube Playlist',
    backgroundColor : '#fff',
    tabBarHidden : true
});
var tab1 = Titanium.UI.createTab({
    title : 'Yourube Playlist',
    window : win
});
 
var platform = Ti.Platform.osname;
var channelName = "ddrricky";
var videoList = require('youtubeVideolist');
 
// Empty array "rowData" for our tableview
var rowData = [];
// Create our HTTP Client and name it "loader"
var loader = Titanium.Network.createHTTPClient();
// Sets the HTTP request method, and the URL to get data from
loader.open("GET", "http://gdata.youtube.com/feeds/api/users/"+channelName+"/playlists?v=2");
 
// Runs the function when the data is ready for us to process
loader.onload = function() {
 
    var doc = this.responseXML.documentElement;
    var items = doc.getElementsByTagName("entry");
    for (var i = 0; i < items.length; i++) {
        var item = items.item(i);
        var al_title = item.getElementsByTagName("title").item(0).text;
        var vid_count = item.getElementsByTagName("yt:countHint").item(0).text;
        var pl_list_id = item.getElementsByTagName("yt:playlistId").item(0).text;
 
        var op_title = al_title + " (" + vid_count + ")";
 
        var row = Titanium.UI.createTableViewRow({
            height : 'auto',
            titleText : op_title,
            palaylist_id : pl_list_id,
            color : '#000',
            font : {
                fontSize : 15,
                fontWeight : 'bold',
                fontFamily : 'Helvetica Neue'
            }
        });
 
        var label = Ti.UI.createLabel({
            text : op_title,
            left : 5,
            top : 8,
            bottom : 8,
            right : 5,
            height : Ti.UI.SIZE,
            color : '#000',
            font : {
                dontSize : 14,
                fontWeight : 'bold'
            }
        });
        row.add(label);
 
        rowData[i] = row;
 
    }
    var tableView = Titanium.UI.createTableView({
        top : 0,
        backgroundColor : '#fff',
        data : rowData
    });
    //Add the table view to the window
    win.add(tableView);
 
    tableView.addEventListener('click', function(e) {
        var window = videoList.youtubeVideolist(e.rowData.titleText, e.rowData.palaylist_id);
        if (platform == "iphone") {
            tab1.open(window, {
                animated : true
            });
        } else {
            window.open();
        }
    });
 
};
 
loader.onerror = function(e) {
    Ti.API.debug(e.error);
    alert("Unable to connect to server");
    Ti.App.fireEvent('hide_indicator');
};
 
loader.timeout = 10000;
/* in milliseconds */
 
// Send the HTTP request
loader.send();
 
tabGroup.addTab(tab1);
 
// open tab group
tabGroup.open();

youtubeVideolist.js

exports.youtubeVideolist = function(title_name, playlist_id) {
    var platform = Ti.Platform.osname;
    var win = Ti.UI.createWindow({
        backgroundColor : '#fff',
        title : 'Video List'
    });
 
    // Empty array "rowData" for our tableview
    var data = [];
    // Create our HTTP Client and name it "loader"
    var loader = Titanium.Network.createHTTPClient();
    // Sets the HTTP request method, and the URL to get data from
    loader.open("GET", "http://gdata.youtube.com/feeds/api/playlists/" + playlist_id + "?v=2");
 
    // Runs the function when the data is ready for us to process
    loader.onload = function() {
 
        var doc = this.responseXML.documentElement;
        var items = doc.getElementsByTagName("entry");
 
        for (var c = 0; c < items.length; c++) {
            var item = items.item(c);
            var thumbnails = item.getElementsByTagName("media:thumbnail");
            if (thumbnails && thumbnails.length > 0) {
                var media = thumbnails.item(0).getAttribute("url");
                var title = item.getElementsByTagName("title").item(0).text;
                var videoId = item.getElementsByTagName("yt:videoid").item(0).text;
                var row = Ti.UI.createTableViewRow({
                    video_id : videoId,
                    video_title : title,
                    height : Ti.UI.SIZE,
                });
                var label = Ti.UI.createLabel({
                    text : title,
                    left : 92,
                    top : 5,
                    bottom : 5,
                    right : 5,
                    height : Ti.UI.SIZE,
                    color : '#000',
                    font : {
                        dontSize : 14,
                        fontWeight : 'bold'
                    }
                });
                row.add(label);
 
                var img = Ti.UI.createImageView({
                    image : media,
                    left : 5,
                    height : 60,
                    width : 80,
                    top : 5,
                    bottom : 5
                });
 
                row.add(img);
                data.push(row);
            }
        }
        var tableView = Titanium.UI.createTableView({
            top : 0,
            backgroundColor : '#fff',
            data : data
        });
        //Add the table view to the window
        win.add(tableView);
 
        tableView.addEventListener('click', function(e) {
            if (platform == 'android') {
                Titanium.Platform.openURL('http://www.youtube.com/watch?v=' + e.rowData.video_id);
            } else {
                var ytVideoSrc = "http://www.youtube.com/v/" + e.rowData.video_id;
 
                var playerWin = Ti.UI.createWindow({
                    backgroundColor : '#ccc'
                });
                playThisVid(playerWin, ytVideoSrc)
 
            }
        });
 
        function playThisVid(view, video) {
            // Set the window orientation
            view.orientationModes = [Ti.UI.LANDSCAPE_RIGHT];
 
            var videoUrl = video;
            var htmlheader = "<html><head></head><body style='margin:0'><embed id='yt' src='";
            var htmlfooter = "' type='application/x-shockwave-flash' width='640' height='280'></embed></body></html>";
            var htmlmash = htmlheader + videoUrl + htmlfooter;
 
            var flexSpace = Titanium.UI.createButton({
                systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
            });
 
            var done = Titanium.UI.createButton({
                title : 'Done',
                style : Titanium.UI.iPhone.SystemButtonStyle.BORDERED
            });
 
            var navBar = Titanium.UI.iOS.createToolbar({
                items : [done, flexSpace, flexSpace],
                top : 0,
                borderTop : true,
                borderBottom : true,
                barColor : '#000',
                translucent : true
            });
            view.add(navBar);
 
            done.addEventListener('click', function(e) {
                view.close();
            });
 
            webview = Ti.UI.createWebView({
                top : 34,
                html : htmlmash,
                width : 640,
                height : 280
            });
 
            view.add(webview);
            view.open();
        }
 
    };
 
    loader.onerror = function(e) {
        Ti.API.debug(e.error);
        alert("Unable to connect to server");
    };
 
    loader.timeout = 5000;
    /* in milliseconds */
 
    // Send the HTTP request
    loader.send();
 
    return win;
}

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

Some thoughts, not necessarily complete.

Be sure your main window is heavy weight.

Do something else with the back button.

mywindow.addEventListener('android:back': function(e){
    // Do something other than close window.
 
});

Maybe use gestures, think horizontal scrollView with the table in a view, that when clicked, populates a view to the side of it and then scroll that view into focus. User swipes/drags to switch views...

Answer 2

When you are using a TabGroup and you want to open a window, you should open it via the current tab. You're doing that for iOS, but you're not doing it for android.

Try this:

tableView.addEventListener('click', function(e) {
        var window = videoList.youtubeVideolist(e.rowData.titleText, e.rowData.palaylist_id);
        if (platform == "iphone") {
            tab1.open(window, {
                animated : true
            });
        } else {
            tab1.open(window);
        }
    });