WinJS appbar – tabbed control with listview

Hi,

As the title for the post suggest I am going through building a sample for WinJS appbar that acts as a tabbed control. Typically what I am going to do here is similar to what the default Weather app or News app has in app bar.

So here is the overall scenario
1. Create a app bar with three buttons (One each for “Birds”, “Animals” and “Reptiles). When the app bar opens it will show these three buttons.
2. On clicking any button, the app bar will extended showing a list of items. The items will be a collection of names for the button selected. For example if “Birds” is selected, the list will show “Ostriches”, “Penguins” etc. , if “Animals” is selected then the list would show “Tiger”, “Lion” etc. and so on.
3. On clicking the current button again, the list should hide itself.
4. On hide of app bar the app bar should go to default state, i.e. all items should be collapsed.

Simple requirement. Lets start 🙂

Since we are only demonstrating the app bar, I would create a new project (Blank application). In Visual Studio –> New Project –> JavaScript –> Windows Store Apps –> Blank App. Give it some name.

A project gets created with a default.html file. I usually prefer the light shade. So I would change the reference to ping to ui-light.css.

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />

We need to have some data for the collections. So we will add a javascript file under js folder. I have named it data.js (You can name it otherwise also). First we would add the link in default.html to this new created file.

<script src="/js/data.js"></script>

In the data.js we will declare a namespace for the App bar data. In this sample I use static sample data. You may choose to get that from any service and create the data.
For this sample I need three lists 9one each for three categories. I also have a method for populating the data. I declare all of them in this namespace. this helps me to call the Properties or methods from anywhere in the app.

In below code :

      BirdData : Property for Binding List containing list of Bird names.

 

      AnimalData: Property for Binding List containing list of Animal names.

 

      ReptileData: Property for Binding List containing list of Reptile names.

 

    CreateAppBarData : Method for creating the initial data and assigning to above properties.
WinJS.Namespace.define("AppBarData",
        {
            BirdData: null,
            AnimalData: null,
            ReptileData: null,
            CreateAppBarData: initializeData
        });

Now we will have the implementation for the “initializeData” method. As I mentioned I use static data. So it is a simple implementation for me.

function initializeData() {
        var birdsdata = [{ title: "Ostriches" }, { title: "Kiwis" }, { title: "Penguins"}, { title: "Parrots"}, { title: "Storks"}];
        var animaldata = [{ title: "Tiger"}, { title: "Lion"}, { title: "Giraffe"}, { title: "Whale"}, { title: "Penguins"}];
        var reptilesData = [{ title: "Aligators"}, { title: "Crocodiles"}, { title: "Turtle"}, { title: "Lizard"}, { title: "Snakes"}];

        AppBarData.AnimalData = new WinJS.Binding.List(animaldata);
        AppBarData.BirdData = new WinJS.Binding.List(birdsdata);
        AppBarData.ReptileData = new WinJS.Binding.List(reptilesData);
    }

We are done with data.js. We have created the properties and methods for creating the data for our app bar.

Now lets go and complete the HTML. For the app bar to be two layered we need to divide it into two rows. First row would contain the parent buttons (One each for “Birds”, “Animals” and “Reptiles”) and for the second row we would use a control. Things to watch out here is that the first row would be always be visible and second row would hide and show based on the toggle state of the category in first row. We will handle most of them in CSS.

In HTML we would add a div for app bar and make it align to top. In the app bar we would add three divs (one for each category) and add a listview also.

For each category button we would have a for the title and and two divs (one for up arrow and other for down arrow).

<div class="appBarSample" data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar"
        data-win-options="{layout:'custom',placement:'top'}">
        <header class="navbar">
            <div class="itembirds item">
                <h3 class="overlay">Birds</h3>
                <div class="upArrow">▲</div> <!-- Data is amphashx25B2; (convert the amp and hash to symbols) -->
                <div class="downArrow hidden">▼</div> <!-- Data is amphashx25BC; (convert the amp and hash to symbols) -->
            </div>
            <div class="itemanimals item">
                <h3 class="overlay">Animals</h3>
                <div class="upArrow">▲</div> <!-- Data is amphashx25B2; (convert the amp and hash to symbols) -->
                <div class="downArrow hidden">▼</div> <!-- Data is amphashx25BC; (convert the amp and hash to symbols) -->
            </div>
            <div class="itemreptiles item">
                <h3 class="overlay">Reptiles</h3>
                <div class="upArrow">▲</div> <!-- Data is amphashx25B2; (convert the amp and hash to symbols) -->
                <div class="downArrow hidden">▼</div> <!-- Data is amphashx25BC; (convert the amp and hash to symbols) -->
            </div>
            <div class="navbarlist hidden win-selectionstylefilled" data-win-control="WinJS.UI.ListView"
                data-win-options="{ selectionMode: 'none' }"></div>
        </header>
    </div>

We also need to add a template for the list view item. It is a simple template just displaying the title.

<div class="itemtemplatelist" data-win-control="WinJS.Binding.Template">
        <div class="item">
           <h4 class="title" data-win-bind="textContent: title"></h4>
        </div>
    </div>

We are done with the HTML. Now lets turn to the CSS. where bulk of the work is handled.
In CSS we will first define the layout for the appbar. As described we would need two rows. I will go for a grid layout for this sample.

In default.css, define the “navbar” to a grid layout with two rows and 4 columns. I would set the first row to a fixed size and the second row to a “auto” size. This is because when I want to hide the contents, the height should go to 0 and when I show the contents it should take the height of the elements in it. For the columns I would have one column for each category and the last one taking the rest space.

.navbar {
    -ms-grid-rows: 100px auto;
    -ms-grid-columns: 150px 150px 150px 1fr;
    display:-ms-grid;
    background-color: gray;
}

Now I would place the category divs in their location as per my grid layout.

.navbar .itembirds {
        -ms-grid-column:1;
        -ms-grid-row:1;

    }

    .navbar .itemanimals {
        -ms-grid-column:2;
        -ms-grid-row:1;
    }

    .navbar .itemreptiles {
        -ms-grid-column:3;
        -ms-grid-row:1;
    }

I would put the list view in the second row and make it streatch to all available width and height. I would give it a height because the second row was set to auto. This is because when the list view is shown it will show as height of 70px and when hidden the height would be 0px.

.navbar .navbarlist {
        -ms-grid-row:2;
        -ms-grid-column:1;
        -ms-grid-column-span:7;
        background-color: lightgray;
        height: 70px;
    }

For hiding and showing elements I use a class approach. I add a “hidden” class name to elements that need to be hidden and remove this when the elements need to be shown. By using so, I don’t need to handle them in JavaScript. All I need to do is add/remove this class and rest is taken care of. So I would define the hidden class in CSS.

.navbar .hidden {
        display:none;
    }

I would do the styling and layout for the category items and the list view items. I am not going through all of them. You can get the styles from the full code shared at the end of this article.

