Testautomatisierung auf UI Ebene ist häufig nicht so einfach zu erreichen. Grund dafür können technische Fragestellungen sein. So gilt es, auf irgendeine Art das Rendering des UI-Frameworks abzubilden. Ebenso gilt es, mögliche Usereingaben zu emulieren oder Eingabeelemente an der UI zu identifizieren. Auch zeitliche Aspekte spielen mit rein, so ist ein “Warte eine Sekunde…” in einem automatisierten Test i. d. R. eine eher schlechte Idee. Doch es gibt auch Herausforderungen, die aus den Testfällen selbst entstehen. Versucht man etwa, ein Drag-Drop Verhalten automatisiert zu testen, beißt man sich dabei schon mal gerne die Zähne aus. Ich persönlich versuche UI Tests daher auf einem niedrigen Level zu halten, setze sie also primär für einfach zu überblickende Geradeausfälle ein. Mit Avalonia habe ich UI Tests zuletzt bei meinem Nuget-Paket RolandK.AvaloniaExtensions [1] eingesetzt. Hier ging es mir darum, dass die dort definierten Basisklassen und Features wie die Dependency Injection einwandfrei in einer Avalonia Applikation funktionieren.
Avalonia
Avalonia FluentTheme zur Laufzeit wechseln
Viele moderne Applikationen bieten neben einer ansprechenden UI auch den Wechsel zwischen verschiedenen Themes an. Für gewöhnlich wird zumindest zwischen Hell und Dunkel unterschieden. Gleiches gilt für das Betriebssystem selbst – Windows und macOS bieten dem User jeweils die Wahl zwischen Hell und Dunkel. Auch Avalonia bietet mit dem FluentTheme seit Version 0.10 einen sehr einfachen Weg an, zwischen hellen und dunklen Modus zu unterscheiden. Typischerweise wird das FluentTheme in der App.xaml angegeben und bekommt als Mode entweder “Light” oder “Dark”. In diesem Artikel wollen wir uns damit beschäftigen, wie diese Einstellung zur Laufzeit der Applikation verändert werden kann. Weiterhin schauen wir uns an, wie man unter Windows den aktuell konfigurierten Theme herausbekommt und sogar auf Änderung des aktuellen Theme reagieren kann.
Avalonia Applikationen übersetzen
In den letzten Monaten habe ich vermehrt Artikel über das Cross-Platform Framework Avalonia geschrieben. Für mich persönlich hat sich das Framework mittlerweile zum Standard für Desktop-Applikationen entwickelt. Es kann fast alles, was man braucht und läuft auf allen gängigen Desktop Plattformen (Windows, macOS, Linux) stabil. In diesem Artikel möchte ich mich mit einem Thema beschäftigen, auf das die meisten Softwareentwickler bei UIs irgendwann stoßen: Applikationen in andere Sprachen übersetzen. Auch wenn man nicht den akuten Bedarf hat, so sollte man UIs möglichst von vorne herein darauf vorbereiten, dass sie übersetzbar sind. Übersetzung im Nachhinein einzubauen kann häufig sehr schwierig sein. Insbesondere, wenn Daten von außen bereits behaftet mit einer bestimmten Sprache in der eigenen Applikation ankommen.
Das DataGrid von Avalonia
Das auf .Net basierende Cross-Plattform UI Framework Avalonia verfügt über eine große Palette an Standard-Controls. Es ist vieles dabei, was man als Entwickler typischerweise braucht. So gibt es etwa diverse Eingabeboxen, Controls für Auflistungen und welche, über die das Layout beeinflusst werden kann. Wenn ich auf Business-Applikationen schaue, fällt mir zudem noch ein sehr wichtiges ein, welches Avalonia mitbringt: Das DataGrid. Die Aufgabe eines DataGrids besteht grundsätzlich darin, eine mehr oder weniger lange Liste von Objekten in tabellarischer Form darzustellen. Jede Zeile ist ein solches Objekt, jede Spalte bezieht sich auf eine Eigenschaft. Daneben gibt es typischerweise Anforderungen wie zum Beispiel Sortierung, Filterung oder Gruppierung. Das DataGrid in Avalonia liefert diese Features entweder direkt oder bringt sie über den kleinen Umweg einer CollectionView im ViewModel mit. In diesem Artikel möchte ich mich mit den Features beschäftigen, welche das DataGrid in Avalonia im Standard mitbringt und wie man diese verwendet.
Markdown-Dokumente mit Avalonia rendern
Markdown ist eine sehr einfache und leicht erlernbare Auszeichnungssprache, welche heute von vielen Produkten unterstützt wird. Häufig dient Markdown dazu, Html-Dokumente zu generieren. Der große Vorteil für mich gegenüber Html oder andere Auszeichnungssprachen ist, dass das Markdown-Dokument selbst bereits gut durch einen Menschen lesbar und der Funktionsumfang auf das notwendige beschränkt ist. Der Einstieg ist entsprechend schnell und selbst ohne vorher die Syntax zu kennen, kann diese leicht verstanden werden. Unter [1] sind weitere Detailinfos über Markdown zu finden. Ein sehr gutes Beispiel zur Verwendung von Markdown ist GitHub. Markdown-Dokumente im Repository erscheinen im Browser direkt als daraus generierte Html-Seiten. In diesem Artikel beschreibe ich etwas ähnliches mithilfe des Cross-Plattform Frameworks Avalonia. Auch hiermit ist es möglich, ein Dokument in der Markdown-Syntax zu schreiben und in der Anwendung anzuzeigen. Sinnvoll ist das etwa bei der Anzeige von in der Anwendung integrierten Hilfeseiten. Der Entwickler schreibt damit innerhalb seiner Entwicklungsumgebung in der Markdown-Syntax und in der Oberfläche erscheint es als sauber formatierte Seite.
Custom Window Chrome mit Avalonia
Moderne Desktop-Applikationen bringen auch ihren eigenen Fenster-Rahmen mit. Das gehört zum guten Ton und lässt sich bei zahlreichen Beispielen beobachten. In den meisten GUI-Frameworks gibt es einen Weg, genau das zu erreichen. So kann bei WPF oder Windows.Forms der Standard-Rahmen komplett ausgeblendet und damit durch das eigene Programm selbst gerendert werden. Ähnliches gilt auch für Avalonia. Aufgrund des plattformübergreifenden Ansatzes von Avalonia müssen aber einige Kleinigkeiten beachtet werden. So wird hier nicht garantiert, dass es auf jeder Plattform funktioniert. Auch die Standard-Buttons für Maximieren, Minimieren etc. sind je nach Plattform wo anders (rechts bei Windows, links bei macOS). In diesem Artikel möchte ich mich somit genauer mit diesem Thema beschäftigen und zeigen, wie ich es dann bei der App MessageCommunicator gelöst habe.
Eingabevalidierung in Avalonia mit INotifyDataErrorInfo
In den letzten Wochen habe ich mich wieder stärker mit der GUI im Projekt MessageCommunicator [1] beschäftigt. Diese ist hier komplett in Avalonia implementiert und damit ist die Anwendung für Windows, Linux und MacOS verfügbar. Neben einigen Styling-Anpassungen (Wechsel Light/Dark-Theme) habe ich auch eine Datenvalidierung mithilfe der auch in WPF beliebten INotifyDataErrorInfo Schnittstelle integriert. Diese Schnittstelle arbeitet ähnlich wie INotifyPropertyChanged und ermöglicht, asynchron je gebundener Eigenschaft Fehler an die GUI zu melden.
PropertyGrid mit Avalonia
Leider beinhaltet Avalonia selbst kein PropertyGrid. Eine kleine, eigene Implementierung ist aber zum Glück auch nicht so aufwändig wie es zunächst klingt. In meinem OpenSource-Projekt MessageCommunicator [1] bin ich genau diesen Weg gegangen. Die umgesetzten Funktionen sind zwar stark von den Anforderungen von MessageCommunicator getrieben, sie sollten aber in Bezug auf das PropertyGrid allgemeingültig verwendbar sein. Elemente wie TextBoxen für String-Properties, Eingabevalidierung und Gruppen-Überschriften werden schließlich auch von anderen Applikationen benötigt. Gerne kann meine Implementierung des PropertyGrid auch als Vorlage für andere Projekte oder ggf. einem eigenen OpenSource-Projekt speziell für das PropertyGrid vergleichbar zu PropertyTools [2] dienen.
Cross-Plattform GUI mit C# und Avalonia
Es existieren einige Ansätze, um mit C# gleichzeitig für mehrere Plattformen eine GUI zu entwickeln. Xamarin.Forms etwa ist hier ein sehr bekanntes Beispiel. Etwas unbekannter ist das Framework Avalonia [1]. Hierbei handelt es sich ebenfalls um ein Framework, bei dem die Oberflächen mit Xaml beschrieben und mittels des MVVM-Patterns mit der C#-Logik gekoppelt werden können. Anders als Xamarin.Forms setzt Avalonia auf einen komplett eigenen Rendering-Stack und nicht auf die Standard-Steuerelemente des jeweiligen Betriebssystems. Dadurch ist Optik und Verhalten der Applikationen auf allen Plattformen maximal gleich. Ich persönlich finde diesen Ansatz schon länger sehr spannend und habe mich in den letzten Monaten mehr mit Avalonia beschäftigt. Um für das Framework ein Gefühlt zu bekommen, habe ich eine kleine Applikation zum Senden/Empfangen von TCP/IP-Nachrichten damit gebaut [2]. Das Vorschaubild dieses Artikels ist ein Screenshot dieser Applikation.