Ein erster Blick auf Windows 10

Lange war vor allem über den Namen der neuen Windows-Version spekuliert worden. Und so war der Name Windows 10 wohl eine der größeren Überraschungen der gestrigen Ankündigung von Microsoft, auch weil viele Features bereits vorab durchgesickert waren.

Auf einem recht privaten Presse-Event wurde ein erster Blick auf Windows 10 gewährt. Dabei konzentrierten sich die Redmonder vor allem auf die Features für Business-User, die auf der klassischen Desktop-Oberfläche sichtbar werden, der unter Windows 10 wieder mehr Beachtung erfährt. Hier ein kurzer Überblick…

8664.Windows_Product_Family_930Event741x416_7AD60659

Einige Neuerungen

  • Windowed Apps: Apps lassen sich im Fenster auf dem Desktop ausführen.
  • Startmenü: Das Startmenü ist zurück, wobei es nun noch weiter anpassbar ist und das “alte” Startmenü aus Windows 7 mit dem Startscreen von Windows 8 vereint
  • Virtuelle Desktops: Möglichkeit der Erstellung separater Desktop-Oberflächen, auf denen Anwendungen getrennt voneinander platziert werden können.
  • Snap Assist: Unterstützung von Benutzern beim “Snap” von Apps nebeneinander auf dem Desktop. Wenn eine Anwendung wie in Windows 7 gesnapped wird, werden im dadurch entstehenden “freien Raum” die anderen offenen Anwendungen angezeigt, die diesen Raum füllen können.
  • Task View: Kleiner Helfer in der Taskbar, womit eine Übersicht aller offenen Anwendungen angezeigt werden kann. Möglichkeit zum Switchen des virtuellen Desktops.
  • Command Prompt: Ja wirklich! Microsoft hat die Kommandozeile verbessert, sodass jetzt gängige Tastaturkürzel wie z.B. Strg+C und Strg+V funktionieren. Dass wir das noch erleben dürfen…
  • Continuum: Für 2-in-1 Geräte (Detachables, …) gedacht. Wenn die Tastatur abgenommen wird, aktiviert sich ein “Tablet-Modus”, in dem Apps standardmäßig im Vollbild ausgeführt werden und z.B. auch die Icons auf der Taskbar größer sind. Zudem wird statt dem Startmenü ein angepasster Startscreen angezeigt, wenn der Home-Button gedrückt wird. Wird die Tastatur wieder angedockt, aktiviert sich der “normale” Maus/Tastatur-Modus.
Windows 10 “Continuum” Modus

Fahrplan und weitere Fakten

  • Windows 10 soll im 2. Halbjahr 2015 veröffentlich werden.
  • Davor kommt noch eine Consumer Preview Anfang 2015.
  • Ab heute (01.10.) Abend soll eine erste Preview-Version zur Installation von http://preview.windows.com heruntergeladen werden können.
  • Im April 2015 findet die nächste BUILD-Entwicklerkonferenz statt, auf der auch die “Developer Story” weiter erläutert werden wird.
  • Windows 10 soll es nicht nur für PCs und Tablets geben, sondern auch für Phones (ja, Windows Phone heißt damit bald nur noch “Windows”) und darüber hinaus für kleine Internet-of-Things Devices. Das heißt nicht “eine UI für alle”, sondern eine Produktfamilie mit maßgeschneiderten Funktionen für jeden Gerätetyp.
  • Universelle Programmierplattform mit weiter verbesserten universellen Apps.
  • Vereinheitlicher Store für alle Gerätetypen.
  • Weitere Infos für Business-Benutzer.

 

Wer die Ankündigung in voller Länge (knapp 40min) sehen will, kann dies hier tun:

Windows 10 Ankündigung

Visual Studio Tipp: Paste as JSON/XML

Neulich habe ich eine kleine nette Funktion in Visual Studio 2013 entdeckt.

Aufgabe: Ich habe eine komplexe Datenstruktur in JSON und will diese zur weiteren Verarbeitung in eine C#-Klasse überführen.

Lösung 1 (trivial): Die Klasse händisch anlegen 😛

Lösung 2: Visual Studio 2013 benutzen und in einer C#-Datei unter "Edit -> Paste Special" das JSON automatisch in C# überführen lassen (funktioniert auch für XML!).

PasteAsJson

Fazit: Es sind doch die kleinen Dinge, die immer wieder Freude bereiten 🙂

Visual Studio 2013 Image Library

Bei der Entwicklung von Anwendungen sieht man sich als Entwickler häufig damit konfrontiert, Bilder und Icons zu suchen, die frei verwendbar sind und von Endanwendern der Applikation leicht erkannt werden können.

Die Visual Studio Image Library verrichtet hierbei schon seit vielen Jahren gute Dienste. Meine erste Berührung mit dieser Sammlung von über 5.000 Bildern und Icons stammt z.B. aus dem Jahr 2005. Und auch jetzt ist die Bibliothek in der Ausgabe der Visual Studio Image Library 2013 immernoch topaktuell und bildet eine Quelle gängiger Bilder und Icons für Entwickler.

The Visual Studio Image Library contains application images that appear in Microsoft Visual Studio, Microsoft Windows, the Office system and other Microsoft software.

VS2013_Image_Library

Spannend ist die Neuerung in der Version 2013 der Image Library, dass nun zu den Icons die “Adobe Illustrator” Quelldateien beiliegen, sodass sich alle Icons auch im Vektorformat editieren lassen.

SDX Privatbilanz für Windows 8.1: It’s a Wrap!

Innerhalb der letzten Artikel habe ich die Funktionalität der überarbeiteten Privatbilanz-App für Windows 8.1 gezeigt, die sich zum einen neue Funktionen von Windows 8.1 zunutze macht und in deren Änderungen zum anderen Lerneffekte aus einem Jahr Business-App-Entwicklung unter Windows 8 mit eingeflossen sind. Dieser Artikel gibt noch einmal einen zusammenfassenden Überblick über die zurückliegende Artikelserie.

Die Artikelserie im Überblick

Folgende Beiträge sind in der Artikelserie zur Privatbilanz-App für Windows 8.1 entstanden:

Zusätzlich sei noch einmal auf die zurückliegende Artikelserie verwiesen, welche die Privatbilanz-App für Windows 8 vorgestellt hat.

