Clientseitige Anpassung

Der Kontext (Context)

Mit minimalen Einschränkungen entspricht der jadice® web toolkit Context dem der jadice® document platform 5.(siehe jadice® document platform 5-Dokumentation, Abschnitt "Der Kontext")

Eine ausführliche Beschreibung des Context findet sich im jadice Knowledge-Base-Artikel Der levigo-utils GUI-Context .

Unterschiede jadice® web toolkit und jadice® document platform 5

Die jadice® document platform 5 basiert auf Swing als UI-Toolkit. Auch die in der jadice® document platform 5-Dokumentation genannten Beispiele basieren daher auf Swing als UI-Toolkit. In den meisten Fällen lassen sich die Konzepte jedoch identisch in einer GWT-Anwendung anwenden, mit dem einzigen Unterschied, dass an Stelle von JComponent typischerweise IsWidget verwendet wird.

Event Handling

Überblick

Für den Austausch von Informationen zwischen lose gekoppelten Komponenten bietet jadice® web toolkit einen eventbasierten Standardmechanismus. Dieser wird zum einen von diversen produkteigenen Komponenten verwendet, kann aber zum anderen auch out-of-the-box aus Integrationskomponenten heraus genutzt - und bei Bedarf auch erweitert - werden.

Das jadice® web toolkit stellt für den Eventversand den JadiceEventBus und den NotificationEventBus bereit. Das über diese Busse laufende Event Handling wird in diesem Kapitel genauer erklärt.

Der JadiceEventBus stellt eine wichtige Kernkomponente des jadice® web toolkit dar. Hierüber laufen beispielsweise Events, welche über die Veränderung des sichtbaren Bereiches, den Wechsel des aktuellen Dokumentes, etc. informieren. Im folgenden Codebeispiel wird am Beispiel des LoadingEvents gezeigt, wie ein neuer EventHandler in den JadiceEventBus eingehängt werden kann:

JadiceEventBus.get().addHandler(LoadingEvent.getType(), new LoadingEvent.Handler(){
    @Override
    public void onChange(LoadingEvent event) {
        ...
    }
});
                    
			

Welche Events es gibt und über was diese genau informieren, wird im Folgenden erklärt.

  • DocumentChangedEvent

    Dieses Event informiert darüber, dass sich das aktuelle Dokument der PageView geändert hat. Die Source des Events ist i.d.R. die betroffene PageView. Des Weiteren wird das neue Dokument und das zuvor geöffnete Dokument übermittelt.

  • LoadingEvent

    Dieses Event informiert darüber, ob gerade etwas geladen wird und wie der Zustand des Ladevorgangs ist. Standardmäßig wird es beim Kachelladen versendet, kann jedoch auch integrationsseitig z.B. beim Dokumentladen versendet werden. Es eignet sich sehr gut, um dem User Feedback über den aktuellen Zustand der Anwendung zu liefern. Das Event stellt mehrere Zustände des Ladevorgangs zur Verfügung: LOADING, FINISHED, CANCELED, FAILED. Neben dem Zustand kann das betroffene Objekt übermittelt werden, im Falle des Kachelladens wird hier das zu ladende Tile mitgegeben. Im Falle einer Fehlermeldung kann noch eine Fehlermessage mitgeliefert werden. Da der ErrorHandler des img-Tags im Falle der HTTP-Request-Kacheln keine Fehlerursache liefert, wird hier die vermutliche Fehlerursache ermittelt und übergeben. Die hierfür verwendete JavaScript-Funktion wird jedoch von Internet Explorer 11 nicht unterstützt und somit wird hier keine Fehlerursache übermittelt. In allen anderen Browsern wird der Fehlerstatuscode bzw. im Falle einer fehlenden Serververbindung die Meldung "no server connection" als Fehlerursache mitgegeben.

  • PageLayoutChangedEvent

    Dieses Event informiert darüber, dass sich das aktuelle Layout der PageView geändert hat. Die Source des Events ist i.d.R. die betroffene PageView. Des Weiteren wird das neue und alte PageLayout mitgeliefert.

  • PageSelectionChangedEvent

    Dieses Event informiert darüber, dass sich die aktuelle Seite der PageView geändert hat. Die Source des Events ist i.d.R. die betroffene PageView. Des Weiteren werden die Seitenindexe der alten und neuen aktuellen Seite, sowie die alte und neue aktuelle Seite selbst übermittelt.

  • ToolChangedEvent

    Dieses Event informiert über Änderungen rund um Tools. Die möglichen Gründe für den Versand eines solchen Events sind "ACTIVATED" (Aktivschaltung eines Tools), "VALUE_CHANGED" (Änderung eines Wertes in einem Tool), "EXCLUSIVE" (ein Tool wird exclusive gesetzt), "ENABLED" (ein Tool wird enabled) oder "REGISTERED" ((De)Registrierung eines neuen Tools). Neben dem Grund wird das betroffene Tool und der neue und alte Wert übermittelt.

  • VisibleRectChangedEvent

    Dieses Event informiert darüber, dass sich der sichtbare Bereich der PageView geändert hat. Die Source des Events ist i.d.R. die betroffene PageView. Des Weiteren wird der neue und der alte sichtbare Bereich übermittelt.

  • RenderSettingsEvent

    Dieses Event informiert über Änderungen an den RenderSettings. Hierbei werden die betroffenen RenderControls, die RenderSettings, der Name des Wertes, der alte und der neue Wert und die Source (i.d.R. die betroffene PageView) übermittelt.

Nutzung eigener Events auf dem JadiceEventBus

Im folgenden Abschnitt wird anhand von Codebeispielen zum bestehenden LoadingEvent demonstriert, wie eigene Eventtypen eingeführt und genutzt werden können.

Event und EventHandler