Now we jump on to the code part. We would do all the code in default.js.

First we need to create the data. For this in app activated event after processing the UI we will call the method we created in data.js. Then we will call a method to initialize the app bar for us.

args.setPromise(WinJS.UI.processAll().done(function(x)
            {
                AppBarData.CreateAppBarData();// this method populates the data
                initializeAppBar(); // Start initializing the app bar
            }));

We need to have a variable to track which button is selected currently. We would add a string variable for the same.

var currentSelected = "";

We will add a small helper method for hiding/showing elements. This code just adds/removes the hidden class based on whether the element is to be shown or hidden. Rest as discussed earlier is taken care by CSS.

function showHideElement(element, show) {
        if (show) {
            if (WinJS.Utilities.hasClass(element, "hidden")) {
                WinJS.Utilities.removeClass(element, "hidden")
            }
        }
        else {
            if (!WinJS.Utilities.hasClass(element, "hidden")) {
                WinJS.Utilities.addClass(element, "hidden")
            }
        }
    }

In the initialize function we will add event listeners for the category div “click” event. In this event implementation we will do these steps:
Check the current selection. If current selection is nothing show the items. If current selection is the one that is clicked, then we need to hide the items. If current selection is different from the one clicked then hide the current and show this one.

We will also add a event listener for the app bar “onafterhide” event. This is to ensure that when the app bar is hidden the app bar is cleaned up and reverts to default state.

function initializeAppBar() {
        var appbar = document.body.querySelector(".appBarSample");
        var appbarCtrl = document.body.querySelector(".appBarSample").winControl;

        var listViewCtrl = appbar.querySelector(".navbarlist").winControl;
        listViewCtrl.itemTemplate = document.body.querySelector(".itemtemplatelist");
        listViewCtrl.oniteminvoked = itemInvokedList;

        appbarCtrl.onafterhide = function (e) {
            hideCurrentLowerList();
        };

        var birdsButton = appbar.querySelector(".itembirds");
        var animalsButton = appbar.querySelector(".itemanimals");
        var reptilesButton = appbar.querySelector(".itemreptiles");    

        birdsButton.addEventListener("click", function (args) {
            var show = currentSelected === "Birds" ? false : true;
            if (currentSelected != "") {
                hideCurrentLowerList();
            }
            if (show) {
                showLowerList("Birds");
            }
        }, false);

        animalsButton.addEventListener("click", function (args) {
            var show = currentSelected === "Animals" ? false : true;
            if (currentSelected != "") {
                hideCurrentLowerList()
            }
            if (show) {
                showLowerList("Animals");
            }
        }, false);

        reptilesButton.addEventListener("click", function (args) {
            var show = currentSelected === "Reptiles" ? false : true;
            if (currentSelected != "") {
                hideCurrentLowerList();
            }
            if (show) {
                showLowerList("Reptiles");
            }
        }, false);
    }

In above code we have used two helper functions : “hideCurrentLowerList” and “showLowerList”.

The “hideCurrentLowerList” function hides the current shown list based on the currentSelected state. In this function we hide the list, toggle the visibility of arrow divs to show the up arrow instead of the down arrow. We also reset the currentSelected variable to initial state.

function hideCurrentLowerList() {
        var appbar = document.body.querySelector(".appBarSample");
        var appbarCtrl = document.body.querySelector(".appBarSample").winControl;

        var listView = appbar.querySelector(".navbarlist");
        var listViewCtrl = appbar.querySelector(".navbarlist").winControl;

        // First check if any other is open and close that
        switch (currentSelected) {
            case "Birds":
                {
                    var birdsButton = appbar.querySelector(".itembirds");
                    var upArrow = birdsButton.querySelector(".upArrow");
                    var downArrow = birdsButton.querySelector(".downArrow");

                    showHideElement(downArrow, false);
                    showHideElement(upArrow, true);
                    listViewCtrl.itemdatasource = null;
                    showHideElement(listView, false);
                    currentSelected = "";
                    break;
                }

            case "Animals":
                {
                    var animalsButton = appbar.querySelector(".itemanimals");
                    var upArrow = animalsButton.querySelector(".upArrow");
                    var downArrow = animalsButton.querySelector(".downArrow");

                    showHideElement(downArrow, false);
                    showHideElement(upArrow, true);
                    listViewCtrl.itemdatasource = null;
                    showHideElement(listView, false);
                    currentSelected = "";
                    break;
                }

            case "Reptiles":
                {
                    var reptilesButton = appbar.querySelector(".itemreptiles");
                    var upArrow = reptilesButton.querySelector(".upArrow");
                    var downArrow = reptilesButton.querySelector(".downArrow");

                    showHideElement(downArrow, false);
                    showHideElement(upArrow, true);
                    listViewCtrl.itemdatasource = null;
                    showHideElement(listView, false);
                    currentSelected = "";
                    break;
                }

            default:
                {
                    break;
                }
        }
    }

In the “showLowerList” based on the selection we would initialize the list with those items (for the category we have selected) and show the list and toggle the visibility of arrow divs to show the down arrow instead of the up arrow. We also reset the currentSelected variable to the current selected.

function showLowerList(parentname) {
        var appbar = document.body.querySelector(".appBarSample");
        var appbarCtrl = document.body.querySelector(".appBarSample").winControl;

        var listView = appbar.querySelector(".navbarlist");
        var listViewCtrl = appbar.querySelector(".navbarlist").winControl;

        // Now show for current
        switch (parentname) {
            case "Birds":
                {
                    var birdsButton = appbar.querySelector(".itembirds");
                    var upArrow = birdsButton.querySelector(".upArrow");
                    var downArrow = birdsButton.querySelector(".downArrow");

                    appbarCtrl.sticky = true;
                    showHideElement(downArrow, true);
                    showHideElement(upArrow, false);
                    listViewCtrl.itemDataSource = AppBarData.BirdData.dataSource;
                    listViewCtrl.layout = new WinJS.UI.GridLayout({ maxRows: 1 });
                    showHideElement(listView, true);
                    appbarCtrl.sticky = false;
                    currentSelected = parentname;
                    break;
                }

            case "Animals":
                {
                    var animalsButton = appbar.querySelector(".itemanimals");
                    var upArrow = animalsButton.querySelector(".upArrow");
                    var downArrow = animalsButton.querySelector(".downArrow");

                    appbarCtrl.sticky = true;
                    showHideElement(downArrow, true);
                    showHideElement(upArrow, false);
                    listViewCtrl.itemDataSource = AppBarData.AnimalData.dataSource;
                    listViewCtrl.layout = new WinJS.UI.GridLayout({ maxRows: 1 });
                    showHideElement(listView, true);
                    appbarCtrl.sticky = false;
                    currentSelected = parentname;
                    break;
                }

            case "Reptiles":
                {
                    var reptilesButton = appbar.querySelector(".itemreptiles");
                    var upArrow = reptilesButton.querySelector(".upArrow");
                    var downArrow = reptilesButton.querySelector(".downArrow");

                    appbarCtrl.sticky = true;
                    showHideElement(downArrow, true);
                    showHideElement(upArrow, false);
                    showHideElement(listView, true);
                    listViewCtrl.itemDataSource = AppBarData.ReptileData.dataSource;
                    listViewCtrl.layout = new WinJS.UI.GridLayout({ maxRows: 1 });
                    appbarCtrl.sticky = false;
                    currentSelected = parentname;
                    break;
                }

            default:
                {
                    break;
                }
        }
    }

