Windows 8 Apps with Javascript und HTML

written by devangelist on December 10, 2012 in Common with no comments

Okay, in the past few months there have been many discussions about App-development in Windows8. Now it’s here and you can do it with Javascript and HTML. What a beautiful world for every web developer. But what’s behind Microsofts new technology? This post series will try to have a closer look behind the scenes – how far the web world could be brought to the desktop.

Getting started

Right after the install of Visual Studio 2012, the new project templates can be found in in the Javascript section.

This tutorial describes the basic functionality and is based on a “Blank App”.
There are also some news in the solution explorer:

  • package.appxmanifest: This file describes the Application (name, description, logos)
  • logo.png/smalllogo.png: Used to show the app in windows.
  • storelogo.png: The logo for the windows store.
  • splashscreen.png: Used as splashscreen.
  • Default.html/js/css: Default files.

In the startpage default.html and whitin the <body> all the known HTML-elements from the web can be used.
More interesting is the default.js, which in first line is used to manage the lifecycle of the app.
A short look on that will show us, that all the code is wrapped in an anonymous function. Many web-developers already know this trick, specially used to avoid name conflicts. The use strict, as it says, improves the error checking.

(function () {
    "use strict";
    // ...
})();

A first possible step could be, to register a button with an eventhandler. This can be done easily within the onactivaed function. The following piece of code is provided by the template in Visual Studio:

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());
    }
};

The way of starting the application, means by a direct click on the app logo or by a file associated with the app is managed in this function.
The call of WinJS.UI.processAll() is wrapped in the setPromise function, which makes sure that the splashscreen will be shown until the page is loaded.
After that the eventhandler can be registered:

var button = document.getElementById("myButton");
button.addEventListener("click", function (eventInfo) { /* ... */ }, false);

Also here, the well-known functions like document.getElementById("<id>") can be used.

Style

The Dark-Theme included in the header is also available as a light-version:

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

If you want to create your own style, it’s better to override the default one with a custom style than not importing it. For example when your app is running in high-contrast mode, all the changes on colors will be overriden by a high-contrast color-scheme.

Also interesting are the CSS3 Media Queries, which are used depending on the view used.

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}

Javascript-Controls

Beside the default HTML-elements, there are some new controls in the Windows library for Javascript. These controls are created by setting the data-win-control attribute.

<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">

Of course there should be some interaction with it, for example on changing the score – the change-event should be called. This is just a little bit more complicated than on normal HTML-elements, because the call of WinJS.UI.processAll must be completed to use the win-controls.

args.setPromise(WinJS.UI.processAll().then(function completed() {

    var ratingControlDiv = document.getElementById("ratingControlDiv");
    var ratingControl = ratingControlDiv.winControl;

    ratingControl.addEventListener("change", ratingChanged, false);

}));
// ...
function ratingChanged(eventInfo) {
    // eventInfo.detail.tentativeRating
}

It’s obvious in which direction the development will go. With this way, Microsoft tries to involve a critical mass of developers which are using Javacsript and HTML (nearly every developer knows some basic skills). Also the gap between web and desktop should finally closed.

Windows 8 Apps with Javascript und HTML: 1 Star2 Stars3 Stars4 Stars5 Stars 5.00 out of 5, 1 votes.
Loading ... Loading ...

About the Author

Roberto Bez is a passionate Webdeveloper and TechLead at HolidayCheck. For Roberto development is not only work or a job, but a great motivation and a new challange every day. Everything new and geeky, from new web-technologies to all kind of databases – he tries to introduce it in the daily development.