Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Bind ListView Data for devices running on Windows platform

In this article we will learn about the ListView Data Binding for the devices running on Windows platform.

The main highlights of this article will be:

  • Working with ListView control in WinJS
  • ItemTemplte in WinJS
  • Data Binding to ListView
  • Creating Data Source in WinJS

Here we will make use of the binding process and bind some of the names shown in the figure below. The names and images reflect some of the Indian cricketers in a ListView. The following image displays the data binding and the ListView should appear as below:

Displaying the image in a list view

Figure 1: Displaying the image in a list view

The following steps need to taken in order to bind data to a ListView:

  • Create a Data Source
  • Create ItemTemplate and bind data source properties to HTML elements of ItemTemplate
  • Create ListView and attach ItemTemplate to ListView
  • Set the DataSource of ListView

Creation of a Data Source

We will now create data to bind to the List View for which we have given the name of the array PlayerData and comprises of two objects Name and Photo.

Listing 1: Creation of a data source

var PlayerData = [
    { Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },  
    { Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
    { Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
    { Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
    { Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
    { Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
    { Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
    { Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' },
    { Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },
    { Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
    { Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
    { Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
    { Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
    { Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
    { Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
    { Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' }
   ]; 

In order to create the Data Source, all the images of the players have been put in the image folder. Talking about the real-world applications, data must be downloaded from the Service.

Creation of an Item Template

There following points need to be kept in mind while creating ItemTemplate:

  • ItemTemplate is a div
  • In order to convert the div to an ItemTemplate div, it is required to have attribute data-win-control set to WinJS.Binding.Template
  • Other HTML elements should be inside the template div tag.
  • Data-win-bind is used to bind data to HTML elements.

The following code reflects the usage of one div in order to bind the name of the player and image to bind image of the player.

Listing 2: Representing the code to bind the name

<div id=”playeritemtemplate”
Data-win-control=”WinJS.Binding.Template”>
<div data-win-bind=”innerText:Name”
Style=”height:20px;”>
</div>
<img class='imagem_artigo' data-win-bind=”src:Photo”
Style=”width: 200px;height:150px;”  />
</div>

Creation of a ListView

Time now to create ListView and bind ItemTemplate to that ListView:

  • ListView is a div
  • data-win-control property of div need to be set to WinJS.UI.ListView
  • data-win-options take complex values.
  • Value of itemRenderer need to be set to id of the div created as ItemTemplate. In our case id of ItemTemplate div is playeritemtemplate thereby value of itemRenderer should be playeritemtemplate.
  • Layout should be set.
  • Value of maximum rows can be set.

The following represents the creation of the ListView that is bounded to the ItemTemplate.

Listing 3: Code representing the creation of a ListView

<div id= “PlayerListView”
Data-win-control= “WinJS.UI.ListView” style “height: 185px;”
Data-win-options=”{itemRendere:playeritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}”>
</div>

Combining everything, the HTML should be as below where we have put an output div. Selected value from the ListView will be displayed in output div.

Listing 4: Code Representing the Default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DataBindingPlayer</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>
 
     <!-- DataBindingPlayer references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <h2>Indian Team</h2>
    <br />
 
    <div id="playeritemtemplate"
         data-win-control="WinJS.Binding.Template">      
            <div data-win-bind="innerText:Name" 
                style="height:20px;">
            </div>                
            <img class='imagem_artigo' data-win-bind="src:Photo"
                style="width:200px;height:150px;"  />                
    </div>
 
    <div id="PlayerListView"
         data-win-control="WinJS.UI.ListView" style="height:185px;"
         data-win-options="{itemRenderer:playeritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}" >
    </div>
 
    <br />
    <div id="ouputDiv" >
        <span>You Selected </span>
        <span id="selectedPlayer" style="height:20px;" ></span> <br />
        <img class='imagem_artigo' id="selectedPlayerImg" style="width:200px;height:150px;"/>
    </div>
</body>
</html>

Binding Data Source to ListView

In order to bind the ListView with a data source,the very first step is to fetch the ListView div. The next would be to simply set the datasource value. The following code shows the retrieval of ListView div and then setting data source value to PlayerData.

Listing 5: Retrieval of Listview dev

Var PlayerList = document.getElementById(‘PlayerListView’).winControl

Attaching event to ListView

Post the creation of a ListView and bound a data source to that, the next step is to fetch the selected item for which one need to attach an item invoked event to the ListView. This can be added as below where we have SelectItem as a function that will get called on the item selection.

Playerlist.addEventListener(‘iteminvoked’, SelectItem);

As far as the SelectItem function is concerned, one needs to fetch the value of selected item and set as value of HTML element of output div.

Listing 6: Fetching the value of selected item

Function SelectedItem(e) {
Var selectedItem = PlayerData [e.detail.itemIndex];
Var selectedplayer = document.getElementById(‘selected Player’);
Seelctedplayer.innerText = selectedItem.Name;
Var selectedplayerImg = document.getElementById(‘selectedPlayerimg);
selectedplayerImg.src = selectedItem.Photo
}

Combining it all together, the js file will have the codes as displayed below:

Listing 7: Representing the Default.js

(function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);
  
    var PlayerData = [
    { Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },  
    { Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
    { Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
    { Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
    { Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
    { Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
    { Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
    { Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' },
    { Name: 'Sachin Tendulkar', Photo: 'images/ST.jpg' },
    { Name: 'Mahender Singh Dhoni', Photo: 'images/MSD.jpg' },
    { Name: 'Saurabh Ganguli', Photo: 'images/SG.jpg' },
    { Name: 'Harbhajan Singh', Photo: 'images/HS.jpg' },
    { Name: 'Youvrah Singh', Photo: 'images/YS.jpg' },
    { Name: 'VVS Laxman', Photo: 'images/VVS.jpg' },
    { Name: 'Virendar Shewag', Photo: 'images/VS.jpg' },
    { Name: 'Zaheer Khan', Photo: 'images/ZK.jpg' }
   ];
 
    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {           
                WinJS.UI.processAll().then(function () {
                var PlayerList = document.getElementById('PlayerListView').winControl;
                PlayerList.dataSource = PlayerData;
                PlayerList.addEventListener('iteminvoked', SelectItem);
                });         
         }
    }
     function SelectItem(e) {
        var selectedItem = PlayerData[e.detail.itemIndex];
        var selecteplayer = document.getElementById('selectedPlayer');
        selecteplayer.innerText = selectedItem.Name;
        var selecteplayerImg = document.getElementById('selectedPlayerImg');
        selecteplayerImg.src = selectedItem.Photo;
    }
      WinJS.Application.start();
})();

Conclusion

We learned in this article about the ListView Data binding for the devices running on Windows platform.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login