Über Style-Themes in Jitterbit App Builder

Themes haben eine Vorschau-Schaltfläche, mit der man sich schnell einen visuellen Überblick darüber verschaffen kann, wie verschiedene Bildschirme und Panels in App Builder mit dem ausgewählten Theme aussehen. Diese Anleitung beschreibt die aktuelle Implementierung von Themes.

Übersicht

App Builder ermöglicht die Anpassung des visuellen Erscheinungsbildes einer App in der UI-Ebene durch die Nutzung von Style-Themes. In App Builder werden Themes als definierte Paare von Komponenten und Werttypen dargestellt, mit denen man das Erscheinungsbild definierter UI-Bereiche steuern kann. Eine Komponente stellt hier einen Bereich in der UI dar, dessen Eigenschaften geändert werden können (beispielsweise sind Seiten Komponenten). Werttypen stellen die spezifischen Eigenschaften dar, die geändert oder definiert werden können (beispielsweise ist Hintergrundfarbe ein Werttyp).

Beispielsweise könnte man die Hintergrundfarbe (ein Werttyp) des Bereichs Links auf Lila setzen.

App Builder wird mit mehreren vordefinierten Basis-Themes ausgeliefert, die von deiner Anwendung direkt verwendet oder als Basis-Theme genutzt werden können, das du weiter anpassen kannst. Darüber hinaus sind folgende Optionen über Themes verfügbar:

• Theme-Einstellungstypen sind verfügbar, um Ausrichtung, Abstände und CSS-Übergänge zu konfigurieren.

• Die folgenden neuen Bereiche von Seiten aus App Builder können über Themes angepasst werden:

  • Diagramm-, Karten- und Kalender-Bereiche.
  • Tile-Rand auf Boards/Lanes, Tile-Zentrierung in einem Panel.
  • Feldgruppen, Header und Zellen für mehrzeilige Panels (ermöglicht größere mehrzeilige Panel-Zeilen).
  • Validierungen (Fehler, Warnungen, Eingabeaufforderungen und Ausnahmen, die dem Benutzer angezeigt werden).
  • Zurück-Schaltfläche.
  • Schaltfläche „Weitere Zeilen laden".

• Möglichkeit, die Symbolleiste auszublenden, wenn alle intrinsischen Steuerelemente ausgeblendet sind, einschließlich der Deaktivierung der Anzahl.

• Die Schließen-Schaltfläche ist jetzt Teil des Panels und kann ähnlich formatiert werden.
• Unterstützung für Panel-Sichtbarkeit, die das Panel ausblendet, aber den Platz reserviert (Wert 3).
• Panel-Header können jetzt ausgeblendet oder ihre Größe über Formate angepasst werden.
• Website-Schriftarten können remote geladen werden.

Theme-loser Zustand

Ohne definierte und angewendete Theme-Informationen erscheint App Builder auf der UI-Ebene in einem Theme-losen Zustand mit minimaler Formatierung. Mit der Verwendung von Themes kann ein Designer das Gesamterscheinungsbild einer App schnell verbessern.

Schnittstellen

Das Erstellen eines völlig neuen Themes und dessen Zuweisung zu einer Anwendung führt zu keinen sichtbaren Änderungen, da das neue Theme keine Implementierungen hat. Die auf Theme-Ebene gewählten Farben werden nicht automatisch auf Teile der UI angewendet. Um benutzerdefinierte Farben über die UI-Ebene zu sehen, muss man die Panels Komponenten und Unterkomponenten konfigurieren. Abb. 2 zeigt die Komponente Seite - Titelleiste mit ihrer Hintergrundfarbe auf Lila für den Bereich Links gesetzt.

Komponenten sind Teile der UI, die Style-Implementierungen erhalten können.

Werttypen

