Das Google Web Toolkit (GWT) ist ein Java-Framework zur Entwicklung komplexer Webanwendungen, das die Kommunikation zwischen Client und Server durch AJAX ermöglicht. Es bietet eine strukturierte Projektarchitektur, in der sowohl clientseitige als auch serverseitige Codes organisiert sind, und die Nutzung von Widgets zur GUI-Gestaltung, die ähnlich wie Swing-Komponenten funktionieren. GWT erleichtert die Erstellung von Anwendungen und mindert Kompatibilitätsprobleme durch die Generierung von JavaScript-Code, der im Browser ausgeführt wird.

1. DAS GOOGLE
WEB TOOLKIT
Malte Wessel

2. GRUNDLAGEN

3. WAS IST DAS GOOGLE WEB
TOOLKIT?
• Java-Framework
• komplette
zur Entwicklung von Webanwendungen
Entwicklung in Java
• Kommunikation
von Client und Server durch Ajax

4. WAS IST AJAX?
• Asynchronous
JavaScript and XML
• Konzept
zum Asynchronen Informationsaustausch zwischen
Client und Server mittels JavaScript
• Arbeitet
mit der XMLHttpRequest-API
• Informationsaustausch
• Manipulation
JavaScript
z.B. von Html, Xml oder JSON
des DOM (Document Object Model) durch

5. KLASSISCHE SERVER-ANFRAGE
(BEISPIEL: STUDIVZ)
Antwort
Anfrage des Clients an
den Server.
Geforderte Seite z.B.
http://www.studivz.net
Anfrage
Server
Client
(Browser)
Server verarbeitet
Anfrage und schickt
die Informationen in
Form von Html-, CSS,
JavaScript-, und BildDateien

6. SERVER-ANFRAGE MITTELS AJAX
(BEISPIEL: STUDIVZ/PLAUDERKASTEN)
Ausgangspunkt:
Plauderkasten wurde geladen.
Alle Html-, CSS- und BildDateien sind in Verwendung
Server antwortet mit Html-,
JavaScript- oder XML-Dateien
Antwort
Anfrage
Server
Client
(Browser)
Kontinuierliche Aktualisierung
der Chat-Nachrichten
(JavaScript-Aufruf)
JavaScript-Engine
JavaScript-Engine verarbeitet
empfangene Informationen
und präsentiert sie im Browser
(DOM-Manipulation)

7. DAS GOOGLE WEB TOOLKIT

8. WARUM DAS GOOGLE WEB
TOOLKIT?
• Erleichtert
• Server
das Erstellen von komplexen Webanwendungen
und Client (!) werden in Java entwickelt
• Beseitigt
Inkompatibilitäts-Probleme
• Java-Entwicklungsumgebung

9. ARCHITEKTUR DES GWT

10. ARCHITEKTUR DES GWT

11. ARCHITEKTUR DES GWT

12. ARCHITEKTUR DES GWT

13. PROJEKTSTRUKTUR
• GWT-Anwendungen
werden grundsätzlich
in Projekten organisiert
• Projektstruktur
• Aufteilung
baut auf Java-Paketen auf
in clientseitigen Code,
serverseitigen Code, Ressourcen und
Module

14. MODULE
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='referat'>
<!-- Inherit the core Web Toolkit stuff.
<inherits name='com.google.gwt.user.User'/>
-->
<!-- Inherit the default GWT style sheet. You can change
<!-- the theme of your GWT application by uncommenting
<!-- any one of the following lines.
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>
-->
-->
-->
<!-- Other module inherits
-->
<!-- Specify the app entry point class.
<entry-point class='com.referat.client.Referat'/>
-->
<!-- Specify the paths for translatable code
<source path='client'/>
<source path='shared'/>
-->
</module>
-->
-->

15. ERSTELLEN VON
BENUTZEROBERFLÄCHEN
• Verwendung
von Widgets
• Große Anzahl
• Kombination
an vorgefertigten Widgets
von Widgets zu eigenen Widgets
• Funktionieren
ähnlich wie Swing-Komponenten
• Cross-Browser
Kompatibilität
• GUI-Gestaltung
wird auf Java-Oberflächenkonzept verlagert

16. WIDGET BEISPIELE

17. IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
public void onModuleLoad() {
// Widget-Objekte erstellen
VerticalPanel vPanel = new VerticalPanel();
}
FileUpload fileUpload = new FileUpload();
Button uploadButton = new Button("Upload File");
// Widgets „zusammenfügen“
vPanel.add("Select a file:");
vPanel.add(fileUpload);
vPanel.add(new HTML("<br>"));
vPanel.add(uploadButton);
}
// Widgets in Html-Seite einbinden
RootPanel.get("uploadFieldContainer").add(vPanel);

18. IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
public void onModuleLoad() {
// Widget-Objekte erstellen
VerticalPanel vPanel = new VerticalPanel();
}
FileUpload fileUpload = new FileUpload();
Button uploadButton = new Button("Upload File");
// Widgets „zusammenfügen“
vPanel.add("Select a file:");
vPanel.add(fileUpload);
vPanel.add(new HTML("<br>"));
vPanel.add(uploadButton);
}
// Widgets in Html-Seite einbinden
RootPanel.get("uploadFieldContainer").add(vPanel);

19. IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
public void onModuleLoad() {
// Widget-Objekte erstellen
VerticalPanel vPanel = new VerticalPanel();
}
FileUpload fileUpload = new FileUpload();
Button uploadButton = new Button("Upload File");
// Widgets „zusammenfügen“
vPanel.add("Select a file:");
vPanel.add(fileUpload);
vPanel.add(new HTML("<br>"));
vPanel.add(uploadButton);
}
// Widgets in Html-Seite einbinden
RootPanel.get("uploadFieldContainer").add(vPanel);

20. IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
public void onModuleLoad() {
// Widget-Objekte erstellen
VerticalPanel vPanel = new VerticalPanel();
}
FileUpload fileUpload = new FileUpload();
Button uploadButton = new Button("Upload File");
// Widgets „zusammenfügen“
vPanel.add("Select a file:");
vPanel.add(fileUpload);
vPanel.add(new HTML("<br>"));
vPanel.add(uploadButton);
}
// Widgets in Html-Seite einbinden
RootPanel.get("uploadFieldContainer").add(vPanel);

21. IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code

22. IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code

23. IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code

24. IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code

25. EVENTS & LISTENER
• Listener
registrieren z.B. Aktionen des Benutzers
• wenn
ein Button geklickt wird, wird eine bestimmte Methode
ausgeführt
halloButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Hallo");
}
}
anonyme innere Klasse
kann aber auch ausgelagert werden

26. WORUM ES ABER
EIGENTLICH GEHT:

27. REMOTE PROCEDURE CALLS
• Mechanismus
um aus einem Browser heraus mit einem Server
zu kommunizieren
• GWT
stellt Hilfsklassen und Interfaces zur Verfügung
• serverseitig
• GWT
läuft ein Java-Servlet
verbirgt die Komplexität und übernimmt die
Serialisierung

28. REMOTE PROCEDURE CALLS
Server
JavaScript
Antwort
Java-Servlet
Anfrage
Google Web Toolkit
nochmals zur Veranschaulichung...
Client
(Browser)

29. BAUPLAN EINES
REMOTESERVICES
Ein Service benötigt drei Komponenten:
1. clientseitige Java-Schnittstelle
(Definition der Servicespezifikation)
2. serverseitige Implementierung des Services
(die eigentlichen Methoden)
3. Schnittstelle für asynchrone Kommunikation
(Der „Kleber“ zwischen Client und Server)

30. BAUPLAN EINES
REMOTESERVICES
clientseitige Java-Schnittstelle
public interface MeinService extends RemoteService {
String sagHallo(String deinName) throws IllegalArgumentException;
}
• Erweitert
die Schnittstelle RemoteService
• Definition
der Servicespezifikation

31. BAUPLAN EINES
REMOTESERVICES
serverseitige Implementierung des Services
public class MeinServiceImpl extends RemoteServiceServlet implements RechnenService {
public sagHallo(String deinName) throws IllegalArgumentException {
return "Hallo " + deinName;
}
}
• Teil
des Java-Servlet
• Hier
findet auch die Serialisierung statt (durch HTTPServlet)

32. BAUPLAN EINES
REMOTESERVICES
Schnittstelle für asynchrone Kommunikation
public interface MeinServiceAsync {
void sagHallo(String deinName, AsyncCallback<String> callback) throws IllegalArgumentException;
}
• Ergänzung
des Callback-Parameters
• AsyncCallback
bereit
stellt die Methoden onSuccess und onFailure

33. EIN BESPIEL-PROGRAMM

34. EIN BEISPIEL-PROGRAMM
Die Html-Host-Datei
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Referat.css">
<title>Kleine Server-Anfrage</title>
<script type="text/javascript" language="javascript" src="referat/referat.nocache.js"></script>
</head>
<body>
<h1>Kleine Server Anfrage</h1>
<div id="inputPanel">
</div>
</body>
</html>

35. EIN BEISPIEL-PROGRAMM
Die Html-Host-Datei
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Referat.css">
<title>Kleine Server-Anfrage</title>
<script type="text/javascript" language="javascript" src="referat/referat.nocache.js"></script>
</head>
<body>
<h1>Kleine Server Anfrage</h1>
<div id="inputPanel">
</div>
</body>
</html>

36. EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
private final RechnenServiceAsync rechnenService = GWT.create(RechnenService.class);
public void onModuleLoad() {
final Label plusZeichen = new Label(" + ");
final TextBox summandEins = new TextBox();
final TextBox summandZwei = new TextBox();
final Button sendenButton = new Button("Vom Server ausrechnen lassen");
summandEins.setText("1");
summandZwei.setText("2");
RootPanel.get("inputPanel").add(summandEins);
RootPanel.get("inputPanel").add(plusZeichen);
RootPanel.get("inputPanel").add(summandZwei);
RootPanel.get("inputPanel").add(sendenButton);
/* ... */
}
}

37. EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
private final RechnenServiceAsync rechnenService = GWT.create(RechnenService.class);
public void onModuleLoad() {
final Label plusZeichen = new Label(" + ");
final TextBox summandEins = new TextBox();
final TextBox summandZwei = new TextBox();
final Button sendenButton = new Button("Vom Server ausrechnen lassen");
summandEins.setText("1");
summandZwei.setText("2");
RootPanel.get("inputPanel").add(summandEins);
RootPanel.get("inputPanel").add(plusZeichen);
RootPanel.get("inputPanel").add(summandZwei);
RootPanel.get("inputPanel").add(sendenButton);
/* ... */
}
}

38. EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
private final RechnenServiceAsync rechnenService = GWT.create(RechnenService.class);
public void onModuleLoad() {
final Label plusZeichen = new Label(" + ");
final TextBox summandEins = new TextBox();
final TextBox summandZwei = new TextBox();
final Button sendenButton = new Button("Vom Server ausrechnen lassen");
summandEins.setText("1");
summandZwei.setText("2");
RootPanel.get("inputPanel").add(summandEins);
RootPanel.get("inputPanel").add(plusZeichen);
RootPanel.get("inputPanel").add(summandZwei);
RootPanel.get("inputPanel").add(sendenButton);
/* ... */
}
}

39. EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
private final RechnenServiceAsync rechnenService = GWT.create(RechnenService.class);
public void onModuleLoad() {
final Label plusZeichen = new Label(" + ");
final TextBox summandEins = new TextBox();
final TextBox summandZwei = new TextBox();
final Button sendenButton = new Button("Vom Server ausrechnen lassen");
summandEins.setText("1");
summandZwei.setText("2");
RootPanel.get("inputPanel").add(summandEins);
RootPanel.get("inputPanel").add(plusZeichen);
RootPanel.get("inputPanel").add(summandZwei);
RootPanel.get("inputPanel").add(sendenButton);
/* ... */
}
}

40. EIN BEISPIEL-PROGRAMM

41. EIN BEISPIEL-PROGRAMM
Die Serviceschnittstelle
/* ... */
public interface RechnenService extends RemoteService {
public String rechne(Integer summandEins, Integer summandZwei) throws IllegalArgumentException;
}

42. EIN BEISPIEL-PROGRAMM
Die asynchrone Schnittstelle
/* ... */
public interface RechnenServiceAsync {
void rechne(Integer summandEins, Integer summandZwei, AsyncCallback<String> callback)
throws IllegalArgumentException;
}

43. EIN BEISPIEL-PROGRAMM
Das Servlet
/* ... */
public class RechnenServiceImpl extends RemoteServiceServlet implements RechnenService {
}
public String rechne(Integer summandEins, Integer summandZwei) throws IllegalArgumentException {
Integer ergebnis = summandEins + summandZwei;
return ergebnis.toString();
}

44. EIN BEISPIEL-PROGRAMM
Die Clientseite - der Listener
/* ... */
public class Referat implements EntryPoint {
}
}
/* ... */
sendenButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Integer summandEinsInt = Integer.parseInt(summandEins.getText());
Integer summandZweiInt = Integer.parseInt(summandZwei.getText());
rechnenService.rechne(summandEinsInt, summandZweiInt, new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
Window.alert("Der Server konnte nicht antworten");
}
public void onSuccess(String result) {
Window.alert("Antwort vom Server: " + result);
}
});
}
});

45. EIN BEISPIEL-PROGRAMM
Die Clientseite - der Listener
/* ... */
public class Referat implements EntryPoint {
}
}
/* ... */
sendenButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Integer summandEinsInt = Integer.parseInt(summandEins.getText());
Integer summandZweiInt = Integer.parseInt(summandZwei.getText());
rechnenService.rechne(summandEinsInt, summandZweiInt, new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
Window.alert("Der Server konnte nicht antworten");
}
public void onSuccess(String result) {
Window.alert("Antwort vom Server: " + result);
}
});
}
});

46. EIN BEISPIEL-PROGRAMM
Die Clientseite - der Listener
/* ... */
public class Referat implements EntryPoint {
}
}
/* ... */
sendenButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Integer summandEinsInt = Integer.parseInt(summandEins.getText());
Integer summandZweiInt = Integer.parseInt(summandZwei.getText());
rechnenService.rechne(summandEinsInt, summandZweiInt, new AsyncCallback<String>() {
public void onFailure(Throwable caught) {
Window.alert("Der Server konnte nicht antworten");
}
public void onSuccess(String result) {
Window.alert("Antwort vom Server: " + result);
}
});
}
});

47. EIN BEISPIEL-PROGRAMM

48. FRAGEN?