Über Stilthemen im Jitterbit App Builder

Themen verfügen über eine Vorschau-Funktion, mit der Sie eine schnelle visuelle Darstellung erhalten, wie verschiedene Bildschirme und Panels im App Builder mit dem ausgewählten Thema aussehen werden. Dieser Leitfaden beschreibt die aktuelle Implementierung von Themen.

Übersicht

Der App Builder ermöglicht die Anpassung des visuellen Erscheinungsbilds einer App in der Anwendungsschicht durch die Nutzung von Stilthemen. Im App Builder sind Themen definierte Kombinationen von Komponenten und Werttypen, die es Ihnen ermöglichen, das Erscheinungsbild definierter Bereiche der Benutzeroberfläche (UI) und Benutzererfahrung (UX) der Anwendungsschicht zu steuern. Eine Komponente stellt hier einen Bereich in der Benutzeroberfläche der Anwendungsschicht dar, dessen Eigenschaften geändert werden können, zum Beispiel ist Seite eine Komponente. Werttypen repräsentieren die spezifischen Eigenschaften, die geändert oder definiert werden können, zum Beispiel ist Hintergrundfarbe ein Werttyp.

Zum Beispiel: Setzen Sie die Hintergrundfarbe [Werttyp] der Links [Schnittstelle] auf lila.

Mehrere vordefinierte Basisthemen werden mit dem App Builder geliefert, die von Ihrer Anwendung entweder unverändert verwendet oder als Basisthema genutzt werden können, das Sie weiter anpassen können. Außerdem stehen die folgenden Optionen über Themen zur Verfügung:

• Themen-Einstellungsarten sind verfügbar, um Ausrichtung, Abstände und CSS-Übergänge zu konfigurieren
• Die folgenden neuen Bereiche von Seiten im App Builder sind verfügbar, um über Themen angepasst zu werden:
  • Chart-, Karten- und Kalender-Immobilienbereiche
  • Kachelabstand auf Boards/Gleisen, Kachelzentrierung in einem Panel
  • Mehrzeilige Panelfeldgruppen, Kopfzeilen und Zellen (die größere MRP-Zeilen ermöglichen)
  • Validierungen (Fehler, Warnungen, Aufforderungen und Ausnahmen, die dem Benutzer präsentiert werden)
  • Zurück-Button
  • Mehr Zeilen laden-Button
• Möglichkeit, die Symbolleiste auszublenden, wenn alle intrinsischen Steuerelemente ausgeblendet sind, einschließlich der Deaktivierung der Zählung
• Schließen-Button ('x') ist jetzt Teil des Panels und kann ähnlich gestaltet werden
• Unterstützung der Sichtbarkeit des Panels, das das Panel ausblendet, aber den Platz reserviert (Wert von "3")
• Panel-Kopfzeilen können jetzt ausgeblendet oder ihre Größe über Formate angepasst werden
• Schriftarten auf Site-Ebene können remote geladen werden

Theme-less state

Ohne definierte und angewendete Themeninformationen erscheint der App Builder auf der Anwendungsebene in einem themenlosen Zustand mit minimaler Stilgestaltung. Durch die Verwendung von Themen kann ein Designer das allgemeine Aussehen und Gefühl einer App schnell verbessern.

Interfaces

Das Erstellen eines brandneuen Themas und das Zuweisen zu einer Anwendung führt nicht zu sichtbaren Änderungen, da das neue Thema keine Implementierungen hat. Die auf Themenebene gewählten Farben werden nicht automatisch auf Teile der Benutzeroberfläche der Anwendungsebene angewendet. Um benutzerdefinierte Farben durch die Anwendungsebene zu sehen, müssen die Komponenteneinstellungen konfiguriert werden. In Abb. 2 ist die Hintergrundfarbe der Seiten-Title-Bar-Komponente für den Links-Bereich auf lila eingestellt.

Komponenten sind Teile der Benutzeroberfläche, die Stilimplementierungen empfangen können.

Value types

Mit einer angegebenen Komponente können Sie einen Werttyp auswählen, um eine Eigenschaft anzuwenden. Werttypen können sich auf Schriftfarben, Hintergrundfarben, Bilder, Ausrichtung, Gradientinformationen, Größeninformationen usw. beziehen, je nachdem, welchen spezifischen Bereich Sie ausgewählt haben, um ihn anzupassen. Auf der Themenseite hat jeder Werttyp entsprechende Hilfetextinformationen, die hilfreiche Tipps und Anweisungen enthalten, welche spezifischen Informationen bereitgestellt werden sollen.

Referencing colors by reserved syntax

Beim Festlegen von Farben im Themenbereich des App Builders (Randfarbe, Hintergrundfarbe usw.) können Sie den Namen einer der drei auf Themenebene definierten Farben referenzieren. Dies ermöglicht eine schnellere Anpassung bei der Verwendung der Kopierfunktion.

Die reservierten Syntaxbegriffe, die Sie angeben können, sind:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Farben anpassen

Bei der Verwendung reservierter Namen können Farben auch hinsichtlich Helligkeit oder Dunkelheit und Opazität angepasst werden.

Farben können hinsichtlich Helligkeit oder Dunkelheit und Opazität angepasst werden. Diese Anpassung ist für die folgenden reservierten Begriffe verfügbar:

• {PrimaryColor}
• {SecondaryColor}
• {ComplementaryColor}

Um die Helligkeit und Dunkelheit einer Farbe anzupassen, fügen Sie ein Pipe-Zeichen zusammen mit einem numerischen Dezimalwert hinzu (positiver Wert zur Erhöhung oder negativer Wert zur Verdunkelung der Farbe). Erwartete Werte sind -.9 - .9.

Syntax: {PrimaryColor|.25} oder {PrimaryColor|-.25}

Um die Opazität einer Farbe anzupassen, fügen Sie das Tilde-Zeichen zusammen mit einem numerischen Dezimalwert hinzu. Erwartete Werte sind .1 - .9.

Syntax: {PrimaryColor~.25}

Kopieren-Button

Jedes Theme kann kopiert werden. Nutzen Sie diese Funktion, wenn Sie schnell mit einem Theme starten und nur die drei Farben für Primär-, Sekundär- und Komplementärfarbe festlegen möchten. Es stehen viele vordefinierte Themes zur Verfügung, die ausgewählt und unverändert oder weiter angepasst werden können, um schnell einsatzbereit zu sein.

Vordefinierte Themes im App Builder

Der App Builder wird mit mehreren vordefinierten Themes geliefert. Obwohl diese technisch bearbeitbar sind, gehen bei einem Upgrade alle Änderungen verloren.

Vorschläge

Wenn Sie eine dunkle Hintergrundfarbe angeben, stellen Sie sicher, dass Sie eine Schriftfarbe verwenden, die für allen Text lesbar ist. Nutzen Sie die text-shadow-Eigenschaft, die in der Schriftfarbe enthalten ist, um zusätzlichen Kontrast hinzuzufügen.

Anhang

Komponenten

Werttypen