Skip to main content

Styling

UIStyler / ClientBundle​

Das Styling der Komponenten in jadice web toolkit erfolgt wie bei GWT auch über die Klasse ClientBundle. Für die einzelnen Komponenten (wie z.B. Buttons) kommen einzelne CSSResources zum Einsatz, die allesamt in der Klasse UIStyle enthalten sind. Der UIStyler hingegen ist die allgemeine Schnittstelle, über die die Komponenten ihre CSS-Klassen und anderweitige Styling bezogene Eigenschaften auslesen.

Möchte man das Styling anpassen oder ein komplett eigenes Design bauen, so erzeugt man eine eigene Instanz, die von UIStyle abgeleitet ist, und setzt diese zu Beginn der GWT-Application im UIStyler über den dortigen Setter:

    UIStyler.set(GWT.create(MyUIStyle.class);

Die vorhandenen Styles können weiter verwendet werden, indem die neue Klasse von einer der ausgelieferten Implementierungen (wie DefaultUIStyle) erbt und diejenigen Aspekte überschreibt, die geändert werden sollen.

    public interface MyUIStyle extends DefaultUIStyle
    {
       // Example: Override ViewerBasicStyle with own gss file;
       @Override
       @Source("com/.../myOwnStyle.gss")
       ViewerBasicStyle viewerBasicStyle();
    }

Im jadice web toolkit können folgenden Styles überschrieben werden:

KategorieName
AllgemeinDialogStyle
ViewerBasicStyle
BorderBasicStyle
VisibleBoundsStyle
GalleryNavigationButtonStyle
CalibrateResolutionStyle
MenuBarStyle
ContextMenuStyle
ListStyle
AnnotationStyle
OverlayInformationStyle
SelectorStyle
CursorStyle
ThumbnailBorderThumbnailStyle
LabelThumbnailStyle
ViewerThumbnailStyle
ThumbnailToolStyle
LabelThumbnailStyle
JadiceButtonJadiceButtonStyle
JadiceButtonOnPageViewStyle
JadiceButtonThumbnailStyle
JadiceButtonTextStyle
ToolbarToolbarHorizontalStyle
ToolbarStatusbar
ToolbarVerticalSubmenuStyle
ToolbarSubmenuPopupStyle
ToolbarcontentStyle
ScrollbarScrollbarHorizontalStyle
ScrollbarVerticalStyle
ScrollbarTouchStyle
SnapInPageLayoutSnapInStyle
PageSnapInStyle
ZoomSnapInStyle
PopupSimplePopupStyle
PopupWidgetStyle
EditorLineWidthEditorStyle
ColorEditorStyle
FontFaceEditorStyle
FontSizeEditorStyle
SearchRolloutSearchStyle
ToolbarSearchStyle
AdvancedSearchStyle
OffsetDocumentOffsetStyle
ThumbnailOffsetStyle
MessageBoxMessageBoxStyle

Mehr zur Verwendung von ClientBundles und deren Möglichkeiten siehe Google Developer's Guide - Client Bundle .

Eigene Icons in Buttons​

Mittels BasicPageView.setUseIconFont(boolean) kann allgemein konfiguriert werden, ob Icon Fonts verwendet werden sollen oder - wie bisher - PNG Images.

Icon Fonts​

In den ausgelieferten JWT-Demos wird ab Version 5.5.0.0 ein Icon Font verwendet. Die Dateien für den JWT Icon Font werden zwischenzeitlich vom jadice web toolkit ausgeliefert. Die folgenden Klassen werden zur Verwendung von Icon Fonts bereitgestellt.

  • ToggleIconFont

    Die Klasse ToggleIconFont bildet ein Äquivalent zum StateEffectIcon. Sie kann mit ein oder zwei Icons initialisiert werden. Wird sie mit einem Icon initialisiert, so wird in allen Zuständen dasselbe Icon verwendet. Wird sie mit zwei Icons initialisiert, so wird ein anderes Icon dargestellt, wenn der Button angeklickt wurde. Als Icons werden Implementierungen der Klasse IconFont erwartet.

  • IconFont

    Das Interface IconFont bildet die Grundlage der Einbindung von Icon Fonts. Da Icon Fonts ausschließlich über Styles dargestellt werden, müssen die implementierenden Klassen einzig die Methode getStyleName() überschreiben. Diese liefert den Style des Icon Fonts und sorgt dafür, dass das Icon angezeigt wird. Standardmäßig sind zwei Implementierungen der Klasse IconFont vorhanden.

    • JWTIconFont

      Das Enum JWTIconFont bildet die einfachste Möglichkeit, den Standardumfang von Icon Font Glyphen zu verwenden. Sie bietet einen Enumwert für alle Glyphen. Solange sich eigene Icon Font CSS-Dateien an die Namensgebung der jwt-icon-font.css halten, kann diese Klasse auch für eigene Icon Fonts verwendet werden. Sie liefert für jeden Enumwert eine CSS-Klasse, die dem Schema jad-<name> folgt. Eine Übersicht der Standardglyphen befindet sich im Showcase.

    • BasicIconFont

      Die Klasse BasicIconFont bildet eine einfache Möglichkeit, Glyphen darzustellen, die im Standard Icon Font Glyphensatz nicht enthalten sind. Die Klasse erwartet beim Initialisieren die CSS-Klasse, die beim Aufruf von getStyleName() zurückgegeben wird.

    • MulticolorIconFont

      Die Zeichen einer Schriftart können an sich nur eine Farbe haben. Soll nun eine "Glyphe" des Icon Fonts mehrere Farben haben, wird diese bei der Generierung in mehrere Teilglyphen aufgeteilt. Um diese Teilglyphen als eine "Glyphe" darzustellen, gibt es den MulticolorIconFont. Die Methode getStyleName() liefert die Basis-CSS-Klasse der Glyphen zurück (z.B. "jwt-anno-pen"). Neben der Basisklasse gibt es noch die Klassen für die Teilpfade der Glyphe. Diese werden dem Konstruktor als pathNames übergeben und sind über die Methode getPathNames() abfragbar. Im folgenden Beispiel wird das Ganze noch etwas veranschaulicht.

      Das Beispiel zeigt, wie man das Icon für die Freihand-Annotation mit einem dunkelgrauen Stift und einer roten Linie einbinden könnte (mit einem entsprechend generierten Font).

      Die CSS Definition dieser Glyphe sähe wie folgt aus:

      .jwt-anno-pen .path1:before {
        content: "\e90a";
        color: #800000;
      }
      .jwt-anno-pen .path2:before {
        content: "\e9a5";
        color: #575756;
        margin-left: -1em;
      }
      .jwt-anno-pen .path3:before {
        content: "\e9a6";
        color: #575756;
        margin-left: -1em;
      }

      Damit die Glyphe richtig angezeigt wird, müsste das generierte HTML wie folgt aussehen:

      <span class="jwt-anno-pen">
          <span class="path1"></span>
          <span class="path2"></span>
          <span class="path3"></span>
      </span>

      Um dieses Zeichen nun darzustellen, müsste man folgenden Code aufrufen:

      new ToggleIconFont(new MulticolorIconFont("jwt-anno-pen","path1", "path2","path3"));

      Der ToggleIconFont erkennt, wenn die ihm übergebenen Icons vom Type MulticolorIconFont sind und erstellt dann die entsprechenden Kindelemente mit den übergebenen CSS-Klassen.

  • JWTIconFontMapper

    Für die Fälle, dass der Icon Font über einen String gefunden werden muss, kann der JWTIconFontMapper als Hilfsklasse verwendet werden. Hier werden standardmäßig einige Mappings von Strings auf Werte des JWTIconFont definiert. Diese können je nach Bedarf entfernt und erweitert werden. Zum Abfragen der Werte bietet die Klasse zwei Methoden. In der Methode getMappingForName(String) werden die definierten Mappings durchsucht und falls vorhanden das Richtige zurückgeliefert. Ist kein Mapping vorhanden, wird versucht, über JWTIconFont#valueOf(String) ein passendes Mapping zu finden. Wird keines gefunden, wird null zurückgegeben. Im Gegensatz dazu liefert die Methode getMappingForNameWithFallback(String) bei erfolglosem Mapping das Fallback-Icon zurück.

Integration des JWT Icon Fonts​

Um den JWT Icon Font in eine Integration einzubinden, muss die CSS-Datei, welche vom jadice web toolkit ausgeliefert wird, in der index.html eingebunden werden. Hierfür muss die folgende Zeile in den header-Bereich der index.html eingefügt werden: <link rel="stylesheet" type="text/css" href="jwt/fontresources?file=jwt-icon-font/css/jwt-icon-font.css" />. Abschließend muss nur noch die ClientConfiguration umgestellt werden:

ClientConfigurationManager.getClientConfiguration().setIsIconFontUsed(true);
Integration eines eigenen Icon Fonts​

Um einen eigenen Icon Font einzubinden, müssen die Font-Dateien und die CSS-Datei unter src/main/webapp abgelegt werden und die CSS-Datei in der index.html referenziert werden.

  • Verwendung des Icon Fonts für im jadice web toolkit vordefinierte GUI-Elemente

    Soll der Icon Font für die vordefinierten GUI-Elemente verwendet werden, so muss, wie oben beschrieben, die ClientConfiguration umgestellt werden. Zudem kann das Präfix des JWTIconFont-Enums über

    JWTIconFont.setStyleclassPrefix(styleclassPrefix);

    umgestellt werden. Auf diese Weise lässt sich eine vom Standard abweichende CSS-Definition erreichen. In der CSS-Datei könnte die Klasse für das Icon, das für die Rotation auf 0° verwendet wird, statt jwt-rotate-0-deg beispielsweise fa-rotate-0-deg heißen. Der hintere Teil der Bezeichnung muss jedoch für die Standard-Icons übernommen werden, sofern sie über das Enum aufgerufen werden. Wenn das Setzen des Fonts in der CSS-Datei in einer eigenen CSS-Klasse erfolgt und nicht über CSS-Selektoren passiert, so muss die Klasse separiert im Präfix angegeben werden. Um im resultierenden Style fa fa-rotate-0-deg zu setzen muss als Präfix fa fa gesetzt werden.

  • Verwendung des Icon Fonts für nicht im jadice web toolkit vordefinierte GUI-Elemente

    Wenn ein Icon Font ausschließlich für nicht vordefinierte GUI-Elemente eingesetzt werden soll, muss die ClientConfiguration nicht umgestellt werden. (Diese sorgt lediglich dafür, dass - abhängig von der Konfiguration - bei den vordefinierten Buttons wahlweise IconFont-Glyphen oder PNG-Icons angezogen werden.) Eigene Icons können nun ganz simpel über die Klasse BasicIconFont eingebunden werden. Um beispielsweise ein Herz einzubinden, dessen entsprechende CSS-Klasse fa fa-heart ist, muss lediglich

    new ToggleIconFont(new BasicIconFont("fa fa-heart"));

    aufgerufen werden. Dieser ToggleIconFont kann dann einem anderen Widget als Child-Element hinzugefügt werden. Ein Beispiel für die Einbindung von FontAwesome-Icons ist in der Enterprise Demo in den Klassen ClassPathDocumentPanel und EnterpriseDemoMain zu finden.

PNGs​

Ist die Verwendung von herkömmlichen Icons konfiguriert, so ziehen die Buttons und Kontextmenüinhalte die StateEffectIcons aus den verbundenen Actions an. Die DefaultActions nehmen die PNG-Icons vom UI-Styler. Falls der Style von DefaultButtonResources erbt (was in DefaultUIStyle der Fall ist), werden die Icons aus dem Bundle verwendet (und damit direkt mit dem JavaScript zusammen an den Client übertragen). Möchte man eigene Icons integrieren, kann man die Methoden dieses Interfaces in der eigenen Style-Klasse überschreiben.

External Style​

Eine weitere Möglichkeit zur Styling des jadice web toolkit besteht darin, auf die ClientBundles zu verzichten und den ExternalUIStyle einzubinden. Dieser verwendet die serverseitigen Icons und mappt die Stylenames auf einfache Klassennamen, die dann über eine extern eingebundene CSS-Datei gestylet werden können.

Der im CSS verwendete Klassenname setzt sich als $MethodName+”_”+$innername zusammen, also beispielsweise .defaultBorderStyle_currentPage.

Last updated on by Benjamin Albanese