Drittanbieter stellen eine Reihe von Komponenten für das User Interface zur Verfügung. Welche das sind, wie umfangreich die Funktionen sind und wie sie sich in die eigene App integrieren lassen, betrachten wir in diesem Artikel. Das Ziel: Schneller zu einer guten Benutzeroberfläche zu gelangen – man kann ja schließlich nicht alles selbst machen.

User-Interface-Design für Webapplikationen ist aus Sicht der Softwareentwicklung ein noch immer wenig standardisiertes Vorgehen. Zum einem hat der Entwickler – unabhängig von der gewählten Vorgehensweise – kaum Einschränkungen bei der Ausgestaltung der Benutzeroberfläche, denn es steht ihm buchstäblich die gesamte Power von HTML, CSS und JavaScript zur Verfügung.

Hinzu kommen Frameworks wie Bootstrap, die ansprechende Elemente zur Gestaltung bereitstellen und auch das Design mit Layout, Farben usw. deutlich erleichtern. Komponenten, die genau auf das jeweilige Entwicklungssystem zugeschnitten sind, sollen die Vorgehensweise deutlich erleichtern und vor allem zu einer Beschleunigung der Entwicklung führen. Darüber hinaus bieten sie die Chance, eine moderne Benutzeroberfläche zu erstellen, welche die aktuellen Anforderungen in Fragen des Designs, der Interaktion mit den Nutzerinnen und Nutzern, Barrierefreiheit usw. berücksichtigt. Wir wollen uns die Angebote zu den User-Interface-Komponenten der Unternehmen Syncfusion [1] und DevExpress [2] ansehen.

Blazor-Komponenten von Syncfusion

Der Anbieter Syncfusion ist dafür bekannt, dass er eine Vielzahl von Komponenten für die unterschiedlichsten Entwicklungssysteme für Desktop-, Mobile- und Webapplikationen anbietet. Darunter findet sich auch eine umfangreiche Sammlung von User-Interface-Komponenten für das Webentwicklungsframework Blazor (Abb. 1).

Abb. 1: Syncfusion bietet eine umfangreiche Sammlung an UI-Komponenten für Blazor

Es gibt Komponenten für die Erfüllung von Basisfunktionen wie die Dateneingabe (beispielsweise TextBox) oder Interaktion (beispielsweise Button), als auch Komponenten mit einer sehr umfassenden Funktionalität wie ein Tabellensteuerelement für Daten (DataGrid) oder ein interaktives Kanban-Board (Kanban). In der Dokumentation heißt es, dass es native Blazor-Komponenten und nicht lediglich Wrapper um JavaScript-Controls sind. Beide Hostingmodelle von Blazor – Blazor Server und Blazor WebAssembly – werden unterstützt. Blazor basiert auf .NET (ehemals .NET Core). Die Komponenten von Syncfusion arbeiten mit den Frameworks NET 6.0, .NET 5.0 und .NET Core SDK 3.1.8. Bei der Wahl der Entwicklungsumgebung ist man uneingeschränkt, d. h. Visual Studio 2022/2019, Visual Studio Code oder alternativ JetBrains Rider können verwendet werden. Blazor funktioniert mit allen modernen Browsern auf dem Desktop und auf mobilen Devices. Das gilt auch, wenn man die genannten Komponenten von Syncfusion einbindet. Dabei ist die Kompatibilität des Hostingmodells Blazor Server immer etwas besser als Blazor WebAssembly, denn bei Blazor Server wird die fertige Applikation an den Client ausgeliefert (Tabelle 1).

Die Komponenten werden über den Paketmanager NuGet zur Verfügung gestellt. In früheren Versionen der Komponentenbibliothek wurden alle Komponenten simultan über ein größeres Package eingebunden. Ab Version 18.4.0.30 (Volume 4, 2020) werden die Komponenten in separaten NuGet-Paketen zur Verfügung gestellt (unterschiedliche Namespaces). Das bietet folgende Vorteile:

• Die geringere Paketgröße reduziert die anfängliche Ladezeit in Blazor-WebAssembly-Anwendungen. Man profitiert von kürzeren Startzeiten und einem schnelleren initialen Rendering der Webapplikation.

• Es erfolgt eine Reduktion der Größe des Anwendungs-Packages für produktiv eingesetzte Apps.

Jetzt können wir unmittelbar einsteigen und die Komponenten von Syncfusion verwenden.

Auf ein DataGrid mit Syncfusion

Kaum eine Businessapplikation kommt ohne ein DataGrid aus. Daher haben wir diese essenzielle Komponente gewählt, um uns mit der Arbeitsweise mit den externen Controls von Syncfusion vertraut zu machen. Grundsätzlich wird bei der Installation und der Registrierung der Komponente zwischen den beiden Hostingmodellen Blazor Server und Blazor WebAssembly App unterschieden. Wir gehen nachfolgend davon aus, dass wir eine Blazor-Server-App verwenden. Für den Hostingtyp Blazor WebAssembly ist das schrittgleiche Vorgehen im Detail in der Dokumentation beschrieben. Erstellen Sie zum Nachvollziehen der nachfolgenden Schritte ggf. ein entsprechendes Anwendungsgerüst mit Hilfe der Projektvorlage in Visual Studio. Durchlaufen Sie die folgenden Schritte:

1. Verweis auf Bibliotheken: In einem ersten Schritt ist das entsprechende NuGet-Package Syncfusion.Blazor.Grid über den Paketmanager in die App aufzunehmen. Referenzieren Sie bei dieser Gelegenheit auch einen Verweis auf das Paket Syncfusion.Blazor.Themas für ein mögliches Styling des DataGrid.

2. Import der Bibliothek: Danach ist eine Importanweisung zur Datei _Imports.razor zu ergänzen: @using Syncfusion.Blazor.

3. Registrieren des Syncfusion Blazor Service: Dazu müssen Sie die IgnoreScriptIsolation-Eigenschaft auf true setzen, um die Skripts in den nächsten Schritten extern zu laden. Dazu ist der Eintrag

   builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; }); 

   in der Datei Program.cs notwendig. Ab Version 20.1 der Syncfusion-Komponenten handelt es sich um den Standardwert, sodass Sie diese Eigenschaft nicht mehr explizit festlegen müssen.

4. Festlegen des Stylings: Verweisen Sie auf für .NET 6 auf das Syncfusion Bootstrap5 Thema im <head> der Datei /Pages/_Layout.cshtml, d. h.:

   <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

5. Verweis auf die Skript-Referenz: Dazu muss der Eintrag

   <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> 

   ebenfalls in der Datei /Pages/_Layout.cshtml hinzugefügt werden.

Nach diesen Schritten sind wir so weit, dass wir das DataGrid einsetzen können. Die User Interface...