Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

837 Aufrufe

Veröffentlicht am

Google web toolkit

  • Als Erste(r) kommentieren

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

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?

×