14 Days Free Technical Video Training from WintellectNOW

  

Get started with Windows 8 Metro style app development using JavaScript and HTML5

Tags: Metro, JavaScript, HTML5, WinJS, Windows 8

Metro style Apps are enticing to all types of software developers. Web, Desktop, and Phone/Device developers share  common tools in Visual Studio, and common components and libraries within the Windows Runtime (WinRT). If you are just getting started with Windows 8 Metro style app development, but are an experienced web developer, your skills are highly portable, and the learning curve is more akin to a small bump. While you won’t be able to click a button and magically port an ASP.NET application over to a Metro style app (that simply doesn’t happen), you still use the vast majority of your current web development skills, as well as adding new skills.

To get started writing Metro style apps for Windows 8, you need the following:

Optionally, but highly recommended tools: Samples, Related design assets (icons, etc.), the Live SDK, and the Advertising SDK for Windows 8, all available here. Once downloaded, you’ll want to familiarize yourself with Windows 8 and the principles behind Metro style app development and what makes a great Metro style app before proceeding to Visual Studio.

The Windows API and The Windows Library for JavaScript

The Windows Runtime is at the core of Metro style app development with JavaScript, C#, VB, or C++. WinRT is a new set of APIs for building Windows 8 Metro style apps in any of the previously cited languages. Since you access the APIs through whatever language you choose, you don’t abandon your current skills, instead, you add to them. 

The yellow and purple areas in the image below highlight the native development choices that exist for Windows 8 Metro style apps. WinRT (blue sections of image below) exposes these core APIs to all languages on the Microsoft stack, as well as ECMAScript 5 compliant JavaScript and HTML5.  

  image_thumb3

The specific framework of interest to web developers is the Windows Library for JavaScript, or WinJS. The WinJS libraries expose the following features to JavaScript/HTML developers:

  • A set of rich, data bound, HTML controls
  • Customizable Metro style CSS for dark and light themes
  • Namespaces and code organization 
  • Access to hardware APIs / Touch, Mouse, and Keyboard
  • Familiar tools such as Visual Studio
  • Integrates seamlessly with several, APIs, Bing Maps, Live services, etc.

Since the tool for developers writing apps with the Windows Runtime is Visual Studio 11, a great way to get started is by dissecting one of its default project templates.

Examine the JavaScript Split Project Template

The new JavaScript Split Project template shows the relation between WinJS and WinRT from the developer’s perspective when you are working in the tool - Visual Studio 11. The New Project dialog box in Visual Studio allows you to create the following project types:

  • Blank
  • Grid
  • Split
  • Fixed
  • Navigation

The Grid and Split project templates are the best bang for your buck, as these app templates contain the app infrastructure that performs many of the required tasks and features necessary in proper Metro style app. Since the app infrastructure code is mostly done for you, you can focus on your app requirements, business logic, and app features. 

SNAGHTML109f7e_thumb2

After creating a new project, investigate the the References node of the project exposes the Microsoft Windows Library for JavaScript SDK core files that help run your Metro style app. The files are located in the  \References\Microsoft Windows Library for JavaScript SDK\* folders in Solution Explorer, as illustrated below. These are read only files, not meant for modification. 

image_thumb5

The other files in the project are editable files that are part of the Split project template. You can modify these files to create your own Metro style app.

image_thumb2

The Split project template has enough code and resources to for a working prototype of an app. Launching the app in VS using F5/Ctrl + F5 (start debugging/start without debugging) will cause the app to run in full-screen, immersive, mode, by default, and therefore you can not debug it. In order to use the Visual Studio 11 debugger, change the Debug configuration to run the Microsoft Windows Simulator.

image_thumb4

The simulator hosts your app so you can switch between VS 11 and the simulator for debugging tasks, or to simulate features, that might not be available on on device vs. another, e.g., an accelerometer or mimicking touch, therefore reducing the need for multiple, physical, test devices.

Once running, the app’s start page looks something like the screen shot below, with the tiles representing a grouped or categorized view of the data from the data.js file (By default the file is filled with JSON arrays of filler/sample data).

screenshot1_thumb4

Tapping or clicking on any of the tiles will take you to another page that shows related data for that group, pictured below. Selecting any item in the left side list displays its details on the right, all from the splitPage.html file.