App-Neuerungen in Windows 8.1

Windows 8.1 bietet einige Neuerungen für Apps unter Windows 8.1, die Entwickler neuer und bestehender Windows Store Apps adaptieren sollten und die in der Privatbilanz-App auch umgesetzt wurden. Dazu gehören die zwei neuen Tile-Größen und die frei verschiebbare Side-by-Side-Ansicht. Gerade die neue Flexibilität der Side-by-Side-Ansicht wertet Apps weiter auf und macht Anwender produktiver, wenn sie mit mehreren Apps parallel arbeiten möchten.

Darüber hinaus werden unter Windows 8.1 App-Szenarien ermöglicht, die so unter Windows 8 nicht möglich waren. Durch den erweiterten Hardwarezugriff über USB und Bluetooth sowie APIs für den Zugriff auf PoS-Systeme, Drucker und Scanner gibt es nun eine größere Fülle an Use Cases, die mit Windows Store Apps abgedeckt werden können. Auch der Kiosk-Modus (“zugewiesener Zugriff”) kann in unbeaufsichtigten Umgebungen interessant sein, da mit ihm der Zugriff auf eine exklusive App begrenzt werden kann.

Business-Apps für Windows 8.1

Apps für Windows 8.1 können mit einer Fülle an Funktionalitäten ausgestattet werden, die sie in Business-Szenarien auszeichnen. Dazu gehören u.a. die vielfältigen Authentifizierungs- und Kryptografie-Verfahren, die direkte Verwendung bestehender Unternehmens-Backends über WCF (entsprechende Bindings vorausgesetzt), Web Services etc. und die Lauffähigkeit und Bedienbarkeit sowohl auf modernen Tablets mit Touch als auch auf klassischen Rechnern mit Tastatur/Maus.

Auch weitere offensichtliche Features von Windows 8.1 Apps tragen zur Produktivität von Business-Nutzern bei: die flexible Side-by-Side-Ansicht, verbesserte Live Tiles und Secondary Tiles, das App-Ökosystem (Öffnen/Speichern von Dokumenten aus/in anderen Apps, Teilen von Daten mit anderen Apps, …) usw..

Schließlich ist auch das Thema Investitionsschutz bei der Erstellung von Windows Store Apps ein wichtiger Aspekt. Apps können mit bestehenden professionellen Tools wie Visual Studio, TFS und Blend entwickelt werden, auch bestehende technologische Skills in .NET, C#, XAML, Unit Testing etc. lassen sich direkt verwenden.

Im Endeffekt bieten Apps für Windows 8.1 eine Fülle an Möglichkeiten, die in geeigneten Business-Szenarien zum Einsatz kommen können. Und mit diesen Szenarien steht und fällt auch der Einsatz von Apps. Nicht überall ist eine App das richtige Mittel und häufig sind klassische Web- und Desktop-Anwendungen absolut die richtige Wahl. Doch überall dort, wo Tablet als Formfaktor die optimale Wahl ist (Außendienst, Produktion, …) und überall dort, wo Touch begeistern soll (Kundenberatung), sollte über die Entwicklung von Apps nachgedacht werden. Oftmals sicher nicht als komplette Ablösung bestehender Anwendungslandschaften, aber komplementär als Ergänzung in spezifischen Use Cases. Und in diesen Fällen sind in Unternehmens-Szenarien Geräte mit Windows 8.1 durch ihre vielfältigen Business-Features häufig die bessere Wahl gegenüber iPad und Android.

Windows 8.1 App-Entwicklung: Ein wichtiges Stück Evolution

Windows 8.1 kommt mit einigen Neuerungen für App-Entwickler daher, die teilweise auch dem Endanwender zugute kommen und neue Einsatzszenarien ermöglichen. Doch es gibt auch Dinge, die sich leider nicht geändert haben. Auf einige essentielle Punkte geht der nachfolgende Artikel ein.

Good news

In der Privatbilanz-App wurden bereits 2 wesentliche Neuerungen von Windows 8.1 umgesetzt: Die neuen Größen für Live Tiles sowie die neue flexible Side-by-Side-Ansicht. Diese Features bieten dem Endanwender ein individuelleres Nutzererlebnis und erhöhen die Produktivität durch mehr Flexibilität. Entwickler sollten sie bei der Adaption von Windows 8.1 berücksichtigen.

Neue Anwendungsszenarien vor allem für Windows 8.1 Tablets werden durch den neuen Kiosk-Modus (offiziell “Assigned Access”) eröffnet. Dadurch ist es möglich, die Modern UI auf die Ausführung einer einzigen App zu begrenzen, die stets im Vordergrund läuft und von Benutzern nicht verlassen werden kann. Gerade auf Expos, Messen und in Hotels ein häufig gefordertes Feature. Unter Windows 8.1 ist die Einrichtung des Kiosk-Modus etwas versteckt. In der deutschen Version ist die Funktion unter “PC-Einstellungen –> Konten –> Weitere Konten –> Konto für zugewiesenen Zugriff einrichten” zu finden.

Auch andere Funktionen ermöglichen neue App-Szenarien. So ist es für Apps nun möglich, ad hoc einen VPN-Tunnel in ein Unternehmensnetzwerk zu öffnen. Weiterhin wird endlich ein umfassender Hardwarezugriff unterstützt. Entwickler haben dabei die Möglichkeit, über WinRT verschiedene gängige Schnittstellen wie USB, Bluetooth, 3D-Drucker, Scanner und PoS-Systeme anzusprechen. Gerade individuelle Hardware-Lösungen mit einer App als Auswertungs- und Steuerzentrale profitieren davon. Interessant ist auch die sogenannte Geofencing-Funktion. Diese ermöglicht es einer App Benachrichtigungen an den Benutzer zu senden, wenn dieser einen räumlich begrenzten Bereich betritt bzw. verlässt. Anwendung könnte diese Funktion beispielsweise bei Reiseführern, Restaurant-Guides, für lokale Coupon-/Schnäppchen-Angebote oder bei Erinnerungs-Apps finden.