Die Events, welche über den JadiceEventBus versendet werden, leiten alle von der abstrakten Klasse JadiceEvent ab. Die EventHandler extenden das Interface JadiceEventHandler. Die Handler werden hier üblicherweise als internes Interface in der Eventklasse bereitgestellt.

public final class LoadingEvent extends JadiceEvent<LoadingEvent.Handler> {

  public enum LoadingState {
    LOADING, FINISHED, CANCELED, FAILED;
  }

  public interface Handler extends JadiceEventHandler {

    void onChange(LoadingEvent event);
  }

  private static Type<Handler> TYPE;
  private LoadingState loadingState;
  private Object loadingObject;
  private String errorMessage;

  public static Type<Handler> getType() {
    return TYPE != null ? TYPE : (TYPE = new Type<Handler>());
  }

  public static <T> void fire(HasHandlers source, LoadingState loadingState, Object loadingObject,
      String errorMessage) {
    if (TYPE != null) {
      LoadingEvent event = new LoadingEvent(source, loadingState, loadingObject, errorMessage);
      source.fireEvent(event);
    }
  }

  public LoadingEvent(HasHandlers source, LoadingState loadingState, Object loadingObject, String errorMessage) {
    super(source);
    this.loadingState = loadingState;
    this.loadingObject = loadingObject;
    this.errorMessage = errorMessage;
  }

  public LoadingState getLoadingState() {
    return loadingState;
  }

  public Object getLoadingObject() {
    return loadingObject;
  }

  public String getErrorMessage() {
    return errorMessage;
  }

  @Override
  protected void dispatch(Handler handler) {
    handler.onChange(this);
  }

  @Override
  public com.google.gwt.event.shared.GwtEvent.Type<Handler> getAssociatedType() {
    return TYPE;
  }
}
                        
Eventversand über den JadiceEventBus

Events können über den JadiceEventBus auf zwei Arten versendet Werden. Möglichkeit eins ist, eine neue Instanz des Events zu erzeugen und diese direkt über den JadiceEventBus zu versenden:

JadiceEventBus.get().fireEvent(new LoadingEvent(source, LoadingState.FINISHED, object, null));
                        

Die zweite Möglichkeit besteht darin, das Event über die Methode fire des Events selbst zu versenden. Hier muss jedoch die übergebene Source das Event an den JadiceEventBus weiter versenden. Dies ist z.B. bei der PageView der Fall.

LoadingEvent.fire(source, LoadingState.FINISHED, object, null);
                        

Im Unterschied zum JadiceEventBus werden die über den NotificationEventBus verschickten Events dazu verwendet, um dem Benutzer verständliche, nicht-technische Informationen über den Zustand der Anwendung zu geben und damit die Usability zu erhöhen. Die zugehörigen Events teilen sich in ErrorNotificationEvents, InfoNotificationEvent, SearchStatusChangedEvents und SearchResultsEvents auf. In den Demoanwendungen werden diese unter anderem dafür verwendet, dem Benutzer Rückmeldung über den Ladezustand eines Dokuments oder den Zustand einer in Ausführung befindlichen Textsuche zu geben. Im folgenden Beispiel wird das Einhängen eines Handlers in den NotificationEventBus anhand des ErrorNotificationEvents gezeigt:

NotificationEventBus.Instance.get().addHandler(ErrorNotificationEvent.TYPE, new ErrorNotificationEventHandler() {
                
    @Override
    public void onErrorNotification(ErrorNotificationEvent event) {
        ...
    }
});
                    
			

  • InfoNotificationEvent

    InfoNotificationEvents liefern in der Regel rein informative Nachrichten wie z.B. dass das Laden eines Dokumentes gestartet oder abgeschlossen wird. Derzeit werden diese Events ausschließlich im Democode versendet.

  • ErrorNotificationEvent

    ErrorNotificationEvents informieren darüber, dass ein Fehler aufgetreten ist z.B. beim Rendern von Annotationen. Im Regelfall wird hier noch eine aufgetretene Exception mitgeliefert. Im Gegensatz zu dem InfoNotificationEvent wird dieses Event an einigen Stellen außerhalb der Demos versendet.

  • SearchStatusChangedEvent

    Dieses Event informiert über den aktuellen Status der Textsuche (STARTED, CANCELED, FINISHED, FAILED, FAILED_TOO_MANY_RESULTS) und wird von den Klassen RolloutSearch und AdvancedSearch versendet.

  • SearchResultsEvent

    Dieses Event informiert über den aktuellen Fortschritt der Textsuche, also z.B. "3 von 6 Seiten durchsucht (50%)". Das Event wird genauso wie das SearchStatusChangedEvent von den Klassen RolloutSearch und AdvancedSearch versendet.

Nutzung eigener Events auf dem NotificationEventBus

Im folgenden Abschnitt wird anhand von Codebeispielen zum bestehenden ErrorNotificationEvent demonstriert, wie eigene Eventtypen eingeführt und genutzt werden können.

Event und EventHandler

Neben des ErrorNotificationEvents selbst wird zusätzlich ein dafür spezifischer EventHandler in Form eines Interfaces definiert. Event und EventHandler werden im selben Package abgelegt.

package com.jadice.web.util.notifications.client.events;

import com.google.gwt.event.shared.EventHandler;

public interface ErrorNotificationEventHandler extends EventHandler {
    void onErrorNotification(ErrorNotificationEvent event);
}
                    
			

Das ErrorNotificationEventHandler-Interface definiert die Methode onErrorNotification. Der zugehörige Eventconsumer implementiert dieses Interface und definiert dadurch das Verhalten beim Eingang eines ErrorNotificationEvents. Für jeden vorab am NotificationEventBus registrierten konkreten Consumer ruft der Bus beim Eingang eines ErrorNotificationEvents zur Laufzeit automatisch einmal dessen Methode onErrorNotification auf.

