Styles
In Lobster Data Platform / Orchestration bezeichnet der Begriff "Style" einen Satz von Definitionen für Eigenschaften, die das allgemeine Erscheinungsbild der Anwendung (Farben, Formen, usw.) im Browser zentral steuern.
Per Konfiguration können mehrere unterschiedliche solcher Styles angelegt sein, die abhängig von priorisierten Auswahlmechanismen für eine Browser-Sitzung herangezogen werden:
|
Entität (Klasse) |
Feld |
Auswahlmechanismus |
Anmerkungen |
|
Firmen |
"Stylename" |
Wenn im Konto der Firma der Session ein Style (s. Styles) angegeben ist, gilt dieser immer für die zugehörige Lobster Data Platform / Orchestration-Sitzung. ►HINWEIS◄ Nach dem Abmelden einer Lobster Data Platform / Orchestration-Sitzung bleibt der durch die zuletzt angemeldete Firma der Session ausgewählte Style wirksam, bis eines der folgenden Ereignisse eintritt:
|
|
|
Site-Konfigurationen |
"Default Style" (defaultStyle) |
Site-Konfigurationen können auf einen "Default Style" aus den konfigurierten Styles verweisen, der für eine Browser-Sitzung abhängig von der für den Zugriff auf Lobster Data Platform / Orchestration verwendeten URL gilt, solange er nicht durch eine Zuweisung für die Firma der Session übersteuert wird. Falls keine Site-Konfigurationen existieren oder keine der für eine Browser-Sitzung relevanten Site-Konfigurationen eine Auswahl für den "Default Style" bedingt, wird nach Standard-Styles (s. unten) gesucht. |
|
|
Styles |
"Style-Name" |
Soweit sich die Auswertung der Firma der Session (s. oben) und der Site-Konfigurationen (s. oben) keine Style-Auswahl diktiert, wird nach Styles gesucht, deren "Style-Name" (styleName) diese als Standard-Style qualifiziert. Per Konvention qualifizieren folgende "Style-Namen" Kandidaten für den Standard-Style:
Beide Styles können natürlich auch direkt (von Firmen oder Site-Konfigurationen) adressiert werden und werden dann mit höherer Priorität berücksichtigt. |
|
►WICHTIG◄ Style-Name "default" nicht verwenden
Anders als in früheren Versionen dieser Dokumentation empfohlen, sollte der "Style-Name" default NICHT als "Style-Name" zugewiesen werden, um einen Standard-Style zu definieren.
Konflikte mit der internen Verwendung desselben Namens im Kontext von Styles können in besonderen Fällen zu unerwünschten Ergebnissen führen.
Wie empfehlen die Verwendung von pro als "Style-Name" für den Standard-Style.
Sofern der "Style-Name" default bereits verwendet wird, sollte der default-Style in pro umbenannt oder durch eine Kopie mit diesem Namen ersetzt werden. Falls explizite Verweise auf den Namen default (ausgehend von Firmen oder Site-Konfigurationen) existieren, müssen diese anschließend von default auf pro umgestellt werden.
Die Abbildung zeigt den Dialog zur Konfiguration von Styles.
(1) Standard-Ribbon: Styles können erzeugt, gespeichert, gelöscht und kopiert werden.
(2) Style Name: Der Name dient zur Identifikation der Styleeinstellungen. Dieser Name muss pro Style Deklaration eindeutig gewählt werden. Um ein Standardstylesetting für das System zu definieren, muss der Style Name lediglich auf "default" gesetzt werden. Vor der Version 4.6.0 war es "scm".
(3) Style Vorlage: Die Style Vorlage für die verfügbaren Eigenschaften und Einstellungen. Verfügbare Vorlagen müssen über die Style Vorlagen verwaltet werden.
(4) Style Eigenschaften: In diesem Tab-Reiter können die Werte der Style-Eigenschaften bearbeitet werden.
(5) Experteneinstellungen: Ermöglicht das Definieren von eigenen Cascading Style Sheets (CSS) (für Details, siehe unten)
(6) Vorschau / Zurücksetzen: Der ausgewählte Style wird beim Klick auf Vorschau temporär gesetzt, um in der laufenden Sitzung Einstellungen überprüfen zu können. Per Klick auf Zurücksetzen kann der gespeicherte Stand für den Style der Sitzung wieder aktiviert werden.
Erst beim Speichern (1) wird der Style im System aktualisiert und freigegeben. Andere angemeldete Sitzungen müssen ihren Client neu laden, um Änderungen sehen zu können.
►HINWEISE◄
Wenn beim Klick auf "Vorschau" der Style ausgewählt ist, der für die aktuelle Sitzung ohnehin gilt, zeigt die Vorschau den ggf. bearbeiteten Stand inkl. der noch nicht gespeicherten Anpassungen. "Zurücksetzen" berücksichtigt dagegen den gespeicherten Stand für alle Merkmale. Die Änderungen selbst werden dabei aber nicht auf den gespeicherten Stand zurückgesetzt, so dass die Bearbeitung fortgesetzt oder "wie in der Vorschau gesehen" gespeichert werden kann.
Sollen Änderungen nach Ansicht in der Vorschau dagegen wirklich verworfen werden, sollte die Schaltfläche "Abbrechen" im Ribbon (1) gedrückt oder in der Liste (4) ein Wechsel zu einem anderen Style ausgeführt werden. Sofern überhaupt "ungespeicherte Änderungen" vorliegen, erscheint dann eine Rückfrage, ob diese verworfen werden sollen.
Änderungen an einem Style werden grundsätzlich und für alle Anwender erst bei einer erneuten Anmeldung wirksam. Auch wenn der in der aktuellen Sitzung anwendbare Style gerade bearbeitet wurde, wird der neue Stand beim Speichern nicht automatisch sichtbar. Allerdings zeigt ein Klick auf "Zurücksetzen" sofort die Formatierung, die sonst erst bei der nächsten Anmeldung berücksichtigt würde.
Eigenschaften
Die Abbildung zeigt die Übersicht der Eigenschaften des ausgewählten Styles.
Der Wert der ausgewählten Eigenschaft (1) kann bearbeitet werden (3). Wenn möglich wird in der Übersicht eine Vorschau (2) angezeigt.
Wenn die ausgewählte Eigenschaft dem Standardwert der Vorlage entspricht, wird lediglich ein Knopf "Standard überschreiben" (3) angezeigt. Wird dieser gedrückt, kann der Wert entsprechend geändert werden.
In der Spalte "Überschrieben" wird ebenfalls angezeigt, ob der eingestellte Werte von der Vorlage abweicht oder nicht.
(4) ermöglicht das Definieren eigener Eigenschaften. Hierbei kann sowohl der Name als auch der Typ der Eigenschaft festgelegt werden (siehe Bild).
Der Name der Eigenschaft darf noch nicht in der Liste der bisherigen Eigenschaften vorkommen. Nach dem Klicken auf "OK" wird die neue Eigenschaft, wie die anderen, in der Liste angezeigt.
Bearbeiten/Zurücksetzen von Eigenschaften
Abhängig vom Typ der Eigenschaft (z.B. Bild, Größe, Farbe, ...) werden unterschiedliche Bearbeitungselemente (1) dargestellt. Hier im Beispiel handelt es sich um eine Eigenschaft vom Typ "Bild", daher wird ein Bild-Picker Element mit Vorschau angeboten.
Mit (2) kann der Wert der Eigenschaft wieder auf den Vorlagenstandard zurückgesetzt werden.
Neben dem Festlegen eines fixen Wertes, kann mit der Auswahlbox (3) auch der Wert einer anderen Eigenschaft geerbt werden (siehe nächstes Unterkapitel).
Vererbung von Werten
Um die Konfiguration zu vereinfachen, sind in der Standard Style Deklaration viele Style Eigenschaften so definiert, dass der Wert von einem anderen Wert vererbt wird.
Ob eine Eigenschaft ihren Wert erbt oder nicht, wird in der Spalte "Vererbt" (1) angezeigt. Es kann auch entsrpechend gefiltert werden. Beim anpassen der grundlegenden Farbpalette empfielt es sich nach allen "nicht erbenden" Eigenschaften zu suchen, da andere Farben dann den korrekten Farbwert automatisch übernehmen.
Ein vererbter Wert kann über die Auswahlbox (3) der ausgewählten Eigenschaft eingestellt werden. Dieser wird auch in der "Style Wert" Spalte der Liste angezeigt.
Eigenschaft Typen
Wie oben bereits erwähnt, gibt es verschiedene Typen von Eigenschaften.
Folgende werden unterschieden:
|
Typ |
Beschreibung |
Komponente |
|
Farbe |
Ein statischer Farbwert |
|
|
Bild |
Eine relative Bild URL |
|
|
Größe |
Ein Größenwert mit vordefinierten Einheiten.
|
|
|
Schriftgröße |
Schriftgröße als Fixwert |
|
|
Zahl |
Eine Zahl mit beliebiger CSS Einheit. |
|
|
Alpha |
Ein Wert, welcher eine Deckkraft (CSS opacity) beschreibt. |
|
|
Externes Theme |
Ein Freitext, um Themes von externen Bibliotheken (z.B. ACE Editor) festlegen zu können. |
|
|
Bool'scher Wert |
Ein bool'scher Wert (wahr/falsch) |
|
Experteneinstellungen
Im Tab-Reiter "Experteneinstellungen" können CSS-Style-Einstellungen für den HTML-Client festgelegt bzw. überschrieben werden. So können spezielle Sonderfälle bzgl. der Formatierung geregelt werden. U. a. in Verbindung mit der Aktion zur Manipulation der CSS-Klasse von Formularelementen ergeben sich hier interessante Erweiterungsmöglichkeiten für eine dynamische Formatierungslogik in Formularen.
Der "Experteneinstellungen" Dialog bietet eine Verwaltung von benutzerdefinierten Cascading Style Sheets (CSS) an. Bereits angelegte Stylesheets werden im Baum links (1) angezeigt. Neue Stylesheets können via Kontextmenü (Rechtsklick) oder über die drei Punkte eines Baumelements angelegt, aktiviert/deaktiviert oder gelöscht werden.
Der Styleheetbaum wird in zwei Bereiche unterteilt "Pre" (A) und "Post" (B). Stylesheets im Bereich "Pre" werden vor den nativen Lobster Data Platform / Orchestration Applikationsstyles ausgewertet, wohingegen die Stylesheets im Bereich "Post" danach ausgewertet werden.
Zusätzlich können Prioritäten für die Stylesheets hinterlegt werden. Je höher die Priorität, desto später werden sie ausgewertet. Bei gleicher Priorität werden sie in der aufgelisteten Reihenfolge ausgewertet.
Prioritäten müssen eigentlich nur dann festgelegt werden, wenn die Überschreibung von CSS Definitionen und Regeln mit denen der Style Vorlage gezielt gesteuert werden soll.
Wird ein Stylesheet im Baum ausgewählt kann dieses im rechten Bereich bearbeitet werden.
In der Kopfzeile (2) kann der Name und die Priorität eingestellt werden, sowie festgelegt werden, ob das Stylesheet aktiv ist oder nicht. Ist ein Stylesheet nicht aktiv, wird es auch nicht ausgewertet.
Im Editorbereich (3) kann standardisierter CSS3 Code geschrieben werden, welcher direkt in das geladene Stylesheet des Clients übernommen wird.
Tip: Eigenschaften aus der Palette können über das Lobster Data Platform / Orchestration-proprietäre Makro «EIGENSCHAFTSNAME» verwendet werden.
Diese variablen Werte können auch direkt über das Palettensymbol 
(4) ausgewählt und direkt an der Cursorposition eingefügt werden.
.myClass { color: «primaryColor»;}
►WARNUNG◄
Diese Möglichkeiten sollten nur von CSS-Experten und unter Berücksichtigung von negativen Einflüssen auf die Browser-Peformance genutzt werden. Anpassungen in den Experteneinstellungen und die Untersuchung von daraus resultierenden Problematiken sind ausdrücklich nicht Gegenstand des Lobster Data Platform / Orchestration-Supports. Außerdem kann die Kompatibilität von Expertenteinstellungen mit späteren Releases generell nicht gewährleistet werden.
Insbesondere das Ändern der Schriftgröße, des Schriftstils oder der Schriftart kann zu unvorhergesehenen Layoutproblemen führen, da sämtliche Feldgrößen und Layoutmaße an der Lobster Data Platform / Orchestration-Standardschriftart und Schriftgröße ausgerichtet wurden!
Besonders beim Ändern der Schriftgröße sollte bedacht werden, dass auch FontAwesome Icons einer Schriftart angehören und somit mitskaliert werden, wenn diese nicht explizit eine Größe gesetzt bekommen haben!
Nachfolgende Beispiele erläutert das Problem mit anderen Schriftarten: