Anwendungsentwicklung 1

Jörg Krüger 

Christian Uhlig 

Geschäftsprozessmodellierung WS13/14 

Anwendungsentwicklung 1

Agenda 

Geschäftsprozesse und IT 

Betriebliche Informationssysteme 

Masken-Oberflächen 

Desktop-Anwendungen 

Web-Anwendungen 

Implementierung von Web-Anwendungen 

Allgemeine Problemstellungen und Ansätze 

Webanwendungen in Java 

GWT 

UiBinder 

Editoren 

Validatoren 

Übung Prozessmodellierung WS13/14 

Seite 2

Start Event 

Kunde = Gast? 

nein 

Kunde bekannt? 

ja 

nein 

Kundendaten 

wiederverwenden 

Kundendaten 

erfassen 

ja 

Daten aktuell? 

nein 

ja 

Gast bekannt? 

Kundendaten 

aktualisieren 

ja 

nein 

Gästedaten 

wiederverwenden 

Gästedaten erfassen 

ja 

Gästedaten aktuell? 

nein 

ja 

Weitere Gäste? 

Gästedaten 

aktualisieren 

Beziehungstyp 

nein 

Kundennr 

Personendaten erfasst 

1 

Adresse_ID Straße PLZ Ort 

Person_ID 

Name 

Vorname 

Firma 

Person 

Generalisierung 

Inhalt 

1 

n 

Kunde Teilnehmer Dozent 

1 

Beziehungstyp 

Beziehungstyp 

ist fachlich 

verantwortlich für 

Teilnehmernr 

Adresse 

1 

n 

Hotelbuchung 

Hotel 

Reservierung 

Rezeption 

n 

m 

n 

1 

m 

führt aus 

Inhalt_ID 

Beziehungstyp 

Beziehungstyp 

n 

n 

Rechnung_I 

D 

Teilnahmeerfolg 

Beziehungstyp 

Beziehungstyp 

Dozentennr 

E-Mail 

m 

n 

Beziehungstyp 

m 

1 n 

n 

1 

Rechnung Beziehungstyp 

Rechnungsposition Beziehungstyp 

Artikel 

Schulungsplan 

Bezeichnung 

1 

Rechnungsnu 

mmer 

n 

n 

Beziehungstyp 

Beziehungstyp 

Rechnungsdatum 

Schulungsp 

lan_ID 

Beziehungstyp 

1 n 

Beziehungstyp 

Beziehungstyp 

Zeitraum_I 

D 

n 

Beziehungstyp 

Buchung_I 

D 

b-Attribut (ERM) 

Quartal Anzahl Preis 

Zeitraum 

Anfang 

Min 

Max 

Preis 

Ende 

1 

n 

n 

n 

n 

1 

Schulungstyp 

1 

n 

Schulung 

1 

n 

Buchung 

Buchungszeit 

punkt 

Schulungst 

yp_ID 

m 

Rechnungs 

position_ID 

Beziehungstyp 

Beziehungstyp 

Bezeichnung Dauer Honorar 

Beziehungstyp 

m 1 

Status 

Buchungsstat 

us 

Beziehungstyp 

Schulung_I 

D 

Starttag 

Endetag 

Status 

Gebucht Storniert Durchgeführt Abgerechnet 

Positionsnr Preis USt 

Anzahl 

Schulungsstat 

us 

Generalisierung 

Beziehungstyp 

Storniert 

Abgeschlosse 

n 

Läuft 

Buchung 

Planung 

Anzahl 

n 

Ausstattung 

n 

m 

Raum 

Artikel_ID 

1 

Beziehungstyp 

Bezeichnung 

Ausstattung 

_ID 

Bezeichnung 

Raum_ID 

Bezeichnung 

Etage 

Platzzahl 

Tagesmiete 

ist Vorgänger von ist Vorgänger von 

ist Vorgänger von ist Vorgänger von ist Vorgänger von 

Einchecken 

Leistungserstellung Rechnungslegung 

Auschecken Abrechnung 

ist fachlich 


führt aus 

führt aus 

Service 

Zimmer 

ist fachlich 


Gültig von 

ist fachlich 


Beziehungstyp 

Gültig bis 

Rechnungswesen 

n 

führt aus 

Preis_ID 

Preis 

Betrag 

USt-Satz 

ist fachlich 


führt aus 

ist fachlich 


führt aus 

Geschäftsprozesse und IT / Implementierung von Web-Anwendungen / GWT 

Geschäftsprozesse und IT (1) 

Ein wichtiger Fokus des Geschäftsprozessmanagement ist die Unterstützung 

von Prozessen durch Informationssysteme 

Unternehmensrealität 

Ist- 

Prozesse 

Soll- 

Prozesse 

Prozesscontrolling 

(z.B. Überwachung von operativen 

Kennzahlen wie Durchlaufzeiten) 

Prozessmodelle 

zur Beschreibung von 

Soll- und Ist-Prozessen 

(umfassend Ablauflogik, 

Daten, 

Organisationseinheiten, 

Anwendungssysteme, 

…) 

Prozessdefinition 

Prozessanalyse 

(z.B. Simulation zur Bestimmung 

notwendiger Ressourcen) 

… 

Standard/Branchensoftware 

betriebliche 

Individualsoftware 

Workflow Management 

(ausgehend von Prozess- bzw. 

Workflow-Modellen Unterstützung 

oder Automatisierung von Abläufen) 


Seite 3



