Entwicklung von UWP-Apps mit HTML, CSS und Javascript unter Windows 10.

Wir sind es gewohnt ganz vorne mit dabei zu sein, weshalb wir nach dem Release von Windows 10 unsere Windows 8 App «Zeiterfassung» gleich auf den neusten Stand bringen wollten. Die Zeiterfassung wird von unseren Leuten mehrmals täglich benutzt um geleistete Arbeits-Stunden einzutragen.  Auf deren Basis werden nachher die Rechnungen gestellt. Windows 10 bietet viele neue Steuerelemente, weshalb wir die Aktualisierung auch als Chance sahen um das GUI der App zu optimieren.

Zeiterfassung

Die Umsetzung erfolgte mit HTML, CSS  und WinJS einer JavaScript-Bibliothek die von Microsoft entwickelt wird und Open-Source ist. WinJS ist eine Alternative zu XAML und VB.NET/ C# mit dem Ziel schnell und einfach Apps für Windows-Plattformen zu entwickeln. WinJS bietet von Haus aus charakteristische Steuerelemente von Windows 8 / 10 an. Mittlerweile funktioniert die Bibliothek aber auch in einem normalen Internet-Browser.

Der Vorteil an der Entwicklung mit JavaScript ist die Möglichkeit weitere Bibliotheken wie «jQuery» einzubinden und mittels CSS flexible Designs zu gestalten.

Die Entwicklung mit WinJS kann teilweise herausfordernd sein, da die Dokumentation zum grössten Teil noch auf dem Stand von Windows 8 ist. Manche Funktionen und Methoden sind obsolet, allerdings nicht als solche gekennzeichnet worden.
Manche Steuerelemente sind designtechnisch noch nicht aktualisiert worden und erinnern noch an Windows 8.Das ist aber kein Problem: Mit HTML, CSS und JavaScript können die Elemente einfach nachgebaut werden.

Zwei grundlegende Erneuerungen mit Windows 10 möchte ich euch gerne vorstellen:
 

Hintergrundfarbe der Titelleiste ändern
Zurückbutton anzeigen

Apps werden neu unter Windows 10 nicht mehr im Vollbildmodus gestartet. Dies bedeutet, dass die App wie normale Windows-Anwendungen über eine Titelleiste verfügt. Die Titelleiste kann jedoch nicht mittels CSS gestaltet werden, da sie nicht zum HTML-Teil der App gehört. Will man also beispielsweise die Hintergrundfarbe ändern oder einen Button ausblenden, muss dies über WinJS programmiert werden.

Titelleiste

Über das Objekt «titlebar» der «ApplicationView»-Klasse ist es möglich die einzelnen Elemente der Titelleiste mit einer anderen Farbe zu versehen.

var titleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;

titleBar.backgroundColor = { a: 1, r: 19, g: 89, b: 149 };
titleBar.foregroundColor = { a: 1, r: 255, g: 255, b: 255 };
titleBar.buttonBackgroundColor = { a: 1, r: 19, g: 89, b: 149 };
titleBar.buttonForegroundColor = { a: 1, r: 255, g: 255, b: 255 };
titleBar.inactiveBackgroundColor = { a: 1, r: 19, g: 89, b: 149 };
titleBar.inactiveForegroundColor = { a: 1, r: 255, g: 255, b: 255 };

Der Zurückbutton in einer WinJS-App ist standardmässig inaktiv, kann aber einfach aktiviert werden.

var window = Windows.UI.Core.SystemNavigationManager.getForCurrentView();   
window.appViewBackButtonVisibility = 0; // 0 = anzeigen, 1 = ausblenden 
window.addEventListener("backrequested", onBackRequested);

 

Navigieren zwischen PageControls

Mit Windows 8 Apps war es möglich über normale HTML-Links oder PageControls zu navigieren.

<a href="/edit/edit.html?firstname=Max&surname=Mustermann">Bearbeiten</a>

Die PageControls unter Windows 10 funktionieren nicht mehr, da das benötigte Navigation-App-Template aus dem Visual Studio 2013 im Visual Studio 2015 nicht mehr vorhanden ist. Damit man aber die neuen Steuerelemente verwenden kann, muss zwingend das Visual Studio 2015 gebraucht werden.

Um also trotzdem zwischen PageControls zu navigieren, muss ein neues App-Projekt im Visual Studio 2013 mit dem Navigation-Template erstellt werden. Danach kann die WinJS-Klasse «Navigator.js», welche sich im Template befindet, in das aktuelle Projekt im Visual Studio 2015 kopiert und eingebunden werden.

Das Navigieren selber erfolgt dann über folgende Befehle.

WinJS.Navigation.navigate("/edit/edit.html", {firstname: "Max", surname: "Mustermann"});
WinJS.Navigation.back();

Die angesteuerte Seite muss zu guter Letzt als PageControl definiert werden.

(function () {

    "use strict";

    WinJS.UI.Pages.define("/edit/edit.html", {

        ready: function (element, options) {

        },
        unload: function () {

        },
        updateLayout: function (element) {

        }

    });
})();

Windows 10 bietet im Vergleich zu seinem Vorgänger viele neue Features, wie das Starten im Fenstermodus. Damit können zum Beispiel Fenster ab- und angedockt werden. Bei uns in der Zeiterfassung gehörte das zu den elementaren Anforderungen: 1 Fenster mit der Übersicht sämtlicher Zeiteinträge, das andere Fenster um einen neuen Zeiteintrag zu schreiben.

Zeiterfassung abgedockt

Die Apps unter Windows 10 sind sogenannte UWP (Universal Windows Platform) Apps und müssen nur einmal programmiert werden. Danach laufen sie auf allen Windows-Plattformen. Es ist also nicht mehr nötig für Mobiltelefone, Tablets und Computer separate Versionen zu entwickeln. Die Oberfläche kann sehr leicht bei gleicher Programmlogik an unterschiedliche Displaygrössen angepasst werden. Die Position von Steuerelementen können relativ zu einander festgelegt werden, sodass die Oberfläche auf verschiedenen Geräten einheitlich aussieht. So kann also viel Entwicklungszeit gespart werden.

Die Apps sind auch schneller geworden, da Steuerelemente nun Schrittweise geladen werden. Auch werden die Apps nicht mehr zur Laufzeit kompiliert, sondern vor der Ausführung. Dies hat den Vorteil, dass der Code zur Laufzeit wesentlich schneller ausgeführt wird, da er nicht mehr übersetzt werden muss.

Dank den Verbesserungen, die die neuen Windows Apps mit sich bringen, kann ich ein Update auf jeden Fall empfehlen. Habt ihr auch Erfahrung mit der App-Entwicklung unter Windows 10? Bin gespannt auf eure Inputs!

Über Marc Dömer

Arbeitet als Webentwickler. In der Freizeit lässt er sich gerne vom Fc Aarau das Herz brechen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


The reCAPTCHA verification period has expired. Please reload the page.