Note : In the above code you would see that we are making the appbar sticky true and then false after assigning the item source and making it visible. this is because the app bar if not made sticky would collapse itself when we try to show the list.

The last part is to implement the item invoked for the list item.

function itemInvokedList(args) {
        var index = args.detail.itemIndex;

        switch (currentSelected) {
            case "Birds":
                {
                    var item = AppBarData.BirdData.getAt(index);
                    // Do some action as navigate to soem page passing the data or something else
                    break;
                }

            case "Animals":
                {
                    var item = AppBarData.AnimalData.getAt(index);
                    // Do some action as navigate to soem page passing the data or something else
                    break;
                }

            case "Reptiles":
                {
                    var item = AppBarData.ReptileData.getAt(index);
                    // Do some action as navigate to soem page passing the data or something else
                    break;
                }

            default:
                {
                    break;
                }
        }
    }

We are done. You can add styles and modify this to look better. I have just demonstrated how you should approach such a requirement. I am not sure if this is the best solution, but it works certainly. I would welcome feedback in case you have any.

Below is the full source code for your reference :

data.js

//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.
(function () {
     WinJS.Namespace.define("AppBarData",
        {
            BirdData: null,
            AnimalData: null,
            ReptileData: null,
            CreateAppBarData: initializeData
        });

    function initializeData() {
        var birdsdata = [{ title: "Ostriches" }, { title: "Kiwis" }, { title: "Penguins"}, { title: "Parrots"}, { title: "Storks"}];
        var animaldata = [{ title: "Tiger"}, { title: "Lion"}, { title: "Giraffe"}, { title: "Whale"}, { title: "Penguins"}];
        var reptilesData = [{ title: "Aligators"}, { title: "Crocodiles"}, { title: "Turtle"}, { title: "Lizard"}, { title: "Snakes"}];

        AppBarData.AnimalData = new WinJS.Binding.List(animaldata);
        AppBarData.BirdData = new WinJS.Binding.List(birdsdata);
        AppBarData.ReptileData = new WinJS.Binding.List(reptilesData);
    }
})();

default.html

<!--THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AppBarListView Sample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- AppBarListView references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/data.js"></script>
</head>
<body>
    <div class="itemtemplatelist" data-win-control="WinJS.Binding.Template">
        <div class="item">
           <h4 class="title" data-win-bind="textContent: title"></h4>
        </div>
    </div>

    <p>Content goes here</p>
    <div class="appBarSample" data-win-control="WinJS.UI.AppBar" aria-label="Navigation Bar"
        data-win-options="{layout:'custom',placement:'top'}">
        <header class="navbar">
            <div class="itembirds item">
                <h3 class="overlay">Birds</h3>
                <div class="upArrow">▲</div> <!-- Data is amphashx25B2; (convert the amp and hash to symbols) -->
                <div class="downArrow hidden">▼</div> <!-- Data is amphashx25BC; (convert the amp and hash to symbols) -->
            </div>
            <div class="itemanimals item">
                <h3 class="overlay">Animals</h3>
                <div class="upArrow">▲</div> <!-- Data is amphashx25B2; (convert the amp and hash to symbols) -->
                <div class="downArrow hidden">▼</div> <!-- Data is amphashx25BC; (convert the amp and hash to symbols) -->
            </div>
            <div class="itemreptiles item">
                <h3 class="overlay">Reptiles</h3>
                <div class="upArrow">▲</div> <!-- Data is amphashx25B2; (convert the amp and hash to symbols) -->
                <div class="downArrow hidden">▼</div> <!-- Data is amphashx25BC; (convert the amp and hash to symbols) -->
            </div>
            <div class="navbarlist hidden win-selectionstylefilled" data-win-control="WinJS.UI.ListView"
                data-win-options="{ selectionMode: 'none' }"></div>
        </header>
    </div>
</body>
</html>

default.js