Die Implementierung des ErrorNotificationEvents sieht folgendermaßen aus:

package com.jadice.web.util.notifications.client.events;

import com.google.gwt.event.shared.GwtEvent;

public class ErrorNotificationEvent extends GwtEvent<ErrorNotificationEventHandler> {
  private final String errorMessage;
  private final Throwable throwable;

  public static Type<ErrorNotificationEventHandler> TYPE = new Type<ErrorNotificationEventHandler>();

    public ErrorNotificationEvent(String errorMessage, Throwable throwable) {
    this.errorMessage = errorMessage;
    this.throwable = throwable;
  }

  public Type<ErrorNotificationEventHandler> getAssociatedType() {
    return TYPE;
  }

  protected void dispatch(ErrorNotificationEventHandler handler) {
    handler.onErrorNotification(this);
  }

  public String getErrorMessage() {
    return errorMessage;
  }


  public Throwable getStackTrace() {
    return throwable;
  }
}

                    
			

Das ErrorNotificationEvent erweitert die GWT Basisklasse GwtEvent. Jedes Event besitzt einen eindeutigen TYPE. Die Event Consumer registrieren sich am Bus mit genau diesem TYPE und abonnieren dadurch alle Events des jeweiligen Typs. Außerdem enthält das Event das Feld errorMessage , das die jeweilige Highlevel-Fehlermeldung speichert. Zusätzlich kann das Event bei Bedarf ein gefangenes Throwable mit transportieren.

Consumer

Auf der Consumerseite wird das HandlerInterface ErrorNotificationEventHandler implementiert. In der Methode onErrorNotification wird dabei das Verhalten beim Eingang eines ErrorNotificationEvents definiert.

package com.levigo.jadice.web.demo.common.client.events;

import com.jadice.web.util.notifications.client.events.ErrorNotificationEvent;
import com.jadice.web.util.notifications.client.events.ErrorNotificationEventHandler;

...

public class PopupNotificationEventHandler implements InfoNotificationEventHandler, ErrorNotificationEventHandler {
  private final DemoPopup popup;
  private boolean active;
...
  @Override public void onErrorNotification(ErrorNotificationEvent event) {
    if (active) {
      popup.addMessage(event.getErrorMessage(), true);
      Throwable stackTrace = event.getStackTrace();
      if (stackTrace != null) {
        for (StackTraceElement element : stackTrace.getStackTrace()) {
          popup.addMessage(element.toString(), true);
        }
      }
      showForTimedDuration();
    }
  }

  private void showForTimedDuration() {
    popup.show();
    popup.hideAndClearIn(displayDuration);
  }
...
}

			

Über den Aufruf von event.getErrorMessage wird auf die Fehlermeldung des Events zugegriffen und diese anschließend dem Popup zur Anzeige übergeben. Falls das Event zusätzlich eine Throwable enthält wird dieser ebenfalls zur Anzeige gebracht.

In der Klasse ApplicationEntryPoint der Basicviewer Demo findet sich der Code zum Registrieren der Consumer am Bus. Für jeden unterschiedlichen Eventtyp, der abonniert werden soll, ist ein eigener Aufruf notwendig.

				NotificationEventBus.Instance.get().addHandler(ErrorNotificationEvent.TYPE,
				new PopupErrorNotificationEventHandler(popup));
			
Emitter

Ein neues Event kann wie im folgenden Beispiel aufgeführt über den NotificationEventBus versendet werden:

	NotificationEventBus eventBus = NotificationEventBus.Instance.get();
				...
	eventBus.fireEvent(new
		ErrorNotificationEvents(new ErrorNotificationEvents(message, error)));

			

Über die statische Methode NotificationEventBus.Instance.get wird eine Referenz auf den NotificationEventBus geholt und dann auf dem Busobjekt die Methode fireEvent zur Übergabe des Events an den Bus aufgerufen.

Nutzung eines eigenen Eventbusses

Für den Fall, dass eine eigene Implementierung des NotificationEventBus verwendet werden soll, kann das jadice® web toolkit mit einem kundenspezifischen Eventbus konfiguriert werden. Über den Aufruf der Methode NotificationEventBus.Instance.set(NotificationEventBus bus) wird die Standardimplementierung transparent für die bereits beteiligten Kommunikationspartner ausgetauscht.

Action und Command Framework

ActionRegistry & ActionManager sind deprecated und werden mit der nächsten Major Version entfernt.

Toolbars, Actions und Commands sind via GWT grundsätzlich via API konfigurierbar. Dies hat den Vorteil, dass der zugehörige Code in JavaScript übersetzt und sehr schnell geladen wird. Sowohl Buttons wie auch Kontextmenüeinträge setzen eine Action voraus. Für jedes Kommando sollte pro Kontext (ein Kontext wäre z.B. eine PageView) nur eine Action existieren. Um dies zu gewährleisten, müssen alle Actions über den ActionManager registriert werden. Weiterhin dient der ActionManager dem zentralen Reagieren auf Tastaturbefehle (KeyStrokes), sobald er mit einem Widget initialisiert wird.

Eventhandling

Die Events nehmen den vom Browser vorgesehenen Weg. GWT-Komponenten in diesem Pfad können Actions verarbeiten. Standardmäßig verarbeiten Buttons und Menüeinträge die KeyDownEvents und verarbeiten dadurch die Shortcuts. Da Buttons meist nicht direkt im Hirarchiepfad der JS-Key Events liegen gibt es die Hilfsklasse KeyDownEventDispatchingUtil. Damit werden die Events weitergereicht, wie beispielsweise an die darin enthaltene Toolbar. Wird die JWT-Toolbar verwendet, reicht auch diese die Events an alle enthaltenen Buttons weiter (gleiches gilt nun auch für Submenüs). Der Integrator ist für alles weitere selbst verantwortlich, und hat hier volle Freiheiten.

