DAS GOOGLE
WEB TOOLKIT

Malte Wessel
GRUNDLAGEN
WAS IST DAS GOOGLE WEB
TOOLKIT?

• Java-Framework
• komplette

zur Entwicklung von Webanwendungen

Entwicklung in Java

• ...
WAS IST AJAX?
• Asynchronous

JavaScript and XML

• Konzept

zum Asynchronen Informationsaustausch zwischen
Client und Ser...
KLASSISCHE SERVER-ANFRAGE
(BEISPIEL: STUDIVZ)

Antwort

Anfrage des Clients an
den Server.
Geforderte Seite z.B.
http://ww...
SERVER-ANFRAGE MITTELS AJAX
(BEISPIEL: STUDIVZ/PLAUDERKASTEN)
Ausgangspunkt:
Plauderkasten wurde geladen.
Alle Html-, CSS-...
DAS GOOGLE WEB TOOLKIT
WARUM DAS GOOGLE WEB
TOOLKIT?
• Erleichtert
• Server

das Erstellen von komplexen Webanwendungen

und Client (!) werden in...
ARCHITEKTUR DES GWT
ARCHITEKTUR DES GWT
ARCHITEKTUR DES GWT
ARCHITEKTUR DES GWT
PROJEKTSTRUKTUR
• GWT-Anwendungen

werden grundsätzlich
in Projekten organisiert

• Projektstruktur
• Aufteilung

baut auf...
MODULE
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='referat'>
<!-- Inherit the core Web Toolkit stuff.
<inher...
ERSTELLEN VON
BENUTZEROBERFLÄCHEN
• Verwendung

von Widgets

• Große Anzahl
• Kombination

an vorgefertigten Widgets

von ...
WIDGET BEISPIELE
IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
	
	
public void onModuleLoad() {
	
	
	
	
// ...
IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
	
	
public void onModuleLoad() {
	
	
	
	
// ...
IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
	
	
public void onModuleLoad() {
	
	
	
	
// ...
IMPLEMENTIERUNG VON
WIDGETS
public class MyFileUpload implements EntryPoint {
	
	
public void onModuleLoad() {
	
	
	
	
// ...
IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code
IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code
IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code
IMPLEMENTIERUNG VON
WIDGETS
Das DOM nach
Manipulation durch
vom GWT
generierten
JavaScript-Code
EVENTS & LISTENER
• Listener

registrieren z.B. Aktionen des Benutzers

• wenn

ein Button geklickt wird, wird eine bestim...
WORUM ES ABER
EIGENTLICH GEHT:
REMOTE PROCEDURE CALLS
• Mechanismus

um aus einem Browser heraus mit einem Server
zu kommunizieren

• GWT

stellt Hilfskl...
REMOTE PROCEDURE CALLS

Server

JavaScript

Antwort

Java-Servlet
Anfrage

Google Web Toolkit

nochmals zur Veranschaulich...
BAUPLAN EINES
REMOTESERVICES
Ein Service benötigt drei Komponenten:
1. clientseitige Java-Schnittstelle
(Definition der Ser...
BAUPLAN EINES
REMOTESERVICES
clientseitige Java-Schnittstelle
public interface MeinService extends RemoteService {
	
Strin...
BAUPLAN EINES
REMOTESERVICES
serverseitige Implementierung des Services

public class MeinServiceImpl extends RemoteServic...
BAUPLAN EINES
REMOTESERVICES
Schnittstelle für asynchrone Kommunikation

public interface MeinServiceAsync {
	
void sagHal...
EIN BESPIEL-PROGRAMM
EIN BEISPIEL-PROGRAMM
Die Html-Host-Datei
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html...
EIN BEISPIEL-PROGRAMM
Die Html-Host-Datei
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html...
EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
	
	
private final RechnenServ...
EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
	
	
private final RechnenServ...
EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
	
	
private final RechnenServ...
EIN BEISPIEL-PROGRAMM
Die Clientseite
/* ... */
public class Referat implements EntryPoint {
	
	
private final RechnenServ...
EIN BEISPIEL-PROGRAMM
EIN BEISPIEL-PROGRAMM
Die Serviceschnittstelle

/* ... */
public interface RechnenService extends RemoteService {
	
public...
EIN BEISPIEL-PROGRAMM
Die asynchrone Schnittstelle

/* ... */
public interface RechnenServiceAsync {
	
void rechne(Integer...
EIN BEISPIEL-PROGRAMM
Das Servlet

/* ... */
public class RechnenServiceImpl extends RemoteServiceServlet implements Rechn...
EIN BEISPIEL-PROGRAMM
Die Clientseite - der Listener
/* ... */
public class Referat implements EntryPoint {
	

	
	
	
	
	
	...
EIN BEISPIEL-PROGRAMM
Die Clientseite - der Listener
/* ... */
public class Referat implements EntryPoint {
	

	
	
	
	
	
	...
EIN BEISPIEL-PROGRAMM
Die Clientseite - der Listener
/* ... */
public class Referat implements EntryPoint {
	

	
	
	
	
	
	...
EIN BEISPIEL-PROGRAMM
FRAGEN?
Nächste SlideShare
Wird geladen in …5
×

Malte Wessel - Google web toolkit

730 Aufrufe

Veröffentlicht am

Google web toolkit

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
730
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Malte Wessel - Google web toolkit

  1. 1. DAS GOOGLE WEB TOOLKIT Malte Wessel
  2. 2. GRUNDLAGEN
  3. 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. 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. 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. 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. 7. DAS GOOGLE WEB TOOLKIT
  8. 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. 9. ARCHITEKTUR DES GWT
  10. 10. ARCHITEKTUR DES GWT
  11. 11. ARCHITEKTUR DES GWT
  12. 12. ARCHITEKTUR DES GWT
  13. 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. 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. 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. 16. WIDGET BEISPIELE
  17. 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. 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. 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. 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. 21. IMPLEMENTIERUNG VON WIDGETS Das DOM nach Manipulation durch vom GWT generierten JavaScript-Code
  22. 22. IMPLEMENTIERUNG VON WIDGETS Das DOM nach Manipulation durch vom GWT generierten JavaScript-Code
  23. 23. IMPLEMENTIERUNG VON WIDGETS Das DOM nach Manipulation durch vom GWT generierten JavaScript-Code
  24. 24. IMPLEMENTIERUNG VON WIDGETS Das DOM nach Manipulation durch vom GWT generierten JavaScript-Code
  25. 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. 26. WORUM ES ABER EIGENTLICH GEHT:
  27. 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. 28. REMOTE PROCEDURE CALLS Server JavaScript Antwort Java-Servlet Anfrage Google Web Toolkit nochmals zur Veranschaulichung... Client (Browser)
  29. 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. 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. 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. 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. 33. EIN BESPIEL-PROGRAMM
  34. 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. 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. 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. 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. 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. 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. 40. EIN BEISPIEL-PROGRAMM
  41. 41. EIN BEISPIEL-PROGRAMM Die Serviceschnittstelle /* ... */ public interface RechnenService extends RemoteService { public String rechne(Integer summandEins, Integer summandZwei) throws IllegalArgumentException; }
  42. 42. EIN BEISPIEL-PROGRAMM Die asynchrone Schnittstelle /* ... */ public interface RechnenServiceAsync { void rechne(Integer summandEins, Integer summandZwei, AsyncCallback<String> callback) throws IllegalArgumentException; }
  43. 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. 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. 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. 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. 47. EIN BEISPIEL-PROGRAMM
  48. 48. FRAGEN?

×