Over the past couple of months I’ve built Applications and Games for Windows 8.
This was an amazing experience especially when I built everything in JavaScript, as you know Windows 8 allow you to build metro application in:
This first part will focus on the main structure and basics of JavaScript Grid Application and over the next posts I’ll drill down to more features in Windows 8.
Step 1: Basics
When writing Windows 8 JavaScript Style App you might want to learn a little bit on WinJS and basic actions already available in Windows 8 JavaScript App, I saw posts about integrating JQuery to Windows 8 JavaScript applications, this is not necessary, WinJS offers many of those:
-
Selectors:
-
document.querySelector(".headerTemplate")
-
document.querySelectorAll("div")
- Text
- document.querySelector(“#Title”).textContent;
- Animation
- WinJS.UI.Animation.fadeIn(document.querySelector(“div”));
And more…
Step 2: Application Styles
When you open a new JavaScript metro app in Visual Studio 11 you can choose from the following:
- Blank Application – A single-page project for windows metro style app that has no predefined controls or layout.
- Split Application - A two-page project for windows metro style app that navigates among grouped items. The first page allows group selection while the second display an item list alongside details for the selected item.
- Fixed Layout Application – A project for windows metro style app that scales a fixed aspect ratio layout.
- Navigation Application – A project for a windows metro style app that has predefined controls for navigation.
- Grid Application – A multi-page project for windows metro style app that navigates among groups of items. Dedicated pages display group and item details.
for this demo I’ve created new Grid Application:
Step 3: Project Structure
In previous versions of Visual Studio 11 and Windows 8 there were a JS folder with all WinJS files, in the new version all necessary files under the References in two main files:
Beside that when creating Grid Application you will have three pages:
- groupDetailsPage
- groupedItemsPage
- itemDetailsPage
Notice that each Html page have its own Css and JavaScript file, there is no naming convention that automatically takes those and combine but in order to have some order in or application this is the best practice on how to build pages in Windows 8 JavaScript application.
Step 4: Application Flow
Everything starts from default.html, this page loaded all necessary js files and css files and using the PageControlNavigator it navigate the application to groupedItemsPage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Application1</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>
<!-- Application1 references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/data.js"></script>
<script src="/js/navigator.js"></script>
<script src="/js/default.js"></script>
</head>
<body>
<div id="contenthost"
data-win-control="Application1.PageControlNavigator"
data-win-options="{home: '/html/groupedItemsPage.html'}"></div>
</body>
</html>
The groupedItemsPage loaded the relevant JS/CSS files.
<title>groupedItemsPage</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>
<link href="/css/default.css" rel="stylesheet">
<link href="/css/groupedItemsPage.css" rel="stylesheet">
<script src="/js/data.js"></script>
<script src="/js/groupedItemsPage.js"></script>
This flow apply to each page you load.
Step 5: Page Definition
Now, after I’ve navigate to my page, how I can define what to display?
Instead register to Navigation event – navigated in groupedItemsPage.js and write this condition in each page:
(We only wants to do some actions to our page if it’s the right one…
if (e.location === '/html/groupedItemsPage.html')
For each page you load you need to define what should happened when you navigate to him, using WinJS.UI.Pages.define method you can register to each page events.
use strict:
Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions.
Strict mode helps out in a couple ways:
- It catches some common coding bloopers, throwing exceptions.
- It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
- It disables features that are confusing or poorly thought out.
(function () {
"use strict";
var appView = Windows.UI.ViewManagement.ApplicationView;
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var nav = WinJS.Navigation;
var ui = WinJS.UI;
var utils = WinJS.Utilities;
ui.Pages.define("/html/groupedItemsPage.html", {
itemInvoked: function (eventObject) {
//User Click
},
ready: function (element, options) {
// Page Loaded
},
updateLayout: function (element, viewState) {
//Layout Changed
}
});
})();
Another syntax to perform Page definition and use global methods ( right now each method or variable you define in Ready or any other method is only part of that function and it’s not visible to others) inside that strict mode is like that:
(function () {
"use strict";
var appView = Windows.UI.ViewManagement.ApplicationView;
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var nav = WinJS.Navigation;
var ui = WinJS.UI;
var utils = WinJS.Utilities;
function ready(element, options) {
}
function itemInvoked(eventObject) {
}
function updateLayout(element, viewState) {
}
ui.Pages.define("/html/groupedItemsPage.html", {
itemInvoked: itemInvoked,
ready: ready,
updateLayout: updateLayout
});
})();
Step 6: Namespaces & Classes
Some of you might think this is a new feature in JavaScript but No, even without WinJS you can write Namespace in JavaScirpt, using WinJS.Namespace and WinJS.Class you can define Namespaces and Classes very easily.
WinJS.Namespace.define("data", {
web: WinJS.Class.define({
load: loadRoamingData,
save: saveRoamingData
}),
local: WinJS.Class.define({
load: loadLocalData,
save: saveLocalData
}),
items:groupedItem
});
Now, from everywhere in my code I can call it like that:
data.web.load() or getting items –> data.items
Step 7: WinJS.UI.ListView
ListView is just one of the controls coming with WinJS, ListView Displays data items in a customizable list or grid.
Define ListView in your Html page is easy, you define WinJS.UI.ListView value in data-win-control attribute inside a div element.
<div class="groupeditemslist" aria-label="List of groups"
data-win-control="WinJS.UI.ListView"
data-win-options="{ selectionMode: 'none' }"></div>
Populate the data inside is also a simple task, in groupedItemsPage.js define under ready
event to take the groupeditemslist wincontrol, and using our previous namespace takes
data.items as datasource to our list.
ready: function (element, options) {
var listView = element.querySelector(".groupeditemslist").winControl;
//Also Possible –> listView.itemDataSource = data.items.dataSource
ui.setOptions(listView, {
itemDataSource: data.items.dataSource
});
},
Step 8: Binding and Templates
Now after you define your listview datasource, how to define the display of each item?
Think our data.items contains a list of item object that has title, subtitle and a backgroundImage.
In our groupedItemsPage.html page we define another WinJS control called - WinJS.Binding.Template, inside that control you need to add additional attribute for each child element called - data-win-bind and define the path for binding.
<!-- These templates are used to display each item in the ListView declared
below. -->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<img class="item-image" src="#" data-win-bind="src: backgroundImage;
alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis"
data-win-bind="textContent: subtitle"></h6>
</div>
</div>
One more thing, you need to set this template as itemTemplate for our listview:
ready: function (element, options) {
var listView = element.querySelector(".groupeditemslist").winControl;
ui.setOptions(listView, {
itemDataSource: data.groups.dataSource,
itemTemplate: element.querySelector(".itemtemplate")
});
},
Enjoy!