Für Entwickler bietet die neue Version der WinRT einige Neuerungen. Insgesamt ist die Plattform funktionaler und performanter geworden. Entwickler stehen neue bzw. überarbeitete XAML-Controls zur Verfügung, z.B. Hub, DatePicker/TimePicker, SearchBox, CommandBar, eine stark verbesserte WebView. Endlich werden auch Grundlagen wie Binding Expressions, Behaviors und Update Source Triggers unterstützt, die man aus Silverlight und WPF schon lange kennt. Essentielle Dinge wie Basis-Styles wurden nun in die Plattform integriert, anstatt als separate Dateien in jedem Projekt inkludiert zu sein. Auch die Visual-Studio-Templates für Windows Store Apps machen nun einen aufgeräumteren Eindruck.

Schlussendlich wurde auch das Tooling in Visual Studio 2013 verbessert, wodurch eine effizientere und produktivere App-Entwicklung möglich ist. CodeLens ist beispielsweise ein allgemeines Feature, durch das Informationen zu einer Methode als Hinweis angezeigt werden, z.B. die Versions-Historie oder die Referenzen auf die Methode. Weiterhin gibt es neue Tools für die Analyse von Apps, mit denen die Reaktionsfähigkeit der UI und der Energieverbrauch gemessen werden können. Zudem ist es nun möglich Coded UI Tests für Windows Store Apps anzulegen und damit die UI automatisiert testen zu können.

Bad news

Doch es ist nicht alles Gold was glänzt. Zwar hat Microsoft die Plattform ein gutes Stück weit voran gebracht, dennoch bleibt Grund zur Kritik. So ist einige Basisfunktionalität nicht Bestandteil der Plattform, obwohl man sie dort vermuten würde. Jedes Projekt muss beispielsweise seinen eigenen Satz an Value Convertern für XAML implementieren, auch wenn diese die Grundlage fast jedes Projekts darstellen. Dazu gehören elementare Converter wie ein BooleanToVisibilityConverter oder ein NullToVisibilityConverter. Ebenso beinhalten die Visual-Studio-Templates für Windows Store Apps eine neue Klasse NavigationHelper, welche grundlegende Navigationsfunktionalität beinhaltet. Warum diese kein Bestandteil der Plattform ist, ist nicht nachvollziehbar. Auch zum Aktualisieren von Live Tiles stehen noch immer keine stark typisierten Klassen für die Tile Templates von Haus aus zur Verfügung. Um hierfür XML nicht direkt schreiben zu müssen, existieren Datenstrukturen für die Templates (schwer auffindbar) im App tiles and badges sample, warum ist das aber nicht Bestandteil der Plattform?

Vom Tooling her gibt es zwar etliche Neuerungen, eine gravierende Lücke bleibt aber bestehen: In Windows Store Apps ist es noch immer nicht möglich, eine Code-Coverage-Analyse auszuführen. Zwar ist der entsprechende Menüeintrag in Visual Studio 2013 vorhanden, beim Ausführen erscheint im Ausgabe-Fenster unter “Tests” dann allerdings die Meldung “Code coverage is not available for Windows Store or Windows Phone apps”. Professioneller App-Entwicklung wird mit dem Fehlen dieser Funktion ein großer Stein in den Weg gelegt.

Im Bereich unternehmensrelevanter Features hat sich leider auch an mehreren Stellen nichts getan. In XAML gibt es immernoch keine durchgängige Lösung für die Eingabevalidierung, sodass auf Drittanbieter-Bibliotheken wie WinRT XAML Validation zurückgegriffen werden muss. Auch viele wichtige WCF-Bindings fehlen, z.B. WsHttpBinding oder WsFederationHttpBinding zur Nutzung der WS*-Erweiterungen bzw. der Windows Identity Foundation. Auch gibt es immernoch keine eingebaute Standardlösung für eine lokale Datenbank im App-Speicher. Das sind zwar alles keine definitiven Show Stopper, können je nach Szenario aber sehr sauer aufstoßen und potentielle Unternehmenskunden verschrecken.

Leider hat sich auch im Bereich Enterprise Sideloading -also dem Deployment von Apps außerhalb des Windows Stores- nichts getan. Unternehmen benötigen nach wie vor entweder Windows 8.1 Enterprise oder müssen im 100er-Pack Sideloading-enabled Product Keys (zu je 30$ pro Key) kaufen, wenn sie Windows 8.1 Pro oder Windows RT 8.1 besitzen. Erst dann ist Sideloading möglich. Gerade für kleinere Unternehmen und angepasste Speziallösungen für einen eingegrenzten Kundenstamm ist das ein echtes Problem. Die Konkurrenz von Apple (iOS) und Google (Android) ist hier deutlich restriktionsärmer, was aufgrund des Fokus von Microsoft auf Businesskunden durchaus verwundert und ärgerlich ist.

Fazit

Good news, bad news… Im Fazit stellt Windows 8.1 für App-Entwickler eine wichtige Iteration der Plattform dar, die viele Funktionen nachliefert und an Stabilität gewonnen hat. Es bleibt zu hoffen, dass Microsoft mit der Entwicklung konsequent fortschreitet und vor allem den Fokus auf Unternehmen lenkt, um noch immer schmerzlich vermisste Features zu integrieren.

SDX Privatbilanz für Windows 8.1: Stufenloses Side-by-Side

Ein Feature von Windows 8 war die gleichzeitige Darstellung von 2 Apps, die sogenannte Side-by-Side-Ansicht. Eine App nahm dabei einen fixen 320px-Bereich an der linken oder rechten Bildschirmseite ein (sie befand sich dann im “Snapped State”), während die andere App den restlichen Bereich auffüllte. So interessant diese Funktion auch war, in vielen Fällen wurde sie von Apps nicht genutzt, da diese auf 320px keine relevanten Inhalte darstellen konnten.

Windows 8.1 to the rescue

Windows 8.1 ändert diese Situation maßgeblich. Unter Windows 8.1 gibt es den Snapped State nicht mehr, die Side-by-Side-Ansicht bleibt aber weiterhin erhalten und wird flexibler. Hierbei wurde die Beschränkung der fixen Breite von 320px fallen gelassen und durch die Möglichkeit einer stufenlosen Änderung der Breite einer App ersetzt. Nutzer haben jetzt die Möglichkeit, den Divider zwischen zwei Apps beliebig zu verschieben und die Ansichten so aufzuteilen, wie es ihnen am liebsten ist.

