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.

Der Aufbau einer Anwendung umfasst Folgendes:

1. Grundrisse
2. Muster
3. Komponenten

Grundrisse und Layouts

Grundrisse bilden die Gesamtstruktur einer Anwendung und können global oder Seite für Seite festgelegt werden. Wenn Sie einen Grundriss auswählen, können Sie auch das Seitenlayout ändern.

Grundrisse bestehen aus folgenden Elementen:

1. Kopfzeile und Fußzeile
2. Navigationsbereich
3. Inhaltsbereich

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 von Jutro Design System. 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.