Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Part 1 – New HTML with JavaScript 2.0 Controls
Introduction
With the release of Windows 8.1 and Visual Studio 2013 just around the corner, here’s a small taste of the exciting new controls to expect. In this article I will demonstrate the use of the new controls in Windows 8.1 as well as some of the updated controls in Windows 8.1.
New HTML with JavaScript 2.0 Controls
Windows 8, as wonderful as it is / was, has fallen a little bit short. It lacked (now it seems) certain basic elements to design with, as well as certain functionalities developers expected. This list will make up for it. The following is a list of the new controls to expect in Windows 8.1 and JavaScript 2.0:
- AppBarCommand
- BackButton
- Hub
- ItemContainer
- NavBar
Let’s now have a detailed look at the purpose and use of each.
Our Project
The code segments I will show at the end of each new or updated feature will be present in the samples. Open Visual Studio 2013 Preview on Windows 8.1 Preview or Visual Studio 2013 RC on Windows 8.1 RTM and start a new JavaScript Windows Store project named MyNewHTMLStuff (for the HTML controls).
AppBarCommand
Windows 8.1 Preview introduces a new AppBarCommand simply named content. This allows us to create custom app bar commands in our Windows Store apps. If you do not know what an AppBar is, let me explain. An AppBar appears only when a user swipes from the bottom edge of the screen (on a PC you could right click, or or press the Window Logo key + Z). It is dismissed simply by clicking somewhere else or interacting with the application. Here is how to add a custom app bar command:
In your project MyNewHTMLStuff open the default.html file and add the following code:
<div id="MyHTMLAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'btOne',label:'One',section:'global',tooltip:'First item'}">
</button>
<hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'btTwo',label:'Two',section:'global',tooltip:'Second item'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'btThree',label:'Three',section:'selection',tooltip:'Third item'}">
</button>
</div>
This lets us show the buttons where we would want them. Global would show on the right hand side, where as the Selection section would show on the left. I have added a separator there as well, which is is simply an HR tag.
Add a new JavaScript file by clicking Project, Add New Item, JavaScript File and name it MyHTMLAppBarJS.js and enter the following code:
(function () {
"use strict";
var appBar;
var page = WinJS.UI.Pages.define("default.html", {
ready: function (element, options) {
appBar = document.getElementById("MyHTMLAppBar").winControl;
appBar.getCommandById("btOne").addEventListener("click", btOneClick, false);
appBar.getCommandById("btTwo").addEventListener("click", btTwoClick, false);
appBar.getCommandById("btThree").addEventListener("click", btThreeClick, false);
},
unload: function () {
AppBarSampleUtils.removeAppBars();
}
});
// Command button functions
function btOneClick() {
WinJS.log && WinJS.log("First button pressed");
}
function btTwoClick() {
WinJS.log && WinJS.log("Second button pressed");
}
function btThreeClick() {
WinJS.log && WinJS.log("Third button pressed");
}
})();
This adds the associated event handlers to each of the AppBar’s buttons and obviously gives it something to do.
Include MyHTMLAppBar.js in default.html:
<script src="MyHTMLAppBarJS.js"></script>
This imports the MyHTMLAppBar capabilities into the webpage.
Figure 1 – AppBar
BackButton
Windows 8.1 finally introduces backward navigation in your Windows Store apps! I say finally, because I’d have expected it to be supported with Windows 8 already. On the other side, perhaps it is good that this is only now being supported, because the BackButton is very clever indeed! It automatically determines whether users can navigate backwards by checking the navigation stack, based on that it enables and disables itself. This control also calls WinJS.Navigation.back for you (it is built-in) so that you won’t have to write any code for it. Funky isn’t it? Here is how to add the BackButton control:
In the MyNewHTMLStuff project, add a new HTML page named page2.html and add the following code (inside the Body tags) to add the Back button:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<p><button data-win-control="WinJS.UI.BackButton"></button></p>
</body>
</html>
Go back to default.html and add the following HTML code to add a link to page 2:
<a href="page2.html">Page 2</a>
For a better understanding on how to do proper navigation between your app’s pages, have a look here.
Hub
The new Hub control in Windows 8.1 is in my opinion the most exciting addition to the array of controls. The Hub control uses a hierarchical pattern of navigation. This separates the content into different levels. You could display the content horizontally or vertically in a panning view.
Add a new Page control to your project and name it hub.html. This is not the normal HTML page, you have to select Windows Store and select the Page control there. This gives the html page as well as the JavaScript page and even the Stylesheet page.
Add the following code to your hub.js file:
(function () {
"use strict";
var myData = new WinJS.Binding.List([
{ title: "Wife1", text: "El", picture: "/images/Elmarie.jpg" },
{ title: "Daughter1", text: "Kay", picture: "/images/Michaela.jpg" },
{ title: "Me1", text: "Dad", picture: "/images/Me.jpg" },
{ title: "Dog11", text: "Naughty", picture: "/images/Bubbles.jpg" },
{ title: "Dog21", text: "Dead:(", picture: "/images/Brandy.jpg" },
{ title: "All1", text: "Family", picture: "/images/AllOfUs.jpg" },
{ title: "Wife2", text: "El", picture: "/images/Elmarie2.jpg" },
{ title: "Daughter2", text: "Kay", picture: "/images/Michaela2.jpg" },
{ title: "Me2", text: "Dad", picture: "/images/Me2.jpg" },
{ title: "Dog12", text: "Naughty", picture: "/images/Bubbles2.jpg" },
{ title: "Dog22", text: "Dead:(", picture: "/images/Brandy2.jpg" },
{ title: "All2", text: "Family", picture: "/images/All2.jpg" }
]);
WinJS.UI.Pages.define("hub.html", {
myData: {
get: function () {
return myData;
}
}
});
})();
Here we include all our images that we would like to display. We also give each picture a title, ALT text and the source.
Add the following to hub.html:
<body>
<div class="fullScreen">
<!-- app header and backbutton-->
<div id="appHeader">
<button data-win-control="WinJS.UI.BackButton"></button>
<h1>My New HTML Stuff</h1>
</div>
<!-- Template for ListView in section 2 -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template">
<div class="smallListIconTextItem">
<img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
<div class="smallListIconTextItem-Detail">
<h4 data-win-bind="innerText: Title"></h4>
<h6 data-win-bind="innerText: Text"></h6>
</div>
</div>
</div>
<!-- Hub Control -->
<div data-win-control="WinJS.UI.Hub">
<div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{header: 'Images', isHeaderStatic: true}">
<div class="HubImages">
<img class="imageItem" src="/images/Elmarie.jpg" />
<img class="imageItem" src="/images/Me.jpg" />
<img class="imageItem" src="/images/Michaela.jpg" />
<img class="imageItem" src="/images/Elmarie.jpg" />
<img class="imageItem" src="/images/Me.jpg" />
<img class="imageItem" src="/images/Michaela.jpg" />
<img class="imageItem" src="/images/Elmarie.jpg" />
<img class="imageItem" src="/images/Me.jpg" />
<img class="imageItem" src="/images/Michaela.jpg" />
</div>
</div>
<div id="list" class="section2" data-win-control="WinJS.UI.HubSection" data-win-options="{header: 'ListView', isHeaderStatic: true}">
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: select('.pagecontrol').winControl.myData.dataSource,
itemTemplate: smallListIconTextTemplate,
selectionMode: 'none',
tapBehavior: 'none',
swipeBehavior: 'none'
}">
</div>
</div>
</div>
</body>
</html>
We divide the page into two sections. One section has a listview in it and shows the images inside it. We also supply the hub’s initial images.
Add the hub.js script to the hub.html file:
<link href="default.css" rel="stylesheet" />
<script src="hub.js"></script>
Add the following to default.html:
<a href="hub.html">Hub</a>
This gives a link to the hub page. Finally, add your desired images in the Images folder from inside the Solution Explorer. Remember I have used my own photos, so you’ll have to edit your code inside the hub.html file to correspond with your pictures. My pictures will not display in your app, as I had to remove it due to size constraints with the attachments for this article. So, do not worry if you see this:
Figure 2 – Hub in action
ItemContainer
The ItemContainer control contains other controls and enables us to easily create elements with hover, drag-and-drop and swiping functionality. Let us do a very basic example:
On default.html, add the following code:
<h2>Select your favourite movie</h2>
<div id="MovieSelector">
<div class="MovieContainers" id="movie1" data-win-control="WinJS.UI.ItemContainer" data-win-options="{swipeBehavior: 'select', tapBehavior: 'toggleSelect'}">
<img src="/images/It.png" alt="Stephen King's It" draggable="false" />
</div>
<div class="MovieContainers" id="movie2" data-win-control="WinJS.UI.ItemContainer" data-win-options="{swipeBehavior: 'select', tapBehavior: 'toggleSelect'}">
<img src="/images/CastAway.png" alt="Cast Away" draggable="false" />
</div>
<div class="MovieContainers" id="movie3" data-win-control="WinJS.UI.ItemContainer" data-win-options="{swipeBehavior: 'select', tapBehavior: 'toggleSelect'}">
<img src="/images/Braveheart.png" alt="Braveheart" draggable="false" />
</div>
</div>
This creates the ItemContainer controls. We specify its abilities, which is that it will toggle the selection on and off, it is not draggeble, and we supply the pictures to be used.
On default.css add the following style for our selections:
body {
}
#MovieSelector
{
display: flex;
flex-direction: row;
}
This tells us how the ItemContainer list should display.
Add the necessary pictures and update your code to point to the correct pictures. In my example I have made use of Movie pictures (It, CastAway, Braveheart). Obviously you could do so much more with the ItemContainer, but this article just serves as in introduction.
Figure 3 – ItemContainer in action
NavBar
The NavBar control contains navigation items. This is quite handy! It allows you to have a common navigation tool on every page, instead of making use of links or having to create custom navigation methods. A NavBar appears only when a user swipes from the top edge of the screen (on a PC you could right click, or or press the Window Logo key + Z). It is dismissed simply by clicking somewhere else or interacting with the application or with the buttons on the NavBar. Here’s how to create a NavBar control:
On default.html add the following:
<div id="createNav" data-win-control="WinJS.UI.NavBar">
<div class="NavigateMyNewHTMLStuff" data-win-control="WinJS.UI.NavBarContainer" data-win-options="{ data: Data.items }"></div>
</div>
This puts the NavBar on the webpage.
Add a new JavaScript file named Nav.js and add the following code to it:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("default.html", {
init: function (element, options) {
var data = [
{ location: "default.html", label: "Home Page", icon: 'viewall' },
{ location: "page2.html", label: "Page 2", icon: 'viewall' },
{ location: "hub.html", label: "Hub", icon: 'viewall' },
];
Data.items = new WinJS.Binding.List(data);
}
});
})();
This creates the NavBar with its links to where each of the items should go. We supply a label (text) and an icon to each of the items. We then bind these objects through the use of a variable named Data – which we will create later.
Add a Stylesheet named Nav.css and enter the following:
body {
}
#createNav .NavigateMyNewHTMLStuff .win-navbarcommand {
width: 157px;
height: 90px;
overflow: hidden;
}
This gives us the size and location of the NavBar and its items.
Add the Nav.js script file to default.html:
<script src="Nav.js"></script>
Add the Nav.css style sheet to default.html:
<link href="/css/Nav.css" rel="stylesheet" />
Lastly, define the global Data variable inside default.js:
WinJS.Namespace.define("Data");
Seeing the fact that we have a Navigation bar now, the links to the pages we added earlier are redundant, feel free to delete them.
Figure 4 – NavBar
Repeater
Another exciting control that is added to the Windows 8.1 set of controls is the Repeater. As its name implies it repeats controls or any HTML markup . This is quite handy and will save a lot of time creating a simple set of elements instead of creating it numerous times over and over. Have a look here on its usage.
Updated HTML with JavaScript 2.0 Controls
The following list of controls has been modified a bit to improve performance:
- ListView
Let us have a closer look at what has changed with the ListView
ListView
Drag and drop support has been added and reordering of ListItems is also now (finally) supported! Yay! Have a look here.
Conclusion
Today we saw how easy it is to incorporate the new JavaScript 2.0 controls in our Windows Store apps. I sincerely hope that you have learned a great deal today. Tomorrow, we will look into the new XAML controls for C#, VB, and C++. Until then, cheers!