Was wird damit erreicht? Benutzer werden freier in der Bildschirmaufteilung der Apps, da z.B. bei einer 50:50-Teilung des Bildschirms mehr Informationen angezeigt werden können. Zudem lassen sich abhängig von Monitorgröße und Auflösung mehr als 2 Apps nebeneinander darstellen – diese ursprüngliche Begrenzung entfällt also. Auch dass ein Bildschirm für die Side-by-Side-Ansicht mind. 1366px in der Breite besitzen muss, entfällt als technische Beschränkung. Dies ist ein sehr wichtiger Aspekt z.B. für kleinere 7"- und 8"-Tablets. Entwickler haben zudem die Freiheit, zwischen 2 minimalen Breiten zu wählen, bis zu der ihre App verkleinert werden kann: 320px oder 500px. Dadurch müssen sie nicht mehr die schmale 320px-Ansicht unterstützen, wenn ihre App nicht geeignet ist, um in diesem Modus relevante Inhalte darzustellen und vernünftig bedienbar zu sein.

Eine funktionalere Privatbilanz

Auch in der Privatbilanz-App wurde die Side-by-Side-Ansicht an die neue Funktionalität von Windows 8.1 angepasst. Dies lässt sich am besten anhand der Bilanzposten-Detailansicht verdeutlichen. Deren neu gestaltetes horizontales Layout skaliert sehr gut mit unterschiedlichen Breiten der App, was eine Grundvoraussetzung für eine gute Side-by-Side-Darstellung ist.

Abhängig von der Bildschirmbreite wurde die Bilanzposten-Detailansicht so gestaltet, dass sich ihre Inhalte sukzessive an kleinere Breiten anpassen. Im Vollbild sieht die Detailseite wie folgt aus:

PB_Win81_Detailseite_SideBySide_Full

Wird nun z.B. eine URL geöffnet und die App teilt sich den Bildschirmbereich 50:50 mit einer zweiten App (in diesem Fall dem Internet Explorer), so adaptiert sich das Layout leicht: der Titel wird kleiner, auch der Abstand zum linken Bildschirmrand wird geringer:

PB_Win81_SideBySide_Narrow

Verkleinert der Benutzer die App weiter, so wird als nächster Schritt das Bilanzposten-Symbol ausgeblendet, um dem Titel mehr Raum zu geben.

PB_Win81_Detailseite_SideBySide_Narrow2

Im vorletzten Schritt werden die Beschriftungen der Eingabefelder oberhalb von diesen statt links daneben dargestellt, um weniger horizontalen Platz zu vereinnahmen (die Seite ist allerdings noch immer vollständig horizontal bedienbar):

PB_Win81_Detailseite_SideBySide_Narrow3

In der schmalsten Variante der App findet dann schließlich ein Layout-Wechsel statt: Die Inhalte werden nun nicht mehr horizontal, sondern vertikal in einer Liste angezeigt. Dennoch werden alle Inhalte der Seite vollständig dargestellt, die Ansicht ist weiterhin voll bedienbar:

PB_Win81_Detailseite_SideBySide_Narrow4

Selbst die Dokumente werden in der Liste angezeigt und können parallel in einer zweiten App geöffnet werden. Dies zeigt auch wieder das primäre Einsatzszenario der Side-by-Side-Ansicht: Apps bleiben voll bedienbar, auch wenn eine zweite App aus ihnen heraus geöffnet wurde und parallel dargestellt wird. Diese Möglichkeit des Multitaskings erhöht die Produktivität des Anwenders, da er nicht ständig zwischen verschiedenen Apps und damit verschiedenen Kontexten wechseln muss.

PB_Win81_Detailseite_SideBySide_Narrow4_Dokumente

 

Für Entwickler…

Zunächst einmal funktionieren alle Windows 8-Apps auch unter Windows 8.1, sie laufen dort allerdings in einem Kompatibilitätsmodus. Dabei werden sie mit unschönen schwarzen Balken an der Seite dargestellt, wenn sie in der Side-by-Side-Ansicht zwischen 320 und 1024px einnehmen, ihre Inhalte entsprechen dabei dem Snapped State aus Windows 8. Dies wird im folgenden Bild anhand der “Windows Phone”-App dargestellt:

PB_Win81_SideBySide_CompatWin81

Entwickler sollten also tätig werden, um ihre Apps für Windows 8.1 zu optimieren und den Benutzern ein bestmögliches Erlebnis zu liefern. Allerdings sollte beachtet werden, dass der Aufwand zur Unterstützung der Side-by-Side-Ansicht unter Windows 8.1 durchaus höher ist als unter Windows 8. Denn Entwickler können sich jetzt nicht mehr auf eine fixe Breite der App verlassen. Sie müssen damit rechnen, dass der Benutzer die App beliebig in der Breite variiert. Apps sollten entsprechend mit angepassten Layouts reagieren.

Statt nur die View-Zustände “Snapped” und “Full” zu unterstützen, müssen Entwickler evtl. viele verschiedene Zustände definieren, die ihre Apps je nach Bildschirmbreite einnehmen sollen. Dabei ist es von App zu App verschieden, welche und wie viele Zustände notwendig sind und bei welchen Bildschirmbreiten die Zustandswechsel stattfinden sollen. Hier sind noch mehr als zuvor Designer gefragt, die eine gute UX erstellen können und sich dabei auch um diese Layout-Zustände kümmern.

Die Zustände selbst werden in XAML prinzipiell als Visual States abgelegt und können/sollten über Blend for Visual Studio gestaltet werden, Visual Studio selbst erlaubt leider keine visuelle Modifikation von Visual States. Dann sollten Entwickler direkt auf das SizeChanged-Event der View reagieren, das bei einer Änderung der Breite einer App ausgelöst wird. Doch anstatt wie unter Windows 8 mit ApplicationView.Value zu prüfen, in welchem View State (Snapped, Full, …) sich die App befindet, sind Entwickler unter Windows 8.1 angehalten, direkt die App-Breite mit Window.Current.Bounds.Width abzufragen und daraus den für sie passenden Visual State zu ermitteln. Der Übergang in den jeweils gewünschten Visual State erfolgt dann mittels der Methode VisualStateManager.GoToState(). Das Property ApplicationView.Value und die dazugehörige Enumeration ApplicationViewState sind unter Windows 8.1 als “deprecated” (veraltet) gekennzeichnet und sollten nicht mehr verwendet werden.

