Metro Style Apps

Metro Style applications are the full screen applications designed to incorporate user needs, are platform independent, enable touch interaction(s) with the users, supports multi-tasking, support different languages and locales and can be uploaded to Windows Application store for downloads.

As suggested by Microsoft, a Metro app can be built in various languages like by using HTML, CSS and JavaScript, or by using XAML with C# (New Metro API(s) are provided by Microsoft). But these are just the languages in which one can create the Metro Apps, Metro actually is new API(s) provided by Microsoft which is the subset of the .Net Framework API(s) (Very much Similar to what Microsoft has done for Silverlight or Windows Phone) with User Interface designing.

Microsoft has put a lot of thought work for choosing the API(s) for Metro Style Apps, which also provides the ability to easily migrate an application into Metro Application.

Here is the example for how to create a Metro Style App using HTML + CSS + JavaScript as Language

Open Visual Studio 2012; create a new Project by selecting JavaScript as Application or Project template type. In this for a simple app I have selected Blank App as the template shown in the screenshot below, one can select in according to the requirement.

As soon as you are done with it, you will be asked for the Windows 8 Developer Licence if you don’t have it already, so go ahead and download it.

Now you will see with the blank template, it automatically created few folder and files:

• A manifest file which will contain the information regarding your application like Application name, title and information about all the pages which exist in your application.
• Some log images, one of which is “storelogo.png”, this image is the one which becomes the logo for your application on Windows Store.
• Some CSS and JavaScript files along with a default.html page.

On launching the application the default page will get opened in the full screen mode. So now you are ready to make any changes on your page and include the new pages.

On opening the default.js file you will see some code already written into it, although it is self-explanatory, let’s see what it does:

// For an introduction to the Blank template, see the following documentation:

// http://go.microsoft.com/fwlink/?LinkId=232509

(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) {

                // TODO: This application has been newly launched. Initialize

                // your application here.

            } else {

                // TODO: This application has been reactivated from suspension.

                // Restore application state here.

            }

            args.setPromise(WinJS.UI.processAll());

        }

    };

    app.oncheckpoint = function (args) {

        // 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

        // args.setPromise().

    };

    app.start();

})();

All the code is written in anonymous function which will fire automatically on running the app; “strict” keyword is used here, so as to do the error checking into the code written.

Now there are two variables declared:

var app = WinJS.Application;

var activation = Windows.ApplicationModel.Activation;

First one is “app” for storing the application i.e. Windows JS application object, next one is the “activation” which will contain the activation state of the application like if the application is a new launch or resumed from the state of suspension.

Next comes an event “onactivated”, this is the event which is fired every time on activation of the application whether it is launch or resume. And here you can see we can make check specific to the application state and do the coding as per the requirement.

Next is the “appcheckpoint”, which is fired whenever the application is going to be suspended, anything which is required to be done before suspension comes here.

Adding Simple Button and handle click event:

HTML:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>SampleApplication</title>

    <!-- WinJS references -->

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

    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- SampleApplication references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

</head>

<body>

    <div>

        Hi Abhishek Jain

       <br />

        <input type="button" id="btnTestJavascriptEvent" value="Click Here to Test Javascript Event" />

        <br />

        Message from Javascript:

        <label id="lblMessage"></label>

    </div>

</body>

</html>

JavaScript:

app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {

            if (args.detail.previousExecutionState !== 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.

            }

            args.setPromise(WinJS.UI.processAll());

        }

        var testButton = document.getElementById('btnTestJavascriptEvent');

        testButton.addEventListener('click', TestButtonClick, false);

    };

    function TestButtonClick(e)

    {

        var messageLabel = document.getElementById('lblMessage');

        messageLabel.innerHTML = 'Message from Javascript Event...';

    }

Here I have created a method click handler for the button, and registered that handler to the button on application “onactivated” event. The “addEventListener” takes three arguments, first one is event type, second is the event handler and last is a Boolean value specifying if the event needs to be bubbled or not, “false” means allow event for bubbling.

Running App Screenshot:

May it provide a little help of how to create a simple HTML/JavaScript Metro App (For Downloading the Sample App, same I explained above, Refer: Sample Application); you can try much more at your end.