In 0 - GWT Projekt, basierend auf Spring Boot, einrichten haben wir ein GWT-Projekt vorbereitet, in dem bisher nichts weiter als eine statische Erfolgsmeldung angezeigt wird. In diesem Tutorial nutzen wir die JWT-Bibliotheken, um den Jadice Viewer einzubinden.
Das Ergebnis des Tutorials kann in https://github.com/levigo/jwt-getting-started/tree/master/jwt-tutorial-001 überprüft werden.
Projektstruktur
Folgende Klassen ergänzen wir in diesem Tutorial:
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
└── src/main/java/ └── org/jwt/ └── client/ └── ui/ └── JadiceWidget.java - Unsere GUI-Komponente. |
Maven
Die Standard-JWT-Bibliotheken sind über den im vorigen Kapitel erläuterte BOM-Mechanismus bereits eingebunden.
Modulkonfiguration (gwt.xml)
Zur Verwendung von JWT muss unsere GWT-Modulkonfiguration ebenfalls ergänzt werden. Wir erweiteren nun zusätzlich com.levigo.jadice.web.JadiceWebtoolkit.
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
<inherits name="com.levigo.jadice.web.JadiceWebtoolkit" /> |
UI
Für den Anfang wollen wir in unserem EntryPoint dem GWT-RootPanel ein eigenes Widget hinzufügen, das JadiceWidget.
In unserem Beispiel nutzt das JadiceWidgetGWTsDockLayoutPanel, das stark an das Swing BorderLayout erinnert. Dem Panel wird der jadice Viewer hinzugefügt. Der Viewer enthält alle notwendigen Funktionen um Dokumente anzuzeigen und mit ihnen zu interagieren, insbesondere die PageView.
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
package org.jwt.client.ui;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RequiresResize;
import com.google.gwt.user.client.ui.Widget;
import com.levigo.jadice.web.client.PageView;
import com.levigo.jadice.web.client.Viewer;
import com.levigo.jadice.web.client.ViewerBuilder;
/**
* A simple widget, that adds a {@link Viewer} to a {@link DockLayoutPanel}.
*/
public class JadiceWidget implements IsWidget, RequiresResize {
private DockLayoutPanel panel;
private Viewer viewer;
public JadiceWidget() {
init();
}
private void init() {
viewer = createViewer();
panel = new DockLayoutPanel(Unit.PX);
panel.setWidth("100%");
panel.setHeight("100%");
panel.add(viewer);
}
private Viewer createViewer() {
final Viewer viewer = new ViewerBuilder().build();
return viewer;
}
public PageView getPageView() {
return viewer.getPageView();
}
@Override
public Widget asWidget() {
return panel;
}
@Override
public void onResize() {
viewer.onResize();
}
} |
EntryPoint
In unserem EntryPoint initialisieren wir das JadiceWidget und fügen das Element dem RootPanel unter der id "Viewer" hinzu. JWT nutzt zur Client-Server-Kommunikation standardmäßig websockets. Da der beim Debuggen verwendete Jetty websockets aber nicht unterstützt, deaktivieren wir diese in initServerConnection() und nutzen dadurch Server Sent Events (vgl. http://webtoolkit.jadice.com/doc/sect.chapter-reference.general.html#sect.reference.connection-api).
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
package org.jwt.client;
import java.io.IOException;
import org.jwt.client.ui.JadiceWidget;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.levigo.jadice.web.conn.client.ServerConnectionBuilder;
/**
* This is the applications {@link EntryPoint} as defined in the "Application.gwt.xml".
* It initializes the {@link JadiceWidget} and adds it to {@link RootPanel}.
*/
public class ApplicationEntryPoint implements EntryPoint {
private JadiceWidget jadiceWidget;
@Override
public void onModuleLoad() {
initServerConnection();
jadiceWidget = new JadiceWidget();
// Adds the jadiceWidget to the "Viewer"-div of the rootpanel (see index.html).
RootPanel rootPanel = RootPanel.get("Viewer");
rootPanel.add(jadiceWidget);
GWT.log("jwt tutorial loaded");
}
/**
* For the tutorial we deactivate websocket communication as not supported by jetty.
*/
private void initServerConnection() {
try {
new ServerConnectionBuilder().setWebSocketEnabled(false).build();
} catch (IOException e) {
e.printStackTrace();
Window.alert("Error initializing server-connection.");
}
}
} |
index.html
Damit das Viewer-div angezeigt wird, müssen wir die index.html noch entsprechend ergänzen:
| Codeblock | ||||||
|---|---|---|---|---|---|---|
| ||||||
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>tutorial 1</title>
<script src="imageviewer/imageviewer.nocache.js" type="text/javascript"></script>
</head>
<body style="margin: 0; padding: 0">
<div id="Viewer" style="width: 100%; height: 100%; position: absolute"></div>
</body>
</html> |
Zusammenfassung
Mit diesem Tutorial haben wir den jadice Viewer erfolgreich eingebunden. Da wir bisher kein Dokument laden, wird allerdings nur eine leere graue Fläche angezeigt.
