Reader Level:
ARTICLE

Building Windows 8 Metro Style JavaScript / HTML5 / CSS3 Applications Using ListView

Posted by Arjun Panwar Articles | Windows 8 February 15, 2012
In this article we will learn about Data Binding to a ListView in a Windows 8 JavaScript Metro Application.
  • 0
  • 0
  • 8734

Introduction

In this article we use the ListView control in WinJS. Here we bind the name and some images of the actors in a ListView. First of all we create a data source and item template and bind a data source for elements which are name and photo.

So, we have to follow the steps given below.

Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how to create it.

  • Open Visual Studio 2011
  • File>New>Project
  • Choose Template>JavaScript> Blank Application
  • Rename this Application

home.gif

Step 2 : In the Solution Explorer there are two files that we will primarily work with, default.js and default.html.

solution-explorer.gif

Step 3 : Open the default.html page and add a ListView. The values of the data should be set to the id of the div. In the following code we have to create a ListView.

Code :

<div id="ActorListView"
        
data-win-control="WinJS.UI.ListView" style="height:185px;"
        
data-win-options="{itemRenderer:Actoritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}" >
   
</div>

Step 4 : Here we bind the data source to the ListView. By fetching the ListView div and set the data source values by the created data source.

Code :

var ActorList = document.getElementById('ActorListView').winControl;
               
ActorList
.dataSource = ActorData;

Step 5 : Putting it all together, the js file will have the code as shown below.

Code : Default.js

(function () {
   
'use strict';
   
// Uncomment the following line to enable first chance exceptions.
   
// Debug.enableFirstChanceException(true);
 
   
var ActorData = [
   
{ Name: 'Sharukh Khan', Photo: 'images/ST.jpg' },    
   
{ Name: 'Salman Khan', Photo: 'images/SG.jpg' },
   
{ Name: 'Amir khan', Photo: 'images/VS.jpg' },  
   
{ Name: 'Sharukh Khanr', Photo: 'images/ST.jpg' },
   
{ Name: 'Salman Khan', Photo: 'images/SG.jpg' },
   
{ Name: 'Amir khan', Photo: 'images/VS.jpg' }
   
  
];

   
WinJS
.Application.onmainwindowactivated = function (e) {
       
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {          
               
WinJS
.UI.processAll().then(function () {
               
var ActorList = document.getElementById('ActorListView').winControl;
               
ActorList
.dataSource = ActorData;
               
ActorList
.addEventListener('iteminvoked', SelectItem);
               
});        
        
}
   
}
    
function SelectItem(e) {
       
var selectedItem = ActorData[e.detail.itemIndex];
       
var selecteActor = document.getElementById('selectedActor');
       
selecteActor
.innerText = selectedItem.Name;
       
var selecteActorImg = document.getElementById('selectedActorImg');
       
selecteActorImg
.src = selectedItem.Photo;
   
}
     
WinJS
.Application.start();
})();

Step 6 : In the default.html page the code looks as given below.

Code :

<!DOCTYPE html>
<
html>
<
head>
   
<meta charset="utf-8" />
   
<title>DataBindingActors</title>
   
<!-- WinJS references -->
   
<link rel="stylesheet" href="/winjs/css/ui-dark.css" /> 
   
<script src="/winjs/js/base.js"></script>
   
<script src="/winjs/js/ui.js"></script>
   
<script src="/winjs/js/binding.js"></script>
   
<script src="/winjs/js/controls.js"></script>
   
<script src="/winjs/js/animations.js"></script>
   
<script src="/winjs/js/uicollections.js"></script>
   
<script src="/winjs/js/wwaapp.js"></script>
    
<!-- DataBindingActor references -->
   
<link rel="stylesheet" href="/css/default.css" />
   
<script src="/js/default.js"></script>
</
head>
<
body>
   
<h2>Actors</h2>
   
<br />
   
<div id="Actoritemtemplate"
        
data-win-control="WinJS.Binding.Template">     
           
<div data-win-bind="innerText:Name"
               
style="height:20px;">
           
</div>               
           
<img data-win-bind="src:Photo"
               
style="width:200px;height:150px;"  />               
   
</div>
   
<div id="ActorListView"
        
data-win-control="WinJS.UI.ListView" style="height:185px;"
        
data-win-options="{itemRenderer:Actoritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}" >
   
</div>
   
<br />
   
<div id="ouputDiv" >
       
<span> </span>
       
<span id="selectedActor" style="height:20px;" ></span> <br />
       
<img id="selectedActorImg" style="width:200px;height:150px;"/>
   
</div>
</
body>
</
html>

Step 7 : After applying this code, run this application and then we get the following output.

output.gif

Resources

Here are some useful resources.

Building a Metro Style App Using JavaScript
List View Data Binding in Windows 8 JavaScript Metro Application
Working With DatePicker Control in Windows 8 HTML5 Metro App
Windows 8: Adding Shortcuts to Metro UI
Introduction to Windows 8 Metro Style Application

COMMENT USING