Introduction
In this article I describe how to create Windows Store App for Custom Data Group using JavaScript. The item data adapter needs to supply the items sorted by group. It also must provide a group Key for each item to specify the group.
I assume you can create a simple Windows Store App using JavaScript; for more help visit Simple Windows Store Apps using JavaScript.
To start the creation of the app, add one JavaScript page by right-clicking on the js folder in the Solution Explorer and select "Add" > "New item" > "JavaScript Page" and then provide an appropriate name. In the same way, add a HTML page to your project.
Write the following code in the default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-light.css" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body role="application"style="background-color:lightpink">
<center><div id="rootGrid">
<div id="content">
<h1 id="featureLabel"></h1>
<div id="contentHost"></div>
</div>
</div></center>
</body>
</html>
Write the following code in the default.js
(function () {
"use strict";
var appTitle = "";
var pages = [
{ url: "page.html"}
];
function activated(eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventObject.setPromise(WinJS.UI.processAll().then(function () {
var url = WinJS.Application.sessionState.lastUrl || pages[0].url;
return WinJS.Navigation.navigate(url);
}));
}
}
WinJS.Navigation.addEventListener("navigated", function (eventObject) {
var url = eventObject.detail.location;
var host = document.getElementById("contentHost");
host.winControl && host.winControl.unload && host.winControl.unload();
WinJS.Utilities.empty(host);
eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).done(function () {
WinJS.Application.sessionState.lastUrl = url;
}));
});
WinJS.Namespace.define("App", {
appTitle: appTitle,
pages: pages
});
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Application.start();
})();
Write the following code in the page.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script.js"></script>
</head>
<body>
<div data-win-control="App.pageInput">
</div>
<div data-win-control="App.pageOutput">
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div class="mediumListIconTextItem">
<img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
<div class="mediumListIconTextItem-Detail">
<h4 data-win-bind="innerText: title"></h4>
</div>
</div>
</div>
<div id="groupTemplate" data-win-control="WinJS.Binding.Template">
<div class="groupHeader">
<h2 data-win-bind="innerText: type"></h2>
</div>
</div>
<div id="listView4" class="win-selectionstylefilled">
</div>
</div>
</body>
</html>
Write the following code in the script.js
(function () {
"use strict";
var page = WinJS.UI.Pages.define("page.html", {
ready: function (element, options) {
initData();
var listView4 = new WinJS.UI.ListView(document.getElementById("listView4"), {
itemDataSource: itemDataSource,
groupDataSource: groupDataSource,
itemTemplate: document.getElementById("mediumListIconTextTemplate"),
groupHeaderTemplate: document.getElementById("groupTemplate"),
layout: new WinJS.UI.GridLayout()
});
}
});
var flavors = [
{ title: "1", kind: "1", picture: "images/1.jpg", stock: "in_stock" },
{ title: "2", kind: "1", picture: "images/2.jpg", stock: "in_stock" },
{ title: "1", kind: "2", picture: "images/1.jpg", stock: "in_stock" },
{ title: "2", kind: "2", picture: "images/2.jpg", stock: "in_stock" }
];
var desertTypes = [
{ key: "1", type: "group1" },
{ key: "2", type: "group2" }
];
var itemDataSource, groupDataSource;
function initData() {
var groupKeys = [];
for (var i = 0; i < desertTypes.length; i++) {
groupKeys[i] = desertTypes[i].key;
}
var itemData = flavors;
itemData.sort(function CompareForSort(item1, item2) {
var first = groupKeys.indexOf(item1.kind), second = groupKeys.indexOf(item2.kind);
if (first === second) { return 0; }
else if (first < second) { return -1; }
else { return 1; }
});
var itemIndex = 0;
for (var j = 0, len = desertTypes.length; j < len; j++) {
desertTypes[j].firstItemIndex = itemIndex;
var key = desertTypes[j].key;
for (var k = itemIndex, len2 = itemData.length; k < len2; k++) {
if (itemData[k].kind !== key) {
itemIndex = k;
break;
}
}
}
itemDataSource = new flavorsDataSource(itemData);
groupDataSource = new desertsDataSource(desertTypes);
}
var flavorsDataAdapter = WinJS.Class.define(
function (data) {
this._itemData = data;
},
{
getCount: function () {
var that = this;
return WinJS.Promise.wrap(that._itemData.length);
},
itemsFromIndex: function (requestIndex, countBefore, countAfter) {
var that = this;
if (requestIndex >= that._itemData.length) {
return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
}
var lastFetchIndex = Math.min(requestIndex + countAfter, that._itemData.length - 1);
var fetchIndex = Math.max(requestIndex - countBefore, 0);
var results = [];
for (var i = fetchIndex; i <= lastFetchIndex; i++) {
var item = that._itemData[i];
results.push({
key: i.toString(),
groupKey: item.kind,
data: item
});
}
return WinJS.Promise.wrap({
items: results,
offset: requestIndex - fetchIndex,
totalCount: that._itemData.length
});
}
});
var flavorsDataSource = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource, function (data) {
this._baseDataSourceConstructor(new flavorsDataAdapter(data));
});
var desertsDataAdapter = WinJS.Class.define(
function (groupData) {
this._groupData = groupData;
},
{
getCount: function () {
var that = this;
return WinJS.Promise.wrap(that._groupData.length);
},
itemsFromIndex: function (requestIndex, countBefore, countAfter) {
var that = this;
if (requestIndex >= that._groupData.length) {
return Promise.wrapError(new WinJS.ErrorFromName(UI.FetchError.doesNotExist));
}
var lastFetchIndex = Math.min(requestIndex + countAfter, that._groupData.length - 1);
var fetchIndex = Math.max(requestIndex - countBefore, 0);
var results = [];
for (var i = fetchIndex; i <= lastFetchIndex; i++) {
var group = that._groupData[i];
results.push({
key: group.key,
firstItemIndexHint: group.firstItemIndex,
data: group
});
}
return WinJS.Promise.wrap({
items: results,
offset: requestIndex - fetchIndex,
totalCount: that._groupData.length
});
},
itemsFromKey: function (requestKey, countBefore, countAfter) {
var that = this;
var requestIndex = null;
for (var i = 0, len = that._groupData.length; i < len; i++) {
if (that._groupData[i].key === requestKey) {
requestIndex = i;
break;
}
}
if (requestIndex === null) {
return WinJS.Promise.wrapError(new WinJS.ErrorFromName(WinJS.UI.FetchError.doesNotExist));
}
var lastFetchIndex = Math.min(requestIndex + countAfter, that._groupData.length - 1);
var fetchIndex = Math.max(requestIndex - countBefore, 0);
var results = [];
for (var j = fetchIndex; j <= lastFetchIndex; j++) {
var group = that._groupData[j];
results.push({
key: group.key,
firstItemIndexHint: group.firstItemIndex,
data: group
});
}
return WinJS.Promise.wrap({
items: results,
offset: requestIndex - fetchIndex,
absoluteIndex: requestIndex,
totalCount: that._groupData.length
});
},
});
var desertsDataSource = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource, function (data) {
this._baseDataSourceConstructor(new desertsDataAdapter(data));
});
})();
Output
Summary
In this article I described how to create a Windows Store App for Custom Data Group using JavaScript. I hope this article has helped you to understand this topic. Please share it. If you know more about this, your feedback and constructive contributions are welcome.
Join the conversation! Your thoughts help the community grow.