Metro Style Applications

Metro Style Applications

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

As suggested by Microsoft, a Metro app can be built using a combination of various languages such as 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 that 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 into the design of the API(s) for Metro Style Apps, that 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 the language.

Open Visual Studio 2012. Create a new project by selecting the "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 depending on the requirements.

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 a few folders and files:

• A manifest file that will contain the information regarding your application like application name, title and information about all the pages that exist in your application.
• Some log images, one of which is "storelogo.png"; this image is the one that 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 be 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 in 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 an anonymous function that will fire automatically on running the app; the "strict" keyword is used here, so as to do the error checking in the code.

Now there are two variables declared

var app = WinJS.Application;

var activation = Windows.ApplicationModel.Activation;
 

The first one is "app" for storing the application, in other words the Windows JS application object. The next one is the "activation" that 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 that is fired every time the application is activatred, whether it is launched or resumed. And here you can see we can check for a specific application state and do the coding as needed.

Next is the "appcheckpoint", that is fired whenever the application is to be suspended, for anything that 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 the application "onactivated" event. The "addEventListener" takes three arguments, the first one is the event type, the 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 this article provide a little help of how to create a simple HTML/JavaScript Metro App. (A sample app is attached, as I explained above.) You can try much more at your end.