//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var currentSelected = "";

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function(x)
            {
                AppBarData.CreateAppBarData();// this method populates the data
                initializeAppBar(); // Start initializing the app bar
            }));
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function initializeAppBar() {
        var appbar = document.body.querySelector(".appBarSample");
        var appbarCtrl = document.body.querySelector(".appBarSample").winControl;

        var listViewCtrl = appbar.querySelector(".navbarlist").winControl;
        listViewCtrl.itemTemplate = document.body.querySelector(".itemtemplatelist");
        listViewCtrl.oniteminvoked = itemInvokedList;

        appbarCtrl.onafterhide = function (e) {
            hideCurrentLowerList();
        };

        var birdsButton = appbar.querySelector(".itembirds");
        var animalsButton = appbar.querySelector(".itemanimals");
        var reptilesButton = appbar.querySelector(".itemreptiles");    

        birdsButton.addEventListener("click", function (args) {
            var show = currentSelected === "Birds" ? false : true;
            if (currentSelected != "") {
                hideCurrentLowerList();
            }
            if (show) {
                showLowerList("Birds");
            }
        }, false);

        animalsButton.addEventListener("click", function (args) {
            var show = currentSelected === "Animals" ? false : true;
            if (currentSelected != "") {
                hideCurrentLowerList()
            }
            if (show) {
                showLowerList("Animals");
            }
        }, false);

        reptilesButton.addEventListener("click", function (args) {
            var show = currentSelected === "Reptiles" ? false : true;
            if (currentSelected != "") {
                hideCurrentLowerList();
            }
            if (show) {
                showLowerList("Reptiles");
            }
        }, false);
    }

    function hideCurrentLowerList() {
        var appbar = document.body.querySelector(".appBarSample");
        var appbarCtrl = document.body.querySelector(".appBarSample").winControl;

        var listView = appbar.querySelector(".navbarlist");
        var listViewCtrl = appbar.querySelector(".navbarlist").winControl;

        // First check if any other is open and close that
        switch (currentSelected) {
            case "Birds":
                {
                    var birdsButton = appbar.querySelector(".itembirds");
                    var upArrow = birdsButton.querySelector(".upArrow");
                    var downArrow = birdsButton.querySelector(".downArrow");

                    showHideElement(downArrow, false);
                    showHideElement(upArrow, true);
                    listViewCtrl.itemdatasource = null;
                    showHideElement(listView, false);
                    currentSelected = "";
                    break;
                }

            case "Animals":
                {
                    var animalsButton = appbar.querySelector(".itemanimals");
                    var upArrow = animalsButton.querySelector(".upArrow");
                    var downArrow = animalsButton.querySelector(".downArrow");

                    showHideElement(downArrow, false);
                    showHideElement(upArrow, true);
                    listViewCtrl.itemdatasource = null;
                    showHideElement(listView, false);
                    currentSelected = "";
                    break;
                }

            case "Reptiles":
                {
                    var reptilesButton = appbar.querySelector(".itemreptiles");
                    var upArrow = reptilesButton.querySelector(".upArrow");
                    var downArrow = reptilesButton.querySelector(".downArrow");

                    showHideElement(downArrow, false);
                    showHideElement(upArrow, true);
                    listViewCtrl.itemdatasource = null;
                    showHideElement(listView, false);
                    currentSelected = "";
                    break;
                }

            default:
                {
                    break;
                }
        }
    }

    function showLowerList(parentname) {
        var appbar = document.body.querySelector(".appBarSample");
        var appbarCtrl = document.body.querySelector(".appBarSample").winControl;

        var listView = appbar.querySelector(".navbarlist");
        var listViewCtrl = appbar.querySelector(".navbarlist").winControl;

        // Now show for current
        switch (parentname) {
            case "Birds":
                {
                    var birdsButton = appbar.querySelector(".itembirds");
                    var upArrow = birdsButton.querySelector(".upArrow");
                    var downArrow = birdsButton.querySelector(".downArrow");

                    appbarCtrl.sticky = true;
                    showHideElement(downArrow, true);
                    showHideElement(upArrow, false);
                    listViewCtrl.itemDataSource = AppBarData.BirdData.dataSource;
                    listViewCtrl.layout = new WinJS.UI.GridLayout({ maxRows: 1 });
                    showHideElement(listView, true);
                    appbarCtrl.sticky = false;
                    currentSelected = parentname;
                    break;
                }

            case "Animals":
                {
                    var animalsButton = appbar.querySelector(".itemanimals");
                    var upArrow = animalsButton.querySelector(".upArrow");
                    var downArrow = animalsButton.querySelector(".downArrow");

                    appbarCtrl.sticky = true;
                    showHideElement(downArrow, true);
                    showHideElement(upArrow, false);
                    listViewCtrl.itemDataSource = AppBarData.AnimalData.dataSource;
                    listViewCtrl.layout = new WinJS.UI.GridLayout({ maxRows: 1 });
                    showHideElement(listView, true);
                    appbarCtrl.sticky = false;
                    currentSelected = parentname;
                    break;
                }

            case "Reptiles":
                {
                    var reptilesButton = appbar.querySelector(".itemreptiles");
                    var upArrow = reptilesButton.querySelector(".upArrow");
                    var downArrow = reptilesButton.querySelector(".downArrow");

                    appbarCtrl.sticky = true;
                    showHideElement(downArrow, true);
                    showHideElement(upArrow, false);
                    showHideElement(listView, true);
                    listViewCtrl.itemDataSource = AppBarData.ReptileData.dataSource;
                    listViewCtrl.layout = new WinJS.UI.GridLayout({ maxRows: 1 });
                    appbarCtrl.sticky = false;
                    currentSelected = parentname;
                    break;
                }

            default:
                {
                    break;
                }
        }
    }

    function showHideElement(element, show) {
        if (show) {
            if (WinJS.Utilities.hasClass(element, "hidden")) {
                WinJS.Utilities.removeClass(element, "hidden")
            }
        }
        else {
            if (!WinJS.Utilities.hasClass(element, "hidden")) {
                WinJS.Utilities.addClass(element, "hidden")
            }
        }
    }

    function itemInvokedList(args) {
        var index = args.detail.itemIndex;

        switch (currentSelected) {
            case "Birds":
                {
                    var item = AppBarData.BirdData.getAt(index);
                    // Do some action as navigate to soem page passing the data or something else
                    break;
                }

            case "Animals":
                {
                    var item = AppBarData.AnimalData.getAt(index);
                    // Do some action as navigate to soem page passing the data or something else
                    break;
                }

            case "Reptiles":
                {
                    var item = AppBarData.ReptileData.getAt(index);
                    // Do some action as navigate to soem page passing the data or something else
                    break;
                }

            default:
                {
                    break;
                }
        }
    }

    app.start();
})();

default.css

/*THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.*/

.navbar {
    -ms-grid-rows: 100px auto;
    -ms-grid-columns: 150px 150px 150px 1fr;
    display:-ms-grid;
    background-color: gray;
}

    .navbar .item {
        height:90px;
        width:140px;
        background-color:whitesmoke;
        border:1px solid gray;
        margin-top:3px;
        margin-bottom:3px;
        margin-left: 5px;
        margin-right:5px;
        -ms-grid-rows:1fr;
        -ms-grid-columns:1fr 20px;
        display:-ms-grid;
        font-family: 'Segoe UI SemiBold'
    }

        .navbar .item .overlay {
            -ms-grid-column:1;
            -ms-grid-row:1;
            margin-top:40px;
            margin-left:5px;
        }

        .navbar .item .upArrow {
            -ms-grid-column:2;
            -ms-grid-row:1;
            margin-top:40px;
        }

        .navbar .item .downArrow {
            -ms-grid-column:2;
            -ms-grid-row:1;
            margin-top:40px;
        }

    .navbar .item:hover {
        border:2px solid gray;
    }

    .navbar .itembirds {
        -ms-grid-column:1;
        -ms-grid-row:1;

    }

    .navbar .itemanimals {
        -ms-grid-column:2;
        -ms-grid-row:1;
    }

    .navbar .itemreptiles {
        -ms-grid-column:3;
        -ms-grid-row:1;
    }

    .navbar .navbarlist {
        -ms-grid-row:2;
        -ms-grid-column:1;
        -ms-grid-column-span:7;
        background-color: lightgray;
        height: 70px;
    }

        .navbar .navbarlist .item {
            height: 50px;
            width : 90px;
            background-color:indigo;
        }

        .navbar .navbarlist .item .title{
            margin-top:20px;
            text-align:center;
            color:white;
            font-family: 'Segoe UI SemiLight';
        }

    .navbar .hidden {
        display:none;
    }

I hope this is useful.. Let me know if you have any question(s)..

Here are some links

List view

Cheers….

 

 

Disclaimer

Advertisements

WinJS List view binding with observable objects and interactive elements

Hi,

In the last post we looked at how to bind and reflect changes on UI based on some user action.

In this post we are going to look at how to use and handle specific controls in list view items which can be interacted individually.

Typically we have some actions that the user can do on the list items such as select, click …. This applies to the item only. Let say we want to have a control within the list view item which we could interact separately and will not be an action on the list view item.

If you want to know how binding works please refer my earlier post.

I will proceed using my last code as a sample and try to build a scenario and sample to show how we can have individual interactive elements in the list view items.

