{"id":434,"date":"2021-03-16T11:19:15","date_gmt":"2021-03-16T10:19:15","guid":{"rendered":"http:\/\/uc-mobileapps.com\/de\/?page_id=434"},"modified":"2021-03-16T21:16:15","modified_gmt":"2021-03-16T20:16:15","slug":"modell-anbindung-vaadin-flow-ui-controls","status":"publish","type":"page","link":"http:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/","title":{"rendered":"Bindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen"},"content":{"rendered":"\n
\"Seife<\/a>
Formulare und Listen aus JPA Datenmodellen erstellen<\/figcaption><\/figure><\/div>\n\n\n\n

Direkt aus dem JPA Datenmodell Eingabemasken (Forms) und Listen (Grids) erstellen die die passende Anbindung an das Datenmodell enthalten. Mit “Seife” k\u00f6nnen Sie mit nur wenigen Direktiven sauberen Programmcode f\u00fcr das Databinding erstellen.<\/p>\n\n\n\n

W\u00e4hrend des Kompilierens werden die Annotationen am Datenmodell und an den UI Klassen ausgewertet. Ein Binding f\u00fcr die entsprechenden Felder des Modells wird basierend auf dem Datentyp von Code-Vorlagen erstellt. Die deklarative Definition erh\u00e4lt die Lesbarkeit des Codes. Zugleich bleiben insbesondere gro\u00dfe Code-Bases aufgrund der Templates auch zuk\u00fcnftig wartbar.
Im Datenmodell @SeifeClass an der Klasse hinzuf\u00fcgen und die ben\u00f6tigten Felder mit @SeifeField markieren. Per Konvention haben die UI elemente den gleichen Namen wie die Attribute der Entity. Falls das nicht m\u00f6glich ist, kann das referenzierte Attribut explizit definiert werden. Auch eine Punkt-Notation wird unterst\u00fctzt um verschachtelte Daten anzubinden.<\/p>\n\n\n\n

@Entity\n@SeifeClass \/\/ just add this for the form binding, no special options needed\npublic class Customer {\n    @Id\n    @GeneratedValue(strategy=GenerationType.AUTO)\n    private Long id;\n    \/**\n     * This field is exposed to the forms via @SeifeField\n     *\/\n    @SeifeField\n    private String firstName;\n    \/**\n     * The mandatory flag will create a mandatory input field whenever it is bound.\n     *\/\n    @SeifeField(mandatory = true)\n    private String lastName;\n    \/**\n     * Embedded address, this can also be a regular database reference\n     *\/\n    @SeifeField\n    @Embedded\n    private Address address;\n\/\/ [..]\n}<\/pre>\n\n\n\n
Genauso einfach bekommt die Klasse der Benutzeroberfl\u00e4che die @SeifeForm(forClass=Model.class) Annotation um sie als UI f\u00fcr das Formular oder Grid festzulegen. Standardm\u00e4\u00dfig werden nur noch alle Eingabefelder mit @SeifeBinding markiert. In diesem Beispiel ist eine List f\u00fcr die Klasse Customer definiert.<\/p>\n\n\n\n
@SpringComponent\n@Scope(SCOPE_PROTOTYPE)\n@SeifeForm(forClass = Customer.class, generatorOptions = {\"grid.gridClass\"})\npublic class CustomerGrid extends Grid<Customer> {\n\n    \/**\n     * The recommended way is to name the fields just as in e.g. {@link Customer}, fields are then bound implicitly.\n     *\/\n    @SeifeBinding\n    private Column<Customer> firstName;\n\n    \/**\n     * However if necessary it can be explicitly bound via the name.\n     *\/\n    @SeifeBinding(\"lastName\")\n    private Column<Customer> name;\n\n    \/**\n     * You can navigate fields with the dot-notation, even if they may contain null and are not mandatory.\n     *\/\n    @SeifeBinding(\"address.street\")\n    private Column<Customer> street;\n\/\/ [..]\n}<\/pre>\n\n\n\n
Keine weitere Abstraktionsschicht und Library-Dependency wird ben\u00f6tigt. Die lizensierte Version erm\u00f6glicht es eigene Template-Vorlagen zu erstellen und bestehende an die individuellen Anforderungen anzupassen.
Der Vorteil bei dieser Vorgehensweise ist ein sauberer und konsistenter Code im gesamten Projekt. Wenn ein Datentyp sich in der Zukunft ver\u00e4ndern sollte wird das Template angepasst und somit die \u00c4nderung an allen Stellen der Benutzeroberfl\u00e4che in gleicher Weise durchgef\u00fchrt.<\/p>\n\n\n\n
Hier ein Auszug aus dem generierten Programm f\u00fcr die Listview;<\/p>\n\n\n\n
  protected final void setupColumns() {\n    firstName = addColumn(entity -> entity.getFirstName());\n    firstName.setKey(COLUMN_FIRST_NAME);\n    firstName.setId(\"firstName\");\n    name = addColumn(entity -> entity.getLastName());\n    name.setKey(COLUMN_LAST_NAME);\n    name.setId(\"name\");\n    street = addColumn(entity -> Optional.ofNullable(entity.getAddress()).map(p -> p.getStreet()).orElse(null));\n    street.setKey(COLUMN_ADDRESS_STREET);\n    street.setId(\"street\");\n    birthday = addColumn(entity -> entity.getBirthday());\n    birthday.setKey(COLUMN_BIRTHDAY);\n    birthday.setId(\"birthday\");\n    password = addColumn(entity -> entity.getPassword());\n    password.setKey(COLUMN_PASSWORD);\n    password.setId(\"password\");\n    favoriteProductName = addColumn(entity -> Optional.ofNullable(entity.getFavoriteProduct()).map(p -> p.getName()).orElse(null));\n    favoriteProductName.setKey(COLUMN_FAVORITE_PRODUCT_NAME);\n    favoriteProductName.setId(\"favoriteProductName\");\n    premium = addComponentColumn(entity -> {\n        Checkbox cb = new Checkbox(entity.isPremium());\n        cb.setEnabled(false);\n        return cb;\n      });\n   }<\/pre>\n\n\n\n

So k\u00f6nnen die Bindings deklarativ festgelegt werden ohne die Ausdrucksst\u00e4rke von ‘normalem’ Code einzub\u00fc\u00dfen der verloren geht, wenn generischen Klassen verwendet werden und mit Reflection gearbeitet werden w\u00fcrde. Selbst Stacktraces sind k\u00fcrzer und einfacher zu verstehen.<\/p>\n\n\n\n
Das System kann automatisch z.B. CheckBoxen einf\u00fcgen wann immer ein boolean oder java.lang.Boolean Datentyp im Modell benutzt wird. Die Anbindung an Custom-Types wird in gleicher Weise unterst\u00fctzt.<\/p>\n\n\n\n
Ein vollst\u00e4ndiges Beispiel findet sich im Download der Test- oder Vollversion.<\/p>\n\n\n\n
Weitere Informationen: Documentation<\/a> (engl.)<\/p>\n","protected":false},"excerpt":{"rendered":"
Direkt aus dem JPA Datenmodell Eingabemasken (Forms) und Listen (Grids) erstellen die die passende Anbindung an das Datenmodell enthalten. Mit “Seife” k\u00f6nnen Sie mit nur wenigen Direktiven sauberen Programmcode f\u00fcr das Databinding erstellen. W\u00e4hrend des Kompilierens werden die Annotationen am Datenmodell und an den UI Klassen ausgewertet. Ein Binding f\u00fcr die entsprechenden Felder des Modells …<\/p>\n
  Bindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen<\/span> Weiterlesen »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":498,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"yoast_head":"\nBindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen - UC Mobile Apps<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"http:\/\/uc-mobileapps.com\/de\/#organization\",\"name\":\"UC Mobile Apps\",\"url\":\"http:\/\/uc-mobileapps.com\/de\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/uc-mobileapps.com\/de\/#logo\",\"inLanguage\":\"de-DE\",\"url\":\"http:\/\/uc-mobileapps.com\/de\/wp-content\/uploads\/sites\/2\/2018\/07\/cropped-UC-Logo.png\",\"contentUrl\":\"http:\/\/uc-mobileapps.com\/de\/wp-content\/uploads\/sites\/2\/2018\/07\/cropped-UC-Logo.png\",\"width\":512,\"height\":512,\"caption\":\"UC Mobile Apps\"},\"image\":{\"@id\":\"http:\/\/uc-mobileapps.com\/de\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/uc-mobileapps.com\/de\/#website\",\"url\":\"http:\/\/uc-mobileapps.com\/de\/\",\"name\":\"UC Mobile Apps\",\"description\":\"Innovative Softwareentwicklung und mobile Anwendungen\",\"publisher\":{\"@id\":\"http:\/\/uc-mobileapps.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/uc-mobileapps.com\/de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https:\/\/uc-mobileapps.com\/wp-content\/uploads\/2021\/02\/seife-annotation-processor-for-vaadin-developer-license-package-258x300.png\",\"contentUrl\":\"https:\/\/uc-mobileapps.com\/wp-content\/uploads\/2021\/02\/seife-annotation-processor-for-vaadin-developer-license-package-258x300.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#webpage\",\"url\":\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/\",\"name\":\"Bindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen - UC Mobile Apps\",\"isPartOf\":{\"@id\":\"http:\/\/uc-mobileapps.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#primaryimage\"},\"datePublished\":\"2021-03-16T10:19:15+00:00\",\"dateModified\":\"2021-03-16T20:16:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/uc-mobileapps.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Seife f\u00fcr Vaadin\",\"item\":\"http:\/\/uc-mobileapps.com\/de\/vaadin\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen - UC Mobile Apps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"http:\/\/uc-mobileapps.com\/de\/#organization","name":"UC Mobile Apps","url":"http:\/\/uc-mobileapps.com\/de\/","sameAs":[],"logo":{"@type":"ImageObject","@id":"http:\/\/uc-mobileapps.com\/de\/#logo","inLanguage":"de-DE","url":"http:\/\/uc-mobileapps.com\/de\/wp-content\/uploads\/sites\/2\/2018\/07\/cropped-UC-Logo.png","contentUrl":"http:\/\/uc-mobileapps.com\/de\/wp-content\/uploads\/sites\/2\/2018\/07\/cropped-UC-Logo.png","width":512,"height":512,"caption":"UC Mobile Apps"},"image":{"@id":"http:\/\/uc-mobileapps.com\/de\/#logo"}},{"@type":"WebSite","@id":"http:\/\/uc-mobileapps.com\/de\/#website","url":"http:\/\/uc-mobileapps.com\/de\/","name":"UC Mobile Apps","description":"Innovative Softwareentwicklung und mobile Anwendungen","publisher":{"@id":"http:\/\/uc-mobileapps.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/uc-mobileapps.com\/de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"ImageObject","@id":"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#primaryimage","inLanguage":"de-DE","url":"https:\/\/uc-mobileapps.com\/wp-content\/uploads\/2021\/02\/seife-annotation-processor-for-vaadin-developer-license-package-258x300.png","contentUrl":"https:\/\/uc-mobileapps.com\/wp-content\/uploads\/2021\/02\/seife-annotation-processor-for-vaadin-developer-license-package-258x300.png"},{"@type":"WebPage","@id":"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#webpage","url":"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/","name":"Bindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen - UC Mobile Apps","isPartOf":{"@id":"http:\/\/uc-mobileapps.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#primaryimage"},"datePublished":"2021-03-16T10:19:15+00:00","dateModified":"2021-03-16T20:16:15+00:00","breadcrumb":{"@id":"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uc-mobileapps.com\/de\/vaadin\/modell-anbindung-vaadin-flow-ui-controls\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/uc-mobileapps.com\/de\/"},{"@type":"ListItem","position":2,"name":"Seife f\u00fcr Vaadin","item":"http:\/\/uc-mobileapps.com\/de\/vaadin\/"},{"@type":"ListItem","position":3,"name":"Bindings f\u00fcr Vaadin Flow UI Benutzeroberfl\u00e4chen"}]}]}},"_links":{"self":[{"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/pages\/434"}],"collection":[{"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/comments?post=434"}],"version-history":[{"count":8,"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/pages\/434\/revisions"}],"predecessor-version":[{"id":458,"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/pages\/434\/revisions\/458"}],"up":[{"embeddable":true,"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/pages\/498"}],"wp:attachment":[{"href":"http:\/\/uc-mobileapps.com\/de\/wp-json\/wp\/v2\/media?parent=434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}