Skins für WebOffice flex

Mit WebOffice flex können Sie die Benutzeroberfläche adaptieren bzw. Ihre eigenen Stile für bestimmte Projekte oder die gesamte Applikation erzeugen.

Alle für die Individualisierung benötigten Dateien finden Sie im Verzeichnis: C:\Tomcat\webapps\<WebOffice application>\pub\client_flexjs\skins.

• Individualisieren Sie die WebOffice flex Benutzeroberfläche (für alle Projekte), indem Sie die Dateien im bereits existierenden Ordner "user" adaptieren.
• Erstellen Sie Ihren eigenen Skin für WebOffice flex auf Projektlevel (projektspezifisch), indem Sie den sampleskin Ordner nutzen.

Hinweis: Weitere Informationen über vordefinierte Skins für WebOffice flex finden Sie im Kapitel Projektskins. Bitte führen Sie in den vordefinierten Skins (blue, navajowhite3, olivedrab, prooffice) keinerlei Änderungen durch, da diese durch das WebOffice Team gepflegt werden und in jedem WebOffice Service Pack oder Release inkludiert sein können.

Um einen eigenen Skin zu erzeugen,

1. erstellen Sie eine Kopie des Ordners sampleskin

2. benennen Sie den Ordner auf Ihren Wunschnamen um

3. ändern Sie die Definitionen in diesem neuen Ordner für Änderungen auf Projektlevel

Jeder Skin Ordner enthält die folgenden Dateien:

• colors.jsp: enthält Farbdefinition, die die Benutzeroberfläche beeinflussen. Die Farben sind in der Standard CSS RGB Syntax "Rot, Grün, Blau" definiert.
• properties.json: eine JSON-Datei, mit der Änderungen der Esri Javascript API durchgeführt werden können, bspw. Definitionen für clientseitige Graphiken, etc.
• styles.css: eine Standard CSS Definitionsdatei, um weitere Änderungen der Benutzeroberfläche abseits von Farbwerten durchzuführen (z.B. Änderung des Splashscreens)

Hinweis: Es ist nicht möglich, Farbdefinitionen der colors.jsp innerhalb der styles.css Datei zu verwenden.

• styles_rtl.css: falls Sie eine Rechts-nach-Links Applikation (z.B. für Arabisch) verwenden, hält diese Datei zusätzliche Definitionen für die geänderte Positionierung der Elemente bereit

Beschreibung der Farbvariablen und wo diese innerhalb der WebOffice flex Benutzeroberfläche genutzt werden:

CIColor: Farbe für aktivierten Zustand

• Aktiviertes Werkzeug
• Aktivierte Kartenansicht
• Aktivierte Grundkarte
• Aktivierte Auswahlwerte (z.b. Drucken Maßstab/Format)
• Farbe des Extents in der Übersichtskarte
• Farbe des Popup-Markers

baseColor: Hintergrundfarbe

• Hintergrundfarbe Toolbars
• Hintergrundfarbe Widgets
• Hintergrundfarbe inaktiver Widgetheader
• Hintergrundfarbe Auswahllisten
• Hintergrundfarbe Übersichtskarte
• Hintergrundfarbe PopUps
• Hintergrundfarbe DownloadCenter Header
• Hintergrundfarbe Grundkarte

Hinweis: Beachten Sie, dass etwaige Icons für vordefinierte Suchen auf einen geänderten Farbwert angepasst werden müssen.

inputColor: Standardfarbe Schrift & Symbole

• Standardfarbe Schrift
• Standardfarbe Icons
• Standardfarbe Widgets
• Standardfarbe Text Initialisierung

separatorColor: Farbe für Trennlinien & Umrandungen

• Trennlinien Toolbar
• Trennlinien Widgets
• Trennlinien PopUps
• Umrandungen Buttons/Eingabefelder

overlayDarkColor: Farbe für Mouseover/Hover

• Hover Suchen
• Hover Auswahllisten
• Hover Kontextmenü
• Hover aktive Zeilen Initialisierung

headerColor: Hintergrundfarbe Header

• Hintergrundfarbe aktiver Widgetheader
• Hintergrundfarbe PopUp Header

headerFontColor: Textfarbe Header

• Textfarbe aktiver Widgetheader

footerColor: Hintergrundfarbe Footer

• Hintergrundfarbe PopUp Footer

Hinweis: Beachten Sie, dass etwaige Icons für externe Koppelungen auf einen geänderten Farbwert angepasst werden müssen.

footerFontColor: Textfarbe Footer

• Textfarbe aktiver PopUp Footer

opaque: Transparenz für Trennlinien

• keine Änderung empfohlen

Folgende Farbwerte werden standardmäßig verwendet:

• CIColor = "236,146,40";
• baseColor = "255,255,255"; (Weiß)
• inputColor = "102,102,102";
• separatorColor = "190,190,190";
• overlayDarkColor = "0,0,0";
• headerColor = "246,246,246"; (sehr helles Grau)
• headerFontColor = "102,102,102";
• footerColor = "246,246,246"; (sehr helles Grau)
• footerFontColor = "102,102,102";
• opaque = "0.75";

Beispielwerte für eine dunkle Darstellung der Benutzeroberfläche (z.B. Dark Theme) des WebOffice flex Clients.

• String CIColor = "236,146,40";
• String baseColor = "54,54,54";
• String inputColor = "226,226,226";
• String separatorColor = "85,85,85";
• String overlayDarkColor = "255,255,255"; (Weiß)
• String headerColor = "41,41,41";
• String headerFontColor = "255,255,255"; (Weiß)
• String footerColor = "41,41,41";
• String footerFontColor = "255,255,255"; (Weiß)
• String opaque = "0.75";

Alle oben genannten Definitionen werden in der folgenden Reihenfolge aufgerufen:

• WebOffice Standard Benutzeroberfläche
• user Skin (projektübergreifend)
• project Skin (projektspezifisch)

Demnach müssen Sie nur jene Definitionen in Ihrem user oder eigenen Projektskin definieren, die sich vom Standard unterscheiden.

Hinweis: Weitere Informationen zur Individualisierung des WebOffice flex Clients finden Sie in Kapitel WebOffice flex Client.

Hinweis: Weitere Informationen zur Verwendung von Skins in WebOffice flex finden Sie in Kapitel Projektskins.

Hinweis: Machen Sie bitte vor der Installation einer neuen WebOffice Version eine Sicherung Ihrer user und eigenen Skin Verzeichnisse, um einem möglichen Verlust ebendieser vorzubeugen.