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.

icon_cross-reference

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, vertigisfm) 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)

icon_comment

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 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

icon_comment

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 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

icon_comment

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";

 

Standard Theme des WebOffice flex Clients

Standard Theme des WebOffice flex Clients

 

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";

 

Dark Theme für WebOffice flex Client

Dark Theme für WebOffice flex Client

 

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.

 

icon_cross-reference

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

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

icon_comment

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.

Ⓒ Copyright 2023 by VertiGIS GmbH