screenshot2_thumb4

When developing Metro style apps, sticking to the default template makes it very easy to adhere to the Metro style guidelines.

Dig into the HTML, JavaScript, and CSS in the Split template

Web developers will feel right at home developing Metro style apps with WinJS, as much of the code is indistinguishable from what you would already put in an any HTML page or JavaScript file. Below is the app’s start page, default.html, from the Split template (note: this is the same HTML as in the Grid template’s default.html).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sample</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>

    <!-- Sample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Sample.PageControlNavigator" data-win-options="{home: '/html/itemsPage.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
    </div> -->
</body>
</html>

The notable markup is the data-win-control and data-win-options attributes. The data-win-control attribute maps to a PageControlNavigator control’s code in the navigator.js file, while the data-win-options attribute defines the home page, itemsPage.html as its page control with the content. This also means that default.html is just a container, conceptually similar to a master page in ASP.NET Web Forms or a Layout Page in ASP.NET MVC. Data- attributes are a new standard introduced in HTML5.

The JavaScript contained in the WinJS library, as well as the JavaScript you write, is ECMAScript 5 compliant. This means it’s the same, familiar, client side JavaScript you already know with the addition of some great features. You can also use some popular external libraries such as jQuery, or EaselJs for HTML5 canvas apps and games.  

Below is the default.js that runs when the app starts (see under <!—WinJS references—> in the previous code snip), as well as skeletal code for app initialization, activation, suspension, etc… The WinJS.Application object is a WinJS library object that allows you to hook into the application lifecycle events, such as suspend and resume – something important for immersive, full screen, apps.

// For an introduction to the Split template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=232447
(function () {
    "use strict";

    var app = WinJS.Application;

    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            WinJS.UI.processAll();
        }
    };

    app.oncheckpoint = function (eventObject) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // eventObject.setPromise().
    };

    app.start();
})();

Notice the use of JavaScript strict mode, an ECMAScript 5 standard that helps avoid making common JavaScript programming errors such as global namespace pollution, variable name declaration, error when using eval(), etc., by running in a restricted mode. 

The default CSS in the project template contains basic styling that adheres to the Metro style, including some –ms-* prefixes for grid alignments (-ms-grid-columns, –ms-grid-rows). Default, Metro style, CSS, uses the Grid System, so units such as 1fr (fraction) are common in the .css files.

Additionally, the .css files contain CSS 3 Media Queries for displaying the app in snapped view or portrait mode, along with CSS for accessibility, all important aspect of Metro style apps.

App Manifest & Project properties

The final piece of the puzzle that needs to be complete when creating a Metro style app is customizing the App Manifest. The app manifest is an XML file that specifies the necessary information about your app to the Windows Store and the WinRT as needed. Double click the package.appmanifest file to open the manifest editor.

SNAGHTML268c49_thumb3

Edit the following in the app manifest:

  • App UI & general info: App name, description, tile icons, screen orientations, and splash screen
  • Specify your app’s capabilities such as use of the hardware camera, removable storage, user data, etc.
  • Declare your app’s usage scenarios such as using File pickers, background tasks, etc.
  • Other settings (on packaging and content)

Once you have properly configured your app, you can use the Store menu (in VS 11 express) or Project->Store (in VS 11 Ultimate) to package your app for The Windows Store.

Summary & Resources

The default project templates contained within Visual Studio 11 you an easy way to do Metro style app development. If you are a developer looking to put your Metro style app in the Windows Store (where all app authors want their app to be)  adhering to the guidelines for store entry is important, and using the templates as a guide is the perfect way to do so.

All things Windows 8 Metro style, get started here

Windows 8 Metro style app development with JavaScript

What Makes a great Metro style app

The Windows Store

[1] Windows 8 Consumer Preview is the current version at the tine of this post, in May 2012

2 Comments

  • Jeremy Foster said

    Good article, Rachel. I'm with Microsoft working out of Seattle on Windows 8. Very exciting stuff. I just wrote an article that your readers might like that is complimentary to this one. It's called Building Up to Blank where I recreate the Blank Application template from scratch for understanding's sake. It's at http://www.codefoster.com/post/2012/05/22/Windows-8-Building-Up-to-Blank.aspx

Comments have been disabled for this content.