Über Stilthemen im Jitterbit App Builder
Designs verfügen über eine Vorschau-Funktion, mit der Sie schnell eine visuelle Darstellung der genauen Darstellung verschiedener Bildschirme und Bedienfelder erhalten. App Builder mit dem ausgewählten Design aussehen wird. Diese Anleitung beschreibt die aktuelle Implementierung von Designs.
Hinweis
Kopieren Sie ein Design, wenn Sie Ihre Änderungen bei einem Upgrade beibehalten möchten. Wenn Sie ein Design für Seiten- oder Panelzwecke verwenden, lassen Sie das Basisdesign leer. Wenn Sie es auf das App-Design setzen, wird das App-Design-CSS zweimal geladen.
Übersicht
App Builder ermöglicht die Anpassung der visuellen Darstellung einer App in der Anwendungsebene durch die Nutzung von Style Themes. In App Builder, Designs sind definierte Paarungen von Komponenten und Werttypen, mit denen Sie das Erscheinungsbild definierter Bereiche der Anwendungsschicht-UI und-UX steuern können. Eine Komponente stellt hier einen Bereich in der Anwendungsschicht-UI dar, dessen Eigenschaften geändert werden können, z. B. ist Seite eine Komponente. Werttypen stellen die spezifischen Eigenschaften dar, die geändert oder definiert werden können, z. B. ist Hintergrundfarbe ein Werttyp.
Beispiel: Legen Sie die Hintergrundfarbe fest [Value type] der Links [Interface] lila sein.
Mehrere vordefinierte Basisthemen werden mitgeliefert App Builder das Sie ganz einfach so von Ihrer Anwendung verwenden oder als Basisdesign verwenden können, das Sie weiter anpassen können. Außerdem sind die folgenden Optionen über Designs verfügbar:
- Designeinstellungstypen sind verfügbar, um Ausrichtung, Abstand und CSS-Übergänge zu konfigurieren
- Die folgenden neuen Bereiche von Seiten von App Builder können über Designs angepasst werden:
- Diagramm-, Karten- und Kalender-Immobilienbereiche
- Kachelränder auf Tafeln/Spuren, Kachelzentrierung in einem Panel
- Mehrzeilige Panel-Steuerelementsätze, Überschriften und Zellen (ermöglicht größere MRP-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 Zählung
- Die Schaltfläche „Schließen“ ('x') ist jetzt Teil des Panels und kann ähnlich gestaltet werden
- Unterstützt Panelsichtbarkeit, die das Panel ausblendet, aber den Platz reserviert (Wert „3“)
- Panelüberschriften können jetzt ausgeblendet oder ihre Größe über Formate angepasst werden
- Schriftarten auf Site-Ebene können remote geladen werden
Themenloser Staat
Ohne definierte und angewendete Themeninformationen, App Builder auf der Anwendungsebene erscheint es in einem themenlosen Zustand mit minimaler Stilisierung. Mithilfe von Designs kann ein Designer das allgemeine Erscheinungsbild einer App schnell verbessern.
Schnittstellen
Das Erstellen eines brandneuen Designs und dessen Zuweisung zu einer Anwendung führt zu keinen sichtbaren Änderungen, da das neue Design keine Implementierungen hat. Die auf Designebene ausgewählten Farben gelten nicht automatisch für Teile der Benutzeroberfläche der Anwendungsebene. Um benutzerdefinierte Farben über die Anwendungsebene anzuzeigen, müssen Sie die Komponenteneinstellungen konfigurieren. In Abb. 2 ist die Hintergrundfarbe der Komponente „Seite - Titelleiste“ für den Bereich Links auf Lila eingestellt.
Komponenten sind Teile der Benutzeroberfläche, die Stilimplementierungen erhalten können.
Werttypen
Wenn eine Komponente angegeben ist, können Sie einen Werttyp auswählen, um eine Eigenschaft anzuwenden. Werttypen können sich auf Schriftfarben, Hintergrundfarben, Bilder, Ausrichtung, Farbverlaufsinformationen, Größeninformationen usw. beziehen, je nachdem, welchen spezifischen Immobilienbereich Sie zur Anpassung ausgewählt haben. Auf der Themenseite verfügt jeder Werttyp über entsprechende Hilfetextinformationen, die hilfreiche Tipps und Anweisungen dazu enthalten, welche spezifischen Informationen Sie bereitstellen müssen.
Referenzieren von Farben durch reservierte Syntax
Beim Festlegen von Farben im Bereich „Designs“ von App Builder, (Rahmenfarbe, Hintergrundfarbe usw.) können Sie auf den Namen einer der drei auf Designebene definierten Farben verweisen. Dies ermöglicht eine schnellere Anpassung bei Verwendung der Kopierfunktion.
Die reservierten Syntaxbegriffe, die Sie angeben können, sind:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Anpassen von Farben
Bei Verwendung reservierter Namen können die Farben auch in Bezug auf Helligkeit oder Dunkelheit und Deckkraft angepasst werden.
Die 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 Helligkeit und Dunkelheit der Farbe anzupassen, fügen Sie ein Pipe-Zeichen zusammen mit einem numerischen Dezimalwert hinzu (positiver Wert zum Erhöhen oder negativer Wert zum Abdunkeln der Farbe). Erwartete Werte sind -.9- .9.
Syntax: {PrimaryColor|.25} oder {PrimaryColor|-.25}
Um die Farbopazität anzupassen, fügen Sie das Tilde-Zeichen zusammen mit einem numerischen Dezimalwert hinzu. Erwartete Werte sind .1- .9.
Syntax: {PrimaryColor~.25}
Schaltfläche „Kopieren“
Jedes Design kann kopiert werden. Verwenden Sie diese Funktion, wenn Sie schnell mit einem Design loslegen möchten und legen Sie einfach die drei Farben für Primär, Sekundär und Komplementär fest. Es stehen viele vordefinierte Designs zur Verfügung, die ausgewählt und unverändert verwendet oder weiter angepasst werden können, um schnell loszulegen.
App Builder Vordefinierte Themen
App Builder wird mit mehreren vordefinierten Designs geliefert. Obwohl diese technisch bearbeitet werden können, gehen beim Upgrade alle Änderungen verloren.
Vorschläge
Wenn Sie eine dunkle Hintergrundfarbe angeben, achten Sie darauf, dass Sie eine Schriftfarbe verwenden, die für den gesamten Text lesbar ist. Nutzen Sie die in der Schriftfarbe enthaltene Textschatteneigenschaft, um zusätzlichen Kontrast hinzuzufügen.
Anhang
Komponenten
| Immobilienbereich | Schnittstellenname | Beschreibung |
|---|---|---|
| Seite | Container - Seite | Der Container für die Seiten |
| Container - Site | Der gesamte Site-Text, modale Fenster, andere Popups | |
| Tab - Aktiv | Aktive Tabs auf einer Seite | |
| Tab - Inaktiv | Inaktive Tabs auf einer Seite | |
| Tabs-Container | Der Container für die Tabs, die in verkleinerten Ansichtsfenstern erscheinen | |
| Seite - Titelleiste | Links | Links in der oberen Seitenleiste |
| Dropdown-Menüs - Container | Die Dropdown-Menüelemente | |
| Dropdown-Menüs - Menüelemente | Das Dropdown-Menü, geöffnet mit Menüelementen | |
| Titelleiste - Zurück-Schaltfläche | Die Zurück-Schaltfläche, die zur vorherigen Seite navigiert | |
| Titelleiste - Container | Die obere Leiste enthält den Seitennamen, die Navigation und die Schaltfläche „Mehr“ | |
| Titelleiste - Seitentitel | Das enthaltene Element in der oberen Leiste nur für den Seitentitel | |
| Titelleiste - Splitter | Kleine Splitter zwischen Elementen | |
| Seite - Aktionsschublade | Schubladenelemente | Aktionsschubladenschaltflächen |
| Site-Menü | Der Home-Link, der zur Homepage der Site führt | |
| Dienststatus - Offline | Das Dreiecksymbol zeigt an, dass der Dienst nicht ausgeführt wird | |
| Dienststatus - Online | Das Dreiecksymbol zeigt an, dass der Dienst ausgeführt wird | |
| Dienststatus - Unbekannt | Das Dreiecksymbol zeigt an, dass sich der Dienst in einem unbekannten Status befindet | |
| Seiten-Popup | Schließen-Schaltfläche | Die X-Schaltfläche, die die modalen Bedienfelder schließt |
| Container | Überlagerter Seitencontainer | |
| Container - Panel-Container | Panels, die als Overlay erscheinen | |
| Panel | Aktivitätsanzeige | Animierter Kreis, der die Netzwerkaktivität des Panels anzeigt |
| Panel - Container | Panel mit der Header und den Panel-Inhalten | |
| Panel - Inhalt | Panel-Inhaltscontainer | |
| Panel - Deaktiviert | Panels, die deaktiviert sind, weil sie unvollständige Bindungen haben | |
| Panel - Panel-Container | Der äußere Container jedes Panels | |
| Panel - Titelleiste | Der Bereich über einem Panel enthält den Panelnamen | |
| Bedienfeld - Symbolleiste | Symbolleiste | Symbolleiste mit Schaltflächen und Steuerelementen auf Bedienfeldebene |
| Panel - Einzeiliges Panel | Steuerelementsatz - Container | Fieldset-Container mit Formularsteuerelementen |
| Steuerelementsatz - Bezeichnung | Der Legendenteil des Feldsatzcontainers | |
| Steuerelementsatz - Panelinhalt | Der Inhaltscontainer mit einem einzeiligen Panel | |
| Feld - Bezeichnung | Der Titel, der das Feld in einem Formular darstellt | |
| Feld - Wert | Der Anzeigestatuswert des Felds auf einem Formular | |
| Panel - Board und Lane | Link zum Seitensymbol | Das Symbol, das auf eine Seite verweist |
| Kachel - Container | Das enthaltene Fliese eines gekachelten Paneltyps | |
| Kachel - Füller | Ein Füllelement, das dafür sorgt, dass umschlossene Bretter linksbündig ausgerichtet sind. Blenden Sie dies zusammen mit justify-content: center in die Mitte ein | |
| Kachel - Bahntitel | Die Überschrift über Bahnen oder Kachelgruppen | |
| Kachel - Ausgewählt | Das enthaltene Fliese eines gekachelten Bedienfeldtyps, wenn aktiv | |
| Kachel - Kachelplattenbehälter | Ein zusätzlicher Behälter, der alle Kacheln umhüllt | |
| Panel - Mehrzeilig | Feld - Gruppiert nach | Zellwerte, die beim Gruppieren nach gerastert werden |
| Header - Container | Header in einem Datenraster | |
| Header - Steuerelementsatz | Gruppierte Spalten in einem Datenraster | |
| Überschrift - Steuerelementsatzbezeichnung | Die Bezeichnung über jeder Steuerelementsatzgruppe | |
| Header - Beschriftung | Jede Header in einem Datenraster | |
| Zeile - Hinzufügen | Die hinzugefügte Zeile, die beim Einfügen in ein mehrzeiliges Panel erscheint | |
| Zeile - Zellen | Zellen in einem mehrzeiligen Panel | |
| Zeile - gerade | Jede gerade Zeile in einem Datenraster | |
| Zeile - Schaltfläche „Weitere Zeilen laden“ | Die Schaltfläche, die angezeigt wird, wenn Sie weitere Zeilen laden können | |
| Zeile - Ungerade | Jede ungerade Zeile in einem Datenraster | |
| Zeile - Ausgewählt | Die Zeile im Datenraster, die aktuell ausgewählt ist | |
| Zeile - Gesamt | Die Gesamtzeile eines Datenrasters | |
| Panel - Diagramm | Diagrammfarben - Farbe 1 | Die erste Reihe in einem Diagramm |
| Diagrammfarben - Farbe 2 | Die zweite Reihe in einem Diagramm | |
| Diagrammfarben - Farbe 3 | Die dritte Reihe in einem Diagramm | |
| Diagrammfarben - Farbe 4 | Die vierte Reihe in einem Diagramm | |
| Diagrammfarben - Farbe 5 | Die fünfte Reihe in einem Diagramm | |
| Diagrammfarben - Farbe 6 | Die sechste Reihe in einem Diagramm | |
| Diagrammfarben - Textfarbe | Der für verschiedene Teile eines Diagramms gerenderte Text | |
| Sonstiges - Flaggen | Die Flaggen auf einer Karte | |
| Sonstiges - Ausgewählt | Die hervorgehobene Diagrammfarbe | |
| Panel - Kalender | Container | Die Tage in einem Kalender |
| Ereignis - Container | Die Ereignisbox innerhalb eines Kalenders | |
| Ereignis - Ausgewählt | Das hervorgehobene Ereignisfeld in einem Kalender | |
| Heutiges Datum - Container | Die gesamte Box mit dem heutigen Datum | |
| Heutiges Datum - Tag | Der Zahlenteil des heutigen Datums | |
| Heutiges Datum - Ausgewählt | Der ausgewählte Tag im Monat | |
| Steuerelemente | Badge | Das Badge-Element, das sich an andere Steuerelemente anfügt |
| Symbolfelder | Steuerelementtypen für Symbolfelder | |
| Zeilensteuerung | Zeilensteuerungen, die zum Aufteilen von Inhalten auf einem Panel verwendet werden | |
| Fortschrittsbalken | Fortschrittsbalkenelement | |
| Button - Aktivitätsanzeige | Das sich drehende Symbol zeigt Aktivität an | |
| Button - Container | Schaltflächen auf einem Panel | |
| Felder - Zusätzliche Feldcontainer | Zusätzlicher Inhalt von Formularfeldern, wie z. B. Listenfeldoptionen. | |
| Felder - Immer bearbeitbar | Der Hover-Effekt über einem immer bearbeitbaren Feld | |
| Felder - Automatische Bearbeitung | Der Hover-Effekt über einem Feld zur automatischen Bearbeitung | |
| Felder - Bearbeitungsstatus | Formularelemente auf der Seite | |
| Felder - Bearbeitungsstatus in Verwendung | Formularelemente auf der Seite, wenn im Fokus oder anderweitig aktiv | |
| Felder - Formularsteuerelement | Formularsteuerelement | |
| Felder - Nicht editierbar | Alle nicht editierbaren Textwerte aus einer Datenquelle | |
| Felder - Pflichtfeld | Das kleine Farbelement, das anzeigt, dass ein Feld Pflichtfeld ist | |
| Felder - Ausgewählt | Verschiedene hervorgehobene Datenelemente wie Listen oder Tage in einem Datumsbereich | |
| Links - Chevron | Das Chevron, das nach einem Hyperlink erscheint | |
| Links - Container | Links innerhalb der Anwendung | |
| Validierungen | Bestätigung | Bestätigungsaufforderungen für Ereignisse wie Löschen |
| Fehler | Validierungsergebnisse vom Typ Fehler | |
| Ausnahme | App Builder Ausnahmen, die am unteren Bildschirmrand angezeigt werden | |
| Informationen | Validierungsergebnisse vom Typ Informationen | |
| Warnung | Validierungsergebnisse vom Typ Warnung |
Werttypen
| Name des Werttyps | Eingabebeschreibung | Hilfetext |
|---|---|---|
| 1 Hintergrundverlauf | Ein Farbverlauf von einem Farbwert zum anderen | Wert1 und 2 werden für die Bis- und Von-Farben verwendet. Wert3 ist für die Rahmenfarbe. |
| 2 Hintergrundfarbe | Farbcode oder benannter Wert, der zum Füllen des gesamten Elements verwendet wird | Wert1 wird für die Hintergrundfarbe verwendet. Kann ein HTML-Code sein oder verwenden Sie beispielsweise {PrimaryColor}, um die Farbe des Designs zu verwenden. |
| 3 Hintergrundbild | URL oder Base64 -Bildwert | Wert1 ist entweder eine URL oder ein Base64-kodiertes Bild. Klicken Sie mit der rechten Maustaste auf App Builder Bild und zu verwendende URL kopieren App Builder gehostete Bilder. Value2 wird verwendet, um das Bild entweder zu strecken oder zu wiederholen. Geben Sie zum Strecken „cover“ ein, andernfalls lassen Sie das Feld leer, um das Bild zu wiederholen (zu Fliese). |
| 4 Rahmenfarbe | Farbcode oder benannter Wert | Für die Rahmenfarbe wird Value1 verwendet. |
| 5 Icon - Glyph | Glyphicon-Code, nicht benannter Wert | Für den Glyphicon-Code wird Value1 verwendet. |
| 6 Schriftfarbe | Farbcode oder benannter Wert | Wert1 wird für die Schriftfarbe verwendet. Wert2 muss ein bestimmtes Format haben: 0 1px 1px #222. Ändern Sie den Farbcode, um die tatsächliche Farbe zu beeinflussen. |
| 7 Erweiterte Stile | Legen Sie erweiterte CSS-Werte für die Eigenschaften „Anzeige“, „Deckkraft“ und „Übergang“ fest | „Value1“ verbirgt Elemente, indem der Wert auf „keine“ gesetzt wird. „Value2“ legt den Rand des Elements fest, während „Value3“ die Polsterung festlegt. „Deckkraft“ wird verwendet, um die Deckkraft oder Transparenz eines Elements festzulegen. Erwartete Werte sind 0,1 - 0,9. Beispiel: 0,5 |
| 8 Hintergrund erweitert | Alle Hintergrund-bezogenen Optionen | Wert1 stellt die Kurzform des Hintergrunds dar. Damit können Sie alle Hintergrundoptionen auf einmal angeben. Wert2 ist die Eigenschaft für die Hintergrundgröße. |
| 9 Box | Schatteneffekt auf Boxen | Wert1 stellt die Boxschattenwerte dar, während Wert2 für die Farbe des Schattens verwendet wird. |
| 10 Schriftart - Erweitert | Festlegen verschiedener Schriftstile wie Typ, Größe und Fettdruck | Wert1 wird für die Schriftartnamen verwendet. Verwenden Sie eine durch Kommas getrennte Liste. Wert2 ist die Schriftgröße. Dies kann eine beliebige Maßeinheit sein. Wert3 ist der Fettdruck. Sie können einen Wert eingeben oder „fett“ oder andere reservierte Wörter verwenden. |
| 11 Randradius | Die Krümmung eines Randes. Verwenden Sie 100 %, um einen Kreis zu erstellen. | Value1 wird verwendet, um die Ecken eines Elements abzurunden. |
| 12 Flexbox-Fliese | Festlegen von Stilen, die sich auf Board-Panel-Kacheln auswirken. | Die Werte 1 und 2 steuern die Größe der Kacheln. |
| 13 Text - Erweitert | Textänderungen | Wert1 legt die Textdekoration fest, die zum Hinzufügen von Unterstreichungen und anderen Eigenschaften verwendet wird. Wert2 legt die Texttransformation fest, die zum Großschreiben von Text verwendet wird. Wert3 legt den Schriftstil fest, der für Kursivschrift verwendet wird. |
| 14 Ausrichtung | Legt die Ausrichtung für verschiedene Elemente in einem angegebenen Bereich fest | Mit Wert1 wird die vertikale Ausrichtung eines Inline-Containers festgelegt, z. B.: Mitte. Mit Wert2 wird die horizontale Ausrichtung von Text festgelegt, z. B.: Mitte. |
| 15 Schriftart | Legen Sie verschiedene Informationen zum Schriftstil fest, z. B. Schriftart, -größe und wie dick oder dünn (Fettdruck) Zeichen angezeigt werden sollen | Wert 1 wird verwendet, um die Schriftart für ein Element anzugeben. Verwenden Sie eine durch Kommas getrennte Liste. Beispiel: Calibri, Arial, serifenlos. Wert 2 wird verwendet, um die Schriftgröße festzulegen. Die Optionen für die Schriftgröße reichen von xx-klein bis xx-groß. Beispiel: klein. Wert 3 wird verwendet, um die Schriftstärke festzulegen, d. h. wie dick oder dünn Schriftzeichen auf der Seite angezeigt werden. Die Optionen für die Schriftstärke reichen von normal bis fetter. Eine Schriftstärke von 400 entspricht normal, 700 entspricht fett. Beispiel: fett. |
| 16 Abstand | Geben Sie Abstandswerte für den Inhalt an, der in einem Container erscheint | Wert1 legt die Zeilenhöhe fest. Die Eigenschaft „Zeilenhöhe“ gibt die Höhe eines Elements an. Negative Werte sind nicht zulässig. Beispiel: 1,4em. Wert2 wird verwendet, um den Rand festzulegen. Die Eigenschaft „Rand“ wird verwendet, um Platz um Elemente herum zu schaffen. Negative Werte sind nicht zulässig. Für 4 Seiten eines Elements kann ein Rand definiert werden: oben, rechts, unten, links. Wert 3 wird verwendet, um die Polsterung festzulegen. Die Eigenschaft „Polsterung“ wird verwendet, um Platz um den Inhalt eines Elements herum zu schaffen. Für 4 Seiten eines Elements kann eine Polsterung definiert werden: oben, rechts, unten, links. |