Vielgestaltige IT-Unterstützung von Geschäftsprozessen 

Standardsoftware (z.B. Office) 

Branchensoftware (z.B. Hotelbuchungssoftware) 

Individualsoftware 

Unterschiedliche Unterstützungstiefe 

Unterstützung einzelner Prozessschritte (z.B. Erstellen eines Anschreibens in Word) 

Gezielte Unterstützung einer Folge von Prozessschritten durch ein spezialisiertes 

Informationssystem (z.B. Anlegen einer Buchung im Hotel), allerdings nach wie vor 

menschlicher Sachbearbeiter 

Steuerung von Prozessabläufen z.B. durch ein Workflow-Management-System 

Automatisierte Ausführung von Teilen eines Prozesses oder von einem gesamten 

Prozess (z.B. durch eine entsprechende Individualsoftware oder ein Workflow- 

Management-System/ein Prozessmanagement-Werkzeug auf Basis von Web 

Services) 


Seite 4



Fokus für uns: Individualsoftware zur Unterstützung von Geschäftsprozessen 

Nach wie vor Ausrichtung auf menschlichen Sachbearbeiter, allerdings kann 

die Software naturgemäß einige Prozessteile eigenständig ausführen 

Prozessmodelle liefern Informationen zur Spezifikation und Implementierung 

der Software. Darüber hinaus können in einem integrierten System wie ARIS 

Modelle aus dem Software-Engineering hinzugefügt und verknüpft werden. 

Extremfall: Automatische Ableitung von ausführbarer (oder fast ausführbarer) 

Individualsoftware aus Modellen (model driven architecture) 

In unserem Fall sehen wir für die Ableitung der Software einen Prozess vor: 

Modellierung der Geschäftsprozesse (Fachkonzept 2) 

Entwicklung des Datenmodells zum Fachkonzept 

Modellierung von Masken und Funktionen, die Prozessschritte unterstützen 

Ergebnis: Requirement Definition 

Vorgehensmodell zur Ableitung der Implementierung aus der Requirement Definition 


Seite 5


Betriebliche Anwendungssysteme (1) 

Typische Anforderungen und Eigenschaften von betrieblichen 

Anwendungssystemen 

Client/Server-Anwendung für den Mehr-Benutzer-Betrieb 

Gemeinsame (d.h. serverbasierte) persistente Datenhaltung mit Archivierung 

Orientierung an der Verwaltung von Geschäftsobjekten (d.h. Anlegen, Ändern, 

Suchen, usw.) und ihren Beziehungen 

Nutzung von Masken zur Pflege von Geschäftsobjekten 

Benutzerabhängige Zugriffs- und Funktionsrechte mit Nachverfolgbarkeit 

… 


Seite 6

Daten 

Layout 



Typische Elemente von Maskenoberflächen 

Ausrichtung einer Maske auf einen bestimmten 

Objekttyp (hier Kunde) oder eine bestimmte 

Funktion (z.B. "Abrechnungen erstellen") 

Darstellung der verfügbaren Objektinstanzen 

(hier per Kundenliste), gegebenenfalls mit 

Filterung / Suchfunktion 

K u n d e n l i s t e 

K u n d e n v e r w a l t u n g 

V o r n a m e 

N a c h n a m e 

K u n d e n b e r a t e r (C o m b o b o x) 

Darstellung der elementaren Objekteigenschaften 

mit entsprechenden UI-Elementen (Textfelder, 

Comboboxen, …) 

N e u e r 

K u n d e 

K u n d e 

s p e i c h e r n 

Darstellung von Unterobjekten (bei Aggregaten, 

z.B. Positionen einer Rechnung) und 

verknüpften Objekten (hier Aufträge des 

Kunden) per Listen 

A u f t r ä g e 

Funktionen (hier über Buttons) zum Anlegen, 

Löschen und Ändern eines Objektes 

N e u e r 

A u f t r a g 

A u f t r a g 

b e a r b e i t e n 

A u f t r a g 

l ö s c h e n 


Seite 7

Daten 

Layout 



Typische Elemente von Maskenoberflächen 

Funktionen (hier über Buttons) zum Anlegen, 

Löschen und Ändern von verbundenen 

Objekten; hier z.B. Wechsel in die Maske 

zu einem Auftrag per Klick auf "Auftrag 

bearbeiten" 

Durchsetzen von Geschäftsregeln 

(z.B. Validierung von Feldeingaben, 

Einschränkung von Eingabemöglichkeiten 

z.B. per Comboboxen usw.) 



V o r n a m e 



N e u e r 

K u n d e 

K u n d e s p e i c h e r n 


N e u e r 

A u f t r a g 

A u f t r a g 


A u f t r a g 



Seite 8



Umsetzung per klassischer Desktop-Anwendung (1) 

Jeweils eine Maske oder eine zusammenhängende Anordnung von Masken wird in 

einem Fenster dargestellt, damit auch flexible Navigation (z.B. im Beispiel zum 

Anlegen eines Auftrages Öffnen eines weiteren Fensters mit der Auftragsmaske ) 

Ereignisorientierte Programmierung: Elemente der GUI werden mit Prozeduren 

bzw. Methoden verknüpft, die auf bestimmte Ereignisse reagieren; auf Ebene des 

Programmcodes besteht damit immer ein unmittelbarer Bezug zu einzelnen 

Elementen der Benutzeroberfläche genau einer Benutzersitzung 