Here is the overall scenario (Extended on top of last scenario):
1. In the items we will have a select that lists the quantity.
2. The user can click on the item. In this case the item will be selected and 1 quantity is automatically set.
3. The user can (without selecting the item) just click the quantity dropdown and select a quantity. In this case the items gets selected with the quantity being the quantity the user had selected.
4. If the user clicks a selected item, it will be unselected and revert back to default setting and UI with quantity as 0.
5. If user selects 0 quantity for a selected item, it will be unselected and revert back to default setting and UI with quantity as 0.

Simple scenario :).. Lets start …

I will only explain the changes I do in respect to the last post.

First step is to modify the template to include a select (so that user can select the quantity).
I will assign a class called “win-interactive” to this select.
This class will ensure that when the select dropdown is clicked it will be treated as an separate control and not as part of item clicked. The interaction with the select control will not be considered as a interaction with the list view item.

You can learn more at MSDN

 <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item" data-win-bind="style.background : IsSelected TemplateConverters.SelectedBackground;title: ProductName">
            <div class="productName win-type-ellipsis" data-win-bind="title: ProductName">
                <h3 class="nameLabel" data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;textContent: ProductName"></h3>
            </div>
            <select class="prodQuantity win-interactive" data-win-bind="value: QuantitySelected">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
            <div class="details win-type-ellipsis" data-win-bind="title: LevelName">
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> <u> Details</u> </b> </span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Weight : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Weight"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Color : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Color"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Sales Price : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: SalesPrice"></span>
            </div>
        </div>
    </div>
 

Next step is to modify the CSS to accommodate this select that we have added. I just change the Item CSS to add the Select to the right top corner :

 .samplepage .mainList .item {
        -ms-grid-columns: 1fr 0.3fr; /*Two columns to accommodate the select in 2nd column */
        -ms-grid-rows: 0.5fr 1fr;
        display: -ms-grid;
        height: 120px;
        width: 350px;
        background-color:whitesmoke;
        border:1px solid black;
    }
        .samplepage .mainList .item .productName {
            -ms-grid-row:1;
            -ms-grid-column:1;
            margin-left:20px;
        }

        .samplepage .mainList .item .prodQuantity {
            -ms-grid-row:1;
            -ms-grid-column:2;
        }

        .samplepage .mainList .item .details {
            -ms-grid-row:2;
            -ms-grid-column:1;
            -ms-grid-column-span:2;
            margin-left:20px;
        }
 

Now to the Code part.

First we will add a new Property to the class object definition. I add a property called “QuantitySelected” and default it’s value to 0.

 var product = WinJS.Binding.define({
        ProductName : "",
        Weight : 0,
        Color : "",
        SalesPrice: 0.0,
        IsSelected: false,
        QuantitySelected: 0 // Added
    });

In the last post we directly assigned the template to the list view on initialization. In this we will not directly assign the template but will use a templating function to create the template for the list view.

Why am I using a templating function ? : In our requirement we need to track any changes that the user makes to the Select dropdown. This means that we need to observe the event “changed” for the select in each of the list view items. To attach event listener to the Select element in list view items we will use a templating function (this makes our work easier).

So for list view template we will have a templating function.

This templating function will be called for each of the data items for the list view.

 listview.itemTemplate = this.itemTemplate.bind(this);

Lets define this function. This function will accept a itemPromise. The function should return a template that can just be used in list view. As I mentioned this function will be called for all data items in the list view.

Here are the steps that are done in this templating function to return a template:
1. create a div element
2. get the item template defined in HTML.
3. Use the itemTemplate.winControl.render function to render the control to the div element (step 1) with the data binding (data from itemPromise).

Since we need to track the “changed” event for Select. we will do these additional steps:
1. get the select from rendered template
2. Attach a event listener to track event “changed”.
3. In the event listener logic we will implement the logic (Check for the new value, if it is 0, means the user has unselected, so set “IsSelected” to false, else Set “IsSelected” to true).

 itemTemplate : function(itemPromise)
        {
            var that = this;
            return itemPromise.then(function (item) {

                var index = itemPromise._value.index;// Get the index of item
                var itemTemplate = document.body.querySelector(".itemtemplate"); // Get the template definition
                var container = document.createElement("div"); // Create a div element
                itemTemplate.winControl.render(item.data, container); // Render the template with data.

                // Get the Select and attach the event listener to track changes
                var selectElement = container.querySelector(".prodQuantity");
                selectElement.addEventListener("change", function (args) {
                    var e = args.srcElement;
                    var itemList = that.listData.getAt(index);
                    var quantitySelected = e.options[e.selectedIndex].value;
                    itemList.QuantitySelected = quantitySelected;
                    if(quantitySelected > 0)
                    {
                        itemList.IsSelected = true;
                    }
                    else
                    {
                        itemList.IsSelected = false;
                    }

                }, false);
                return container;
            });
        }

We are almost done. But considering the scenario (2 in the overall scenario) we have in this case we also need modify the iteminvoked method a bit. If item is selected we need to set “IsSelected” flag to true as well as “QuantitySelected” to 1 and if item is un-selected we need to set “IsSelected” flag to false as well as “QuantitySelected” to 0.

 itemInvoked: function (args) {
            var dataItem = this.listData.getAt(args.detail.itemIndex);
            if (dataItem.IsSelected) {
                dataItem.IsSelected = false;
                dataItem.QuantitySelected = 0;
            }
            else {
                dataItem.IsSelected = true;
                dataItem.QuantitySelected = 1;
            }
        }

Now you can run your code and interact with the list view item and the select separately.

Below is the full code for your reference.

listviewbinding.html

<!--THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ListView TwoWay Binding Sample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ListViewTwoWayBinding references -->
    <link href="/pages/ListViewBinding/listViewBinding.css" rel="stylesheet" />
    <script src="/pages/ListViewBinding/listViewBinding.js"></script>
    <script src="/js/converters.js"></script>
</head>
<body>
    <!-- These templates are used to display each item in the ListView declared below. -->

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item" data-win-bind="style.background : IsSelected TemplateConverters.SelectedBackground;title: ProductName">
            <div class="productName win-type-ellipsis" data-win-bind="title: ProductName">
                <h3 class="nameLabel" data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;textContent: ProductName"></h3>
            </div>
            <select class="prodQuantity win-interactive" data-win-bind="value: QuantitySelected">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
            <div class="details win-type-ellipsis" data-win-bind="title: LevelName">
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> <u> Details</u> </b> </span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Weight : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Weight"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Color : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Color"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Sales Price : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: SalesPrice"></span>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="samplepage fragment">
        <header aria-label="Header content" role="banner">
           <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
             <h1 class="titlearea win-type-ellipsis">
                 <span class="pagetitle">List view Binding Sample</span>
             </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="mainList win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>

listviewbinding.css

/*THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.*/

.samplepage section[role=main] {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
}

