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.
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);
  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' }
  14. ];
  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.