Direkte Nutzung der Betriebssystem-UI und –Bibliotheken, damit auch leicht 

verfügbare komplexe Steuerelemente (z.B. DatePicker, komplexe Tabellen mit 

Unter-Steuerelementen usw.) 

Kommunikation mit dem Server per Netzwerkstack des Betriebssystems (z.B. RPC- 

Aufrufe, eigenes Protokoll, …) 

Vergleichsweise leichter Zugang zu spezieller Hardware (z.B. Mikrofon, GPS, usw.) 

-> für betriebliche Anwendungen aber nicht sehr typisch 


Seite 9



Umsetzung per klassischer Desktop-Anwendung (2) 


Seite 10



Umsetzung per Web-Anwendung 

Darstellung der Anwendung im Internet-Browser, d.h. die Masken der Anwendung 

werden als HTML-Seiten repräsentiert, die per HTTP von einem Server ausgeliefert 

werden 

Interaktion mit der Oberfläche wird durch dynamische HTML-Seiten erreicht 

Häufig Umsetzung der Netzwerkdienste auf Serverseite, d.h. auf Clientseite findet 

dann lediglich Browser-HTTP statt 

Motive für Web-Anwendungen 

Portabilität: Anwendung prinzipiell auf jedem Endgerät mit Internet-Browser 

ausführ- bzw. darstellbar, unabhängig vom Betriebssystem und Gerätetyp 

Deployment: Keine Installation erforderlich 

Deployment: Updates werden auf Serverseite eingespielt und erfordern keinen 

Eingriff auf den Clients 

Deployment: Integration in Internet-Auftritte / Portale 

Design: Vergleichsweise leichte Anpassung der Optik (CSS) 


Seite 11


Web-Anwendungen (1) 

Dynamische Erzeugung von HTML-Seiten (d.h. Masken im HTML-Format) 

Daten 

Layout 

durch den Server 

Klassisch: Verwendung von HTML-Formularen, um Auswahl- und 

Eingabemöglichkeiten für den Benutzer zu schaffen 

Beispielablauf für die Kundenverwaltung 

Der Anwender ruft eine Webseite von einer 

entsprechenden URL ab, z.B. 

http://www.meinewebanwendung.de/kunden 

Der Server erzeugt ein HTML-Dokument zur 

Kundenmaske; dabei füllt er die textuellen Angaben 

und die Formular-Steuerelemente mit Daten aus der 

Datenhaltung (hier im ersten Schritt nur die Kundenliste) 

Das erzeugte HTML-Dokument wird per HTTP an den 

Client ausgeliefert und im Browser dargestellt 



N e u e r 

A u f t r a g 

V o r n a m e 



N e u e r 

K u n d e 


A u f t r a g 


K u n d e 

s p e i c h e r n 

A u f t r a g 



Seite 12

Geschäftsprozesse und IT / Implementierung von Web-Anwendungen Daten / GWT 


Layout 

Beispielablauf für die Kundenverwaltung (Fs.) 

Der Anwender wählt ein Element der Kundenliste aus. 

Die Auswahl wird per HTTP-GET an den Server 

übertragen, d.h. es wird nun z.B. die Seite 

http://www.meinewebanwendung.de/kunden?custid=5 

abgerufen 

Die Anwendung auf dem Server wird erneut aufgerufen 

und erhält per CGI den per URL übermittelten Parameter 

(custid). Sie erzeugt daraufhin ein neues 

HTML-Dokument, in dem nun das Kundenformular mit 

den Werten des ausgewählten Kunden ausgefüllt ist. 



V o r n a m e 



N e u e r 

K u n d e 



Das erzeugte HTML-Dokument wird per HTTP an den 

Client ausgeliefert und im Browser dargestellt 

N e u e r 

A u f t r a g 

A u f t r a g 


A u f t r a g 


Der Anwender ändert Angaben zum Kunden, z.B. den Vornamen. Per Klick auf 

"Kunde speichern" wird erneut per HTTP-GET eine Anfrage an den Server der Form 

http://www.meinewebanwendung.de/kunden?custid=5&mode=save&name=Hansel& 

vorname=Hans 


Seite 13

Geschäftsprozesse und IT / Implementierung von Web-Anwendungen Daten / GWT 


Layout 

Beispielablauf für die Kundenverwaltung (Fs.) 

Die Anwendung erhält die Anfrage per CGI; aus den 

Parametern leitet sie ab, dass der Datensatz zum 

entsprechenden Kunden zu aktualisieren ist. 

Anschließend liefert sie das gleiche HTML-Dokument 

erneut aus, nun mit den aktualisierten Angaben und 

möglicherweise einen Hinweis auf das erfolgreiche 

Speichern 

usw. 



V o r n a m e 



N e u e r 

K u n d e 



N e u e r 

A u f t r a g 

A u f t r a g 


A u f t r a g 



Seite 14



Benutzer 

Eingaben in Formular 

Absenden des Formulars 

Browser 

HTTP-Request 

zu URL mit 

Formular- 

Parametern 

HTTP-Response 

Datenhaltung 

HTTP-Request / 

URL und Parameter 

Ändern/ 

Anlegen/ 

Löschen 

von Objekten 

Suchen/Lesen 

von Objekten 

HTTP-Server 

Anwendung 

HTTP-Response / 

HTML-Dokument 

Statische 

Dateien 

(HTML, 

Bilder, CSS, 

...) 

Weitere 

