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)
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
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
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
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
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)
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
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);
/* ... */
}
}