Am Schluss sei noch erwähnt, dass die minimale Breite der App (320px oder 500px) im App-Manifest eingetragen werden kann. Entwickler sollten sich nicht scheuen, von der neuen Möglichkeit mit den 500px minimaler Breite Gebrauch zu machen, wenn für ihr Szenario 320px keinen Sinn ergeben.

SDX Privatbilanz für Windows 8.1: Eine neue Bilanzposten-Detailansicht

1 Jahr mit Windows 8 und der Privatbilanz-App sowie mehrere Workshops haben zu Lerneffekten geführt, was vor allem das UI-Design von Windows Store Apps anbelangt. Dieser Artikel zeigt, wie sich diese Lerneffekte auf eine Neugestaltung der Detailansicht eines Bilanzpostens in der SDX Privatbilanz ausgewirkt haben. Auch diese Änderung ist unabhängig von den Neuerungen in Windows 8.1. Sie war allerdings längst überfällig, um eine optimale Benutzbarkeit zu gewährleisten.

Suboptimale 3 Spalten

In der ersten Version der Privatbilanz-App war die Bilanzposten-Detailansicht in 3 vertikale Spalten unterteilt. Die linke Spalte stellte die Bilanzposten der gleichen Kategorie dar und erlaubte einen Wechsel zwischen diesen, die mittlere Spalte beinhaltete die Eingabefelder zu dem Bilanzposten und die rechte Spalte stellte zusätzliche Informationen dar (berechnete Werte und eine Verwaltung von Dokumenten für den Bilanzposten):

PB_Detailseite_Alt

Dieser Ansatz hatte mehrere entscheidende Nachteile:

  • Die 3 Spalten verwirren den Nutzer. Sie sind per Scrollbalken unabhängig voneinander zu bedienen, wobei die 3 Scrollbereiche gerade bei Touchbedienung zunächst nicht erkennbar sind. Mit Touch muss zudem immer die Handposition gewechselt werden, um z.B. den mittleren Bereich scrollen zu können. Eine einfache Bedienung mit den Daumen ist nicht möglich. Microsoft definiert eine solche vertikale Spalte zwar in seinen Guidelines für Form-Layouts, im vorliegenden Fall war das aber nicht optimal.
  • Die vertikal scrollenden Bereiche sind nicht “edge to edge”, d.h. sie nehmen nur einen Teil der Höhe der Seite ein. Das Benutzererlebnis wird dadurch geschmälert.
  • Die Ansicht skaliert nicht gut auf großen hochauflösenden Monitoren. Denn die Breite der Seite ist fix. Das führt dazu, dass auf großen Displays rechts Platz verschwendet wird und dennoch die vertikalen Scrollbalken evtl. nicht ausreichen, um alle Inhalte auf einem Bildschirm darzustellen.
  • Die Ansicht ist nicht für eine Hochformatdarstellung geeignet, auch die Side-by-Side-Ansicht mit einer anderen App ist nicht ohne Abstriche darstellbar.
  • In der Verwaltung der Dokumente wird immer nur ein Dokument angezeigt, per FlipView kann zu anderen Dokumenten gewechselt werden. Auf größeren Displays steht allerdings genug Platz zur Verfügung, um alle Dokumente direkt anzuzeigen. Die Buttons auf dem Dokument sind zudem sehr klein und für Benutzer schlecht zu bedienen. Auch verletzen sie das “Content before Chrome”-Prinzip, da sie immer angezeigt werden und die UI belasten.

Gerade das Problem der schlechten Skalierbarkeit der Ansicht stellt für Benutzer einen echten Nachteil dar und wird z.B. deutlich, wenn man sich das folgende Bild der Darstellung auf einem 23”-Display ansieht:

PB_Detailseite_Alt_gr

Es ist erkennbar, dass trotz des nicht genutzten Platzes von ca. 1/3 der Bildschirmbreite die mittlere Spalte immer noch gescrollt werden muss, um alle Daten angezeigt zu bekommen – ein suboptimales Erlebnis.

Besser horizontal

Im Gegensatz z.B. zu iOS-Apps ist es bei Windows Store Apps und der Verwendung des Microsoft Designs (f.k.a. “Metro”) oftmals üblich, dass Ansichten horizontal statt vertikal ausgelegt werden. Denn die meisten Windows-Tablets wie das Surface, aber auch viele Convertibles/Detachables wie das Lenovo Helix oder das Dell XPS 12 haben ein 16:9-Bildschirmformat. Dadurch und durch ihre Eignung als produktives Arbeitsgerät und Notebook-Ersatz werden diese Geräte primär im Querformat statt im Hochformat genutzt. Entsprechend eignet sich hier auch die horizontale Aufbereitung von App-Inhalten besser als eine vertikale. Zu sehen ist dies in den meisten gängigen Apps auch von Microsoft, z.B. in der Finanzen-App, der Bing-News-App oder der eingebauten Store-App.

Auch in der Privatbilanz-App war die Startseite mit der Kategorien-Übersicht von Anfang an horizontal ausgelegt. Es war nur folgerichtig, diese horizontale Aufteilung auch für die Bilanzposten-Detailseite zu übernehmen. Das Formular-Layout im Falle der Privatbilanz horizontal anzulegen, war kein Problem. Die Eingabereihenfolge der jeweiligen Felder und Eingabeblöcke spielt keine Rolle, wodurch die horizontale Aufteilung den Design-Richtlinien von Microsoft für Formulare entspricht (“When to use three or more columns”):

“Use three or more columns to make the best use of visible screen real estate in landscape orientation. This layout works well in fixed or horizontally panning screens […]. Use this layout only when the input order is not important.”

Die neue Bilanzposten-Detailseite sieht in ihrer horizontalen Ausrichtung wie folgt aus:

PB_Detailseite_Neu