Dienste (z.B. 

SMS- 

Gateway, E- 

Mail, usw.) 


Seite 15



Also… 

Interaktionen mit der Benutzeroberfläche werden umgesetzt in ein entsprechendes 

HTTP-Request, dass die vom Anwender vorgenommenen Eingaben und die 

gewünschte Operation (z.B. Speichern) als Parameter enthält. 

Verwendung von HTTP-GET bzw. -POST zur Übermittlung der Parameter 

Aufruf einer Anwendungssoftware auf dem Server mit der gewünschten URL des 

Requests; die darüber hinaus übermittelten Parameter werden per CGI übergeben 

Die Anwendung auf dem Server erzeugt ein HTML-Dokument, das den neuen 

Zustand der Benutzeroberfläche nach Ausführung der Operation repräsentiert. 

Dieses Dokument wird ausgeliefert und dargestellt. 


Seite 16



Herausforderungen 

Request-Response-Paradigma von HTTP, HTML eher auf Informationsaufbereitung 

denn auf Dateneingabe und Interaktion ausgerichtet 

Die Oberfläche wird als HTML-Dokument repräsentiert, das als ganzes ausgetauscht 

wird; für jede Änderung der Oberfläche, die vom Server durchgeführt wird, muss also 

das gesamte Dokument und damit die gesamte Oberfläche ausgetauscht werden 

HTTP ist als Protokoll zustandslos, d.h. jedes Request ist unabhängig von den 

übrigen. In der Folge können keine Informationen auf eine Benutzersitzung bezogen 

werden und der Zustand der Oberfläche muss mit jedem Request explizit oder 

implizit mitgeliefert werden. 

Ereignisorientierte Programmierung der Anwendung damit nicht ohne Umwege 

möglich: Anders als bei der Desktop-Anwendung erhält eine Web-Anwendung keine 

Ereignisse von eines einzelnen Benutzers, sondern einzelne Requests vieler Nutzer. 

Ereignisse eingeschränkt auf Submits (Übertragung von Forms auf Knopfdruck) 

Keine server-side Änderungen der Oberfläche – wenn der Benutzer nichts macht, 

ändert sich auch die Oberfläche nicht 


Seite 17



User Experience schlechter als bei Desktop-Anwendungen, viele bekannte 

Konzepte (z.B. Fenster) nicht anwendbar 

Form-Submit -> auf Serverantwort warten -> komplette Seite neu rendern 

Anwendung fühlt sich daher eher nach Seitenblättern denn nach Interaktion an 

Steuerelemente primitiv 

Keine Effekte wie z.B. Überblendungen (außer eigenmächtig durch den Browser) 

Erweiterungen, um inhärente Probleme zu überwinden 

Fehlende Sitzungen -> Session-Management / Cookies 

Statisches Look&Feel / Serverzentrierung -> JavaScript 

Ziel: Rich Internet Applications (RIA) 

Schwammiges Buzzword, bezeichnet die Umsetzung der User Experience von 

Desktop-Anwendungen in internetbasierten Anwendungen (zumeist, aber nicht 

immer, im Browser) 


Seite 18



Zentrales Konzept: AJAX (Asynchronous JavaScript and XML) 

AJAX: Per HTTP eine Anfrage an einen Serverdienst richten, wobei die Antwort 

asynchron eingeht, d.h. parallel zur Bearbeitung auf dem Server bleibt die 

Webanwendung reaktionsfähig 

Nach dem Eintreffen der Antwort wird diese per JavaScript asynchron 

verarbeitet und in die Webseite "eingearbeitet" (z.B. durch Austausch von 

DOM-Teilen); die Seite wird also typischerweise nicht neu geladen 

Die Payload kann vielgestaltig sein, z.B. HTML-Code oder JSON-Objekte 

Weiterhin machen RIAs intensiven Gebrauch von JavaScript-Bibliotheken wie 

JQuery, um komplexe Steuerelemente (z.B. Tabs, Dialogboxen usw.), 

Bedienkonzepte (z.B. Drap&Drop) und Effekte (z.B. Fading-Animationen) 

umzusetzen 


Seite 19



Quelle: 

Wikipedia 


Seite 20


Implementierung von Web-Anwendungen 

Ansätze zur Implementierung von Web-Anwendungen 

Bereits bekannt: Zur Beantwortung einer Benutzeraktion 

wird das HTTP-Request bzw. sein Gegenstand an eine 

Anwendung weitergeleitet, die die Antwort 

(typischerweise ein HTML-Dokument) erzeugt 

HTTP-Request / 

URL und Parameter 

HTTP-Server 

HTTP-Response / 

HTML-Dokument 

Die Art der Implementierung dieser „Anwendung“ jedoch 

bisher eine Black Box… 

Anwendung 

Grundsätzlich kann eine solche Anwendung in jeder Umgebung realisiert werden, 

die eine CGI-Schnittstelle bietet (was lediglich Zugriff auf Umgebungsvariablen und 

Standard-Ausgabe/Eingabeströme erfordert). 

Damit können z.B. schon mit Shellskripten HTTP-Requests verarbeitet und 

dynamische Antworten geliefert werden 

Jede Programmiersprache mit CGI-Interface ist prinzipiell geeignet 

Häufig Skriptsprachen, insbesondere spezialisierte Sprachen wie z.B. PHP 

Java-Konzept: Servlets 


Seite 21


Java Web-Anwendungen (1) 

Ausgangspunkt: Java Servlets 