.samplepage .mainList {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 0;
}

    /* This selector is used to prevent ui-dark/light.css from overwriting changes
       to .win-surface. */
    .samplepage .mainList .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        margin-left: 45px;
        margin-right: 115px;
        margin-top: 128px;
    }

    .samplepage .mainList .win-container {
        outline:none;
        background-color:transparent;
    }

    .samplepage .mainList .win-container:hover {
        outline:none;
        background-color:transparent;
    }

    .samplepage .mainList .item {
        -ms-grid-columns: 1fr 0.3fr;
        -ms-grid-rows: 0.5fr 1fr;
        display: -ms-grid;
        height: 120px;
        width: 350px;
        background-color:whitesmoke;
        border:1px solid black;
    }

        .samplepage .mainList .item:hover {
            border:2px solid black;
        }

        .samplepage .mainList .item .productName {
            -ms-grid-row:1;
            -ms-grid-column:1;
            margin-left:20px;
        }

        .samplepage .mainList .item .prodQuantity {
            -ms-grid-row:1;
            -ms-grid-column:2;
        }

        .samplepage .mainList .item .details {
            -ms-grid-row:2;
            -ms-grid-column:1;
            -ms-grid-column-span:2;
            margin-left:20px;
        }

@media screen and (-ms-view-state: snapped) {
    .samplepage section[role=main] {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
    }

    .samplepage .mainList .win-vertical.win-viewport .win-surface {
        margin-bottom: 30px;
        margin-top: 0;
    }

    .samplepage .mainList .win-container {
        margin-bottom: 15px;
        margin-left: 10px;
        margin-right: 20px;
        padding: 7px;
    }

    .samplepage .mainList .item {
        height: 120px;
        width: 250px;
    }
}

listviewbinding.js

       //// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.
(function () {
    "use strict";

    var appView = Windows.UI.ViewManagement.ApplicationView;

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;

    var nav = WinJS.Navigation;

    var ui = WinJS.UI;

    var product = WinJS.Binding.define({
        ProductName : "",
        Weight : 0,
        Color : "",
        SalesPrice: 0.0,
        IsSelected: false,
        QuantitySelected: 0
    });

    ui.Pages.define("/pages/ListViewBinding/listViewBinding.html", {

        listData: null,

        ready: function (element, options) {
            this.listData = new WinJS.Binding.List();
            this.createDummyData();
            var listview = element.querySelector(".mainList").winControl;

            listview.itemTemplate = this.itemTemplate.bind(this);
            listview.oniteminvoked = this.itemInvoked.bind(this);
            listview.itemDataSource = this.listData.dataSource;
            this.initializeLayout(listview, appView.value);
        },

        initializeLayout: function (listView, viewState) {
            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
            } else {
                listView.layout = new ui.GridLayout();
            }
        },

        updateLayout: function (element, viewState, lastViewState) {
            var listview = element.querySelector(".mainList").winControl;
            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                    var handler = function (e) {
                        listview.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                    }
                    listview.removeEventListener("contentanimating", handler, false);
                    this.initializeLayout(listview, viewState);
                }
            }
        },

        itemInvoked: function (args) {
            var dataItem = this.listData.getAt(args.detail.itemIndex);
            if (dataItem.IsSelected) {
                dataItem.IsSelected = false;
                dataItem.QuantitySelected = 0;
            }
            else {
                dataItem.IsSelected = true;
                dataItem.QuantitySelected = 1;
            }
        },

        itemTemplate : function(itemPromise)
        {
            var that = this;
            return itemPromise.then(function (item) {
                var index = itemPromise._value.index;
                var itemTemplate = document.body.querySelector(".itemtemplate");
                var container = document.createElement("div");
                itemTemplate.winControl.render(item.data, container);

                var selectElement = container.querySelector(".prodQuantity");
                selectElement.addEventListener("change", function (args) {
                    var e = args.srcElement;
                    var itemList = that.listData.getAt(index);
                    var quantitySelected = e.options[e.selectedIndex].value;
                    itemList.QuantitySelected = quantitySelected;
                    if(quantitySelected > 0)
                    {
                        itemList.IsSelected = true;
                    }
                    else
                    {
                        itemList.IsSelected = false;
                    }

                }, false);
                return container;
            });
        },

        createDummyData: function () {
            // Creating dummy data .
            //Data format : Name, Quantity, SalesPrice, IsSelected 

            // TODO : Replace your data creation logic and push into the main list

            this.listData.push(WinJS.Binding.as(new product({ ProductName: "Front Brakes", Weight: 317, Color: "Silver", SalesPrice: 47.286, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "Front Derailleur", Weight: 88, Color: "Silver", SalesPrice: 40.6216, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Bottom Bracket", Weight: 170, Color: "NA", SalesPrice: 53.9416, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Crankset", Weight: 575, Color: "Black", SalesPrice: 179.8156, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Mountain Frame - Black, 38", Weight: 2.68, Color: "Black", SalesPrice: 617.0281, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Mountain Frame - Silver, 42", Weight: 2.72, Color: "Silver", SalesPrice: 623.8403, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Mountain Pedal", Weight: 185, Color: "Silver/Black", SalesPrice: 35.9596, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Frame - Black, 62", Weight: 2.3, Color: "Black", SalesPrice: 722.2568, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Frame - Red, 44", Weight: 2.12, Color: "Red", SalesPrice: 747.9682, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Front Wheel", Weight: 650, Color: "Black", SalesPrice: 146.5466, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Pedal", Weight: 149, Color: "Silver/Black", SalesPrice: 35.9596, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Rear Wheel", Weight: 890, Color: "Black", SalesPrice: 158.5346, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Touring Frame - Blue, 50", Weight: 3, Color: "Blue", SalesPrice: 601.7437, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Touring Frame - Yellow, 50", Weight: 3, Color: "Yellow", SalesPrice: 601.7437, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Bottom Bracket", Weight: 223, Color: "NA", SalesPrice: 23.9716, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Crankset", Weight: 600, Color: "Black", SalesPrice: 77.9176, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Mountain Frame - Black, 40", Weight: 2.88, Color: "Black", SalesPrice: 136.785, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Mountain Frame - Silver, 52", Weight: 3.04, Color: "Silver", SalesPrice: 144.5938, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Mountain Pedal", Weight: 218, Color: "Silver/Black", SalesPrice: 17.9776, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Road Frame - Black, 44", Weight: 2.32, Color: "Black", SalesPrice: 176.1997, IsSelected: false })));
                   }
    });
})();

converters.js

//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.
(function () {

    WinJS.Namespace.define("TemplateConverters", {

        // Return the background color based on selection
        SelectedBackground: WinJS.Binding.converter(function (value) {
            return !value ? "WhiteSmoke" : "DarkGray";
        }),
        // Return the font color based on selection
        SelectedFontColor: WinJS.Binding.converter(function (value) {
            return !value ? "Black" : "White";
        })
    });
})();

I hope this is useful.. Let me know if you have any question(s)..

Here are some links

