Wie versprochen folgen nun nacheinander unsere Mitschriften zu den Vorträgen der GUI&Design für alle, die leider zuhause bleiben mussten oder sich gerne nochmal die wichtigsten Infos ins Gedächtnis rufen möchten. Den Anfang macht ein Entwicklerthema:

Eine UI in zwei Welten: Controls in HTML5 und WPF
Timo Korinth

Zunächst sprach Timo über die Unterschiede und Vorzüge von HTML5 und WPF. Während für WPF die Verwendung von XAML, Styles und Tamplates sowie die saubere Trennung von UI und Logik spricht, unterstützt HTML 5 mehr Betriebssysteme und vor allem eine breitere Palette an mobilen Endgeräten.

Danach erklärte er die Control-Entwicklung und den Begirff „UI-Framework“ mit einigen interessanten Beispielen. So nannte er beispielsweise typische Kommunikationsprobleme zwischen Designern und Entwicklern die dazu führen, dass das umgesetze UI nicht mit den Designvorgaben übereinstimmt oder Unstimmigkeiten im UI bezüglich Abständen, Größen und Farben die von View zu View unterschiedlich gestaltet wurden, durch die Einbindung verschiedener Entwickler in einem Projekt. Diese und weitere Probleme könnten durch die Verwendung eines UI-Frameworks vermieden werden.

Weiterhin sollte darauf geachtet werden, dass die Controls die UI Vorgaben kapseln. Daraus resultiert wiederum, dass JEDES Control in ein Custom Control gekapselt werden muss. Bei einem Button beispielsweise erscheint dieses Vorgehen nur bedingt sinnvoll, ist aber zum Erreichen einer Konsistenz zwingend notwendig. Wichtiger wird es bei Layout Containern, welche das Fundament für die Views der Anwendung bilden. Als Besipel nennt Timo hier Application Container und Master-Detail Container. Damit werden die Controls zu “Bausteinen” der Anwendung und müssen nur noch “zusammengesteckt” werden.

Danach erklärte er, wie sowohl in HTML5 als auch in WPF das Controldesign von den Controls getrennt werden kann.
WPF:
 Custom Controls
 XAML
HTML5:
 AngularJS directives
 Less

Im Anschluss folgte ein Beispiel für die Bestandteile eines Controls:
C# Logik JS
XAML Template HTML
XAML Style Less/CSS

Auf der letzten Stylebenene kann man Designparameter vorgeben welche eine Art vom Control unabhängiger Regelsatz sind. Mit Farben Abständen etc. Dies ähnelt einem ResourceDictionary in dem Rahmenfarben etc. als Ressourcen vorgegeben sind. Damit werden Farben von den Control abstrahiert und diese Rohdaten können auch für die Controldefinitionen bei AngularJS wiederverwendet werden.

Zum Abschluss des Vortrages präsentierte Timo noch einige interessante Beispiele aus seiner beruflichen Praxis, wie das Kapseln eines Buttons in einem WPF Projekt mit einem Dark & Light Theme.