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:

• Model - Daten-Container, der die Daten für die Datenausgabe aufnimmt und im Hauptspeicher zwischenspeichert, z.B. das Abfrageergebnis einer Datenbankabfrage oder Rückgabedaten die ein Webservice-Call liefert. In RapidClipse kann das Model mit beliebigen Daten-Objekten (Beans) befüllt werden, i.d.R. mit Entities (mit JPA Annotation markierte Beans).
• View - UI-Komponente, welche die Daten aus dem Daten-Container (Model) auf der Oberfläche anzeigt.  
• Contoller - Registriert Ereignisse auf der UI-Komponente und reagiert darauf (Events). 

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. 

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. 

1. Fügen Sie eine XdevTable in den GUI-Builder ein.
2. Ziehen Sie ein Entity, z.B. Products per Drag-and-Drop auf die XdevTable.
3. Klicken Sie bei Properties > Entity > Property auf ....
4. Selektieren Sie im folgenden Assistenten die Property productname.
5. Klicken Sie auf OK.
   

Entity in den Properties auswählen

1. Fügen Sie eine XdevTable in den GUI-Builder ein.
2. Klicken Sie bei Properties > Entity auf ....
3. Suchen Sie im folgenden Assistenten nach dem Entity Products.
4. Klicken Sie auf OK.
   
   
   

Intern

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. 

Tipp: In RapidClipse kann der Daten-Container mit beliebigen Daten-Objekten (Beans) befüllt werden, i.d.R. mit Entities.  

Container 

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

Model für:

• XdevTable
• XdevComboBox
• XdevListSelect
• XdevTwinColSelect
• XdevTree
• XdevTreeTable

XdevBeanItemContainer 

Der XdevBeanItemContainer ist eine Erweiterung, die von Container ableitet.

• Wird von RapidClipse automatisch verwendet, wenn Property > Data > findAll oder eine eigene Query-Methode ausgewählt wird.
  
• Bietet kein Lazy-Loading zwischen Datenbank und Server. Das Abfrageergebnis wird vollständig an den XdevBeanItemContainer (Server) übertragen.
• Manuelles Hinzufügen von Datensätzen (BeanItems) möglich.

Instanzierung:

XdevBeanItemContainer<Products> productsContainer = new XdevBeanItemContainer<Products>(Products.class);

Häufiger Anwendungsfall:

Auslesen eines Daten-Containers aus einer Table:

XdevBeanItemContainer<Products> productsContainer = table.setContainerDataSource();

Zuweisung:

Erfolgt mit der Methode setContainerDataSource:

table.setContainerDataSource(productsContainer);

XdevLazyEntityContainer 

Der XdevLazyEntityContainer ist eine Erweiterung, die von Container ableitet.

• Wird i.d.R. nur von RapidClipse intern verwendet, wenn Property > Auto query data selektiert wird.
  

• Bietet Lazy-Loading zwischen Datenbank und Server. Es werden immer nur so viele Datensätze zwischen Datenbank und Server übertragen, wie vom Client durch Scrollen oder Paging angefordert werden.

• Nimmt keine dynamischen SQLs entgegen (automatisch immer SELECT * FROM ...)
• Manuelles Hinzufügen von BeanItems nicht möglich.

BeanItem

Das BeanItem ist eine Erweiterung, die von Item ableitet. Ein BeanItem kann eine Liste mit Properties (einzelne Werten) und damit 1 Datensatz aufnehmen. 

Model für:

•  XdevTextField

Instanzierung:

BeanItem<Products> product = new BeanItem<Products>(null);

Häufiger Anwendungsfall:

Auslesen eines Datensatzes aus der selektierten Zeile einer Table:

BeanItem<Products> product = table.getSelectedItem();

Zuweisung:

Erfolgt mit der Methode setIemDataSource:

fieldGroup.setItemDataSource(product);

Property

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

Model für: 

• XdevTextField
• XdevPasswordField
• XdevInlineDateField
• XdevPopupDateField
• XdevNativeSelect
• XdevRichTextArea

Instanzierung:

Property<String> productName = new ObjectProperty<String>("Chai");

Häufiger Anwendungsfall:

Auslesen eines Datenfeldes aus einem Item, z.B. der selektierten Zeile einer Table:

Property<String> productName = product.getItemProperty("productname");

Zuweisung:

Erfolgt mit der Methode setPropertyDataSource:

textField.setPropertyDataSource(productName);

In der Praxis wird jedoch i.d.R. die Methode setValue verwendet: 

textField.setValue(productName);