Ereignisbasierte WebGUIs

Größe: px

Ab Seite anzeigen:

Download "Ereignisbasierte WebGUIs"

Dennis Grosser
vor 5 Jahren
Abrufe

1 Ereignisbasierte WebGUIs Konzepte und Umsetzung in wings Dennis Knotz Universität Ulm

2 Seite 2 Inhalt Motivation Einführung Request Response Muster Ereignisbasiertes Muster Verwendung einer ereignisbasierten Architektur im WWW Oberfläche Sessions Ereignisse Zusammenspiel Beispiel: wings Codebeispiel Architektur Eventerzeugung

3 Seite 3 Motivation Typischerweise: Request-Response Muster höherer Abstraktionsgrad bei ereignisbasierten Oberflächen Schöneres Design möglich Kein HTML und Nachrichten mehr

4 Seite 4 Request-Response Muster Client-Server Architektur: Darstellung am Client, Verarbeitung am Server Nachrichtenbasiert Geringer Abstraktionsgrad Aktion mit dem Programm Nachricht an Server Antwort von Server Darstellen der Änderung

5 Seite 5 Ereignisbasiertes Muster Verwendung: Desktop Oberflächen Bei Interaktion wird Event erzeugt und darauf reagiert Hoher Abstraktionsgrad Mögliches Muster: Observer

6 Seite 6 Ereignisbasiertes Muster (Observer) Klassendiagramm Notifier +notifyobservers() +addobserver(in ObserverInf) +removeobserver(in OberverInf) ObservedObject +changestate() «interface» ObserverInterf +update() Observer +update()

7 Seite 7 Ereignisbasiertes Muster (Observer) Schematischer Ablauf

8 Seite 8 Ereignisbasiertes Muster (Observer) Schematischer Ablauf

9 Seite 9 Inhalt Motivation Einführung Request Response Muster Ereignisbasiertes Muster Verwendung einer ereignisbasierten Architektur im WWW Oberfläche Sessions Ereignisse Zusammenspiel Beispiel: wings Codebeispiel Architektur Eventerzeugung

10 Seite 10 Ereignisbasierte WebGUI (Oberfläche) Oberflächenobjekt HTML besitzt kein Reagieren auf Events Benötigter Inhalt der GUI-Objekte im Observer-Muster Observer verwalten Observer benachrichtigen Darstellung des GUI-Objekts (über Buildfunktion)

11 Seite 11 Ereignisbasierte WebGUI (Oberfläche) Möglicher Klassenaufbau GUIObject +notify(in id : int) +build(in PrintWriter) AbstractButton TextField... -ChangeListeners -ActionListeners addchangelistener(in ChangeListener) +removechangelistener(in ChangeListener) +notify(in id) +addactinolistener(in ActionListener) +removeactionlistener(in ActionListener) +notify(in id) +...() Button ToggleButton

12 Seite 12 Ereignisbasierte WebGUI (Oberfläche) Renderer Sorgt für Codeerzeugung der aktuellen Session Delegiert die Buildfunktionen der Oberflächenobjekte public class Builder { public static void buildui(printwriter out, Session output) { out.println("<html>"); out.println("<body>"); for(int i=0; i<output.size(); ++i) { GUIObject obj = output.get(i); obj.build(out); } out.println("</body>"); out.println("</html>"); } }

13 Seite 13 Ereignisbasierte WebGUI (Oberfläche) Renderer (2) public class Button extends AbstractButton{... public void build(printwriter out) { out.println("<input type='button' id='"+this.id+ "' value='" + ""+this.text+"' "); if(this.getactionlisteners()!=null && this.getactionlisteners().length>0) { out.println("onclick='window.location=\".?"+id+"=1\"'"); out.println("/>"); } } }

14 Seite 14 Ereignisbasierte WebGUI (Sessions) Request-Response Muster meist zustandsunabhängig Ereignisbasierte GUIs sind zustandsabhängig Aktueller Zustand muss zu jeder Zeit bekannt sein Möglichkeit: HTTPSession -Objekt bei Java Servlets