Servlets sind Java-Klassen, die zur Verarbeitung eines HTTP-Requests 

bestimmte Methoden der folgenden Form implementieren: 

protected void doGet(HttpServletRequest req, HttpServletResponse resp) 

Beim Aufruf verarbeitet beispielsweise die doGet-Methode das Objekt req, das 

alle notwendigen Informationen über die erhaltene HTTP-Anfrage enthält. 

Die Antwort wird per Methodenaufrufe an resp konstruiert – standardmäßig 

dadurch, dass HTML-Code in Stringform konstruiert und als Antwort-Payload 

an resp übergeben wird 

Servlet Container: Servlets sind zunächst nur Klassen, im laufenden Betrieb 

der Anwendung müssen zu jeder Anfrage Instanzen erzeugt werden – diese 

Aufgabe übernimmt ein sogenannter Servlet Container (der typischerweise 

identisch mit dem HTTP-Server ist) 


Seite 22


Java Web-Anwendungen (2) 

Servlets eigentlich Teil von J2EE / Java Enterprise Edition, allerdings wird das 

Konzept auch von Servern (z.B. Apache Tomcat, Jetty) genutzt, die nicht Teil 

von Java EE sind 

Eigenschaften des Konzeptes in Rohform 

Im Grunde zunächst nur „CGI für Java“, alleine ausgehend von der Servlet- 

Schnittstelle Web-Anwendungen zu bauen ist aufwendig 

Nützlich: Unterstützung durch Technologien und Bibliotheken der Java-Welt 

Weniger nützlich: HTML-Code im Programmcode zusammenbauen; zum einen 

vermischt dies verschiedene Schichten der Anwendung, zum anderen ist HTML- 

Code inzwischen sehr aufwendig und teilweise browserspezifisch 

Daher: Zahlreiche Ansätze und Frameworks, die ausgehend vom Servlet- 

Konzept versuchen, dem Programmierer bestimmte weniger wertschöpfende 

Tätigkeiten abzunehmen bzw. durch Abstraktionen zu ersetzen (Bereitstellung 

einer Sitzungsumgebung, Templates, Daten automatisch in Seiten einfügen…) 


Seite 23


GWT – Google Web Toolkit (1) 

Unsere Umgebung wird das Google Web Toolkit (GWT, "GWiT") sein 

Grundidee: Übergang von der Desktop-Applikation zur Web-Applikation 

automatisieren 

Entwicklung einer Desktop-Anwendung in Java, wobei nach einer Konvention 

zwischen clientseitigen und serverseitigen Klassen unterschieden wird 

GWT-Compiler: Erzeugen einer clientseitigen Anwendung auf Basis von JavaScript 

Erzeugen einer serverseitigen Anwendung auf Basis von Servlets 

Binden als WAR-File und Bereitstellung in einem Servlet Container 

Client-Klassen: Implementieren die Business Objects (Kunde, Auftrag, usw.) 

und die graphische Benutzeroberfläche 

Server-Klassen: Implementieren serverseitiger Dienste wie der Zugriff auf die 

Datenhaltung oder geschäftsobjektübergreifende Funktionen 

Shared-Klassen: Klassen, die sowohl auf Client- als auch auf Serverseite 

genutzt werden (z.B. Validatoren, siehe weiter unten) 


Seite 24


GWT – Google Web Toolkit (2) 

Der GWT-Compiler generiert für die Clients eine Anwendung auf Basis von 

JavaScript und implementiert automatisch die Kommunikation mit den 

Serverdiensten 

Rich Internet Applications: Die generierte Anwendung nutzt AJAX und 

ermöglicht damit das Anpassen der Benutzeroberfläche ohne Neuladen; 

weiterhin werden GUI-Elemente wie Tabs angeboten, sowie 

Bedienungskonzepte wie Drag&Drop 

Der GWT-Compiler generiert die Client-Anwendung dabei für unterschiedliche 

Ziel-Browser; die von GWT erzeugte serverseitige Anwendung liefert 

entsprecht das Kompilat für den tatsächlich genutzten Browser aus 

Da die Client-Klassen später direkt auf dem Client laufen, ist ein 

Sitzungskontext ohne weiteres Zutun bereits gegeben 

Debug Mode: GWT bringt zum Testen einen integrierten Jetty Servlet 

Container mit; außerdem können Änderungen on the fly getestet werden -> 

iterative Entwicklung 


Seite 25


GWT - Clientseitige Klassen (1) 

Fachkonzeptklassen 

(Business Objects): Die 

in der Anwendung genutzten 

Geschäftsobjekte müssen in 

Form von Klassen definiert 

werden 

package de.mygwtproject.client; 

/* ... */ 

public class Customer implements Serializable { 

private int cust_id; 

private String name; 

public Customer() { } 

public Customer(int id, String name) { 

this.cust_id = id; 

this.setName(name); 

} 

Diese Klassen gehören zum 

Client-Teil der Anwendung, 

können und werden jedoch 

auch in den Server-Klassen 

verwendet 

Müssen serializable sein, da 

sie im Betrieb zwischen Client 

und Server ausgetauscht werden 

Typischerweise JavaBeans 

} 

public Integer getID() { 

return cust_id; 

} 

public String getName() { 

return this.name; 

} 

public Customer setName(String name) { 

this.name = name; 

return this; 

} 

public int getAnnualTurnover() { 

/* ... */ 

} 


Seite 26



Als Ausgangsklasse für die GUI 