Dabei sind folgende Unterschiede erkennbar:

  • Die Liste der Bilanzposten der gleichen Kategorie (linke Spalte im alten Layout) ist weggefallen. Grund: Das Ziel der Ansicht ist die Detailanzeige eines Bilanzpostens. Eine Liste anderer Bilanzposten hat dabei eine untergeordnete Funktion, entsprechend muss sie nicht in der UI vorhanden sein. Eine Umschaltung zu anderen Bilanzposten ist allerdings weiterhin über den klickbaren Titel möglich. Dieser öffnet eine ComboBox zur Auswahl eines anderen Bilanzpostens, der dann in der Detailansicht angezeigt wird.
  • Basisinformationen und berechnete Werte sind nun für einen schnelleren Überblick in einen Block auf die linke Seite gerückt.
  • Statt 3 vertikaler Spalten gibt es nun nur noch eine einzige horizontal angelegte Ansicht. Dies führt zu einer konsistenten Bedienbarkeit.
  • Die zuvor als vertikale Liste dargestellten Eingabefelder sind nun blockweise horizontal aufgeteilt. Sie werden dabei automatisch so angeordnet, dass sie zunächst den vertikal zur Verfügung stehenden Platz füllen und dann nach rechts umbrechen.
  • Es werden alle Dokumente eines Bilanzpostens direkt in einem GridView dargestellt. Durch Klick auf ein Dokument öffnet sich die App Bar, in der die Aktionen zu dem Dokument ausgewählt werden können (Öffnen, Teilen, Speichern, Löschen). Mit einem Button neben der Überschrift “Dokumente” kann ein neues Dokument hinzugefügt werden. Die alten Buttons auf einem Dokument entfallen damit und wurden gegen kontextsensitive App-Bar-Kommandos ersetzt, was die UI säubert und angenehmer zu bedienen ist:
    PB_Win81_Dokumente

Neben einer deutlich aufgewerteten Benutzerfreundlichkeit spielt das neue Layout vor allem im Bereich der Skalierbarkeit seine Stärken aus. Dadurch, dass die Eingabefelder und die Dokumente zunächst den vorhandenen vertikalen Platz ausnutzen und dann automatisch umbrechen, wird der zur Verfügung stehende Bildschirmbereich optimal ausgenutzt. Dies wird vor allem dann deutlich, wenn man sich die Ansicht auf einem großen Display ansieht, wie z.B. auf dem folgenden 23”-Monitor.

PB_Detailseite_Neu_gr

Im Direktvergleich zur alten Variante (s.o.) werden die Vorteile direkt ersichtlich, alle Inhalte passen ohne zu scrollen auf die dargestellte Bildschirmseite.

Auch in der Side-by-Side-Ansicht mit weiteren Apps ist das neue Layout deutlich besser geeignet als die alte Variante, doch damit beschäftigt sich ein separater Flurfunkbeitrag.

SDX Privatbilanz für Windows 8.1: Eingabevalidierung

Die Validierung von Benutzereingaben ist eine Standard-Anforderung vieler Business-Anwendungen. Leider ist dafür die Unterstützung in Windows Store Apps mit XAML/C# und WinRT mangelhaft. Dieser Artikel zeigt inkl. Codebeispielen, wie die Eingabevalidierung in der Privatbilanz-App für Windows 8.1 umgesetzt wurde.

Drum prüfe, wer sich bindet

In der Privatbilanz-App für Windows 8 wurde bewusst auf die Implementierung einer Eingabevalidierung verzichtet, auch wenn dies eine schmerzliche Entscheidung war. Der Grund: WinRT bzw. XAML/.NET für WinRT boten technisch nicht die aus WPF/Silverlight bekannten Mechanismen an, um eine durchgängige Eingabevalidierung zu ermöglichen. Leider hat sich auch unter Windows 8.1 nichts an dieser Situation geändert.

Dabei stellt die Validierung von Benutzereingaben häufig eine Notwendigkeit von Business-Anwendungen dar. Sie verhindert, dass inkonsistente Daten in eine Datenbank gelangen und ermöglicht das Festlegen von Qualitätsbedingungen an Daten, die u.a. ein einwandfreies Arbeiten der Business-Logik ermöglichen. Last but not least wird auch der Benutzer vor ungewollten Fehleingaben geschützt.

Die Adaption der Privatbilanz-App an Windows 8.1 wurde zum Anlass genommen, um die Validierung von Benutzereingaben exemplarisch anhand des Bilanzpostens “Immobilie” zu implementieren. So sind bei der Eingabe der Daten einer Immobilie die folgenden Regeln einzuhalten:

  • Der Name muss mindestens 3 Buchstaben haben.
  • Die Wohnungsnummer muss gesetzt sein.
  • Das Baujahr sollte nicht in der Zukunft liegen.

Die Validierung des Baujahrs wird dabei als Warnung an den Benutzer ausgegeben, um ihm die Aufnahme noch nicht fertig gestellter Immobilien in seine Vermögenswerte zu ermöglichen:

Win81_Validierung

 

Für Entwickler: Die “WinRT XAML Validation”-Bibliothek

Die Unterstützung der Eingabevalidierung unter Windows 8.1 lässt leider ebenso zu wünschen übrig wie unter Windows 8. Microsoft hat es hier versäumt, eine komfortable und durchgängige Lösung in die Entwicklerplattform zu integrieren.

Aus diesem Grund wurde auf eine mittlerweile entstandene Drittanbieter-Bibliothek zurück gegriffen: WinRT XAML Validation (frei auf Codeplex verfügbar). Diese Bibliothek wurde von meinem Kollegen Markus Demmler und mir entwickelt und stellt eine flexible sowie sehr funktionale Lösung zur Eingabevalidierung in XAML/C# Windows Store Apps bereit. Im Folgenden soll kurz beschrieben werden, wie die Validierung in der Privatbilanz-App damit umgesetzt wurde. Eine weitergehende Beschreibung gibt es in einem frei verfügbaren Artikel der dotnetpro und in der offiziellen Dokumentation der Bibliothek.

