Getting Started With Metro JavaScript
Written by Ian Elliot   
Wednesday, 11 April 2012
Article Index
Getting Started With Metro JavaScript
Hello World
Private Variables

Windows 8 brings JavaScript into the mainstream of development languages. You can now use HTML5 and JavaScript to create Metro applications. However, even if you already know JavaScript and HTML5, you might find the additions and the development style of Metro JavaScript a little different. In this first chapter of our new ebook we take a look at getting started with Metro JavaScript development.

    Creating JavaScript/HTML5 Metro Applications
    Chapter List


    The big new feature in Windows 8 is the ability to create full applications using nothing but HTML and JavaScript.

    The big advantage of being able to do this is that you can bring your web expertise to Windows and take your Windows apps to the web. In practice, it isn't quite as easy as you might expect. A Windows 8 JavaScript app isn't simply a web page. You can treat it as one if you really want to, but this would be to miss out on all of the new features that Microsoft has added. 

    This chapter shows you how to get started with HTML and JavaScript-based applications. It goes out of its way to make sure that you fully understand some of the more subtle features and it is aimed at existing JavaScript programmers and C# programmers who want to migrate.

    Working with a Metro JavaScript app can feel a lot like working with any JavaScript app. If you want to restrict yourself to mostly standard HTML and standard JavaScript facilities, you can. However, if you want to make something that uses the Windows platform in more interesting ways you are going to have to find out about the specific JavaScript libraries in WinJS and the HTML constructs that Microsoft have added to the game. There are new controls and JavaScript library features that add unfamiliar things such as data banding. What Microsoft have done is to add the features that you will find in C# and C++ to JavaScript.

    What is surprising is that these additions have been made in completely standard ways. It is worth understanding how they work so that you too can add and extend the framework in the same way.

    To follow any of the examples in this article you will need the Windows 8 installed either on a spare machine or a virtual machine; Windows 8 installs easily on the latest Virtual Box and VMWare player and works well.

    A first app

    To get started, simply start Visual Studio Express 11 running and start a new JavaScript, Windows Metro style, Blank Application - you might as well call it HelloWorld.




    The project that is created for you has a number of files, HTML, CSS and JavaScript and you can work out exactly what they all do as you become increasingly familiar with WinRT. For the moment there are only two that really matter:




    The default.html file is where you place the HTML that determines the user interface:

    <!DOCTYPE html>
    <meta charset="utf-8">

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css"
    <script src="//Microsoft.WinJS.0.6/js/base.js">
    <script src="//Microsoft.WinJS.0.6/js/ui.js">

    <!-- HelloWorld references -->
    <link href="/css/default.css"
    <script src="/js/default.js"></script>
    <p>Content goes here</p>

    You can see that it loads a set of styles and scripts that are general to WinRT JavaScript apps and two that are specific to the HelloWorld app - the default.css file and the default.js file.

    As you might expect any tags that you want to use to build the UI go between the <body></body> tags.

    The default.js file is almost as simple but it has one or two features that might confuse you if you aren't familiar with them. Below is an version of the code edited to make its structure clear:

    (function () {
    "use strict";
    var app = WinJS.Application;
    app.onactivated = function (eventObject) {
    //function to handle reactivation
    //of the app

    app.oncheckpoint = function (eventObject) {
    //function to handle suspension of app


    As this file is loaded, by default, as the last item in the head of the page it starts to run immediately and before the rest of the page is loaded. It consists of a single function which is executed immediately. If you are not used to this idiom then you will find this a strange idea but it is a very useful technique.


    Last Updated ( Wednesday, 29 August 2012 )