Mit einer angegebenen Komponente kann man einen Werttyp auswählen, um eine Eigenschaft anzuwenden. Werttypen können sich auf Schriftfarben, Hintergrundfarben, Bilder, Ausrichtung, Farbverlaufsinformationen, Größeninformationen usw. beziehen, je nachdem, welcher spezifische Bereich ausgewählt wurde, um ihn anzupassen. Auf der Theme-Seite hat jeder Werttyp entsprechende Hilfetextinformationen, die hilfreiche Tipps und Anweisungen enthalten, welche spezifischen Informationen bereitzustellen sind.

Farben nach reservierter Syntax referenzieren

Beim Angeben von Farben im Bereich "Designs" von App Builder (Rahmenfarbe, Hintergrundfarbe usw.) können Sie den Namen einer der drei auf Design-Ebene definierten Farben referenzieren. Dies ermöglicht eine schnellere Anpassung bei Verwendung der Funktion Kopieren.

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

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

Farben anpassen

Bei Verwendung reservierter Namen können Farben auch in Bezug auf Helligkeit oder Dunkelheit und Deckkraft angepasst werden.

Farben können in Bezug auf Helligkeit oder Dunkelheit und Deckkraft angepasst werden. Diese Anpassung ist für die folgenden reservierten Begriffe verfügbar:

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

Um die Farbbelligkeit und -dunkelheit anzupassen, fügen Sie ein Pipe-Zeichen zusammen mit einem numerischen Dezimalwert hinzu (positiver Wert zum Aufhellen oder negativer Wert zum Abdunkeln der Farbe). Erwartete Werte sind -.9 - .9.

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

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

Syntax: {PrimaryColor~.25}

Funktion "Kopieren"

Jedes Design kann kopiert werden. Nutzen Sie diese Funktion, wenn Sie schnell mit einem Design starten möchten und nur die drei Farben für Primär, Sekundär und Komplementär festlegen möchten. Es sind viele vordefinierte Designs verfügbar, die unverändert verwendet oder weiter angepasst werden können, um schnell in Betrieb zu gehen.

Vordefinierte Designs von App Builder

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

Seit App Builder 4.67 enthalten die vordefinierten Designs Light, Dark, Shapes, Violet, Gradient, Light - Modern und Login Base Theme jeweils ein vorgefertigtes mobiles Design, das bereits als mobiles Design dieses Designs festgelegt ist und sich automatisch auf kleinen Bildschirmen anwendet. Diese mobilen Designs sind sofort einsatzbereit und für die mobile Nutzung optimiert, mit den folgenden Anpassungen:

• Berührungsfreundliche Ziele mit einer Mindestgröße von 44x44 Pixeln.
• Mobile Typografie und Zeilenhöhen.
• Kompakte Abstände und Ränder.
• Einspaltige Stapelung von Formularfeldern.

Dieses automatische Verhalten gilt nur für Apps, die eines dieser System-Designs direkt verwenden. Ein benutzerdefiniertes Design, das auf einem System-Design basiert, erbt sein vordefiniertes mobiles Design nicht. Wenn Sie ein System-Design direkt verwenden und sein vordefiniertes mobiles Design nicht nutzen möchten, erstellen Sie ein benutzerdefiniertes Design basierend auf dem System-Design und verwenden Sie dieses stattdessen. Das vordefinierte mobile Design wird nicht übernommen. Wenn Sie bereits ein benutzerdefiniertes Design basierend auf einem System-Design verwenden und sein vordefiniertes mobiles Design nutzen möchten, siehe Vordefiniertes mobiles Design mit benutzerdefiniertem Basis-Design verwenden.

Siehe So erstellen Sie ein mobiles Design, um stattdessen ein benutzerdefiniertes mobiles Design zu erstellen.

Vorschläge

Wenn Sie eine dunkle Hintergrundfarbe angeben, stellen Sie sicher, dass Sie eine Schriftfarbe verwenden, die für alle Texte lesbar ist. Nutzen Sie die in der Schriftfarbe enthaltene Eigenschaft text-shadow, um zusätzlichen Kontrast zu erzielen.

Anhang

Komponenten

Werttypen