Annotation based presentation models for view rendering and data binding with Linkki and Vaadin

Transkript

1 Annotation based presentation models for view rendering and data binding with Linkki and Vaadin Faktor-IPM - Architektur 1

2 Annotation based presentation models for view rendering and data binding with Linkki and Vaadin Faktor-IPM - Architektur 2

3 Annotation based presentation models for view rendering and data binding with Linkki and Vaadin Faktor-IPM - Architektur 3

4 Annotation based presentation models for view rendering and data binding with Linkki and Vaadin or How to code UIs really, really fast! Faktor-IPM - Architektur 4

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 Faktor-IPM - Architektur 5

6 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 Faktor-IPM - Architektur 6

7 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 Faktor-IPM - Architektur 7

8 Presentation Model Objects / View Model Represent the state and behavior of the presentation independently of the GUI controls used in the interface. ( 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 Faktor-IPM - Architektur 8

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); } Faktor-IPM - Architektur 9

10 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(); Faktor-IPM - Architektur 10

11 Kurzer Blick in ein reales System Faktor-IPM - Architektur 11

12 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 Faktor-IPM - Architektur 12

13 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; } Faktor-IPM - Architektur 13

14 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 Faktor-IPM - Architektur 14

15 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 Faktor-IPM - Architektur 15

16 Und nun zur Praxis Faktor-IPM - Architektur 16

17 Anzeige von Fehlermeldungen Anforderungen: Fachliche Prüfungen sollen in der Geschäftslogik implementiert werden, ohne Bezug zum UI. Fehlerhafte Felder sollten markiert werden Faktor-IPM - Architektur 17

18 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 Faktor-IPM - Architektur 18

19 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 Faktor-IPM - Architektur 19

20 Damit können die Felder als fehlerhaft markiert werden und auch einer Seite zugeordnet werden Faktor-IPM - Architektur 20

21 Und nun zur Praxis Faktor-IPM - Architektur 21

22 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) Faktor-IPM - Architektur 22

23 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 Faktor-IPM - Architektur 23