Projektarbeit EchoBinding Entwurf und Implementierung eines Data Binding Layer für das Echo Web Framework Aufgabensteller: Prof. Dr. Martin Wirsing Betreuer:

Präsentation zum Thema: "Projektarbeit EchoBinding Entwurf und Implementierung eines Data Binding Layer für das Echo Web Framework Aufgabensteller: Prof. Dr. Martin Wirsing Betreuer:"—  Präsentation transkript:

1 Projektarbeit EchoBinding Entwurf und Implementierung eines Data Binding Layer für das Echo Web Framework Aufgabensteller: Prof. Dr. Martin Wirsing Betreuer: Axel Rauschmayer Philipp Mpalampanis

2 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 2 Übersicht  Echo  Data Binding  EchoBinding

3 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 3 Echo Web Framework Echo ermöglicht einfache Entwicklung von sog. Rich Internet Applications (RIA) Echo Applikationen werden zu 100% in Java programmiert Framework erzeugt notwendiges HTML und JavaScript

4 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 4 Echo Web Framework Client-Server-Architektur: server-seitig Java Servlets, client-seitig HTML+JavaScript Kommunikation zwischen Client und Server erfolgt über XmlHttpRequests (Ajax)

5 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 5 Echo Web Framework Echo adaptiert Java Swing Programmiermodell Echo ist komponentenbasiert: jedes GUI Element ist eine Komponente (Window, Panel, TextField, SelectField, Table usw.) Echo ist ereignisgesteuert: Anwendung wird durch Events gesteuert (Benutzerinteraktionen, Benachrichtigungen)

6 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 6 Echo - Beispiel final Label helloLabel = new Label("Hello!"); mainPane.add(helloLabel); mainPane.add(new Label("What's your name?")); final TextField tfYourName = new TextField(); Button submitButton = new Button("Submit"); submitButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent arg0) { helloLabel.setText("Hello "+tfYourName.getText()+"!"); } });...

7 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 7 Übersicht  Echo  Data Binding  EchoBinding

8 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 8 Motivation: Album Manager

9 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 9 Motivation: Synchronisation I public class AlbumManagerView extends Column { TextField tfArtist; TextField tfTitle; CheckBox cbClassical; TextField tfComposer; Album album;... } tfArtist.setText( album.getArtist() ); tfTitle.setText( album.getTitle() ); cbClassical.setSelected(... );... View Model

10 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 10 Motivation: Synchronisation II Speichern der modifzierten Daten Benutzer drückt „Apply“-Button album.setArtist( tfArtist.getText() ); album.setTitle( tfTitle.getText() ); album.setClassical( cbClassical.is... View Model

11 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 11 Motivation: Album Manager Extended Zusätzliches Feld „Erscheinungsdatum“ album.setReleaseDate( tfRelease.getText() ); tfRelease.setText( album.getReleaseDate() ); album.setReleaseDate(format.parse( tfRelease.getText() ); DateFormat format = new SimpleDateFormat(...); Validierung notwendig! Konvertierung notwendig!

12 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 12 Data Binding: Aufgaben Synchronisation von Model und View Automatische Typ-Konvertierung Eingabevalidierung (Plausibiltätsprüfung)

13 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 13 Data Binding: Voraussetzung Verknüpfung von Elementen der Benutzer- schnittstelle mit Attributen aus Domänenmodell

14 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 14 Übersicht  Echo  Data Binding  EchoBinding

15 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 15 EchoBinding: PropertyAdapter Repräsentiert eine bestimmte Bean- Eigenschaft Zugriff auf Wert der Eigenschaft: getValue(Object bean) setValue(Object bean, Object value) An keinen Typ gebunden Eigenschaft wird z.B. durch Expression Language-Ausdruck spezifiziert Bean sollte in PA spezifizierte Eigenschaft besitzen

16 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 16 EchoBinding: Beispiel OgnlPropertyAdapter Verwendet Object Graph Navigation Language (OGNL) zur Beschreibung der Bean-Eigenschaft PropertyAdapter street = new OgnlPropertyAdapter("address.street"); Customer customer =...; street.getValue( customer ); // := customer.getAddress().getStreet(); street.setValue( customer, "Oettingenstr." ); // := customer.getAddress().setStreet( "Oettingenstr." ); OGNL-Ausdruck

17 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 17 EchoBinding: BindingContext Daten-Kontext für View (mehrere Models möglich) View greift über BindingContext auf Model zu PropertyAdapter werden im BindingContext zusammen mit Alias in Adapter-Tabelle abgelegt default

18 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 18 EchoBinding: Beispiel OgnlBindingContext OgnlBindingContext ctx = new OgnlBindingContext(); ctx.setModel( customer ); // default model ctx.addModel( "album", album ); //additional model ctx.add( "customerName", new OgnlPropertyAdapter(„name") ); ctx.getValue( "customerName" ); // := ctx.getAdapter( "customerName" ).getValue( customer ); // := customer.getName(); ctx.getValue( "#album.artist" ); // Ad-Hoc-Binding // := album.getArtist();

19 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 19 EchoBinding: BoundControls BoundControls sind Subklassen von Echo- Komponenten Für jede Echo- Komponenten existiert entspr. BoundControl (TextField, Radio-Button,... ) Zugriff auf Model erfolgt über BindingContext Durch Adapter-Alias an ein bestimmten PropertyAdapter gebunden BindingContext kann BoundControls „steuern“: ctx.update(): lädt Daten aus Model in Controls ctx.synchronize(): überträgt Werte in das Model ctx.validate(): überprüft Gültigkeit der Eingaben

20 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 20 EchoBinding: BoundControls Schnittstellen

21 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 21 EchoBinding: Album Manager Konfiguration BindingContext OgnlBindingContext ctx = new OgnlBindingContext(); OgnlPropertyAdapter releaseDate = new OgnlPropertyAdapter("realeaseDate"); releaseDate. setFormat ( new DateFormat("MM/yyyy") ); releaseDate. addValidator ( new RegexValidator("[0-9]...") ); ctx.add( "releaseDate", releaseDate ); ctx. setModel( album ) ; Online Offline

22 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 22 EchoBinding: Album Manager View public class AlbumManagerView extends Column { public AlbumManagerView(BindingContext ctx) { add( new TextField("artist", ctx) );... add( new CheckBox("classical", ctx) ); add( new TextField("releaseDate", ctx) );... } ctx.update(); View Model ctx.synchronize(); BoundControls

23 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 23 EchoBinding Fragen?

24 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik 24 EchoBinding Danke.