ist ein EntryPoint zu implementieren, 

an den der erste Request einer Sitzung 

gerichtet wird 

Der Code der EntryPoint-Klasse erzeugt 

die Ausgangs-Benutzeroberfläche über 

die Methode onModuleLoad() 


/* ... */ 

public class ExampleEP implements EntryPoint { 

public void onModuleLoad() { 

final Widget foo = new Button(); 

} 

} 

RootPanel.get("main").add(foo); 

Die UI wird dabei auf Basis einer eigenen Widget-Klassenhierarchie 

beschrieben 

RootPanel: Ein Panel, das als Wurzel einer GUI fungiert; das Default-RootPanel 

(eine HTML-Datei) erhält man mit RootPanel.get(). Alternativ kann man das 

RootPanel aus einem Element der HTML-Datei erzeugen 

Beispiel: Es wird ein simpler Button erzeugt und in das Element main des 

HTML-Templates eingefügt 


Seite 27



Widget-Hierarchie für die GUI 

Wurzel ist die Klasse Widget 

Panel: Container für andere Widgets, z.B. für Layoutzwecke (VerticalPanel, …) 

Composite: Proxy-Panel für genau ein anderes Widget 

TabPanel: Ein Panel aus mehreren Tabs, wobei in jedem Tab ein anderes Widget 

dargestellt wird 

TextBox, TextArea, Label, CheckBox: Die üblichen verdächtigen Steuerelemente… 

HTML: Ein Widget generiert aus HTML-Code 

Tree: Darstellung eines Baumes von anderen Widgets 

DialogBox: Ein konfigurierbarer Popup-Dialog zur Abfrage einer Benutzereingabe 

usw. 

Formatierung per CSS kann genutzt werden z.B. setStyleName("gwt-Button") 


Seite 28



An Widgets können EventHandler 

registriert werden (ereignisorientierte 

Programmierung 

analog zu Desktop-Anwendungen) 

Beispiel: Maske zur Verwaltung 

eines Kunden, vorerst nur mit 

einem einzigen Button 

Maske wird als Ableitung von 

Composite implementiert 

Im EntryPoint wird eine Instanz der 

CustomerMask in das RootPanel 

eingefügt 

Registrierung eines 

OnClick-Handlers in der 

CustomerMask-Klasse 


/* ... */ 

public class ExampleEP implements EntryPoint { 

public void onModuleLoad() { 

final Widget cust_mask = new CustomerMask(); 

RootPanel.get("main").add(cust_mask); 

} 

} 


/* ... */ 

public class CustomerMask extends Composite { 

Button button = new Button(); 

TextBox name = new TextBox(); 

} 

public CustomerMask() { 

Panel p = new VerticalPanel(); 

button.addClickHandler(new ClickHandler() { 

public void onClick(ClickEvent event) { 

Window.alert("Hallo!"); 

} 

}); 

p.add(name); 

p.add(button); 

this.initWidget(p); 

} 


Seite 29


GWT – Serverseitige Klassen (1) 

Implementierung der serverseitigen Funktionalität, insbesondere Methoden für 

den Zugriff auf die Anwendungslogik und Fachkonzeptobjekte (z.B. 

getCustomer(), deleteCustomer() usw.), also auf die Datenhaltungsschicht 

Beispiel: Clientseitige Klassen zur Implementierung einer Maske zum Anlegen 

einer Hotelbuchung, serverseitige Klassen zum Abrufen von Stammdaten 

(Zimmern, Kunden usw.), zum Suchen von freien Zimmern für den 

Buchungszeitraum und zum Anlegen der Buchung 

1. Schritt: Schnittstelle mit den Methoden des Services definieren (hier 

CustomerService für unser Kunden-Beispiel) 


/* ... */ 

@RemoteServiceRelativePath("customer") 

public interface CustomerService extends RemoteService { 

public List getCustomers(); 

public Customer getCustomer(int id); 

} 


Seite 30



2. Schritt: Aus der synchronen Schnittstelle eine asynchrone Schnittstelle 

ableiten 


/* ... */ 

public interface CustomerServiceAsync { 

void getCustomers(AsyncCallback callback); 

void getCustomer(int id, AsyncCallback callback); 

} 

Die asynchrone Schnittstelle ist für die Client-Klassen notwendig, um in der 

späteren clientseitigen JavaScript-Anwendung AJAX-Anfragen ausführen zu 

können (d.h. die Benutzeroberfläche reagiert weiter, während auf die Antwort 

eines Services gewartet wird). 

D.h. in den Client-Klassen muss konsequent die asynchrone Schnittstelle 

genutzt werden! 


Seite 31



3. Schritt: In den Client-Klassen auf die Services zugreifen 

Dazu wird vom Framework mit der Methode GWT.create() eine Instanz des 

asynchronen Dienstes angefordert 

Aufrufe an eine Methode des Services erfolgen mit einer anonymen Callback- 

Instanz, die auf die spätere AJAX-Antwort reagiert 

public class CustomerMask extends Composite { 

private final CustomerServiceAsync customerService = GWT.create(CustomerService.class); 

/* ... */ 

TextBox name = new TextBox(); 

/* ... */ 

private void selectCustomer(int id) { 

customerService.getCustomer(id, new AsyncCallback() { 

public void onFailure(Throwable caught) { } 

public void onSuccess(List result) { 

name.setValue(result.getName()); 

} 

}); 

} 

} 


