SlideShare ist ein Scribd-Unternehmen logo
1 von 48
Downloaden Sie, um offline zu lesen
DAS GOOGLE
WEB TOOLKIT

Malte Wessel
GRUNDLAGEN
WAS IST DAS GOOGLE WEB
TOOLKIT?

• Java-Framework
• komplette

zur Entwicklung von Webanwendungen

Entwicklung in Java

• Kommunikation

von Client und Server durch Ajax
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
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
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)
DAS GOOGLE WEB TOOLKIT
WARUM DAS GOOGLE WEB
TOOLKIT?
• Erleichtert
• Server

das Erstellen von komplexen Webanwendungen

und Client (!) werden in Java entwickelt

• Beseitigt

Inkompatibilitäts-Probleme

• Java-Entwicklungsumgebung
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 Java-Paketen auf

in clientseitigen Code,
serverseitigen Code, Ressourcen und
Module
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>

-->
-->
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
WIDGET BEISPIELE
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);
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);
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);
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);
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 bestimmte Methode
ausgeführt

halloButton.addClickHandler(new ClickHandler() {
	
public void onClick(ClickEvent event) {
	
	
Window.alert("Hallo");
	
}
}

anonyme innere Klasse
kann aber auch ausgelagert werden
WORUM ES ABER
EIGENTLICH GEHT:
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
REMOTE PROCEDURE CALLS

Server

JavaScript

Antwort

Java-Servlet
Anfrage

Google Web Toolkit

nochmals zur Veranschaulichung...

Client
(Browser)
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)
BAUPLAN EINES
REMOTESERVICES
clientseitige Java-Schnittstelle
public interface MeinService extends RemoteService {
	
String sagHallo(String deinName) throws IllegalArgumentException;
}

• Erweitert

die Schnittstelle RemoteService

• Definition

der Servicespezifikation
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)
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
EIN BESPIEL-PROGRAMM
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>
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>
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);
	
	
	
	
/* ... */
	
	
	
}
}
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);
	
	
	
	
/* ... */
	
	
	
}
}
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);
	
	
	
	
/* ... */
	
	
	
}
}
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);
	
	
	
	
/* ... */
	
	
	
}
}
EIN BEISPIEL-PROGRAMM
EIN BEISPIEL-PROGRAMM
Die Serviceschnittstelle

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

/* ... */
public interface RechnenServiceAsync {
	
void rechne(Integer summandEins, Integer summandZwei, AsyncCallback<String> callback)
throws IllegalArgumentException;
}
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();
}
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);
	
	
	
}
	
	
});
	
}
});
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);
	
	
	
}
	
	
});
	
}
});
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);
	
	
	
}
	
	
});
	
}
});
EIN BEISPIEL-PROGRAMM
FRAGEN?

Weitere ähnliche Inhalte

Andere mochten auch

Digital View - Summer Edition - Jurjen Thomas
Digital View - Summer Edition - Jurjen ThomasDigital View - Summer Edition - Jurjen Thomas
Digital View - Summer Edition - Jurjen ThomasDigitalView
 
Gost 28701 90
 Gost 28701 90 Gost 28701 90
Gost 28701 90marche627
 
Lila brautjungfernkleid online
Lila brautjungfernkleid onlineLila brautjungfernkleid online
Lila brautjungfernkleid onlineSunny254
 
Gost 24517 80
 Gost 24517 80 Gost 24517 80
Gost 24517 80marche627
 
Sexy cocktailkleider onlline billig kaufen
Sexy cocktailkleider onlline billig kaufenSexy cocktailkleider onlline billig kaufen
Sexy cocktailkleider onlline billig kaufenSunny254
 
MICROSOFT UIDE OFIMATICA SED-C 95838
MICROSOFT UIDE OFIMATICA SED-C 95838MICROSOFT UIDE OFIMATICA SED-C 95838
MICROSOFT UIDE OFIMATICA SED-C 95838maromero85
 
Karcher sv 1902 eu
Karcher sv 1902 euKarcher sv 1902 eu
Karcher sv 1902 eudenisparkhoc
 
ERP-Systeme, Paolo Strever
ERP-Systeme, Paolo StreverERP-Systeme, Paolo Strever
ERP-Systeme, Paolo StreverIPM-FHS
 
Karcher sv 1802 eu
Karcher sv 1802 euKarcher sv 1802 eu
Karcher sv 1802 eudenisparkhoc
 
CULTOOL - 1.1 - DE
CULTOOL - 1.1 - DECULTOOL - 1.1 - DE
CULTOOL - 1.1 - DECultool
 
Karcher sc 2.500 c eu
Karcher sc 2.500 c euKarcher sc 2.500 c eu
Karcher sc 2.500 c eudenisparkhoc
 
Die Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPoint
Die Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPointDie Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPoint
Die Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPointMaria Hübner
 
Die suche nach vielfalt während mode monat
Die suche nach vielfalt während mode monatDie suche nach vielfalt während mode monat
Die suche nach vielfalt während mode monatSunny254
 
Schöne kommunionkleider 2015 billig online sale
Schöne kommunionkleider 2015 billig online saleSchöne kommunionkleider 2015 billig online sale
Schöne kommunionkleider 2015 billig online saleSunny254
 
