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

ProjektarbeitEchoBinding

Entwurf und Implementierung eines Data Binding Layer für das

Echo Web Framework

Aufgabensteller: Prof. Dr. Martin WirsingBetreuer: Axel Rauschmayer

Philipp Mpalampanis

LMU München, Institut für Informatik, LFE Programmierung und Softwaretechnik

2

Übersicht

Echo Data Binding EchoBinding


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

Echo Web Framework Client-Server-Architektur: server-seitig Java

Servlets, client-seitig HTML+JavaScript Kommunikation zwischen Client und Server erfolgt

über XmlHttpRequests (Ajax)Echo Web App

Application

App Container

Echo FrameworkWeb

Rendering

Java Servlet API

J2EEHTML,

JavaScript, XML


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

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

Übersicht



8

Motivation: Album Manager

artist : string = Berliner Philharmonikertitle : string = Tristan und Isoldeclassical : bool = truecomposer : string = Richard Wagner

album : Album


9

Motivation: Synchronisation Ipublic class AlbumManagerView extends Column { TextField tfArtist; TextField tfTitle; CheckBox cbClassical; TextField tfComposer; Album album; ...

}

tfArtist.setText( album.getArtist() );tfTitle.setText( album.getTitle() );cbClassical.setSelected( ... );...

ViewModel


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 ...

ViewModel


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

Data Binding: Aufgaben Synchronisation von Model und View Automatische Typ-Konvertierung Eingabevalidierung (Plausibiltätsprüfung)

album : Albumartist : string = Berliner Philharmonikertitle : string = Tristan und Isoldeclassical : bool = truecomposer : string = Richard Wagner


13

Data Binding: Voraussetzung Verknüpfung von Elementen der Benutzer-

schnittstelle mit Attributen aus Domänenmodell


14

Übersicht



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

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

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

BindingContext: Album

- artist- title- classical : Customer

- name

: Address

- street- city

Model

#album

„address.street“

„artist“ „#album.artist“

„title“ „#album.title“

... ...

Alias Adapter

„street“

default


18

EchoBinding: Beispiel OgnlBindingContext

OgnlBindingContext ctx = new OgnlBindingContext();

ctx.setModel( customer ); // default modelctx.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

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

EchoBinding: BoundControls

PropertyAdapter BoundControlAlias



BindingContext

Text:

Select

Text:

Viewa : Object

- propertyA1- propertyA2

b : Object

- propertyB1- propertyB2

c : Object

- propertyC1- propertyC2

d : Object

- propertyD1- propertyD2

Model

Schnittstellen


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

EchoBinding: Album Manager Viewpublic 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();ViewModel

ctx.synchronize();

BoundControls


23

EchoBinding

Fragen?


24

EchoBinding

Danke.

Documents

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