Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Mit RapidClipse entwickelte (Vaadin) Oberflächen basieren auf dem MVC-Konzept (Model-View-Control), bei dem die grafische Oberfläche aus 3 voneinander getrennten Schichten besteht:

...

Um Daten auf der Oberfläche anzeigen zu können, muss der UI-Komponente (View) immer explizit ein Daten-Container (Model) zugewiesen werden. Diese Verknüpfung von UI-Komponente und Daten-Container wird allgemein als Databinding bezeichnet. In RapidClipse kann die Verknüpfung wahlweise programmatisch oder auf einfache Weise im GUI-Builder mit Drag-and-Drop erfolgen. 

 

UI-Komponente mit Entity im GUI-Builder verknüpfen

Entity einer UI-Komponente programmatisch zuweisen

Im GUI-Builder

...

Daten-Container Typen:

Da sich die UI-Komponenten in ihrer Fähigkeit Daten anzuzeigen zum Teil stark unterscheiden, stehen in RapidClipse 3 verschiedene Daten-Container Typen zur Verfügung:

  • Container (Tabelle) - Kann eine Liste mit Datensätzen (Items) speichern. XdevBeanItemContainer ist eine Erweiterung von Container
  • Item (Datensatz) - Kann 1 Datensatz bestehend aus mehreren Properties speichern. BeanItem ist eine Erweiterung von Item.  
  • Property (Einzelner Wert) - Kann nur 1 einzelnen Wert speichern. 

 

UI-Komponente mit Entity verknüpfen 

Im GUI-Builder können Sie einer UI-Komponente ein beliebiges Entity und damit den benötigten Daten-Container per Drag-and-Drop zuweisen. Der Code dafür wird im Hintergrund automatisch generiert. 

...

Ein Container kann eine Liste mit beliebig vielen Datensätzen (BeanItems) aufnehmen.

Model für:
  • XdevTable
  • XdevComboBox
  • XdevListSelect
  • XdevTwinColSelect
  • XdevTree
  • XdevTreeTable

...

Code Block
languagejava
themeConfluence
XdevBeanItemContainer<Products> productsContainer = new XdevBeanItemContainer<Products>(Products.class);
Häufiger Anwendungsfall:

Auslesen eines Daten-Containers aus einer Table:

Code Block
languagejava
themeConfluence
XdevBeanItemContainer<Products> productsContainer = table.setContainerDataSource();

...

Chai10 boxes x 20 bags18390false10
Model für:
  •  XdevTextField
Instanzierung:

...

Code Block
languagejava
themeConfluence
fieldGroup.setItemDataSource(product);

Property

Eine Property kann nur einen einzelnen Wert (Datenfeld) aufnehmen.   

Chai
Model für: 
  • XdevTextField
  • XdevPasswordField
  • XdevInlineDateField
  • XdevPopupDateField
  • XdevNativeSelect
  • XdevRichTextArea

...