Unternehmens-Design

In diesem Leitfaden sollen die verschiedenen Optionen zur Anpassung der Visualisierung von INETAPP-Remote-GUI-Anwendungen beschrieben werden. Er wird daher behandeln, wie das Aussehen und die Bedienung der Remote-Schnittstelle und ihrer Softwarekomponenten modifiziert werden kann.

Dieser Leitfaden wird recht technisch sein und richtet sich an Programmierer mit Kenntnissen in Java, HTML und CSS.

Remote-Schnittstelle

Die Remote-Schnittstelle stützt sich stark auf eine Bootstrap-basierte Implementierung. Bootstrap ist ein beliebtes HTML-, JS- und CSS-Framework zur Erstellung reaktionsschneller Webseiten. Es erlaubt den Benutzern, eine breite Palette von Eigenschaften anzupassen, die das gesamte Erscheinungsbild beeinflussen.

Das Theme-Plugin muss installiert und aktiviert sein. Es gibt einige verschiedene Möglichkeiten, die Farben eines Corporate Designs hinzuzufügen:

  1. Vordefiniertes Thema als Standardthema verwenden
  2. Heruntergeladenes Thema als Standardthema verwenden
  3. Erstellen eines Standarddesigns durch Ändern der Primärfarben
  4. Erstellen einer benutzerdefinierten Datei weniger

Vordefiniertes Thema als Standardthema verwenden

Im Konfigurationsmanager-Dialog Erscheinungsbild ist es möglich, ein vordefiniertes Thema festzulegen, das als Standardthema für die Bootstrap-basierten Anwendungen der INETAPP-Remote-Schnittstelle verwendet wird.

Alle Themen befinden sich im Ordner themes und haben ein Unterverzeichnis, das die *.less-Dateien für Bootstrap 3 enthält. Um ein Thema zu INETAPP hinzuzufügen, muss ein Unterordner im Ordner themes der INETAPP-Installation erstellt werden. Der Name des Unterverzeichnisses ist der Name des Designs.

In diesem Themenordner werden mehrere .less oder .css Dateien abgelegt, die dann dem Stil hinzugefügt und kompiliert werden. Wenn externe .less-Dateien in eine bestehende Datei im Themenordner importiert werden sollen, muss einen zusätzlichen Unterordner erstellt werden, sonst würden diese Dateien zweimal importiert.

Heruntergeladenes Thema als Standardthema verwenden

Eine andere Möglichkeit ist, ein Design von einer Website zu verwenden, die Bootstrap 3-Themen anbietet. Es ist zu beachten, dass einige der Themen ohne weitere Anpassungen nicht korrekt aussehen werden. Es sollten nach Möglichkeit immer die *.less Dateien anstelle von css verwendet werden. Hier sind einige Beispiele:

Erstellen eines Standardthemas durch Ändern der Primärfarben

Zusätzlich zu den verfügbaren Themen können im Konfigurationsmanager-Dialog Erscheinungsbild benutzerdefinierte Themen erstellt werden. Für dieses benutzerdefinierte Thema können die Grundfarbe, Primärfarbe und weitere Farben definiert werden. Außerdem wird hier die Standardschriftgröße geändert.

Erstellen einer benutzerdefinierten less-Datei

Wenn die vorherige Methode nicht den Anforderungen entsprechen, können Sie das gesamte CSS ändern, indem Sie ein benutzerdefiniertes Thema erstellen.

Eine einfache Möglichkeit, ein benutzerdefiniertes Thema zu erstellen, ist die Erstellung einer Datei, z.B. mytheme.less in einem mytheme-Ordner.

Wenn Sie tiefer in dieses Thema einsteigen möchten, werfen Sie einen Blick auf http://getbootstrap.com/customize/. Dort finden Sie viele zusätzliche Variablen, die gesetzt werden können.