Aufbau einer Jutro-App
Diese Seite bietet einen Überblick über die Elemente, aus denen sich die Benutzeroberfläche einer Anwendung zusammensetzt.
In der Jutro-Galerie können Sie sehen, wie eine vollständig zusammengesetzte Jutro-App aussieht.
Webanwendung
Webanwendungen beziehen sich auf Anwendungen, die in Guidewire Cloud Platform unter Verwendung von Jutro Design System erstellt werden und mit dem von Guidewire empfohlenen Aufbau von Anwendungen übereinstimmen. Webanwendungen können als eigenständige Anwendungen entworfen und ausgeführt oder als Micro-Frontends in andere Anwendungen eingebettet werden. Alle Anwendungen können mit Metadaten und/oder JSX erstellt werden. Alle Anwendungen können mit Metadaten und/oder JSX erstellt werden.
Der Aufbau einer Anwendung umfasst Folgendes:
- Grundrisse
- Muster
- Komponenten
Grundrisse und Layouts
Grundrisse bilden die Gesamtstruktur einer Anwendung und können global oder pro Seite festgelegt werden. Wenn Sie einen Grundriss auswählen, können Sie auch das Seitenlayout ändern.
Grundrisse bestehen aus folgenden Elementen:
- Kopfzeile und Fußzeile
- Navigationsbereich
- Inhaltsbereich
Weitere Informationen zu Grundrissen finden Sie hier.
Muster
Muster sind reproduzierbare Benutzeroberflächenmuster, die sich aus Jutro-Komponenten zusammensetzen und in der Schaden- und Unfallversicherungsbranche häufig verwendet werden.
Muster können generisch sein, z. B. ein Fenster zur Kontoaktualisierung, oder an eine Sparte oder eine spezifische Aufgabe gebunden sein, z. B. das Hinzufügen eines Fahrzeugs oder das Durchführen einer Zahlung. Beispiele für Jutro-Muster finden Sie hier.
Merkmale von Mustern:
- Responsiv, jedoch mit spezifischen Minimal- und Maximalwerten
- Kein Grundrisslayout
- Komponentenmetadaten
- Kein Rastersystem, Standard ist Flex
- Können erweitert werden



Komponenten
Komponenten sind die Grundbausteine des Jutro Design Systems. Jede Komponente wird gestaltet und implementiert, um eine bestimmte Interaktions- oder UI-Anforderung zu erfüllen. Sie können Komponenten wie Legosteine zusammensetzen, um Muster und intuitive Benutzeroberflächen zu erstellen.
Merkmale von Komponenten:
- Responsiv, jedoch mit spezifischen Minimal- und Maximalwerten
- Können mit JSX erstellt werden
- Können vordefinierte Eigenschaften enthalten
Schaltflächen, Benachrichtigungen und Texteingabefelder sind Beispiele für Komponenten.

Es gibt außerdem einige größere Komponenten, bei denen mehrere Oberflächenelemente kombiniert sind. Die globale Kopfzeile besteht zum Beispiel aus einzelnen Komponenten wie Avatar, Benachrichtigungen und Lookup.