The goal of this blog entry is to explain how you can create a simple master/detail view by using
the WinJS ListView and Template controls. In particular, I explain how you can use a ListView
control to display a list of movies and how you can use a Template
control to display
the details of
the selected movie.
Creating a master/detail view requires completing
the following four steps:
Create
the data source –
The data source contains
the list of movies.
Declare
the ListView
control –
The ListView
control displays
the entire list of movies. It is
the master part of
the master/detail view.
Declare
the Details Template
control –
The Details Template
control displays
the details for
the selected movie. It is
the details part of
the master/detail view.
Handle
the selectionchanged event – You handle
the selectionchanged event to display
the details for a movie when a new movie is selected.
Creating
the Data Source
There is nothing special about our data source. We initialize a WinJS.Binding.List object to represent a list of movies:
(function () {
"use strict";
var movies = new WinJS.Binding.List([
{ title: "Star Wars", director: "Lucas"},
{ title: "Shrek", director: "Adamson" },
{ title: "Star Trek", director: "Abrams" },
{ title: "Spiderman", director: "Raimi" },
{ title: "Memento", director: "Nolan" },
{ title: "Minority Report", director: "Spielberg" }
]);
// Expose
the data source
WinJS.Namespace.define("ListViewDemos", {
movies: movies
});
})();
The data source is exposed to
the rest of our application with
the name ListViewDemos.movies.
Declaring
the ListView
Control
The ListView
control is declared with
the following markup:
<div id="movieList"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: ListViewDemos.movies.dataSource,
itemTemplate: select('#masterItemTemplate'),
tapBehavior: 'directSelect',
selectionMode: 'single',
layout: { type: WinJS.UI.ListLayout }
}">
</div>
The data-win-options attribute is used to set
the following properties of
the ListView control:
itemDataSource –
The ListView is bound to
the list of movies which we created in
the previous section. Notice that
the ListView is bound to ListViewDemos.movies.dataSource and not just ListViewDemos.movies.
itemTemplate –
The item template contains
the template used for rendering each item in
the ListView.
The markup for this template is included below.
tabBehavior – This enumeration determines what happens when you tap or click on an item in
the ListView.
The possible values are directSelect, toggleSelect, invokeOnly, none. Because we want to handle
the selectionchanged event, we set tapBehavior to
the value directSelect.
selectionMode – This enumeration determines whether you can select multiple items or only a single item.
The possible values are none, single, multi. In
the code above, this property is set to
the value single.
layout – You can use ListLayout or GridLayout with a ListView. If you want to display a vertical ListView, then you should select ListLayout.
You must associate a ListView with an item template if you want to render anything interesting.
The ListView above is associated with an item template named #masterItemTemplate. Here’s
the markup for
the masterItemTemplate:
<div id="masterItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="movie">
<span data-win-bind="innerText:title"></span>
</div>
</div>
This template simply renders
the title of each movie.
Declaring
the Details Template
Control
The details part of
the master/detail view is created with
the help of a Template
control. Here’s
the markup used to declare
the Details Template control:
<div id="detailsTemplate" data-win-control="WinJS.Binding.Template">
<div>
<div>
Title:
<span data-win-bind="innerText:title"></span>
</div>
<div>
Director:
<span data-win-bind="innerText:director"></span>
</div>
</div>
</div>
The Details Template
control displays
the movie title and director.
Handling
the selectionchanged Event
The ListView
control can
raise two types of events:
the iteminvoked and selectionchanged
events.
The iteminvoked event is raised when you click on a ListView item.
The selectionchanged event is raised when one or more ListView items are selected.
When you set
the tapBehavior property of
the ListView
control to
the value “directSelect” then tapping or clicking a list item raised both
the iteminvoked and selectionchanged event. Tapping a list item causes
the item to be selected and
the item appears with a checkmark.
In our code, we handle
the selectionchanged event to update
the movie details Template when you select a new movie.
Here’s
the code from
the default.js file used to handle
the selectionchanged event:
var movieList = document.getElementById("movieList");
var detailsTemplate = document.getElementById("detailsTemplate");
var movieDetails = document.getElementById("movieDetails");
// Setup selectionchanged handler
movieList.winControl.addEventListener("selectionchanged", function (evt) {
if (movieList.winControl.selection.count() > 0) {
movieList.winControl.selection.getItems().then(function (items) {
// Clear
the template container
movieDetails.innerHTML = "";
// Render
the template
detailsTemplate.winControl.render(items[0].data, movieDetails);
});
}
});
The code above sets up an event handler (listener) for
the selectionchanged event.
The event handler first verifies that an item has been selected in
the ListView (selection.count() > 0). Next,
the details for
the movie are rendered using
the movie details Template (we created this Template in
the previous section).
The Complete Code
For
the sake of completeness, I’ve included
the complete code for
the master/detail view below. I’ve included both
the default.html, default.js, and movies.js files.
Here is
the final code for
the default.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ListViewMasterDetail</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- ListViewMasterDetail references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script type="text/javascript" src="js/movies.js"></script>
<style type="text/css">
body {
font-size: xx-large;
}
.movie {
padding: 5px;
}
#masterDetail {
display: -ms-box;
}
#movieList {
width: 300px;
margin: 20px;
}
#movieDetails {
margin: 20px;
}
</style>
</head>
<body>
<!-- Templates -->
<div id="masterItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="movie">
<span data-win-bind="innerText:title"></span>
</div>
</div>
<div id="detailsTemplate" data-win-control="WinJS.Binding.Template">
<div>
<div>
Title:
<span data-win-bind="innerText:title"></span>
</div>
<div>
Director:
<span data-win-bind="innerText:director"></span>
</div>
</div>
</div>
<!-- Master/Detail -->
<div id="masterDetail">
<!-- Master -->
<div id="movieList"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: ListViewDemos.movies.dataSource,
itemTemplate: select('#masterItemTemplate'),
tapBehavior: 'directSelect',
selectionMode: 'single',
layout: { type: WinJS.UI.ListLayout }
}">
</div>
<!-- Detail -->
<div id="movieDetails"></div>
</div>
</body>
</html>
Here is
the default.js file:
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll();
var movieList = document.getElementById("movieList");
var detailsTemplate = document.getElementById("detailsTemplate");
var movieDetails = document.getElementById("movieDetails");
// Setup selectionchanged handler
movieList.winControl.addEventListener("selectionchanged", function (evt) {
if (movieList.winControl.selection.count() > 0) {
movieList.winControl.selection.getItems().then(function (items) {
// Clear
the template container
movieDetails.innerHTML = "";
// Render
the template
detailsTemplate.winControl.render(items[0].data, movieDetails);
});
}
});
}
};
app.start();
})();
Here is
the movies.js file:
(function () {
"use strict";
var movies = new WinJS.Binding.List([
{ title: "Star Wars", director: "Lucas"},
{ title: "Shrek", director: "Adamson" },
{ title: "Star Trek", director: "Abrams" },
{ title: "Spiderman", director: "Raimi" },
{ title: "Memento", director: "Nolan" },
{ title: "Minority Report", director: "Spielberg" }
]);
// Expose
the data source
WinJS.Namespace.define("ListViewDemos", {
movies: movies
});
})();
Summary
The purpose of this blog entry was to describe how to create a simple master/detail view by taking advantage of
the WinJS ListView
control. We handled
the selectionchanged event of
the ListView
control to display movie details when you select a movie in
the ListView.
