Malte Wessel - Google web toolkit

708 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
708
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?

×