Der Viewer kann nun fokusiert werden. Verarbeitet kein Tool das ClickEvent auf den Viewer, so erhält der Viewer den Fokus. Die AnnotationToolbar hat ebenfalls einen Focus (für z.B. "Delete Anno"- Shortcut oder weitere folgende für "Fett" o.ä. wurde aber vorerst nicht eingebaut)

Ein Context ist nun zwingend. Existiert kein vom Intergrator erstellter Context in der Hirarchie, wird automatisch mit einer Warnung ein leerer Context im RootPanel angelegt und dieser verwendet.

Menüs & Toolbars

Menüs und Toolbars sollten grundsätzlich über den BasicMenuBuilder erstellt werden. Vordefinierte Actions, die zur Befüllung verwendet werden können, werden über die Klasse DefaultActions bereitgestellt.

Buttons

Buttons sollten nur in Ausnahmefällen unabhängig vom MenuBuilder erstellt werden; wenn, dann am besten über die Klassen JadiceDefaultButton und JadiceSubmenuButton:

mypanel.add(new JadiceDefaultButton(DefaultActions.pageNextAction(keyStroke, registry, context));

Nur in Ausnahmefällen sollte hierzu der JadiceButtonBuilder verwendet werden, da dieser die Actions nicht registriert und somit keine unmittelbare Tastaturbedienung der damit verbundenen Commands ermöglicht wird.

Actions

Actions stellen das Bindeglied zwischen der Benutzeroberfläche und den Commands dar. Sie enthalten die zur Anzeige wesentlichen Elemente wie Icon, Label, Beschreibung sowie die Keyboard-Shortcuts. Actions sind über die JadiceMessages lokalisierbar. Eine Vielzahl vorkonfigurierter Actions wird über die Klasse DefaultActions zur Verfügung gestellt.

Commands

Die Ausführung der meisten Viewer-Aktionen ist über zugehörige Commands gekapselt. Dies ermöglicht insbesondere die einfache Auslösung derselben Aktion über unterschiedliche UI-Komponenten. Beispielsweise kann der Zoom des Dokuments über einen Button, das Kontextmenü oder kundenspezifische Widgets angestoßen werden. Im Hintergrund wird dabei immer dasselbe Command verwendet.

Die folgende Liste gibt einen Überblick über die vorhandenen Commands und beinhaltet Links auf die zugehörige Javadoc-Dokumentation.

Command Funktion
Annotationen AnnotationVisibilityCommand Erlaubt das Ein- und Ausblenden von Annotationen (einzelne oder alle Annotationstypen).
CreateAnnotationCommand Erlaubt es, Annotationen zu erzeugen.
CreateAnnotationViaApiCommand Erzeugt Annotationen programmatisch via API.
DeleteSelectedAnnotationsCommand Löscht die aktuell selektierten Annotationen.
Auflösung ShowResolutionCalibrationWidgetCommand Blendet ein Popup zum individuellen Einstellen der Displayauflösung ein.
Bookmark AddBookmarkCommand Setzt ein Bookmark auf der aktuellen Seite.
RemoveAllBookmarksCommand Löscht alle Bookmarks, die auf dem aktuellen Dokument angebracht wurden.
RemoveBookmarkCommand Entfernt das Bookmark auf der aktuellen Seite.
NextBookmarkCommand Springt zum nächsten Bookmark innerhalb des Dokuments und zeigt die zugehörige Seite an.
PreviousBookmarkCommand Springt zum vorherigen Bookmark innerhalb des Dokuments und zeigt die zugehörige Seite an.
Gradation ShowGradationCommand Blendet ein Popup zum Justieren der Gradationskurve ein.
GradationCurveCommand Erlaubt das Manipulieren der Gradation anhand der graphischen Gradationskurve.
GradationActionCommand Erlaubt das Manipulieren der Gradation anhand von verschiedenen Aktionen.
Grid AttachGridCommand Erleichtert das Positionieren von Annotationen durch Ausrichtung an einem Grid.
Layout SelectPageLayoutCommand Erlaubt das Auswählen des aktuellen Seitenlayouts: Gitteransicht, fortlaufende Ansicht oder ganze Seite.
Locale LocaleCommand Schaltet die Sprache der Anwendung um.
Rotation RotateCommand Dreht die aktuelle Seite oder das Dokument auf einen vorgegebenen Winkel (Vielfache von 90 Grad).
SpinCommand Dreht die aktuelle Seite oder das Dokument um 90 Grad nach links oder rechts.
Seitenavigation FirstPageCommand Springt zur ersten Seite des Dokuments.
LastPageCommand Springt zur letzten Seite des Dokuments.
NextPageCommand Blättert eine Seite weiter.
PreviousPageCommand Blättert eine Seite zurück.
Suche ActivateRolloutSearchCommand Öffnet ein Popup zur Eingabe eines Suchbegriffs zur Textsuche im Dokument und in Annotationen.
ActivateToolbarSearchCommand Ermöglicht die Eingabe eines Suchbegriffs eingebettet in der Toolbar.
Tools ActivateToolCommand Aktiviert/deaktiviert ein gegebenes Tool.
EnableToolCommand Enabled/disabled ein gegebenes Tool.
AutoActivationCommand Aktiviert/deaktiviert die DefaultToolActivationPolicy welche für ein automatisches Aktivieren von Tools, wie z.B. dem PanForceMouseTool und dem TextSelectionTool sorgt.
ThumbnailToolCommand Aktiviert/deaktiviert und öffnet/schließt das ThumbnailTool.
Zoom FitPageCommand Wechselt in einen Seiten-Einpass-Modus. Solange der Modus nicht beendet wird, werden alle Seiten eingepasst – entweder komplett oder auf Seitenhöhe oder Seitenbreite.
FitPageOnceCommand Passt die aktuelle Seite in den aktuellen Anzeigebereich ein – entweder komplett oder auf Seitenhöhe oder Seitenbreite skaliert.
ZoomCommand Ermöglicht das relative Zoomen auf Dokument- und Seitenebenene. Details zur Integration und ein zugehöriges Codebeispiel finden sich in den Showcases unter "Commands / Buttons".
ZoomToCommand Ermöglicht das absolute Zoomen auf Dokument- und Seitenebene.
Anwendungsbereiche von Commands

Commands welche von der Klasse AbstractDocumentCommand erben können auf bestimmte Anwendungsbereiche begrenzt werden. Hierbei wird zwischen drei Werten des Enums Scope unterschieden: PAGE, DOCUMENT.

  • PAGE

    Änderungen an den RenderControls die von einem Command mit Scope.PAGE ausgeführt werden, verändern nur die Darstellung der aktuellen Seite, nicht aber von anderen Dokumentbestandteilen.

  • DOCUMENT

    Änderungen an den RenderControls die von einem Command mit Scope.DOCUMENT ausgeführt werden, verändern nur die Darstellung des aktuellen Dokumentes. Wird ein neues Dokument geöffnet, so sind diese Änderungen nicht länger wirksam.

Standardmäßig wird der Anwendungsbereich Scope.DOCUMENT verwendet.

Keyboard Shortcuts

Das Action und Command Framework erlaubt die einfache Nutzung von Keyboard Shortcuts.

Event Handling im Browser

Bei der Eingabe einer Tastenkombination (z.B. Strg + P) wird vom Browser ein KeyDownEvent an das body-Element des DOMs geschickt, das in GWT durch die Klasse RootPanel repräsentiert wird.

Kommandos sind in jadice® web toolkit mit den zugehörigen Actions in der Toolbar verknüpft. Um ein Kommando via Shortcut auszuführen, muss daher das KeyDownEvent an die den Button beinhaltende Toolbar weitergereicht werden. Diese Benachrichtigung kann über die Klasse KeyDownEventDispatchingUtil erfolgen (siehe Codebeispiel unten).

Der Shortcut "Strg + P" ist in diversen Browsern mit einem proprietären Druckdialog vorbelegt. Typischerweise soll bei der Verknüpfung eines Shortcuts mit einem jadice® web toolkit spezifischen Kommando eine etwaige Vorbelegung ausgeschaltet werden. Die Nutzung des KeyDownEventDispatchingUtil stellt dies sicher.

Definition eines Shortcuts

Das folgende Codebeispiel demonstriert die Verknüpfung des Shortcuts "Strg + P" mit dem PrintStreamCommand aus der Demo Basicviewer.

Einrichten des Shortcuts "Strg + P" für das PrintStreamCommand:

HorizontalToolbar toolbar = new HorizontalToolbar();
toolbar.add(
       new RegisteredAction(description, new KeyStroke(Keys.P, Modifier.CTRL),
        new StateEffectIcon(EffectIcons.getEffectIcon(buttonResources.iconDownloadTiff())), 
        new PrintStreamCommand(Type.TIFF), context);
    );
KeyDownEventDispatchingUtil.dispatch(RootPanel.get(), toolbar);
            

Der Methode KeyDownEventDispatchingUtil.dispatch() werden als Parameter das Quellwidget sowie eine beliebige Anzahl von Zielwidgets übergeben. Alle KeyDownEvents, die dem Quellwidget vom Browser zugestellt werden, werden an die Zielwidgets weitergereicht und können dadurch von den verknüpften Kommandos verarbeitet werden.

Auflösung

Die tatsächliche Auflösung eines Endgeräts kann via Browser nur unzuverlässig ermittelt werden. Insbesondere bei mehreren angeschlossenen Monitoren liefern die Komponenten Betriebssystem, Browser und Java im Zusammenspiel teilweise falsche Informationen. Die Größe eines im Viewer angezeigten Dokuments entspricht dann nicht der Größe desselben Dokuments in ausgedruckter Form. Beispielsweise besitzt ein PDF Dokument der Größe DIN A4 bei einer falsch erkannten Auflösung auf dem Monitor nicht die Größe eines DIN A4 Papierblatts.

Um dem jadice® web toolkit die korrekte Auflösung des Monitors bekannt zu machen, kann der Benutzer diese über ein Widget kalibrieren. Hierfür muss die im Widget angezeigte Skalierungslinie vom Benutzer mittels eines Lineals oder eines physischen Blatts Papier auf die zugehörige Länge eingestellt werden. Damit kann die korrekte Auflösung des zugehörigen Monitors berechnet werden. Das Widget bietet außerdem die Möglichkeit, die individuell eingestellte Auflösung über einen Button sessionübergreifend zu persistieren und damit bei jedem Start der Anwendung zu setzen. Zusätzlich bietet das Widget die Möglichkeit, eine bereits gesetzte individuelle Auflösung wieder zu entfernen. Falls eine individuelle Auflösung existiert, wird diese verwendet.

Widget für die Kalibrierung der Auflösung

Weiterhin kann im Integrationscode über die Methode setGlobalDeviceResolution der Klasse ViewerBuilder eine globale Auflösung für alle Benutzer gesetzt werden. Dies kann insbesondere dann sinnvoll sein, wenn alle Benutzer die gleichen Monitore und damit die gleiche Auflösung verwenden. Falls keine individuelle Auflösung für einen Benutzer existiert, wird die globale Auflösung verwendet.

Falls weder eine individuelle Auflösung, noch eine globale Auflösung existiert, kann über die Methode setAutoDetectResolution der Klasse ViewerBuilder eine Schätzung für die Auflösung konfiguriert werden. Hierfür wird ein unsichtbares div-Element auf dem Bildschirm platziert und anschließend dessen Größe gemessen. Da die Größe des div-Elements vom Browser geliefert wird und dieser unter Umständen vom Betriebssystem falsche Informationen erhält, kann die Schätzung von der tatsächlichen Auflösung abweichen.

Falls die Schätzung der Auflösung nicht durchgeführt werden kann, wird eine Default Auflösung von 72 DPI analog zur jadice® document platform 5 verwendet.

Details zur Integration und die zugehörigen Codebeispiele finden sich in den Showcases unter "Calibrating the Resolution" und "Defining the Resolution globally".

Anmerkung

Aktuell kann pro Client genau eine Auflösung gesetzt werden. Falls an einen Client mehrere Monitore angeschlossen sind, wird über das oben beschriebene Widget genau einer dieser Monitore kalibriert. Analog dazu ist eine global konfigurierte Auflösung für alle angeschlossenen Monitore gültig. Da in vielen Anwendungsfällen mit mehreren Monitoren lediglich einer davon für die Dokumentanzeige verwendet wird, sollte die Konfiguration der Auflösung für dieses eine Gerät ausreichend sein.

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:

Kategorie Name
Allgemein DialogStyle
ViewerBasicStyle
BorderBasicStyle
VisibleBoundsStyle
GalleryNavigationButtonStyle
CalibrateResolutionStyle
MenuBarStyle
ContextMenuStyle
ListStyle
AnnotationStyle
OverlayInformationStyle
SelectorStyle
CursorStyle
Thumbnail BorderThumbnailStyle
LabelThumbnailStyle
ViewerThumbnailStyle
ThumbnailToolStyle
LabelThumbnailStyle
JadiceButton JadiceButtonStyle
JadiceButtonOnPageViewStyle
JadiceButtonThumbnailStyle
JadiceButtonTextStyle
Toolbar ToolbarHorizontalStyle
ToolbarStatusbar
ToolbarVerticalSubmenuStyle
ToolbarSubmenuPopupStyle
ToolbarcontentStyle
Scrollbar ScrollbarHorizontalStyle
ScrollbarVerticalStyle
ScrollbarTouchStyle
SnapIn PageLayoutSnapInStyle
PageSnapInStyle
ZoomSnapInStyle
Popup SimplePopupStyle
PopupWidgetStyle
Editor LineWidthEditorStyle
ColorEditorStyle
FontFaceEditorStyle
FontSizeEditorStyle
Search RolloutSearchStyle
ToolbarSearchStyle
AdvancedSearchStyle
Offset DocumentOffsetStyle
ThumbnailOffsetStyle

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.

Internationalisierung

Die Bezeichnungen in der Benutzeroberfläche des jadice® web toolkit lassen sich mittels i18n in verschiedene Sprachen übersetzen. Das jadice® web toolkit nutzt hierzu den Internationalisierungs-Support des GWT. Die Sprach-Mappings für die lokalisierten Versionen befinden sich an zwei Stellen:

  1. Produktkern: com.levigo.jadice.web.client.ui.i18n

  2. Demos: com.levigo.jadice.web.demo.common.client.ui.i18n

Dort findet sich jeweils deutsche und englische Sprachdateien mit der Endung *Messages_de.properties bzw. *Messages_en.properties. Weitere Sprachen können durch Hinzufügen weiterer namenskonformer Properties-Dateien kundenspezifisch ergänzt werden. Zusätzlich ist in den beiden Packages jeweils auch das zugehörige Interface für den programmatischen Zugriff auf die lokalisierten Werte abgelegt.

Wichtig

Um die Internationalisierung zu aktivieren, muss in den einbindenden Projekten die Datei gwt.xml wie folgt ergänzt werden:

<!-- Bereitstellung der Sprachen englisch und deutsch --> 									
<extend-property name="locale" values="de,en" />
<set-property name="locale" value="de,en" />

<!-- Fallback- / Standardsprache = englisch -->
<set-property-fallback name="locale" value="en" />									
									
		

Nachfolgend wird beispielhaft erläutert, wie zur EnterpriseDemo weitere Sprachen hinzugefügt werden können. Hierzu müssen die drei Dateien DemoMessages_de.properties,JadiceMessages_de und Enterprise_Messages_de.in die neue Sprache übersetzt werden und die Endungen der Dateien für die neue Sprache umbenannt werden. Gleiches gilt für die Datei EnterpriseExorbyteMessages_de.properties. In den genannten Dateien müssen Sonderzeichen wie folgt escaped werden: Einem einfachen Anführungszeichen (') muss ein weiteres einfaches Anführungszeichen vorangestellt werden. Beispielsweise ist l'importazione zu l''importazione zu ändern. Die Sonderzeichen (zum Beispiel Zeichen mit Accent) sind mit dem jeweiligen UTF-8 Code zu ersetzen (zum Beispiel é mit U+00E9), sonst erscheinen bei Ausführung des Programms Ersetzungzeichen. Allgemeine Informationen zu Properties-Dateien können unter GWT Internationalisierung Dokumentation eingesehen werden.

Im Interface DemoMessages sind für jede neue Sprache die beiden folgenden Strings mit der passenden Endung hinzuzufügen:

public interface DemoMessages extends com.google.gwt.i18n.client.Messages {
  String locale_de_abbreviated(); String locale_de();
}...

Die gwt.xml Dateien der Module webtoolkit-demo-enterprise-base (EnterpriseDemoBase.gwt.xml) sowie von webtoolkit-demo-common (DemoCommon.gwt.xml) sind wie oben beschrieben anzupassen.

Sämtliche in der EnterpriseDemo verwendeten Annotationsprofile sind anzupassen, das heißt alle, die sich in den Modulen webtoolkit-demo-common, webtoolkit-demo-enterprise-base und webtoolkit-demo-enterprise befinden. Dort liegen sie jeweils im Ordner resources und dort im Ordner annotationConfigurations. In den Annotationsprofilen sind die Anführungszeichen und Akzente normal auszuschreiben, das heißt nicht durch UTF-8 zu ersetzen.

Die neu hinzugefügte Sprache kann ausprobiert werden, indem im Browser hinter die URL der Parameter für die zu verwendende Sprache hinzugefügt wird, zum Beispiel locale=it für Italienisch. Alternativ dazu kann ein neuer Button zum jadice® web toolkit wie folgt hinzugefügt werden:

Das Menü für die Sprache der Enterprise-Demo wird in der Klasse JadiceDocumentViewer angelegt. In der Methode JadiceDocumentViewer.createMainMenu() wird das Sprachenmenü erstellt. Hier kann man analog zum Vorgehen für Deutsch und Englisch einen neuen Eintrag für die hinzuzufügende Sprache in das Dropdown-Menü hinzufügen.

Falls dem Menü auch ein Icon für die neue Sprache hinzugefügt werden soll, kann ein Icon erstellt werden. Dann die nachfolgenden Dateien im Modul webtoolkit-demo-enterprise ersetzen: jwt-icon-font.svg, jwt-icon-font.ttf, jwt-icon-font.woff und jwt-icon-font.woff2. Für das Icon in der neuen Sprache muss das Enum JWTIconFont ergänzt werden. In der Datei jwt-icon-font.css muss ein Eintrag für eine neue Klasse angelegt werden, analog zur Sprache Deutsch bzw. Englisch. Gegebenenfalls muss der Cache im Browser gelöscht werden, um die Icons zu aktualisieren. Allgemeine Informationen zu den IconFonts finden Sie unter „Icon Fonts“

Teil der EnterpriseDemo ist auch eine Beispielintegration für Audio und Video. Falls diese ebenfalls übersetzt werden soll, kann wie folgt vorgegangen werden:

Das Menü für die Beispielintegration Audio/Video kann in der Klasse JadiceMediaViewer angepasst werden. In der Methode JadiceMediaViewer.createMainMenu() wird das Language Menu erstellt. Hier kann man analog zum Vorgehen für Deutsch und Englisch einen neuen Eintrag für die hinzuzufügende Sprache in das Dropdown-Menü hinzufügen. In den Methoden JadiceMediaViewer.addFreezeFrames() und JadiceMediaViewer.fillVideoInfo() sind die neuen Sprachen ebenfalls zu ergänzen. Auch in die Dateien jwtaudio.mp3.json sowie jwtvideo.mp4.json ist eine Übersetzung für die neue Sprache hinzuzufügen.

Tools

Tools sind Erweiterungen der PageView, die über den ToolManager verwaltet werden. Die Tools werden grundsätzlich analog der jadice® document platform 5 verwendet (siehe Abschnitt "Tools").

Einschränkungen/Unterschiede:

  • Die Tool-Klassen des jadice® web toolkit stellen eigenständige Implementierungen dar und sind deshalb in einem anderen Package (com.levigo.jadice.web.client.tools) abgelegt.

  • Anstelle des Graphics2d wird ein Webgraphics/HTML5Canvas verwendet.

AnnotationTool

Die Erstellung und Bearbeitung von Annotationen wird über das AnnotationTool gesteuert.

Standardmäßig erlaubt das Tool, mehrere Annotationen gleichzeitig zu selektieren. Falls keine Mehrfachselektion gewünscht ist, kann das Tool über die Methode setSingleSelectionMode(true) in den Modus für einfache Selektion versetzt werden.

Details zur Integration und die zugehörigen Codebeispiele finden sich in den Showcases unter "Annotations".

DoubleTapZoomTool

Mit Hilfe des DoubleTapZoomTool kann durch schnelles zweifaches Tippen auf den Bildschirm auf Seitenbreite gezoomt werden.

GridTool

Um ein dem aktuellen Dokument vorab hinzugefügtes Grid zu visualisieren, kann das GridTool verwendet werden. Linienfarbe und -stärke sind dabei über das Tool konfigurierbar.

Details zur Integration und die zugehörigen Codebeispiele finden sich in den Showcases unter "Annotations -> Grid Positioning".

KeyboardNavigationTool

Das KeyboardNavigationTool dient zur Navigation im Dokument. Über die Pfeiltasten lässt sich im aktuell dargestellten Dokument intuitiv ein kleines bisschen nach oben, unten, rechts, links navigieren.

HoverLensTool

Um einzelne Stellen eines Dokuments zu vergrößern, ohne dabei den Überblick zu verlieren, kann mittels des HoverLensTools eine Lupe auf der aktuellen Seite eingeblendet werden. Mit Linksklicks wird der Zoomfaktor innerhalb der Lupe erhöht, mit Rechtsklicks wird der Zoomfaktor verringert.

Form, Größe und initialer Zoomfaktor der Lupe sind dabei über das Tool konfigurierbar, genauso wie die Größe der schrittweisen Zoomfaktor-Veränderung bei Rechts- und Linksklicks. Zusätzlich kann die Lupe mit der Kombination Strg + Linksklick auf der aktuellen Position fixiert werden.

Details zur Integration und die zugehörigen Codebeispiele finden sich in den Showcases unter "Tools -> HoverLensTool Examples".

PanForceTools

Mit Hilfe der PanForceTools kann durch das Dokument gescrollt werden. Das Tool ist in zwei Ausprägungen vorhanden. Für das Scrollen mit der Maus muss das PanForceMouseTool in den ToolManager eingehängt werden; zum Scrollen über Touch-Eingaben das PanForceTouchTool. Natürlich können auch beide Tools gleichzeitig eingesetzt werden.

SelectPageTool

Das SelectPageTool ermöglicht die Mehrfachauswahl von Seiten über die ThumbnailView. Es wird sowohl für das Markieren einzelner Seiten, als auch für das Verschieben von Seiten via Drag&Drop in der ThumbnailView verwendet. Das Tool kann ausschließlich in Kombination mit der ThumbnailView und nicht mit der Standard-PageView verwendet werden. Aus diesem Grund wird es - im Unterschied zu diversen anderen Tools - folgendermaßen am ToolManager der ThumbnailView registriert: ThumbnailPageView.getToolManager().register(SelectPageTool.class, true);

TextSelectionTools

Für die Textselekion gibt es wie bei den Scroll-Tools zwei Ausprägungen. Wird das TextSelectionTool in den ToolManager einghängt, so kann über Mauseingaben Text selektiert werden. Um über Touch-Eingaben Text zu selektieren, wird das TextSelectionTouchTool benötigt. Für den Betrieb dieses Tools ist es nötig, dass das HighlightTool im ToolManager registriert ist.

TwoFingerGestureTool

Das TwoFingerGestureTool bietet verschiedene Funktionalitäten für Zwei-Finger-Touch-Gesten. Wird das Tool einkonfiguriert, kann über Zwei-Finger-Gesten gedreht, gescrollt und gezoomt werden. Das Tool bietet zusätlich über die Methoden disableZoom(), disableScroll(), disableRotate() die Möglichkeit, einzelne Funktionalitäten zu deaktivieren.

VisibleBoundsTool

Das VisibleBoundsTool hebt den aktuell sichtbaren Bereich einer Seite in der Thumbnail-Ansicht hervor. Die Farbe dieses Tools können über eine GSS-Datei konfiguriert werden.

                @def PAGE_BOUNDS_BORDER_WIDTH 2; // Breite des Seitenrandes
                @def VISUAL_BOUNDS_BORDER_WIDTH 1; // Breite des Randes um den sichtbaren Bereich
                @def PAGE_BOUNDS_BORDER_COLOR #666565; // Farbe des Seitenrandes
                @def PAGE_VISUAL_BOUNDS_INTERSECTION_FILL_COLOR rgba(102,101,101,0.5); // Farbe des Bereiches zwischen Seitenrand und sichtbarem Bereichsrand
                @def VISUAL_BOUNDS_FILL_COLOR rgba(0,0,0,0); // Farbe des sichtbaren Bereiches
                @def VISUAL_BOUNDS_BORDER_COLOR #666565; // Farbe des Randes um den sichtbaren Bereich
            

AreaSelectionTool

Das AreaSelectionTool ermöglicht die Auswahl eines Bereiches. Nach der Selektion des Bereichs erscheint eine Toolbar mit registrierten Funktionen, die auf den Bereich angewendet werden können. Alternativ kann eine Standard-Aktion direkt ausgeführt werden

Als ersten Anwendungsfall für dieses Tool wurde das OCR-Addon für das Webtoolkit implementiert. Mehr Informationen zum Einsatz des Tools sind auch in der Dokumentation des OCR Addons zu finden.

Presentation Rules

Mit einer PresentationRule lassen sich allgemeine Darstellungs-Regeln definieren. Im Folgenden einige praktische Beispiele:

  • Ein möglicher Anwendungsfall sind die FitLayouts, die sicherstellen, dass die Zoomfaktoren jeder Seite so angepasst werden, dass die Seitenbreite bzw. Seitenhöhe die komplette PageView füllt (ApplyDynamicZoomRule). Diese Regel kann ausschließlich im SinglePageLayout verwendet werden. Bei Aktivierung wird daher automatisch in dieses Layout gewechselt. Die Regel bleibt so lange aktiviert, bis der Zoomfaktor manuell geändert, in ein anderes Layout gewechselt oder der Modus explizit ausgeschaltet wird.

Um eine PresentationRule zu aktivieren, fügt man diese einfach dem PresentationRuleManager der PageView hinzu: pageView.getPresentationRuleManager().getRules().add(new ApplyDynamicZoomRule());.

Vorschau-Ansicht (Thumbnails)

Zum Erstellen einer Vorschau-Ansicht existiert die Klasse com.levigo.jadice.web.client.ThumbnailViewBuilder, die eine einfache Erstellung einer com.levigo.jadice.web.client.ThumbnailView ermöglicht.

Im Hauptbereich des Viewers wird der Inhalt der aktuell selektierten Seite angezeigt. Die Vorschauansicht folgt der aktuell selektierten Seite und zeigt zusätzlich die umgebenden Seiten in verkleinerter Form in einem gesonderten Bereich an. Zum einen kann die Vorschau dabei temporär als Popup über den untersten Teil der eigentlichen Dokumentanzeige gelegt werden. Zum anderen besteht die Möglichkeit, die Vorschau aber auch permanent an einer anderen Stelle einzublenden (z.B. über der Toolbar oder in einem separaten vertikalen Bereich).

Eine ausführliche Beschreibung findet sich in der jadice Knowledge-Base unter: Mit dem jadice web toolkit eine eigene ThumbnailView erstellen

Codebeispiele finden sich u.a. im folgenden Showcase .

Flexible Baumansicht

Das jadice® web toolkit bietet eine Komponente für die Darstellung einer flexiblen Baumansicht analog zur jadice® document platform 5. Darüber können unter anderem Aktenstrukturen dargestellt werden, die mehrere Dokumente in Form von Knoten enthalten. Bei Selektion eines Knotens kann der zugehörige Dokumentinhalt im Viewer angezeigt werden.

[jadice web toolkit Version 5.10.38.8 : Dokumentation für Entwickler. Veröffentlicht: 2021-07-05]