1 / 24

Projektarbeit EchoBinding

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

rachel
Download Presentation

Projektarbeit EchoBinding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Übersicht • Echo • Data Binding • EchoBinding 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 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) 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) 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() { publicvoid actionPerformed(ActionEvent arg0) { helloLabel.setText("Hello "+tfYourName.getText()+"!"); } }); ... LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik

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

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

  9. Motivation: Synchronisation I • publicclass AlbumManagerView extends Column { • TextField tfArtist; • TextField tfTitle; • CheckBox cbClassical; • TextField tfComposer; • Album album; • ... • } tfArtist.setText( album.getArtist() ); tfTitle.setText( album.getTitle() ); cbClassical.setSelected( ... ); ... Model View 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 ... Model View LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik

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

  14. Übersicht • Echo • Data Binding • EchoBinding 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 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 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 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(); 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 LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik

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

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

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

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

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

More Related