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

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)Echo Web App

Application

App Container

Echo FrameworkWeb

Rendering

Java Servlet API

J2EEHTML,

JavaScript, XML

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() { public void 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

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

album : Album

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

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

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

ViewModel

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!

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)

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

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

BindingContext: Album

- artist- title- classical : Customer

- name

: Address

- street- city

Model

#album

„address.street“

„artist“ „#album.artist“

„title“ „#album.title“

... ...

Alias Adapter

„street“

default

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

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();

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

PropertyAdapter BoundControlAlias

PropertyAdapter BoundControlAlias

PropertyAdapter BoundControlAlias

BindingContext

Text:

Select

Text:

Viewa : Object

- propertyA1- propertyA2

b : Object

- propertyB1- propertyB2

c : Object

- propertyC1- propertyC2

d : Object

- propertyD1- propertyD2

Model

Schnittstellen

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

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

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

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

23

EchoBinding

Fragen?

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

24

EchoBinding

Danke.