List view
Converters
Win JS Binding Class

Cheers …

 

Disclaimer

WinJS List view binding with observable objects

I have been looking over posts and questions where there are asks on how to do a binding in list view. The questions are more concentrated on how to capture user interactions on an item and change it’s UI to make it look as selected/unselected and also store the user interactions. In this series of post I will be covering some scenarios that I have come across.

The key in such scenarios is to use WinJS binding objects. The WinJS Binding objects are observable objects that track changes in the property values and raises an event. More or less it is same as INotifyPropertyChanged in WPF (if you are familiar).

This is start of the series. In this post we will look at how to bind a list view , allow the user to click and select/unselect the item. The appearance of the item will change on the state (selected/unselected).

Here is the overall scenario:
1. We have a list that is bound to some data (dummy products data) and show the products.
2. By default (unselected state) the details of the items will displayed, the background will be Light gray and fonts will be black.
3. When the user clicks on an item, it will be in selected state, the change on UI will be that the background will be dark gray and the fonts will be in white.
4. If the user clicks a selected item, it will be unselected and revert back to default setting and UI.

Simple enough… Lets start then 🙂

Let us first create the project. In visual studio create a new grid application (File ==> New Project ==> Other Languages ==> JavaScript ==> Windows store ==> Grid App). This will create a new project. I use the Grid application because some default code are added such as navigation.js etc.

Under the pages create a new folder called “ListViewBinding”. In this new folder lets add three files “listViewBinding.css”, “listViewBinding.js”, “listViewBinding.html”.

In prefer the light theme so in default I will change the css to point to light theme, so I change the CSS to light as:

 <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
 

In the default.html lets navigate to the listViewBinding.html that we created:

 <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: 'pages/ListViewBinding/listViewBinding.html'}"></div>
 

Now since we are done and we will navigate to our page when the app load, lets design our listViewBinding.html.

Our item data will have the following properties :
1. ProductName : The product name
2. Weight : The product weight
3. Color : The product Color
4. SalesPrice : The price for the Product
5. IsSelected : Flag to determine if item is selected or not.

First we will create the body section and add the list view.

 <section aria-label="Main content" role="main">
            <div class="mainList win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
 

Second we will create a template for the list view items. My items is very simple , It shows the Product name and some product details such as Weight, Color and Sales price. So I declare the template as below. I have used data-win-bind to bind the properties to show the values (such as productname, weight etc..). I have also used style binding to background and font color. In the style binding I have used a converter which accepts the IsSelectedFlag. I will get to the converter later.

 <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item" data-win-bind="style.background : IsSelected TemplateConverters.SelectedBackground;title: ProductName">
            <div class="productName win-type-ellipsis" data-win-bind="title: ProductName">
                <h3 class="nameLabel" data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;textContent: ProductName"></h3>
            </div>

            <div class="details win-type-ellipsis" data-win-bind="title: LevelName">
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> <u> Details</u> </b> </span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Weight : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Weight"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Color : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Color"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Sales Price : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: SalesPrice"></span>
            </div>
        </div>
    </div>

Now since most of the design that we need to do on listViewBinding.html is completed , lets create the converter. Under data.js we will add a new file called “converters.js” and declare the two converters there.

We are using two converters :
1. To give the background color based on the IsSelected Flag state.

        SelectedBackground: WinJS.Binding.converter(function (value) {
            return !value ? "WhiteSmoke" : "DarkGray";
        })

2. To give the font color based on IsSelected Flag state.

        SelectedFontColor: WinJS.Binding.converter(function (value) {
            return !value ? "Black" : "White";
        })

Now to style . In “listViewBinding.css” we will create a style for template. I am going for a simple styling with two rows. One row to display the Product name and another to display the details.

.samplepage .mainList .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 0.5fr 1fr;
        display: -ms-grid;
        height: 120px;
        width: 300px;
        background-color:whitesmoke;
        border:1px solid black;
    }

        .samplepage .mainList .item .productName {
            -ms-grid-row:1;
            margin-left:20px;
        }
        .samplepage .mainList .item .details {
            -ms-grid-row:2;
            margin-left:20px;
        }
        

Now to the code for this page.

First we will define the class for the item


var product =  WinJS.Binding.define({
        ProductName : "",
        Weight : 0,
        Color : "",
        SalesPrice: 0.0,
        IsSelected : false
    });

