Windows APIs for Windows 8 Store Applications

Microsoft Windows 8 provides two sets of Windows APIs to develop native Windows 8 store applications:

• Windows Runtime (WinRT) – is a core language-agnostic platform providing a set of classes, methods, and properties (with Windows namespace) to develop applications using C#, VB .NET, JavaScript, C, and C++. For the JavaScript-based Windows 8 applications, the Windows Runtime is available as Windows global object.
• Windows JavaScript Library (WinJS) – is a set of JavaScript APIs providing advanced JavaScript controls, DOM utilities, CSS styles, support to asynchronous programming, and helper functions (with WinJS namespace), which can optionally be used in Windows 8 applications to support more XAML-like abstracted development for Windows 8 applications using HTML5/JavaScript. The WinJS library is available only for JavaScript-based Windows 8 applications, and it's available as WinJS global object to the applications.

Windows JavaScript Library

WinJS is a library of objects structured under the WinJS namespace enabling object-oriented and advanced programming, including supporting the asynchronous communication, access to the local storage, and capability to define your own classes and namespaces for Windows 8 applications. We will be leveraging some of the key features of the WinJS in the next chapter to implement the FinanceHub Windows 8 application using HTML5/JavaScript, following the MVVM design pattern.

The following provides a high-level overview of namespaces available as part of Windows JavaScript Library:

• WinJS namespace – is a root namespace for Windows JavaScript library and also provides the Promise object and abstraction to manage asynchronous communication and the xhr function that would wrap calls to XMLHttpRequest in a promise object.
• WinJS.Application – supports application-level features such as storage, application, events management, etc.
• WinJS.Binding – provides data and template binding, including capabilities for the declarative binding using data-win-bind attribute, which will be useful to develop applications supporting MVVM design pattern.
• WinJS.Class – provides helper functions to define classes.
• WinJS.Namespace – provides helper functions to define namespaces.
• WinJS.Navigation – helps to build basic navigation.
• WinJS.Resources – enables resources management to implement globalization and localization features.
• WinJS.UI – provides a set of advanced user controls, such as AppBar, Menu, SemanticZoom, ListView, Flyout, etc. Please note that while you add a UI control from the WinJS.UI namespace, you will use the div tag in HTML5 and not the direct element name, and you use the data-win-control attribute to define the required control. The statement - <div data-win-control="WinJS.UI.ListView > </div> will add the WinJS ListView control.
• WinJS.UI.Animation – supports implementation of Windows animation using custom controls.
• WinJS.UI.Fragments – helps to load HTML content programmatically.
• WinJS . UI.Pages – supports definition and displaying of PageControl objects to implement navigation within your application.
• WinJS.Utilities – provides helper functions, such as add and remove CSS classes.
• Win JS Library Control Attributes – provides a set of attributes, such as data-win-control to specify the type of control and data-win-bind attribute to bind a property of an element to a property of data source, to configure Win JS UI controls within HTML markup.
• Win JS Library Style Sheets – provides two default styles sheets to provide HTML5/JavaScript based application to Windows 8 theme. Use the ui-dark.css stylesheet for defining dark background and light foreground and ui-light.css stylesheet for defining light background and dark foreground.

You need to add one of the following stylesheets referent to your HTML markup to provide Windows 8 theme of your choice.

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
Or

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

Best Practices in JavaScript Development

Believe it or not, JavaScript does follow an object-oriented programming language. It’s an interpreted prototype-based programming language. In JavaScript, you define object by creating a constructor function rather than defining a class.

The following sections of this chapter would describe some of the best practices in JavaScript development that we will be following in our next chapter to develop HTML5/JavaScript-based Windows 8 FinanceHub application following MVVM design pattern.

WinJS.Namespace.define
    ("ViewModel",
    {
        //other members for the ViewModel object . . .
    });

WinJS.Namespace.define
    ("ViewModel",
    {
        MyViewModel: WinJS.Class.define(
            function () {
                var self = this;
                self.Title = "";
  .... 
  .... 
 //Some local function
                this.changeTitle = function () {
                self.Title = "Hi";
  .... 

(
    function () {
    . . .
   
    }
)() ;

function () {
    "use strict";
       
    WinJS.Namespace.define("ViewModel", {
        MyViewModel: WinJS.Class.define(
            function () {
                var self = this;
                self.Title = "";
 . . .

var vm = new MyViewModel();
vm.Title = "Hi";

function () {
    "use strict";

    WinJS.Namespace.define("ViewModel", {
        MyViewModel: WinJS.Class.define(
            function (
title ) {
                var self = this;
                self.Title = title;
 . . .

var vm = new MyViewModel("Hi");

The Knockout JavaScript Framework

There are a few third-party JavaScript frameworks, such as Knockout, Kendo MVVM and Knockback, which provide JavaScript library enabling of easier implementation of HTML5 and JavaScript-based applications following MVVM pattern.

In this book we will specifically leverage the Knockout JavaScript framework, which provides a JavaScript library that simplifies the implementation of dynamic JavaScript UIs by applying MVVM pattern.

• Supports implementation of declarative bindings
• Enables automatic UI-refresh implementation when there is a change in the state of applications data model
• Implements dependency tracking by implicitly setting up chains of relationships between model data, to transform and combine it
• Empowers you to generate template-based user interface, aligned with the model data

We will be leveraging the Knockout JavaScript framework while implementing Add and Remove stocks views in the next chapter.

Summary

This was an introductory chapter providing you a quick overview of HTML5, JavaScript, and best practices to develop JavaScript program. We also looked at Microsoft Windows 8development platform and development tools support to develop Windows 8 store applications using HTML5 and JavaScript. Microsoft Windows 8 Runtime not only supports the development of Windows 8 applications using HTML5 and JavaScript in a language-agnostic environment using Microsoft Visual Studio 2012 but also provides a dedicated JavaScript library (WinJS) to develop advanced JavaScript-based Windows 8 store applications.

The next and final chapter of this book will create an HTML5 and JavaScript-based Windows 8 FinanceHub application using one of the Windows 8 JavaScript templates available in Visual Studio 2012 and then implementing View, ViewModel, and Models of the FinanceHub applications, following MVVM design pattern. During this implementation we will also leverage the Knockout JavaScript third-party framework.