First steps with Windows 8 development - Build Windows 8 Apps with HTML5 and JavaScript - page 110

</div>
</body>
</html>
The body of the previous page includes a plain DIV and a few BUTTON elements. The magic that
transforms this markup into an AppBar in pure Windows 8 style is the data-win-control attribute.
Applied to the DIV tag, the attribute transforms it into a WinJS.UI.AppBar object—namely an
AppBar. Likewise, applied to a BUTTON element it makes it a button on the AppBar or an object of
type WinJS.UI.AppBarCommand . The data-win-options attribute contains settings for control. For
example, an AppBar button is assigned a unique ID, a label, and an icon. To display an AppBar, you
either swipe up from the bottom of the screen or right-click the application's screen. Finally, you can
achieve the same outcome by pressing the Windows button and Z.
What about some action to be performed when the user clicks a button?
The HTML for the layout you have just entered serves the purpose of defining the layout of the
bar. To add a behavior, you also need some JavaScript. You edit the default.js file in the project, as
shown below:
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
// Load application state if needed
} else {
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll()
.then(init()));
}
};
app.oncheckpoint = function (args) {
// This application is about to be suspended.
};
app.start();
})();