Tableview Grid Style with remote Data

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

Hi,

I retrieve from rss the thumbnail image for each post, i want show these thumbnails in a Grid, i want that images appear in this layout ---> <image1><image2><br/><image3>image4><br/><image5>image6><br/>. I created a tableviewrow and i added into it 2 image views, i set the first image view on the left and second on the right, than I worked with property layout:'horizontal' but no way, it doesn't works. I know that the scrollview with property layout:'horizontal' and labels works (here the example, but unfortunately not with tableviews (or i use the property layout inappropriately), I post my code below:

var win = Titanium.UI.createWindow({
 
});
var webViewWindow = Titanium.UI.createWindow({});
 
var rowsData = [];
 
Titanium.Yahoo.yql('SELECT title, link, pubDate, content FROM rss WHERE url = "http://infomvv.altervista.com/monthly-play/feed"  | sort(field="pubDate", descending="false")', function(e){
    var results = e.data.item;
 
    for (var i in results){
        var rss = results[i];
 
        var rssRow = Titanium.UI.createTableViewRow({
            backgroundColor:"transparent",
            link:rss.link, 
            rssTitle: rss.title,
            top:0,
            bottom:0,
            right:5,
            left:0,
            width:300,
            height:150,
            layout:"horizontal"
 
            });
 
        var rssImage =  Titanium.UI.createImageView({
            image: rss.content.url,
            width:150,
            height:150,
            left:0
        });
 
        var rssImage2 =  Titanium.UI.createImageView({
            image: rss.content.url,
            width:150,
            left:150,
            height:150,
        });
 
        if (i % 2 == 0){
        rssRow.add(rssImage);
        }
        else
        {
        rssRow.add(rssImage2);
        }
 
        rssRow.className = 'rssrow';
        rowsData.push(rssRow);
 
    }
 
    // create table view
    var tableView = Titanium.UI.createTableView({
 
        data:rowsData, 
        layout:"horizontal"
        });
 
    win.add(tableView);
 
    tableView.addEventListener('click', function(e){
        var rowData = e.rowData;
 
        var webview = Titanium.UI.createWebView({
            url: rowData.link
        });
 
        var backButton = Titanium.UI.createButton({title:'Back'});
 
        backButton.addEventListener('click', function(){
            navigation.close(webViewWindow, {animated:'true'});
        });
 
        // create window for webview 
        webViewWindow = Titanium.UI.createWindow({
            title: rowData.rssTitle,
            leftNavButton: backButton
        });
        webViewWindow.add(webview);
 
        navigation.open(webViewWindow, {animated:'true'});
    });
 
});
I exclude to create 2 independent tableviews because obviously have 2 independent scrollbars and it's not what I'm looking for and I don't know if is possible integrate a single scroball for both (i have doubts about that).

Thanks in Advance,

Ivan

1 Answer

TableView is the wrong tool for the job. You should just lay out ImageViews on a parent ScrollView. This involves a lot of size and position calculations, but it can be done.

There is a GalleryView in my TitanUp library which you can use directly, or you can borrow from it (in fact, my code is taken from "Pure Javascript Picture Gallery" by Frédéric Maquin of Novelys)

Your Answer

This question has been locked and cannot accept new answers.