Untergeordnete Seiten
  • Mit dem jadice web toolkit eine eigene ThumbnailView erstellen
Zum Ende der Metadaten springen
Zum Anfang der Metadaten

Das jadice web toolkit bietet standardmäßig die Anzeige von Thumbnails als einblendbare Ansicht innerhalb des Viewers.

Eingeblendete Thumbnails im Viewer

In manchen Anwendungen ist es jedoch praktischer diese Ansicht außerhalb des Anzeigebereichs einzublenden, damit diese immer im Blick ist.

Hierbei kann die Position der Thumbnail-Anzeige frei gewählt werden. Im folgenden Beispiel wurde diese zwischen die Toolbar und den eigentlichen Viewer gelegt:

Thumbnail Anzeige außerhalb des Viewers

Erstellen eines eigenen ThumbnailView

Um einen eigenen ThumbnailView zu erstellen, wird die Klasse ThumbnailViewerBuilder verwendet. Mittels dieser kann der gewünschte ThumbnailViewer konfiguriert und schlussendlich erstellt werden.

Wichtig ist, dass bei der Erstellung des ThumbnailView eine Ziel-PageView angegeben wird. Damit werden Vorschauen für das im PageView geladene Dokument im ThumbnailView dargestellt.

Anpassen der Gestaltung

Auch die Gestaltung des ThumbnailView kann an die eigenen Bedürfnisse angepasst werden. Möchte man die Seitenzahlen unterhalb der Thumbnails beispielsweise in einer anderen Farbe darstellen (der Standard ist hierbei weiß), kann das mit einem eigenen ClientBundle gelöst werden.

Das oben gezeigte Beispiel erweitert das Interface LabelThumbnailStyle, ohne jedoch weitere Methoden hinzuzufügen. Diese Erweiterung ist wichtig, da der von GWT erstellte CSS-Klassenname den Namen des Interfaces enthält. Wird dies nicht gemacht, kollidiert der CSS-Klassenname mit dem jadice web toolkit Standard und wird daraufhin vom Browser ignoriert.

Icon

Das Interface LabelThumbnailStyle liegt in einem internal Package. Grundsätzlich unterliegen Klassen und Interfaces in internal Packages keinerlei API-Stabilität. Das Interface LabelThumbnailStyle ist hierbei jedoch für die Anpassung auf die oben demonstrierte Weise freigegeben. Das Interface wird für alle jadice web toolkit Versionen der Generation 5.3 stabil gehalten.

Um die CSS-Anpassung zu vervollständigen, wird noch eine passende CSS-Datei benötigt. Diese muss zwei CSS-Klassen enthalten: label und selected. label definiert hierbei das Aussehen des labels im allgemeinen und selected im Zustand einer aktiven Selektion (via Mausklick). Im folgenden Beispiel wird der Text standardmäßig in schwarz und bei einer aktiven Selektion in weiß dargestellt.

Möchte man diese angepasste Optik nun auf eine ThumbnailView anwenden, wird die Erweiterung des LabelThumbnailStyle bei der Erstellung dem ThumbnailViewerBuilder mitgeteilt.

Die daraus resultierende Optik (schwarzer Text bei nicht selektierten Seiten, und weißer Text bei selektierten) wird im unten gezeigten Screenshot dargestellt:

 

5 von 31 Ergebnissen werden angezeigt