Bild- oder Icon-Ressourcen können in Lobster Data Platform / Orchestration in unterschiedlichen Zusammenhängen referenziert werden, um anzuzeigende Grafiken festzulegen.
Typischerweise werden hierfür spezielle Eingabeelemente zur Auswahl solcher Ressourcen angeboten, die entweder (wie im folgenden Screenshot für die Dynamische Aufzählung Allgemeines Geschäftsobjekt) eine Vorschau beinhalten ...

images/download/attachments/62850922/image2019-4-3_9-56-20-version-1-modificationdate-1603695302521-api-v2.png

oder ein kompakteres Format (ohne Vorschau) verwenden (wie für das Bild/Icon-Element im Formulardesigner):

images/download/attachments/62850922/image2019-4-3_9-58-39-version-1-modificationdate-1603695302514-api-v2.png

In beiden Fällen öffnet der Klick auf den Button einen Dialog, über den die Referenz ausgewählt werden kann, statt eine Verknüpfung direkt einzugeben.

URL-Formate für Bildressourcen

Bildressourcen werden in Lobster Data Platform / Orchestration über ein proprietäres URL-Format referenziert:

[<Typ>://]<Typspezifische Adresse>

Der optional vorangestellte Typ definiert das Schema, nach dem die als Typspezifische Adresse bezeichnete Zeichenfolge interpretiert werden soll (s. folgende Tabelle).

Leerzeichen in Datei- und Ordnernamen

Beginnt eine Bild-URL nicht mit dem Kürzel für einen der unten aufgelisteten Typen, dann wird die als Typspezifische Adresse angegebene Zeichenfolge insgesamt als Referenz vom Typ img interpretiert.

In diesem Sonderfall werden Leerzeichen innerhalb der Typspezifischen Adresse nicht als Trennzeichen zwischen mehreren Bild-URLs (siehe Abschnitt "Untergeordnete Bilder", unten) gewertet, sondern als Bestandteil einer übergreifenden URL.

Beispiele:

Die Typspezifische Adresse images/custom icons/container terminal.png verweist nur ohne das Präfix img:// auf ein Bild mit dem Namen "container terminal.png" im Unterverzeichnis "images/custom icons" des web-Ordners.
Mit dem Präfix img:// wird dieselbe Typspezifische Adresse als Ensemble aus drei Bildern interpretiert, weil die Leerzeichen als Trennzeichen gelten:
- img://images/custom icons/container terminal.png
- Es ist zwar eher unwahrscheinlich, dass diese Textfragmente auf existierende Dateien im Server-Dateisystem verweisen, aber ein Zugriff auf die Datei "container terminal.png" gelingt so sicher nicht.
Damit eine Typspezifische Adresse mit Leerzeichen in Datei- oder Ordnernamen in Verbindung mit dem Präfix img:// korrekt interpretiert wird, müssen die Leerzeichen "URL-kodiert", also durch die Zeichenfolge %20 ersetzt werden:
- Im Beispiel wäre also img://images/custom%20icons/container%20terminal.png als Typspezifische Adresse zielführend.

Typen

Typ	Erklärung	Beispiel
img (oder: kein Präfix)	Referenz zu einer Bilddatei in einem Standardbildformat (JPEG, PNG, GIF, usw.) definiert als relativer Pfad ausgehend vom "web"-Ordner des Lobster Data Platform / Orchestration-Systems	assets/loginLogo.png oder (gleichwertig): img:// assets/loginLogo.png
fa	Referenz auf ein FontAwesome-Icon, wobei der eigentliche URL-Pfad den Namen des Icons angibt. Aktuell sind FontAwesome-Icons der Version 4 verfügbar. Eine Liste der verfügbaren Icons kann online eingesehen werden: https://fontawesome.com/icons?d=gallery	fa://fa-plus Darstellung:
rs	ermittelt die eigentliche Referenz über die Sprachverwaltung oder Firmenspezifische Sprachanpassungen mit der folgenden Syntax für den URL-Pfad: rs://<bundle>/<resource> Hauptvorteil: Icons können über eine zentrale Stelle gepflegt werden, was einen systematischen Austausch der Icons ermöglicht, ohne an sämtlichen relevanten Stellen die Referenzen angepasst werden müssen.	rs://icons/addSymbol wobei der Spracheintrag für die Resource "addSymbol" im Bundle "icons" auf den Pfad `fa://fa-plus` verweist. Darstellung:
svg	ermittelt den XML-Code eines SVG-Bilds über die Sprachverwaltung oder Firmenspezifische Sprachanpassungen mit der folgenden Syntax für den URL-Pfad: svg://<bundle>/<resource>	svg://icons/germany
cfg	Aneinanderreihung mehrerer Bilder/Icons durch Verketten der Referenzen über die folgende Syntax für den URL-Pfad: cfg://["Bild1URL", "Bild2URL", ...]	cfg://["fa://fa-file-text", "fa://fa-chevron-right", "fa://fa-truck", "fa://fa-chevron-right", "fa://fa-home"] Darstellung: ►HINWEIS◄ "fa://fa-spacer" fügt einen Abstandshalter ein: cfg://["fa://fa-truck", "fa://fa-spacer","fa://fa-spacer" ,"fa://fas-truck","fa://fal-truck","fa://fa-truck","fa://far-truck"] Darstellung:

Untergeordnete Bilder (tiefgestellt)

Werden Referenzen auf Bilder über Leerzeichen verbunden, definiert dies eine Unterordnungsbeziehung zwischen diesen Bildern. Das rechts vom Leerzeichen referenzierte "untergeordnete" Bild erscheint verkleinert und tiefgestellt als Überblendung zum übergeordneten Vorgänger. Eine Verkettung mehrerer Referenzen per Leerzeichen (s. letztes Beispiel in der Liste), ergibt eine Kaskade aus immer kleineren Bildern.

Beispiel

URL	Ergebnis
`fa://fa-file`
`fa://fa-plus`
`fa://fa-file-text-o fa://fa-plus`
`fa://fa-home fa://fa-truck fa://fa-home`

Erweiterte Konfiguration (nur für Experten)

Neben den oben gezeigten einfachen Anwendungsmöglichkeiten können auch erweiterte Style-Einstellungen definiert werden, was allerdings ein Grundverständnis von CSS (Cascading Style Sheets) voraussetzt.

►HINWEIS◄ Die verwendeten Style-Eigenschaften müssen selbstverständlich für das verwendete Bildformat anwendbar sein. So macht es keinen Sinn, für ein Standardbildformat (etwa ein Foto) die Farbeigenschaft "color" zu setzen.

Der Aufbau einer erweiterten Konfiguration verwendet das JSON-Format für den Pfadteil der URL, was z. B. so aussehen kann:

{
	"url": "BildURL",
	"style": {
		"css-property1": "css value",
		"css-property2": "css value",
		...
	},
	"cssClass": "css-class-name1 css-class-name2 ..."
}

Die Eigenschaften "style" und "cssClass" sind optional und können auch unabhängig voneinander einzeln verwendet werden.

Erläuterung der Konfigurationsfelder

Feld	Beschreibung
url	die Ressource-URL des Bildes/Icons (siehe Abschnitt "URL-Formate für Bildressourcen" oben)
style	setzt CSS-Style-Eigenschaften (ebenfalls im JSON-Format) Namen von CSS-Eigenschaften erscheinen als Feldnamen im JSON-Objekts. Werte von CSS-Eigenschaften erscheinen als Feldwerte des JSON-Objekts.
cssClass	definiert einen oder mehrere (über Leerzeichen verkettete) Namen von CSS-Klassen, die für das Icon angewendet bzw. "gesetzt" werden sollen ►HINWEIS◄ Eine Kurzform zum Setzen von CSS-Klassen ist das Anhängen des Klassennamen an die Bild-URL mit einem Punkt: nur eine CSS-Klasse: `fa://fa-check-circle.cssClassName` mehrere CSS-Klassen: `fa://fa-check-circle.cssClass1.cssClass2.cssClass3` Es existieren bereits einige vordefinierte CSS-Klassen für bestimmte gängige Layout-Einstellungen im System:
	CSS-Klassennamen	Erklärung
	Standardfarben des aktiven Styles
	lb-primary / lb-primary-contrast	Styledesigner Farbe: primaryColor / primaryContrastColor
	lb-secondary / lb-secondary-contrast	Styledesigner Farbe: secondaryColor / secondaryContrastColor
	lb-inactive / lb-inactive-contrast	Styledesigner Farbe: inactiveColor / inactiveContrastColor
	lb-warn / lb-warn-contrast	Styledesigner Farbe: warnColor / warnContrastColor
	lb-error / lb-error-contrast	Styledesigner Farbe: errorColor / errorContrastColor
	lb-success / lb-success-contrast	Styledesigner Farbe: successColor / successContrastColor
	Layout und Anordnung
	lb-no-image-shadow	deaktiviert den Kontrastschatten von Sub-Bildern Beispiel fa://fa-home fa://fa-truck.lb-success fa://fa-home fa://fa-truck.lb-success.lb-no-image-shadow
	lb-stacked	zeichnet das nachfolgend referenzierte untergeordnete Bild nicht tiefgestellt sondern als direkte Überlappung für das übergeordnete Bild, für das die CSS-Klasse gesetzt wird: Beispiel: `fa://fas-square.lb-stacked fa://fas-check.fa-inverse` Ergebnis:
	`lb-pad`	fügt einen Randabstand (Padding) links und rechts vom Bild hinzu
	*nur FontAwesome-Icons* (fa) unterstützten die folgenden Klassen
	fa-flip-horizontal / fa-flip-vertical / fa-flip-both	spiegelt das Icon horizontal, vertikal oder in beiden Richtungen
	fa-rotate-90 / fa-rotate-180 / fa-rotate-270	rotiert das Icon um 90, 180 oder 270 Grad (im Uhrzeigersinn)
	fa-inverse	invertiert das Icon (Vordergrundfarbe wird weiß)
	Zusätzlich können eigene CSS-Klassen in den Experteneinstellungen über Styles definiert werden.

Beispiele

URL	Ergebnis
fa://{ "url": "fa-check-circle", "cssClass": "lb-success" }
fa://{ "url": "fa-check-circle", "style": { "color": "#980f45" } }

Erweitertes Anwendungsbeispiel

Ein klassischer Anwendungsfall für das Aneinanderreihen von Icons ist das Visualisieren von Trackingstatus.

Ein zusammengesetztes Symbol für den Trackingstatus "Versendet" könnte z. B. wie die folgende Aneinanderreihung von Icons aussehen, wobei die einzelnen Icons Prozessstufen repräsentieren, während die Farbintensität den Fortschritt entlang der Kette visualisieren soll:

images/download/attachments/62850922/image2020-4-28_16-23-43-version-1-modificationdate-1603695302443-api-v2.png

Um eine derartige Anforderung übersichtlich und wartungsfreundlich lösen zu können, werden zunächst alle einzelnen Icons entlang der Kette als Einträge in der Sprachverwaltung konfiguriert.

Für dieses Beispiel wird dazu ein benutzerdefiniertes Bundle "tsIcons" eingeführt, in dem die einzelnen Resource-Namen für jedes Symbol "sprechend" zugeordnet werden.

Die folgende Tabelle zeigt sämtliche angelegte "Spracheinträge" mit den durch die "Lokalisierung" definierten Icons:

Bundle	Resource	Wert (z. B. für die Standardsprache Englisch)	Vorschau
tsIcons	shipment	fa://fa-file-text
	shipment-active	rs://{ "url": "tsIcons/shipment", "cssClass": "lb-secondary" }
	shipment-inactive	rs://{ "url": "tsIcons/shipment", "cssClass": "lb-inactive" }
	transition	fa://fa-chevron-right.lb-pad
	transition-active	rs://{ "url": "tsIcons/transition", "cssClass": "lb-primary" }
	transition-inactive	rs://{ "url": "tsIcons/transition", "cssClass": "lb-inactive" }
	enroute	fa://fa-truck
	enroute-active	rs://{ "url": "tsIcons/enroute", "cssClass": "lb-secondary" }
	enroute-inactive	rs://{ "url": "tsIcons/enroute", "cssClass": "lb-inactive" }
	delivered	fa://fa-home
	delivered-active	rs://{ "url": "tsIcons/delivered", "cssClass": "lb-secondary" }
	delivered-inactive	rs://{ "url": "tsIcons/delivered", "cssClass": "lb-inactive" }

Auf der Grundlage eines solchen Satzes von Icons, lassen sich verkettete Trackingstatus-Icons extrem einfach konfigurieren oder sogar automatisch generieren.

Der oben schon demonstrierte Status "Versendet" ergibt sich dann aus folgender URL:

cfg://["rs://tsIcons/shipment-active", "rs://tsIcons/transition-active", "rs://tsIcons/enroute-active", "rs://tsIcons/transition-inactive", "rs://tsIcons/delivered-inactive"]

Analog hierzu kann einfach und schnell auch einem weiteren Trackingstatus "Abgeliefert" die passende Icon-Verkettung zugeordnet werden:

cfg://["rs://tsIcons/shipment-active", "rs://tsIcons/transition-active", "rs://tsIcons/enroute-active", "rs://tsIcons/transition-active", "rs://tsIcons/delivered-active"]

Ergebnis:

images/download/attachments/62850922/image2020-4-28_16-58-11-version-1-modificationdate-1603695302403-api-v2.png

Die abgestufte Vorgehensweise bietet noch einen weiteren Vorteil: Ein Basis-Icon für einen Bestandteil in mehreren Status kann bei Bedarf einfach global ersetzt werden.

So wird für das nachfolgende Ergebnis lediglich die Lokalisierung für den Spracheintrag "tsIcons/shipment" von "fa://fa-file-text" auf "fa://fa-cubes" abgeändert, damit anstelle des Dokument-Symbol eine Gruppe von Schachteln erscheint:
Ergebnis:

images/download/attachments/62850922/image2020-4-28_17-0-50-version-1-modificationdate-1603695302390-api-v2.png

Die Änderung schlägt sofort auf alle Trackingstatus-Icons (hier: "Abgeliefert" und "Versendet") durch, die sich direkt oder indirekt auf den Spracheintrag mit dem geänderten "Basis-Icon" beziehen.

Weitere Beispiele zur Kombination von Icons:

Wie bereits weiter oben in diesem Kapitel erklärt, können Bildern über die Notation "BildURL.cssKlassenName1.cssKlassenName2" CSS Klassen hinzugefügt werden. Im Abschnitt "Erweiterte Konfiguration" wurden die vom System bereitgestellten Klassen aufgelistet.

Icons stapeln

Mit der Klasse "lb-stacked" können Bilder aufeinander gestapelt werden.

Beispiele:

URL	Ergebnis
fa://fas-square
fa://fas-check.lb-primary
`fa://fas-square.lb-stacked fa://fas-check.lb-primary`
`fa://fas-square.lb-stacked fa://fa-home fa://fas-check.lb-primary`

Invertieren (nur "fa://" FontAwesome-Icons)

Mit der Klasse "lb-inverse" wird das FontAwesome-Icon zur Vordergrundfarbe weiß invertiert.

URL	Ergebnis
fa://fas-square.lb-stacked fa://fas-check
`fa://fas-square.lb-stacked fa://fas-check.lb-inverse`