In the page definition we will declare a variable for the list view binding list.


 ui.Pages.define("/pages/ListViewBinding/listViewBinding.html", {

        listData: null,
.........

In the ready event we will first get the data, initialize the list ( set’s it template, datasource and layout). In the below code you will observable that while adding items I add then as “WinJS.Binding.as(…)”. This makes my object observable and will react to any change that is done on the property.

ready: function (element, options) {
            this.listData = new WinJS.Binding.List();
            this.createDummyData();
            var listview = element.querySelector(".mainList").winControl;
            listview.itemDataSource = this.listData.dataSource;
            listview.itemTemplate = element.querySelector(".itemtemplate");
            listview.oniteminvoked = this.itemInvoked.bind(this);
            this.initializeLayout(listview, appView.value);
        },

        initializeLayout: function (listView, viewState) {
            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
            } else {
                listView.layout = new ui.GridLayout();
            }
        },
createDummyData: function () {
            // Creating dummy data .
            //Data format : Name, Quantity, SalesPrice, IsSelected 

            // TODO : Replace your data creation logic and push into the main list

            this.listData.push(WinJS.Binding.as(new product({ ProductName: "Front Brakes", Weight: 317, Color: "Silver", SalesPrice: 47.286, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "Front Derailleur", Weight: 88, Color: "Silver", SalesPrice: 40.6216, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Bottom Bracket", Weight: 170, Color: "NA", SalesPrice: 53.9416, IsSelected: false })));

///............. More data to be added
        }

Now in the item invoked method for the list we will switch the “IsSelected” flag. This will set the flag to true if current state is false and vice-versa.

itemInvoked: function (args) {
            var dataItem = this.listData.getAt(args.detail.itemIndex);
            dataItem.IsSelected = !dataItem.IsSelected;
        }

Now if you run the code you can select and unselect the items and the background and font color should change as the flag changes.

You can store/remove the selected items in another list (in the iteminvoked method) if you want to add additional functionality on the items that are selected. Also you could just move over the list and filter out the items where IsSelected = true to get a list of selected items.

The full source code is given below. Has additional styles and script for snapped view.

listviewbinding.html

<!--THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ListView TwoWay Binding Sample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ListViewTwoWayBinding references -->
    <link href="/pages/ListViewBinding/listViewBinding.css" rel="stylesheet" />
    <script src="/pages/ListViewBinding/listViewBinding.js"></script>
    <script src="/js/converters.js"></script>
</head>
<body>
    <!-- These templates are used to display each item in the ListView declared below. -->

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item" data-win-bind="style.background : IsSelected TemplateConverters.SelectedBackground;title: ProductName">
            <div class="productName win-type-ellipsis" data-win-bind="title: ProductName">
                <h3 class="nameLabel" data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;textContent: ProductName"></h3>
            </div>

            <div class="details win-type-ellipsis" data-win-bind="title: LevelName">
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> <u> Details</u> </b> </span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Weight : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Weight"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Color : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: Color"></span><br />
                <span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor"><b> Sales Price : </b> </span><span data-win-bind="style.color: IsSelected TemplateConverters.SelectedFontColor;innerText: SalesPrice"></span>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="samplepage fragment">
        <header aria-label="Header content" role="banner">
           <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
             <h1 class="titlearea win-type-ellipsis">
                 <span class="pagetitle">List view Binding Sample</span>
             </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="mainList win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>

listviewbinding.css

/*THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.*/

.samplepage section[role=main] {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
}

.samplepage .mainList {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 0;
}

    /* This selector is used to prevent ui-dark/light.css from overwriting changes
       to .win-surface. */
    .samplepage .mainList .win-horizontal.win-viewport .win-surface {
        margin-bottom: 60px;
        margin-left: 45px;
        margin-right: 115px;
        margin-top: 128px;
    }

    .samplepage .mainList .win-container {
        outline:none;
        background-color:transparent;
    }

    .samplepage .mainList .win-container:hover {
        outline:none;
        background-color:transparent;
    }

    .samplepage .mainList .item {
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 0.5fr 1fr;
        display: -ms-grid;
        height: 120px;
        width: 300px;
        background-color:whitesmoke;
        border:1px solid black;
    }

        .samplepage .mainList .item:hover {
            border:2px solid black;
        }

        .samplepage .mainList .item .productName {
            -ms-grid-row:1;
            margin-left:20px;
        }
        .samplepage .mainList .item .details {
            -ms-grid-row:2;
            margin-left:20px;
        }

@media screen and (-ms-view-state: snapped) {
    .samplepage section[role=main] {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
    }

    .samplepage .mainList .win-vertical.win-viewport .win-surface {
        margin-bottom: 30px;
        margin-top: 0;
    }

    .samplepage .mainList .win-container {
        margin-bottom: 15px;
        margin-left: 10px;
        margin-right: 20px;
        padding: 7px;
    }

    .samplepage .mainList .item {
        height: 120px;
        width: 250px;
    }
}

listviewbinding.js

//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.
(function () {
    "use strict";

    var appView = Windows.UI.ViewManagement.ApplicationView;

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;

    var nav = WinJS.Navigation;

    var ui = WinJS.UI;

    var product =  WinJS.Binding.define({
        ProductName : "",
        Weight : 0,
        Color : "",
        SalesPrice: 0.0,
        IsSelected : false
    });

    ui.Pages.define("/pages/ListViewBinding/listViewBinding.html", {

        listData: null,

        ready: function (element, options) {
            this.listData = new WinJS.Binding.List();
            this.createDummyData();
            var listview = element.querySelector(".mainList").winControl;
            listview.itemDataSource = this.listData.dataSource;
            listview.itemTemplate = element.querySelector(".itemtemplate");
            listview.oniteminvoked = this.itemInvoked.bind(this);
            this.initializeLayout(listview, appView.value);
        },

        initializeLayout: function (listView, viewState) {
            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
            } else {
                listView.layout = new ui.GridLayout();
            }
        },

        updateLayout: function (element, viewState, lastViewState) {
            var listview = element.querySelector(".mainList").winControl;
            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
                    var handler = function (e) {
                        listview.removeEventListener("contentanimating", handler, false);
                        e.preventDefault();
                    }
                    listview.removeEventListener("contentanimating", handler, false);
                    this.initializeLayout(listview, viewState);
                }
            }
        },

        itemInvoked: function (args) {
            var dataItem = this.listData.getAt(args.detail.itemIndex);
            dataItem.IsSelected = !dataItem.IsSelected;
        },

        createDummyData: function () {
            // Creating dummy data .
            //Data format : Name, Quantity, SalesPrice, IsSelected 

            // TODO : Replace your data creation logic and push into the main list

            this.listData.push(WinJS.Binding.as(new product({ ProductName: "Front Brakes", Weight: 317, Color: "Silver", SalesPrice: 47.286, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "Front Derailleur", Weight: 88, Color: "Silver", SalesPrice: 40.6216, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Bottom Bracket", Weight: 170, Color: "NA", SalesPrice: 53.9416, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Crankset", Weight: 575, Color: "Black", SalesPrice: 179.8156, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Mountain Frame - Black, 38", Weight: 2.68, Color: "Black", SalesPrice: 617.0281, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Mountain Frame - Silver, 42", Weight: 2.72, Color: "Silver", SalesPrice: 623.8403, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Mountain Pedal", Weight: 185, Color: "Silver/Black", SalesPrice: 35.9596, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Frame - Black, 62", Weight: 2.3, Color: "Black", SalesPrice: 722.2568, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Frame - Red, 44", Weight: 2.12, Color: "Red", SalesPrice: 747.9682, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Front Wheel", Weight: 650, Color: "Black", SalesPrice: 146.5466, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Pedal", Weight: 149, Color: "Silver/Black", SalesPrice: 35.9596, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Road Rear Wheel", Weight: 890, Color: "Black", SalesPrice: 158.5346, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Touring Frame - Blue, 50", Weight: 3, Color: "Blue", SalesPrice: 601.7437, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "HL Touring Frame - Yellow, 50", Weight: 3, Color: "Yellow", SalesPrice: 601.7437, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Bottom Bracket", Weight: 223, Color: "NA", SalesPrice: 23.9716, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Crankset", Weight: 600, Color: "Black", SalesPrice: 77.9176, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Mountain Frame - Black, 40", Weight: 2.88, Color: "Black", SalesPrice: 136.785, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Mountain Frame - Silver, 52", Weight: 3.04, Color: "Silver", SalesPrice: 144.5938, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Mountain Pedal", Weight: 218, Color: "Silver/Black", SalesPrice: 17.9776, IsSelected: false })));
            this.listData.push(WinJS.Binding.as(new product({ ProductName: "LL Road Frame - Black, 44", Weight: 2.32, Color: "Black", SalesPrice: 176.1997, IsSelected: false })));
                   }
    });
})();

converters.js

//// THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
//// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
//// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
//// PARTICULAR PURPOSE.
(function () {

    WinJS.Namespace.define("TemplateConverters", {

        // Return the background color based on selection
        SelectedBackground: WinJS.Binding.converter(function (value) {
            return !value ? "WhiteSmoke" : "DarkGray";
        }),
        // Return the font color based on selection
        SelectedFontColor: WinJS.Binding.converter(function (value) {
            return !value ? "Black" : "White";
        })
    });
})();

I hope this is useful.. Let me know if you have any question..

Here are some links

List view
Converters
Win JS Binding class

Cheers …

 

Disclaimer