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

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

Post on 06-Apr-2016

216 views

Category:

Documents

1 download

TRANSCRIPT

  • ProjektarbeitEchoBindingEntwurf und Implementierung eines Data Binding Layer fr das Echo Web Framework

    Aufgabensteller: Prof. Dr. Martin WirsingBetreuer: Axel RauschmayerPhilipp Mpalampanis

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • bersichtEchoData BindingEchoBinding

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Echo Web FrameworkEcho ermglicht einfache Entwicklung von sog. Rich Internet Applications (RIA)Echo Applikationen werden zu 100% in Java programmiert Framework erzeugt notwendiges HTML und JavaScript

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Echo Web FrameworkClient-Server-Architektur: server-seitig Java Servlets, client-seitig HTML+JavaScriptKommunikation zwischen Client und Server erfolgt ber XmlHttpRequests (Ajax)

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Echo Web FrameworkEcho 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 Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Echo - Beispielfinal 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 Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • bersichtEchoData BindingEchoBinding

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Motivation: Album Manager

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

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

    album : Album

  • 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 Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Motivation: Synchronisation IISpeichern der modifzierten DatenBenutzer drckt Apply-Buttonalbum.setArtist( tfArtist.getText() );album.setTitle( tfTitle.getText() );album.setClassical( cbClassical.is ... ViewModel

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Motivation: Album Manager ExtendedZustzliches Feld Erscheinungsdatumalbum.setReleaseDate( tfRelease.getText() );tfRelease.setText( album.getReleaseDate() );album.setReleaseDate(format.parse( tfRelease.getText() );DateFormat format = new SimpleDateFormat(...);Validierung notwendig!

    Konvertierung notwendig!

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • Data Binding: AufgabenSynchronisation von Model und View Automatische Typ-KonvertierungEingabevalidierung (Plausibilttsprfung)

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

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

    album : Album

  • Data Binding: VoraussetzungVerknpfung von Elementen der Benutzer-schnittstelle mit Attributen aus Domnenmodell

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • bersichtEchoData BindingEchoBinding

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • EchoBinding: PropertyAdapterReprsentiert eine bestimmte Bean-EigenschaftZugriff auf Wert der Eigenschaft:getValue(Object bean)setValue(Object bean, Object value)An keinen Typ gebundenEigenschaft wird z.B. durch Expression Language-Ausdruck spezifiziertBean sollte in PA spezifizierte Eigenschaft besitzen

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • EchoBinding: Beispiel OgnlPropertyAdapterVerwendet 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 Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • EchoBinding: BindingContextDaten-Kontext fr View (mehrere Models mglich)View greift ber BindingContext auf Model zuPropertyAdapter werden im BindingContext zusammen mit Alias in Adapter-Tabelle abgelegtdefault

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

    Alias Adapter

    BindingContext

    Alias

    Adapter

    street

    address.street

    artist

    #album.artist

    title

    #album.title

    ...

    ...

    Model

    : Customer

    - name

    : Address

    - street- city

    : Album

    - artist- title- classical

    #album

  • EchoBinding: Beispiel OgnlBindingContextOgnlBindingContext 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 Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • EchoBinding: BoundControlsBoundControls sind Subklassen von Echo-Komponenten Fr jede Echo- Komponenten existiert entspr. BoundControl (TextField, Radio-Button, ... )Zugriff auf Model erfolgt ber BindingContext Durch Adapter-Alias an ein bestimmten PropertyAdapter gebundenBindingContext kann BoundControls steuern: ctx.update(): ldt Daten aus Model in Controlsctx.synchronize(): bertrgt Werte in das Modelctx.validate(): berprft Gltigkeit der Eingaben

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • EchoBinding: BoundControlsSchnittstellen

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

    Text:

    Select

    a : Object

    - propertyA1

    - propertyA2

    b : Object

    - propertyB1

    - propertyB2

    c : Object

    - propertyC1

    - propertyC2

    d : Object

    - propertyD1

    - propertyD2

    PropertyAdapter

    BoundControl

    PropertyAdapter

    Alias

    BoundControl

    Alias

    BindingContext

    PropertyAdapter

    BoundControl

    Alias

    View

    Model

  • EchoBinding: Album Manager Konfiguration BindingContextOgnlBindingContext 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 ); OnlineOffline

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • 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();ViewModelctx.synchronize();BoundControls

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • EchoBindingFragen?

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

  • EchoBindingDanke.

    LMU Mnchen, Institut fr Informatik, LFE Programmierung und Softwaretechnik

Recommended

View more >