Der Standardweg zur Validierung mit der “WinRT XAML Validation”-Bibliothek besteht in der Definition von Data Annotations auf den Model-Entitäten. Da die Entitäten im Fall der Privatbilanz-App aber von einer WCF-Service-Referenz generiert wurden und somit ihre Properties nicht mit Attributen erweiterbar sind, wurde auf die Nutzung der manuellen Validierung zurückgegriffen. Dazu werden einer Instanz von BindableValidator (aus der Validierungs-Bibliothek) bei invaliden Eingaben entsprechende Validierungsmeldungen hinzugefügt:

   1: public BindableValidator Validate(Immobilie immobilie)

   2: {

   3:     var validator = new BindableValidator(immobilie);

   4:  

   5:     if (immobilie.Name == null || !Regex.IsMatch(immobilie.Name, "^.{3,50}$"))

   6:     {

   7:         validator.AddMessage(() => immobilie.Name, 

   8:             ValidationLevel.Error, "Name muss 3-50 Zeichen lang sein");

   9:     }

  10:  

  11:     if (String.IsNullOrEmpty(immobilie.Wohnungsnummer))

  12:     {

  13:         validator.AddMessage(() => immobilie.Wohnungsnummer, 

  14:             ValidationLevel.Error, "Wohnungsnummer muss gesetzt sein");

  15:     }

  16:  

  17:     if (immobilie.Baujahr > DateTime.Today.Year)

  18:     {

  19:         validator.AddMessage(() => immobilie.Baujahr, 

  20:             ValidationLevel.Warning, "Baujahr liegt in der Zukunft");

  21:     }

  22:  

  23:     return validator;

  24: }

Diese Validate()-Methode wird aufgerufen, wenn Daten einer Immobilie vom Benutzer geändert wurden und das Objekt gespeichert werden soll. Der resultierende BindableValidator kann z.B. im View Model als Property-Wert gespeichert werden und wird im XAML-Code gegen ein ValidationPanel-Control gebunden, das um das jeweilige Eingabefeld gelegt wird:

   1: <vc:ValidationPanel ValidationSource="{Binding Validator[Name]}">

   2:     <TextBox Text="{Binding Bilanzposten.Name, Mode=TwoWay}" />

   3: </vc:ValidationPanel>

Der Rest funktioniert automatisch, d.h. wenn eine Validierungsmeldung für das jeweilige Property des Datenobjekts (in diesem Fall "Name") erzeugt wird, stellt das ValidationPanel diese Meldung entsprechend dar und entfernt sie auch wieder, wenn der Fehler behoben wurde.

Dies ist eine Möglichkeit, die “WinRT XAML Validation”-Bibliothek zu verwenden. Sie bietet allerdings noch deutlich mehr Funktionen an:

  • Validierung über Validierungsattribute
  • Manuelle Validierung
  • Implizite Ausführung der Validierung
  • Explizite Ausführung der Validierung
  • UI-Controls zur Darstellung von Validierungsmeldungen

Ein Blick lohnt sich daher auf jeden Fall!

SDX Privatbilanz für Windows 8.1: Secondary Tiles

Neben der primären App-Kachel können Entwickler Windows Store Apps auch mit der Fähigkeit versehen, sekundäre Tiles zu erstellen, die spezifischere Informationen darstellen können. Dieser Beitrag zeigt, wie die Privatbilanz-App von dieser Möglichkeit Gebrauch macht.

Direkteinstiegspunkte

Nicht erst seit Windows 8.1, auch unter Windows 8 war es für Entwickler bereits möglich, Secondary Tiles als Funktionalität anzubieten. Ein schönes Beispiel um zu verstehen, worum es sich dabei handelt, stellt die “Finanzen”-App von Microsoft dar. In dieser App haben Anwender die Möglichkeit für einzelne Wertpapiere die Aktion “An Start anheften” auszuführen. Dadurch wird auf dem Startbildschirm der Modern UI eine neue Kachel erzeugt, die das Wertpapier repräsentiert. Auf der Kachel werden stets aktuelle Informationen angezeigt, z.B. die Wertentwicklung des Papiers zum letzten Stand etc.. Klickt der Benutzer die Kachel an, wird die Finanzen-App direkt in der Detailansicht des jeweiligen Wertpapiers geöffnet.

Win81_SecondaryTiles_Finanzen

Solche “Secondary Tiles” nutzen Anwendern daher auf zweierlei Art:

  1. Sie stellen aktuelle Informationen zu einem spezifischen Datenobjekt dar (im Falle der Finanzen-App Informationen eines Wertpapiers).
  2. Sie sind ein Direkteinstiegspunkt in die App, die dadurch in der Detailansicht des jeweiligen Datenobjekts geöffnet wird.

Es ist erkennbar, dass sich die Nutzung von Secondary Tiles besonders dort anbietet, wo schnell auf Detaildaten einer App zugegriffen werden soll.

Nutzung in der Privatbilanz

In der Privatbilanz-App bieten sich die einzelnen Bilanzposten geradezu an, dem Benutzer die Möglichkeit zu geben, diese als Secondary Tiles auf dem Startbildschirm zu hinterlegen. Und so wurde die Anpassung der Privatbilanz-App an Windows 8.1 dafür genutzt, dieses Feature zu implementieren.

In der App Bar der Detailansicht eines Bilanzpostens gibt es nun die zusätzliche Aktion “An Start anheften”. Führt der Benutzer diese aus, so öffnet sich ein Popup, mit dem er die neue Kachel anlegen kann. Hier hat er die Möglichkeit, die Kachelgröße zu wählen und die Beschriftung festzulegen. Apps ist es nicht erlaubt, vollautomatisch Secondary Tiles anzulegen, der Benutzer muss dies immer bestätigen. Damit wird ein Missbrauch dieser Funktionalität durch Apps verhindert.

Win81_AnStartAnheften

In der Privatbilanz-App wird das Bild mit dem jeweiligen Symbol und der Farbe des Bilanzposten-Typs als Symbol für die neue sekundäre Kachel verwendet, die Beschriftung entspricht standardmäßig dem Namen des Bilanzpostens. Je nach Kachelgröße werden auf dem Live Tile unterschiedliche aktuelle Informationen des jeweiligen Bilanzpostens dargestellt, u.a. die aktuelle Wertentwicklung mit einem symbolischen Indikator und das Bilanzposten-Bild. Bei Änderungen an einem Bilanzposten werden diese Daten auf den Kacheln umgehend aktualisiert. Hierdurch erhält der Benutzer bereits auf dem Startbildschirm eine Fülle an relevanten Informationen über die von ihm gepinnten Bilanzposten, ohne die Privatbilanz überhaupt starten zu müssen:

