Windows 8 Apps mit Javascript und HTML

written by devangelist on November 13, 2012 in Apps and CSS3 and HTML and HTML5 and Javascript and Windows8 with no comments

Es wurde viel über die App-Entwicklung in Windows 8 diskutiert. Nun ist es soweit: Apps mit Javscript und HTML5 entwickeln. Für viele klingt das erstmal nach einer schönen neuen Welt,  viele andere hingegen betrachten es eher skeptisch. Was verbirgt sich hinter Microsofts neuen Möglichkeiten? Diese Post-Reihe beschäftigt sich ausschließlich mit der Entwicklung von Apps auf Basis von Javascript und wird versuchen wie weit man die Web-Welt auf den Desktop bringen kann.

Auf ins Gefecht

Nach der Installation von Visual Studio 2012 stehen die gewünschten Projektvorlagen im Punkt Javascript zur Verfügung.

Dieses Tutorial beschreibt die Grundfunktionalität und besteht somit aus einer “Blank App”.

Im Solution Explorer gibt es einige Neuerungen:

  • package.appxmanifest: Diese Datei beschreibt die Anwendung (Name, Beschreibung, Logos)
  • logo.png/smalllogo.png: Für die Darstellung im Startscreen
  • storelogo.png: Das Logo für den Windows Store
  • splashscreen.png: Wird angezeigt wenn die App startet
  • Default.html/js/css: Standart-Dateien

In der Startseite default.html können im <body> Element wie aus dem Web gewohnt normale HTML-Elemente eingefügt werden.
Interessanter wird es in der default.js, welche in erster Linie für den Lebenszyklus der Anwendung zuständig ist.
Ein kurzer Blick darin zeigt, dass sich jeglicher Inhalt in einer anonymen Funktion befindet. Dieser von vielen Web-Entwicklern bereits bekannter Trick hilft dabei, Namenskonflikte zu vermeiden, das use strict wie der Name schon sagt, der Fehlererkennung.

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

Ein eventueller erster Schritt wird jener sein, einen Button mit einem Eventhandler zu registrieren. Dies kann in der onactivated Funktion geschehen. Folgender Code liegt in der Anwendung vor:

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

Wie der Besucher letztendlich die Anwendung startet, sprich durch direktes anklicken oder durch beispielsweise einen verknüpften Dateityp, wird in dieser Funktion überprüft. Der Aufruf WinJS.UI.processAll() wird in der setPromise Funktion gekapselt, welche das Ausblenden des Startbildschirms bis zum Laden der Seite verhindert.
Nach dem Aufruf dieser Funktion kann der eigene Eventhandler registriert werden:

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

Auch hier gelten die aus der Welt des Webs bekannten Standard-Funktionen wie document.getElementById(“<id>”).

Stylen

Im Header wurde das Dark-Theme eingebunden, welches auch als light-Version mitgeliefert wird:

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

Wenn eigene Styles angewendet werden, sollte trotzdem ein Standart-Theme importiert werden um dieses anschließend zu überschreiben, denn spätesten wenn Funktionen wie der high-contrast-mode benötigt werden, helfen die vorgefertigten Styles unnötigen Code zu schreiben.

Interessant sind die CSS3-Media Angaben, welche je nach verwendeter View verwendet werden.

@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

Neben den normalen HTML-Elementen können vorgefertigte Controls wie ein Kalender, eine ListView oder ein Rating-Control verwendet werden. Angegeben werden diese über das data-win-control Attribut.

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

Soll mit diesem Control nun auch interagiert werden, wie zum Beispiel beim ändern der Wertung ein change-Event aufzurufen ist dies etwas komplizierter als bei normalen HTML-Elementen, denn der Aufruf von WinJS.UI.processAll muss abgeschlossen sein um auf die win-Controls zugreifen zu können.

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
}

Man kann deutlich erkennen in welche Richtung sich die Entwicklung begibt. Microsoft versucht mit dieser Technik viele Web-Entwickler in die Desktop Welt von Microsoft zu locken und dabei die Lücke vom Web zum Desktop zu schließen. Was mit diesen neuen Apps nun alles möglich ist, folgt in den nächsten Einträgen.

Windows 8 Apps mit Javascript und HTML: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,60 von 5 Punkte, 5 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.