Seite 32



4. Schritt: Es wird eine serverseitige Klasse zur Implementierung des 

asynchronen Interfaces angelegt 

package de.mygwtproject.server; 

/* ... */ 

public class CustomerServiceImpl 

extends RemoteServiceServlet 

Implements CustomerService { 

} 

public List getCustomers() { 

/* ... */ 

} 

public Customer getCustomer(int id) { 

/* ... */ 

} 


Seite 33


GWT – UiBinder (1) 

Bisher haben wir die Benutzeroberfläche per Java-Code zusammengesetzt, 

d.h. Codesequenzen, die Widget-Klassen instanziieren, konfigurieren und zu 

einer Baumstruktur zusammenfügen 

Zwar besser als selbst HTML-Code zu schreiben, aber für komplexe 

Benutzeroberfläche trotzdem ausgesprochen unhandlich 

Alternative UiBinder 

Beschreibung einer Widget-Benutzeroberfläche per XML 

Verknüpfen einer solchen XML-UI per Framework-Aufruf mit einer Java-Klasse 

Einführung von Instanzvariablen zur Repräsentation von UI-Elementen, die im Code 

benötigt werden, und automatisches Initialisieren durch UiBinder 

Registrieren von Ereignis-Handlern durch UiBinder 


Seite 34



Beispiel UI-XML für unsere Kundenmaske; es werden in einem vertikalen Panel 

ein Textfeld für den Namen und ein Button zum Speichern dargestellt 

[...] 

 

 

 

 

 

[...] 

Beispielhaft bereits eine DialogBox zu sehen; Dialoge können mit dem Attribut 

visible=false in den UI-Dateien angelegt und später bei Bedarf angezeigt werden 

Die Namen (ui:field) sind signifikant; über diese werden später die 

Verknüpfungen zu Instanzvariablen der Java-Klasse hergestellt 


Seite 35



In der eigenen Masken-Klasse kann nun ein passendes UiBinder-Interface (hier 

UiBinder) definiert warden. Ein Objekt dieses Typs wird 

dann durch vom Framework per GWT.create() erzeugt. 

public class CustomerMask 

extends Composite { 

interface CustomerMaskUiBinder extends UiBinder {} 

private final CustomerMaskUiBinder uiBinder = GWT.create(CustomerMaskUiBinder.class); 

@UiField Button button; 

@UiField TextBox name; 


this.initWidget( uiBinder.createAndBindUi(this) ); 

} 

} 

@UiHandler("button") 

void onButtonClick(ClickEvent event) { 

/* ... */ 

} 


Seite 36



Das uiBinder-Objekt erzeugt zu einem Objekt (hier die CustomerMask-Instanz) 

die GUI und gibt das Wurzelobjekt zurück (hier generisch vom Typ Widget) 

Beim Erzeugen der Oberfläche sucht der uiBinder nach einer XML-Datei mit 

dem Namen .ui.xml; in diesem Fall muss die XML-Beschreibung der UI 

also in der Datei CustomerMask.ui.xml vorliegen 









} 

} 



/* ... */ 

} 


Seite 37



Die Annotation @UiField bewirkt, dass der uiBinder das entsprechende Widget- 

Objekt auf die Instanzvariable zuweist; die Auswahl erfolgt anhand des 

Variablennamens (der dem Widget-Attribut ui:field entsprechen muss) 









} 

} 



/* ... */ 

} 


Seite 38



Die Annotation @UiHandler bewirkt, dass der uiBinder einen Event-Handler im 

entsprechenden Widget erzeugt, der die annotierte Methode aufruft; die 

Auswahl des Events erfolgt anhand des Parametertyps der Funktion 









} 

} 



/* ... */ 

} 


Seite 39


GWT – Editoren (1) 

Bisher: Wird ein Business Object in eine Maske geladen, müssen die 

Attributwerte (z.B. beim Kunden der Name, die Adresse usw.) mit einzelnen 

Statements in die entsprechenden UI-Felder geladen werden, 

z.B. 

name.setValue( cust.getName() ); 

surname.setValue( cust.getSurName() ); 

... 

Das gleiche ist in umgekehrte Richtung beim Abspeichern nach Änderungen 

oder beim Anlegen neuer Objekte erforderlich 

z.B. 

cust.setName( name.getValue() ); 

cust.setSurName( surname.getValue() ); 

... 

Sehr langweiliger Quellcode, langweiliges Programmieren, sinnlose 

Fehlerquelle 


Seite 40



Lösungsansatz: Editoren 

Bei Editoren handelt es sich um Objekte, die das Laden von Business Objects 

in Widgets und das Zurückschreiben übernehmen 

Editoren können durch den GWT-Framework automatisch zu einer Kombination 

aus Business Object-Klasse und Masken-Klasse erzeugt werden 

Für unser Beispiel wäre ein Editor erforderlich, also 

ein Editor, der ein Customer-Objekt in ein Widget vom Typ CustomerMask lädt 

bzw. daraus zurückschreibt 

Editoren stellen eine Verbindung zwischen bestehenden Oberflächen (Widgets) 

und bestehenden Geschäftsobjekten her; sie stellen selbst keine 

Benutzeroberfläche dar und dienen auch nicht z.B. der automatischen 

Erzeugung einer Benutzeroberfläche 

Das Matching von Objekteigenschaften und Widgets findet standardmäßig über 

den Feldnamen (ui:field) statt 


Seite 41