15 Seite 15 Ereignisbasierte WebGUI (Events) Nachrichten in Events umwandeln Nachrichten besitzen Objekt-ID und Eventart EventHandler verteilt den Event an den zuständigen Notifier Dieser informiert Observer Observer führt Änderung aus Mehrere Events innerhalb einer Nachricht benötigen Priorisierung Möglichkeit eines Nichtdeterminismus Beispiel mehrerer Events: Formular übertragen

16 Seite 16 Ereignisbasierte WebGUI (Events) public class EventHandler { public static void handleevent(httpservletrequest req,session ses) { try{ Enumeration<String> params = req.getparameternames(); while(params.hasmoreelements()) { // Name des Name Werte Paares = ID des Objekts String id = params.nextelement(); // Methode der Session um ein Objekt zur ID zu finden GUIObject o = ses.get(integer.valueof(id)); // ID der Eventart auslesen int i = Integer.valueOf(req.getParameter(id)); // Bekanntmachung des Events o.notify(i); } }catch(exception e){} } }

17 Seite 17 Ereignisbasierte WebGUI (Zusammenspiel) Client Erster Aufruf MainServlet Logic EventHandler Session vorhanden? Erzeuge Programm Fertig Speichere Session Erstelle Oberfläche Sende GUI an Client Aufruf mit Event als Nachricht Session vorhanden? Lade Session Behandeln der Events Events behandelt Speichern der neuen Session Erstelle Oberfläche Sende neue GUI an Client Builder

18 Seite 18 Beispiel: wings wings is net generation Swing Framework für ereignisbasierte Weboberflächen Programmierung wie in Swing Nutzung der JAVA-Servlet Technologie

19 Seite 19 wings (Codebeispiel) public class HelloWingS { public HelloWingS(){ SGridLayout gridlayout = new SGridLayout(1); gridlayout.setvgap(10); SForm panel = new SForm(gridLayout); SLabel lname = new SLabel("Bitte geben Sie ihren Namen ein:"); final STextField textfield = new STextField(); SButton okbutton = new SButton("OK"); SLabel lhi = new SLabel(); okbutton.addactionlistener(new ActionListener(){ public void actionperformed(actionevent e){ lhi.settext("hallo "+textfield.gettext()); }}); panel.add(lname); panel.add(textfield); panel.add(okbutton); panel.add(lhi); SFrame rootframe = new SFrame(); rootframe.getcontentpane().add(panel); rootframe.setvisible(true); }}

20 Seite 20 wings (Architektur) Session-Servlet verwaltet den Komponentenbaum und Zustand des Servlets Genau eine Session pro Nutzer Externalizer + Renderer übernehmen die Darstellung der Oberflächenobjekte in HTML

21 Seite 21 wings (Architektur)

22 Seite 22 wings (Eventerzeugung) HTTP-Request wird an Event-Dispatcher übergeben Event-Dispatcher liest Inhalt aus und delegiert Low-LevelEvents (LLEs) an GUI-Elemente des Objektbaumes GUI-Elemente verarbeiten LLEs und Erzeugen für den Anwender wichtige High-Level-Events (HLEs) Listener in der Anwendungslogik reagieren auf High-LevelEvents

23 Seite 23 Fazit Komfortableres Design Hoher Umstellungsaufwand Verwendung von Frameworks sinnvoll Ernstzunehmende Alternative zur Gestaltung einer WebGUI

24 Seite 24 Ende Vielen Dank für Ihre Aufmerksamkeit Fragen??

Ähnliche Dokumente

Ereignisbasierte Web-GUIs

Ereignisbasierte Web-GUIs Dennis Knotz 20. August 2010 Inhaltsverzeichnis 1 Motivation 2 2 Einführung 2 2.1 Request-Response Muster.......................... 2 2.2 Ereignisbasiertes Muster...........................