Win81_SecondaryTiles_Privatbilanz

Klickt der Benutzer auf eine Kachel, wird die Privatbilanz direkt mit der Detailseite des zugehörigen Bilanzpostens geöffnet.

Für Entwickler…

Will eine App ein neues Secondary Tile auf dem Startbildschirm anlegen, so muss sie dem Benutzer wie bereits beschrieben ein Standard-UI für die Erstellung des Tiles anzeigen, das nicht verändert werden kann. Die Anzeige dieses UIs wird durch die Methode SecondaryTile.RequestCreateAsync() ausgelöst, die auf einer Instanz der Klasse SecondaryTile aufgerufen wird. In dieser Klasseninstanz legt ein Entwickler vorab alle für das Tile zu verwendenden Informationen ab, z.B. den Standard-Namen des Tiles, die unterstützten Tile-Größen und die Bilder pro Tile-Größe. Es ist auch möglich, ein Roaming für das Tile zu aktivieren, wodurch Secondary Tiles auf allen Geräten eines Benutzers synchronisiert werden können.

Entscheidend beim Anlegen eines Secondary Tiles ist die Angabe einer Tile-ID. Mit dieser wird das Tile app-gebunden auf dem Startbildschirm identifiziert und diese ID wird beim Klick auf das Tile der App übergeben, sodass diese die entsprechenden Daten direkt laden kann. Eine App kann den Start über ein Secondary Tile herausfinden, indem der Entwickler in der App.OnLaunched()Methode den Methodenparameter LaunchActivatedEventArgs prüft. Ist die Eigenschaft TileId gesetzt und ihr Wert ungleich "App", so wurde die App über ein Secondary Tile aktiviert. Entsprechend können Entwickler dann agieren, indem sie die zugehörigen Daten laden.

Auch das Lösen von Secondary Tiles vom Startbildschirm muss der Benutzer über eine explizite UI bestätigen. Entwickler können diese für eine bestimmte Tile-ID über die Methode SecondaryTile.RequestDeleteAsync() anzeigen lassen. Ob ein Secondary Tile auf dem Startbildschirm existiert, kann von Entwicklern zudem über die Methode SecondaryTile.Exists() abgefragt werden, der die jeweilige Tile-ID übergeben wird.

Die Aktualisierung von Live-Informationen für Secondary Tiles erfolgt nach dem gleichen Schema und mit den gleichen technischen Mitteln wie für die “normale” App-Kachel. Entsprechend gelten alle Aussagen, die hierzu im letzten Artikel getroffen wurden. Es kann aus dem gleichen Template-Bestand für Live Tiles gewählt werden, ebenso lassen sich Secondary Tiles auf verschiedene Trigger hin aktualisieren.

SDX Privatbilanz für Windows 8.1: Mehr Live Tiles

Eine Besonderheit von Apps für Windows 8 war die von Windows Phone bekannte Fähigkeit, Informationen auf dem Startbildschirm der Modern UI als “Live Tile” abzulegen. Dieser Artikel zeigt, welche Änderungen sich unter Windows 8.1 ergeben, welchen Nutzen Anwender davon haben und wie Entwickler darauf reagieren können.

Weiter gekachelt

Die Privatbilanz-App für Windows 8 hat bereits die Möglichkeit geboten, Informationen als Live Tile auf dem Startbildschirm darzustellen. Dabei wurden aktuelle Bilanzinformationen aus der App auf der Kachel dargestellt:

           

Allerdings konnte ein Benutzer unter Windows 8 nur zwischen zwei Kachelgrößen wählen: Einer kleineren quadratischen Kachel und einer breiten Variante, die den doppelten Platz beanspruchte, dafür aber auch mehr Informationen darstellen konnte.

Unter Windows 8.1 wird das Konzept der Live Tiles weiter verfeinert. So können Anwender nun auch zwischen einer ganz kleinen Kachel und einer ganz großen quadratischen Kachel wählen. Letztere Variante nimmt dabei doppelt soviel Platz ein wie eine breite Kachel:

Win81_Startbildschirm

Win81_grKachelDie ganz kleine Kachel dient dabei nur als schneller Einstiegspunkt für selten verwendete Apps oder Apps ohne relevante Live-Informationen. Und so kann auf ihr auch nur das App-Symbol angezeigt werden, weitere Informationen kann sie nicht darstellen.

Hingegen ist die große quadratische Kachel bestens dafür geeignet, erweiterte Live-Informationen aus der App heraus anzuzeigen. Der Benutzer erhält damit einen Einblick in aktuelle Daten der App, ohne die App selbst gestartet haben zu müssen. In der SDX Privatbilanz wird dies dafür verwendet, um erweiterte Informationen zum aktuellen Wert der beiden Bilanzseiten (Aktiva/Passiva) anzuzeigen. Die dargestellten Daten spiegeln dabei zu jeder Zeit den aktuellen Bilanzstand wider.

Für Entwickler…

Grundsätzlich unterscheidet sich das Anbinden der Live Tiles unter Windows 8.1 für Entwickler nicht vom Vorgehen unter Windows 8. Allerdings gibt es für die große quadratische Kachel neue Tile Templates, aus denen Entwickler die für sie passende Kachel-Vorlage wählen können. Denn wie auch unter Windows 8 ist es bei Windows 8.1 nicht gestattet, Inhalte auf Live Tiles völlig beliebig anzuordnen und zu gestalten. Der überarbeitete Tile Template Catalog bietet allerdings eine Fülle an Vorlagen, bei denen ein jeder Entwickler fündig werden sollte.

Wie auch unter Windows 8 erfolgt die Bereitstellung neuer Kachelinhalte über ein XML-Fragment, welches den Namen des jeweiligen Tile Templates und die eigentlichen Nutzdaten beinhaltet. Leider hat Microsoft es noch immer versäumt, typisierte Klassen für die Bereitstellung dieses XML-Fragments aus C# in die Plattform zu integrieren. Als Ausweg bietet sich wieder das Sample App tiles and badges an, das im Dev Center für Windows Store Apps zur Verfügung steht. Dieses stellt für jedes Template spezielle Klassen bereit, über die Entwickler sehr einfach Kachel-Informationen aktualisieren können.