Mit WebOffice flex können Sie die Benutzeroberfläche adaptieren bzw. Ihre eigenen Stile für bestimmte Projekte oder die gesamte Anwendung 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.

 

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)

•styles_rtl.css: falls Sie eine Rechts-nach-Links Anwendung (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

 

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 Schaltflächen/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

 

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 Skin oder eigenen Projektskin definieren, die sich vom Standard unterscheiden.