open url on a tile using javascript and html in Win8 Metro App

Question

In a Windows 8 Metro App I want the ListViewItems/Tiles to open a link once they were clicked. The problem is that nothing happens when they are clicked. With addEventListener I managed to invoke the item but the code does not reach to open the link.

I store my Tiles like this in the default.js file and I want access to the "link" attribute, they all have one. After that there is the EventListener and the Event ( SelectItem ):

var TileData = [
{ title: "Tile01", picture: "images/2.png", link: "http://www.gmail.com" },
{ title: "Tile02", picture: "images/1.png", link: "http://www.google.com" }
];

var dataList = new WinJS.Binding.List(TileData);

var publicMembers =
    {
        itemList: dataList
    };

WinJS.Namespace.define("DataExample", publicMembers);

WinJS.Application.onmainwindowactivated = function (e) {
    if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        WinJS.UI.processAll().then(function () {
            var TileList = document.getElementById('TileListView').winControl;
            TileList.dataSource = TileData;
            TileList.addEventListener('iteminvoked', SelectItem);
        });
    }
}

function SelectItem(e) {
    var selectedItem = TileData[e.detail.itemIndex];
    var selectedTileLink = document.getElementById('selectedTileLink');
    selectedTileLink.src = selectedItem.link;
    console.log('invoke ' + item.data.link);
    Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri(selectedTileLink));
}

var app = WinJS.Application;

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
        } else {
        }
        WinJS.UI.processAll(); //It reaches this point
    }
};

app.oncheckpoint = function (eventObject) {
};


app.start();

The Template for the ListView is here with its options, after that the ListView itself:

    <div id="TileItemTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 200px; height: 100px;">
            <img src="#" style="width: 200px; height: 100px;"
                 data-win-bind="alt: title; src: picture" />
        </div>
    </div>       

    <div id="TileListView" data-win-control="WinJS.UI.ListView"
        data-win-options="{ 
                            itemTemplate: select('#TileItemTemplate'),
                            itemDataSource : DataExample.itemList.dataSource,
                            layout:{type:WinJS.UI.GridLayout} }" >
    </div>

So my problem is that the code does not open the link what I specified in the SelectItem function. I stored it in the selectedTileLink but nothing happens after clicking.

Could someone help me to find the failure in my code?

Answer 1

You probably want to use the onItemInvoked event of ListView items.

Say, myItemList is the id of your listView element in DOM, not the id of your template

<div id="myItemList" class="myItemList" data-win-control="WinJS.UI.ListView"
            data-win-options="{layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'}}"
            aria-label="Collections">
</div>

Here is how you can write this event handler:

function myItemInvoked (e) {
    var ix = e.detail.itemIndex;
    var myItemList = document.getElementById('myItemList');
    if (!myItemList ) {
        return;
    }
    var myItemListControl = myItemList.winControl;
    var binding = myItemListControl .itemDataSource.createListBinding();
    binding.fromIndex(ix).then(function (item) {
        console.log('invoke ' + item.data.link);
        binding.release();
        // open a browser to navigate to the url
        Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri(item.data.link))

    });
}

When you updateLayout for your listView (or wherever you bind the datasource to your listview), you can call WinJS.UI.setOptions like this

WinJS.UI.setOptions(myItemListControl, {
      itemDataSource: myItemList.dataSource,
      itemTemplate: listItemTemplateRenderer, //your template element retrieved by getElementById
      groupDataSource: null,
      groupRenderer: null,
      selectionMode: 'single',
      oniteminvoked: itemInvoked
});

Hope this helps.