Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: Ammy – eine alternative UI-Sprache
Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger nun schon seit fünf Jahren Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „XAML: Ammy – eine alternative UI-Sprache“.

Die UI-Entwicklungssprache XAML basiert auf dem gleichen Konzept wie HTML. Die Oberfläche der Software wird einfach über XML deklariert. Das hat seine Vor- und Nachteile. Ein großer Vorteil ist das einfache Verschachteln unterschiedlicher Elemente. So kann ein Steuerelement mehrere Steuerelemente als Kinderelemente beinhalten. Aufbauend auf diese Hierarchie werden die Eigenschaften geteilt oder geerbt. Ein Nachteil ist die Lesbarkeit. Obwohl XML auf den ersten Blick wunderbar lesbar für den Entwickler ist, tendieren größere XAML-Anwendungen dazu, unübersichtlich zu werden. Der Grund hierfür ist ein unnötiger Informationsrausch. Das gleiche Problem hatte XML bereits beim Datenaustausch für klassische Web Services. Durch zu viele unnötige Informationen wurde die Datengröße extrem aufgebläht.

XAML: Ammy – eine alternative UI-Sprache

Aus genau diesen Gründen konnte sich JSON (JavaScript Object Notation) als Datenformat etablieren. Es baut auf einem einfachen Key-Value-Prinzip auf. Der Beginn und das Ende von Elementen werden nur durch geschweifte Klammern festgelegt und nicht wie bei XML durch ganze Wörter.

Das GUI-Toolkit Qt zur plattformübergreifenden Programmierung grafischer Benutzeroberflächen lehnte sich mit einer eigenen UI-Entwicklungssprache namens QML (Qt Meta-object Language) an das Konzept von JSON an. Das inspirierte Mihhail Maslakov zu einer alternativen UI-Sprache namens Ammy. Dank ihr lassen sich XAML-Anwendungen mit einer JSON-ähnlichen Syntax entwickeln. Das Projekt ist Open Source auf GitHub verfügbar. Für die Installation sind zwei Schritte notwendig. Zuerst muss ein Visual Studio Plug-in installiert werden. Es bietet dann vollen Editorsupport und einige Projekttemplates. Im zweiten Schritt müssen im jeweiligen XAML-Projekt die nötigen Libraries installiert werden. Bei WPF zum Beispiel Ammy.WPF. Ein neues Fenster wird dann über die Projektvorlage „Ammy Window“ hinzugefügt (Abb. 1). Das neue Fenster hat eine Ammy-Dateiendung, die eine Code-behind-Datei und eine generierte XAML-Datei beinhaltet. Um die generierte XAML-Datei für das eigene Projekt einsetzen zu können, muss in der App.xaml der StartupUri auf die neue XAML-Datei verweisen. Das geht zum Beispiel über MainWindow.g.xamln anstatt wie bisher mit MainWindow.xaml.

Ein einfaches „Hello World“-Beispiel ist in Listing 1 zu sehen. Zugegeben, auf den ersten Blick sieht die Implementierung gewöhnungsbedürftig aus. Vergleicht man hingegen den Inhalt mit dem herkömmlichen XAML-Code, so ist Ammy übersichtlicher und kompakter. Hierbei fällt besonders auf, dass kein XML-Namespace angegeben werden muss. Beim Einbinden externer Klassen wird wie in C# ein Using verwendet. Technisch betrachtet wird alles unterstützt, was uns XAML bietet, denn Ammy kompiliert die eigene Syntax direkt mit dem XAML-Compiler. Die genierte XAML-Datei befindet sich direkt bei der Ammy-Datei. Dazu einfach im Solution Explorer die Ammy-Datei aufklappen.

Ein paar weitere Ammy-Features ermöglichen einige Funktionen, die unter XAML oft vermisst werden. Das wäre die einfache Wiederverwendung durch Mixings, die bereits in der Webwelt stark zum Einsatz kommen, und das Schreiben von In-Line-Value-Convertern ohne eigene IValueConverter-Implementierung. In Listing 2 wird ein weiteres Ammy-Beispiel mit MVVM gezeigt. Es verdeutlicht, dass die neue Syntax nicht nur gewöhnungsbedürftig ist, sondern auch neuen Einarbeitungsbedarf hat. Hat man allerdings die beiden Hürden gemeistert, kann Ammy eine attraktive Alternative zum herkömmlichen XAML sein.

Window "MyApp.MainWindow" {
  Title: "My first Application"

  Grid {
    TextBlock { "Hello, World!" }
  }
}
Window "MyApp.MainWindow" {
  Title: "My first Application"
  Resources: [
    MyApp.MainWindowViewModel Key="ViewModel" {}
  ]
  Grid {
    DataContext: resource "ViewModel"
    TextBlock { Text: bind Title }
  }
}

Abb. 1: Ein neues Ammy Window hinzufügen

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.


Schnell und überall: Datenzugriff mit Entity Framework Core 2.0

Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

C# 7.0 – Neues im Detail

Christian Nagel (CN innovation)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -