Annotation based presentation models for view rendering and data binding with Linkki and Vaadin jan.ortmann@faktorzehn.de 20.02.2017 Faktor-IPM - Architektur 1
Annotation based presentation models for view rendering and data binding with Linkki and Vaadin 20.02.2017 Faktor-IPM - Architektur 2
Annotation based presentation models for view rendering and data binding with Linkki and Vaadin 20.02.2017 Faktor-IPM - Architektur 3
Annotation based presentation models for view rendering and data binding with Linkki and Vaadin or How to code UIs really, really fast! 20.02.2017 Faktor-IPM - Architektur 4
In Anwendungen müssen Werte aus dem Domain Model in die UI übertragen werden und umgekehrt. UI Domain Layer VersichertePerson Partner Adresse beruf gefahrengruppe tarifvariante anrede vorname nachname geburtsdatum strasse hausnummer postleitzahl ort 20.02.2017 Faktor-IPM - Architektur 5
In Anwendungen müssen Werte aus dem Domain Model in die UI übertragen werden und umgekehrt. UI Domain Layer VersichertePerson Partner Adresse beruf gefahrengruppe tarifvariante anrede vorname nachname geburtsdatum strasse hausnummer postleitzahl ort 20.02.2017 Faktor-IPM - Architektur 6
Databinding: Verknüpfen von Eigenschaften von Modelobjekten mit UI-Controls mit einem Mechanismus zur Synchronisierung. Binding Binding UI Domain Layer VersichertePerson Partner Adresse beruf gefahrengruppe tarifvariante anrede vorname nachname geburtsdatum strasse hausnummer postleitzahl ort 20.02.2017 Faktor-IPM - Architektur 7
Presentation Model Objects / View Model Represent the state and behavior of the presentation independently of the GUI controls used in the interface. (http://martinfowler.com/eaadev/presentationmodel.html) Controls View Model VersichertePersonSectionPmo UI Domain Layer Service VersichertePerson Partner Adresse Operation Repository <<Entity>> beruf gefahrengruppe <<Entity>> anrede vorname <<Entity>> strasse hausnummer Any other domain layer class tarifvariante nachname geburtsdatum postleitzahl ort 20.02.2017 Faktor-IPM - Architektur 8
So könnte das PMO aussehen public class VersichertePersonSectionPmo { private final UvVersichertePerson vp; } public Beruf getberuf() { return vp.getberuf(); } public void setberuf(beruf beruf) { vp.setberuf(beruf); } 20.02.2017 Faktor-IPM - Architektur 9
So könnte das PMO aussehen public class VersichertePersonSectionPmo { private final UvVersichertePerson vp; public Beruf getberuf() { return vp.getberuf(); } public void setberuf(beruf beruf) { vp.setberuf(beruf); } public String getversicherteperson() { Partner partner = vp.getpartner(); Address address = partner.getdefaultaddress(); return partner.getanrede() + ", " + partner.getvorname() + ", } } public LocalDate getgeburtsdatum() { } return vp.getpartner().getdateofbirth(); 20.02.2017 Faktor-IPM - Architektur 10
Kurzer Blick in ein reales System 20.02.2017 Faktor-IPM - Architektur 11
Auch andere Aspekte von UI Komponenten können / sollten per Data Binding berücksichtigt werden: UI Domain Layer Service Operation Repository Any other domain layer class VersichertePerson beruf gefahrengruppe tarifvariante Partner anrede vorname nachname geburtsdatum Readonly / Enabled Visible Required Erlaubte Werte Tooltip Die Fachlogik steht idr entweder in den Domain Model Klassen oder in anderen Klassen des Domainy Layers Adresse zur Verfügung. strasse hausnummer postleitzahl ort 20.02.2017 Faktor-IPM - Architektur 12
So könnte das PMO für das enablen / disablen des Bezugsberechtigten erweitert werden public class VersichertePersonSectionPmo { private final UvVersichertePerson vp;. public boolean isbezugsberechtigterenabled() { } return vp.gettodesfalllvb()!= null; } 20.02.2017 Faktor-IPM - Architektur 13
Herausforderung: Berücksichtigung der Abhängigkeit zwischen Feldern. UI Domain Layer Szenario: 1. Der Benutzer ändert den Wert in einem Feld. 2. Dadurch ergeben sind neue Werte in anderen Feldern. 3. Die erlaubten Werte in Comboboxen ändern sind. 4. Der enabled / disabled State anderer Felder ändert sich. 5. VersichertePerson Partner Adresse beruf gefahrengruppe tarifvariante anrede strasse Wie refreshed man welche Bereiche der vorname hausnummer UI? nachname postleitzahl geburtsdatum ort 20.02.2017 Faktor-IPM - Architektur 14
Linkki - Idee Unterteile das User Interface von Geschäftsanwendungen in Pages und jede Pages in Sections. Verwende einige Standard-Layouts für die Sections. Schreibe für jede Section ein PMO und annotiere es mit Anweisungen, wie die Section gerendert werden soll. Linkki rendert die Sections auf Basis der annotierten PMOs und führt das Databinding durch. Nach jeder Änderung werden die Bindings auf einer Page refreshed. 20.02.2017 Faktor-IPM - Architektur 15
Und nun zur Praxis 20.02.2017 Faktor-IPM - Architektur 16
Anzeige von Fehlermeldungen Anforderungen: Fachliche Prüfungen sollen in der Geschäftslogik implementiert werden, ohne Bezug zum UI. Fehlerhafte Felder sollten markiert werden. 20.02.2017 Faktor-IPM - Architektur 17
Durch das Data Binding gibt es eine Zuordnung der Modellobjekte und ihrer Eigenschaften zu Eingabefeldern User Interface Domain Layer Versichertes-Gebäude Gebäude tarifzone Wohnfläche Nutzungsart Gebäudeart Bauart Sicherungen 20.02.2017 Faktor-IPM - Architektur 18
ValidationService liefert eine Liste von Messages zurück MessageList * Message code severity text Jede Message weiß auf welche Eigenschaften welcher Objekte sich die Nachricht bezieht. Einfachster Fall: ModelObject 1 * ObjectProperty property Eine Eigenschaft eines Objekts ist fehlerhaft. 20.02.2017 Faktor-IPM - Architektur 19
Damit können die Felder als fehlerhaft markiert werden und auch einer Seite zugeordnet werden 20.02.2017 Faktor-IPM - Architektur 20
Und nun zur Praxis 20.02.2017 Faktor-IPM - Architektur 21
What else? Tabellen können genauso einfach mit PMOs erstellt werden. 1 PMO für die Tabelle, 1 PMO für die Zeilen. Einfache Dialog können mit PMOs erstellt werden. Definition von Querschnittsaspekte möglich Beispielsweise alles readonly, wenn keine Berechtigung vorhanden. Wenn die Standard-Layouts nicht passen, können einzelne Sections individuell designed werden und die Controls an ein PMO gebunden werden (ebenfalls per Annotation). 20.02.2017 Faktor-IPM - Architektur 22
Fazit User Interface für Geschäftsanwendungen im Back-Office können extrem schnell entwickelt werden. Klare Strukturierung des UI Codes. 1 PMO pro Section 2 PMOs pro Tabelle Klare Trennung von Layout, Inhalt der UI und Geschäftslogik. Es reichen grundlegende Java Kenntnisse, um ein UI zu bauen. Vaadin erlaubt es einem, so ein Framework zu bauen. 20.02.2017 Faktor-IPM - Architektur 23