Panti bliss, der versehentlichen aktivist von irland
Panti bliss, der versehentlichen aktivist von irlandPanti bliss, der versehentlichen aktivist von irland
Panti bliss, der versehentlichen aktivist von irlandSunny254
 

Andere mochten auch (18)

Digital View - Summer Edition - Jurjen Thomas
Digital View - Summer Edition - Jurjen ThomasDigital View - Summer Edition - Jurjen Thomas
Digital View - Summer Edition - Jurjen Thomas
 
Bebes
BebesBebes
Bebes
 
Gost 28701 90
 Gost 28701 90 Gost 28701 90
Gost 28701 90
 
Lila brautjungfernkleid online
Lila brautjungfernkleid onlineLila brautjungfernkleid online
Lila brautjungfernkleid online
 
Gost 24517 80
 Gost 24517 80 Gost 24517 80
Gost 24517 80
 
Sexy cocktailkleider onlline billig kaufen
Sexy cocktailkleider onlline billig kaufenSexy cocktailkleider onlline billig kaufen
Sexy cocktailkleider onlline billig kaufen
 
Karcher 11
Karcher 11Karcher 11
Karcher 11
 
MICROSOFT UIDE OFIMATICA SED-C 95838
MICROSOFT UIDE OFIMATICA SED-C 95838MICROSOFT UIDE OFIMATICA SED-C 95838
MICROSOFT UIDE OFIMATICA SED-C 95838
 
Karcher sv 1902 eu
Karcher sv 1902 euKarcher sv 1902 eu
Karcher sv 1902 eu
 
ERP-Systeme, Paolo Strever
ERP-Systeme, Paolo StreverERP-Systeme, Paolo Strever
ERP-Systeme, Paolo Strever
 
Karcher sv 1802 eu
Karcher sv 1802 euKarcher sv 1802 eu
Karcher sv 1802 eu
 
CULTOOL - 1.1 - DE
CULTOOL - 1.1 - DECULTOOL - 1.1 - DE
CULTOOL - 1.1 - DE
 
Karcher sc 2.500 c eu
Karcher sc 2.500 c euKarcher sc 2.500 c eu
Karcher sc 2.500 c eu
 
Die Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPoint
Die Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPointDie Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPoint
Die Aufmerksamkeit lenken mit eleganten Animationen und Smart Arts in PowerPoint
 
Die suche nach vielfalt während mode monat
Die suche nach vielfalt während mode monatDie suche nach vielfalt während mode monat
Die suche nach vielfalt während mode monat
 
Schöne kommunionkleider 2015 billig online sale
Schöne kommunionkleider 2015 billig online saleSchöne kommunionkleider 2015 billig online sale
Schöne kommunionkleider 2015 billig online sale
 
Panti bliss, der versehentlichen aktivist von irland
Panti bliss, der versehentlichen aktivist von irlandPanti bliss, der versehentlichen aktivist von irland
Panti bliss, der versehentlichen aktivist von irland
 
Reflexion
Reflexion Reflexion
Reflexion
 

Ähnlich wie Malte Wessel - Google web toolkit

Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht SkriptsprachenA. LE
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadingedoplan
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
 
Anbindung von Silverlight an RESTful Web Services
Anbindung von Silverlight an RESTful Web ServicesAnbindung von Silverlight an RESTful Web Services
Anbindung von Silverlight an RESTful Web ServicesAndré Wussow
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011Reto Zahner
 
JavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller SchnelleinstiegJavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller Schnelleinstiegtimbrueckner
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014emrox
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit RustJens Siebert
 
Ajax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on RailsAjax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on RailsJonathan Weiss
 
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?Michael Hofmann
 

Ähnlich wie Malte Wessel - Google web toolkit (20)

MVVM Pattern
MVVM Pattern MVVM Pattern
MVVM Pattern
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
 
Übersicht Skriptsprachen
Übersicht SkriptsprachenÜbersicht Skriptsprachen
Übersicht Skriptsprachen
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010Javascript auf Client und Server mit node.js - webtech 2010
Javascript auf Client und Server mit node.js - webtech 2010
 
Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
 
Anbindung von Silverlight an RESTful Web Services
Anbindung von Silverlight an RESTful Web ServicesAnbindung von Silverlight an RESTful Web Services
Anbindung von Silverlight an RESTful Web Services
 
Web-API Design in Java
Web-API Design in JavaWeb-API Design in Java
Web-API Design in Java
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
JavaFX - 9. JUGR Stammtisch - 5. Mai 2011
 
Node.js
Node.jsNode.js
Node.js
 
JavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller SchnelleinstiegJavaServer Faces - Ein schneller Schnelleinstieg
JavaServer Faces - Ein schneller Schnelleinstieg
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
Microservices mit Rust
Microservices mit RustMicroservices mit Rust
Microservices mit Rust
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
Ajax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on RailsAjax and JavaScript mit Ruby on Rails
Ajax and JavaScript mit Ruby on Rails
 
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
Service Mesh mit Istio und MicroProfile - eine harmonische Kombination?
 

Malte Wessel - Google web toolkit

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