Post
Ask Question

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

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
  1. <div id="ActorListView"  
  2.    data-win-control="WinJS.UI.ListView" style="height:185px;"  
  3.    data-win-options="{itemRenderer:Actoritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}" >  
  4. </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
  1. var ActorList = document.getElementById('ActorListView').winControl;  
  2. ActorList.dataSource = ActorData;   
Step 5
 
Putting it all together, the js file will have the code as shown below.

Code
  1. (function () {  
  2.     'use strict';  
  3.     // Uncomment the following line to enable first chance exceptions.  
  4.     // Debug.enableFirstChanceException(true);  
  5.     
  6.     var ActorData = [  
  7.     { Name: 'Sharukh Khan', Photo: 'images/ST.jpg' },       
  8.     { Name: 'Salman Khan', Photo: 'images/SG.jpg' },  
  9.     { Name: 'Amir khan', Photo: 'images/VS.jpg' },     
  10.     { Name: 'Sharukh Khanr', Photo: 'images/ST.jpg' },  
  11.     { Name: 'Salman Khan', Photo: 'images/SG.jpg' },  
  12.     { Name: 'Amir khan', Photo: 'images/VS.jpg' }  
  13.       
  14.    ];  
  15.   
  16.     WinJS.Application.onmainwindowactivated = function (e) {  
  17.         if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {             
  18.                 WinJS.UI.processAll().then(function () {  
  19.                 var ActorList = document.getElementById('ActorListView').winControl;  
  20.                 ActorList.dataSource = ActorData;  
  21.                 ActorList.addEventListener('iteminvoked', SelectItem);  
  22.                 });           
  23.          }  
  24.     }  
  25.      function SelectItem(e) {  
  26.         var selectedItem = ActorData[e.detail.itemIndex];  
  27.         var selecteActor = document.getElementById('selectedActor');  
  28.         selecteActor.innerText = selectedItem.Name;  
  29.         var selecteActorImg = document.getElementById('selectedActorImg');  
  30.         selecteActorImg.src = selectedItem.Photo;  
  31.     }  
  32.       WinJS.Application.start();  
  33. })();  
Step 6
 
In the default.html page, the code looks as given below.
 
Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <meta charset="utf-8" />  
  5.       <title>DataBindingActors</title>  
  6.       <!-- WinJS references -->  
  7.       <link rel="stylesheet" href="/winjs/css/ui-dark.css" />  
  8.       <script src="/winjs/js/base.js"></script>  
  9.       <script src="/winjs/js/ui.js"></script>  
  10.       <script src="/winjs/js/binding.js"></script>  
  11.       <script src="/winjs/js/controls.js"></script>  
  12.       <script src="/winjs/js/animations.js"></script>  
  13.       <script src="/winjs/js/uicollections.js"></script>  
  14.       <script src="/winjs/js/wwaapp.js"></script>  
  15.       <!-- DataBindingActor references -->  
  16.       <link rel="stylesheet" href="/css/default.css" />  
  17.       <script src="/js/default.js"></script>  
  18.    </head>  
  19.    <body>  
  20.       <h2>Actors</h2>  
  21.       <br />  
  22.       <div id="Actoritemtemplate"  
  23.          data-win-control="WinJS.Binding.Template">  
  24.          <div data-win-bind="innerText:Name"   
  25.             style="height:20px;">  
  26.          </div>  
  27.          <img data-win-bind="src:Photo"  
  28.             style="width:200px;height:150px;"  />                  
  29.       </div>  
  30.       <div id="ActorListView"  
  31.          data-win-control="WinJS.UI.ListView" style="height:185px;"  
  32.          data-win-options="{itemRenderer:Actoritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}" >  
  33.       </div>  
  34.       <br />  
  35.       <div id="ouputDiv" >  
  36.          <span> </span>  
  37.          <span id="selectedActor" style="height:20px;" ></span> <br />  
  38.          <img id="selectedActorImg" style="width:200px;height:150px;"/>  
  39.       </div>  
  40.    </body>  
  41. </html>  
Step 7
 
After applying this code, run this application and then we get the following output.
 
output.gif
 
Resources

Summary 

 
In this article, we learned about Building Windows 8 Metro Style JavaScript / HTML5 / CSS3 Applications Using ListView.


Similar Articles