1. Schritt: Definition eines Interfaces mit dem passenden Editor-Typ 

2. Schritt: Konstruktion des Editors auf Basis des Interfaces per GWT.create() 

3. Schritt: Verknüpfen mit der Maskeninstanz per initialize() 



interface CustomerEditorDriver extends SimpleBeanEditorDriver {} 

private final CustomerEditorDriver editorDriver = GWT.create(CustomerEditorDriver.class); 


/* ... */ 


/* ... */ 

this.editorDriver.initialize(this); 

} 

void editCustomer(Customer c) { 

editorDriver.edit(c); 

} 

} 

void saveCustomer() { 

editorDriver.flush(); 

} 


Seite 42



Nun kann ein Customer-Objekt per edit()-Methode in die Maske geladen bzw. 

per flush()-Methode mit dem aktuellen Maskenzustand aktualisiert werden 

Java Beans als Grundlage, d.h. ui:field="name" => getName()- / setName()- 

Methoden in der Customer-Klasse 



interface CustomerEditorDriver extends SimpleBeanEditorDriver {} 

private final CustomerEditorDriver editorDriver = GWT.create(CustomerEditorDriver.class); 


/* ... */ 


/* ... */ 

this.editorDriver.initialize(this); 

} 

void editCustomer(Customer c) { 

editorDriver.edit(c); 

} 

} 

void saveCustomer() { 

editorDriver.flush(); 

} 


Seite 43


GWT – Validatoren (1) 

Problemstellung: Geschäftsregeln, d.h. hier einfache Bedingungen bzgl. des 

Zustandes von Geschäftsobjekten definieren und durchsetzen 

Praktisch relevant insbesondere für die Überprüfung von Benutzereingaben 

Abbilden in Quellcode ist umständlich und fehlerträchtig, außerdem werden die 

Regeln dadurch mit der übrigen Anwendungslogik vermischt 

Obskure Lösung ohne viel Code: Alles akzeptieren, Bedingungen im DB- 

Schema festlegen und auf SQL-Exception warten... 

Probleme: Unsinnige Serverbelastung, keine ex ante Reaktion möglich, Fehlerquelle 

geht u.U. verloren, damit womöglich keine aussagekräftige Fehlermeldung usw. 

Besser: Prüfung bereits auf der Benutzeroberfläche 

Aber: Gefahr von Redundanz, da auch bei Prüfung in der GUI trotzdem 

Prüfungen in der Geschäftslogik und in der Datenbank notwendig sind 

Lösungsansatz: Integration von Java Validators in GWT 


Seite 44



1. Schritt: Java Validator-Annotationen in Geschäftsobjekt-Klasse ergänzen 


/* ... */ 

public class Customer implements Serializable { 

/* ... */ 

} 

@Size(min=7, max=10, message="Name length invalid") 

private String name; 

/* ... */ 

Beispiel hier: Länge des Namensattributes auf 7 bis 10 Zeichen einschränken 

(ziemlich sinnlose Geschäftsregel…); mit der eigentlichen Restriktion kann 

zusätzlich eine passende Fehlermeldung bei Verletzen definiert werden 


Seite 45



1. Schritt: Notwendige Bibliotheken bereitstellen (teilweise etwas anstrengend 

von wegen passende Versionen…) 

2. Schritt: Validation-Fabrik definieren; die Fabrik hat nur eine Methode zum 

Erzeugen von Validatoren; die Erzeugung wird dabei erneut an die 

GWT.create()-Methode des Frameworks deligiert 

Achtung: Die Fabrik wird gleichberechtigt durch Client und Server genutzt, 

daher shared-Package 

package de.mygwtproject.shared; 

/* ... */ 

public final class ValidationFactory extends 

AbstractGwtValidatorFactory { 

@GwtValidation(Customer.class) 

public interface GwtValidator extends Validator { 

} 

} 

@Override 

public AbstractGwtValidator createValidator() { 

return GWT.create(GwtValidator.class); 

} 


Seite 46



3. Schritt: Validation in der Konfigurationsdatei der Anwendung aktivieren (für 

automatische Prüfung bei UI-Eingaben) 

Nun kann in der Anwendungslogik validiert werden, z.B.: 

Customer c; 

/* ... */ 

Validator validator = Validation.buildDefaultValidatorFactory().getValidator(); 

Set violations = validator.validate(this.c); 

String s = ""; 

for(ConstraintViolation v : violations) 

s += v.getMessage(); 

Window.alert("Mist: " + s); 

/* ... */ 

Regeln können in Validierungsgruppen zusammengefasst werden, um z.B. 

bestimmte Regeln nur auf der Clientseite und andere Regeln nur auf der 

Serverseite zu prüfen 

Es können eigene Regeltypen definiert werden, um z.B. auf der Serverseite 

komplexe Geschäftsregeln auf Basis der Datenhaltung zu prüfen 


Seite 47

Nächstes Mal… 

Persistente Datenhaltung / Bezug zur Datenmodellierung 

Unser Vorgehensmodell (Modellerweiterungen, Konventionen, Ablauf) 

Demonstration einer kleinen Web-Anwendung mit GWT 

Iterative Entwicklung 

Deployment 

Installationen 

GWT 

Eclipse-Plugin / Browser-Plugin 

MySQL / EclipseLink 

Je nach Zeit etwas zu 

… Java EE 

… Alternativen zu GWT 

… Web Services 


Seite 48

Anwendungsentwicklung 1

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?