Die XdevFieldGroup ist eine virtuelle GUI-Komponente (Virtual Component), die zu einem gemeinsamen Formular gehörende Formular-Komponenten mit dem dazugehörigen Entity, bzw. mit dessen Attributen verbindet (Mapping). Durch das Mapping zwischen Formular und Entity lassen sich Formular-Daten auf einfache Weise in das Formular übertragen und diese mit jeweils nur einem einzigen Methodenaufruf speichern und editieren. Die Formular-Komponenten können sich an völlig beliebigen Positionen befinden und müssen weder gruppiert, noch sich in einem gemeinsamen Parent-Container befinden. 

Formular generieren lassen

1. Legen Sie eine neue View CategoryForm ohne Layout an.
2. Fügen Sie das Entity Category per Drag-and-Drop in die View ein.
3. Klicken Sie im folgenden Formular-Assistenten auf OK.
   

Hinweis:

• Verwendete Datenquelle - Data Source: H2 Northwind > Entity: Category

Ergebnis:

• Im GUI-Builder
  
• Mapping - Mapping zwischen Formular-Komponenten und den Attributen des Entity Category bei der XdevFieldGroup > Properties > Field mapping.
  
• Generierte Formular-Aktionen

  • New - Erzeugt einen neuen, leeren Datensatz im Speicher.

    this.fieldGroup.setItemDataSource(new Category());

  • Reset - Setzt alle Formular-Komponenten zurück.

    this.fieldGroup.discard();

  • Save - Speichert den Datensatz in der Datenbank ab.

    this.fieldGroup.save();

  • Save + new - Speichert den Datensatz in der Datenbank ab und erzeugt einen neuen, leeren Datensatz im Speicher.

    this.fieldGroup.save();
    this.fieldGroup.setItemDataSource(new Category());

Weitere Formular-Aktionen

• Leeres Product-Objekt erzeugen und an die XdevFieldGroup übergeben, z.B. um einen neuen Datensatz anzulegen: 

  Products product = new Products();
  fieldGroup.setItemDataSource(product);

• Datensatz mit der ID 5 laden und an die XdevFieldGroup übergeben:

  Category category = new CategoryDAO().find(5);
  fieldGroup.setItemDataSource(category);

• Selektierte Zeile einer XdevTable an die XdevFieldGroup übergeben (ohne die GUI-Builder Unterstützung bei Property > Connected form zu verwenden). Dafür müssen Sie bei der XdevTable das Event valueChange anlegen.

  BeanItem<Category> item = table.getSelectedItem();
  fieldGroup.setItemDataSource(item);

Formular manuell erstellen 

1. Legen Sie eine neue View CategoryForm ohne Layout an.
2. Erstellen Sie ein Formular für das Entity Category.
   1. Fügen Sie ein XdevFormLayout ein.
   2. Fügen Sie 3 XdevTextFields untereinander ein.
   3. Benennen Sie die XdevTextFields in den Properties > Name um in txtCategoryname, txtDescription, txtPicture.
   4. Legen Sie für die XdevTextFields in den Properties > Caption die Beschriftungen Categoryname, Description, Picture fest.
3. Fügen Sie eine XdevFieldGroup an einer beliebigen Stelle ein.
4. Klicken Sie bei Structure > fieldGroup.
   
5. Verknüpfen Sie die Formular-Komponenten mit den entsprechend geeigneten Attributen des Entity Category.
   1. Klicken Sie in den Properties > Type > ... .
   2. Geben Sie im folgenden Dialog in das Suchfeld Categories ein und wählen Sie das Entity Category aus.
      
   3. Klicken Sie auf OK.
   4. Klicken Sie in den Properties > Field mapping > Entries.
   5. Klicken Sie im folgenden Dialog auf New, klicken Sie in die Spalte Field und wählen Sie txtCategoryname aus und wählen Sie in der Spalte Property > categoryname aus.
   6. Klicken Sie im folgenden Dialog auf New, klicken Sie in die Spalte Field und wählen Sie txtDescription aus und wählen Sie in der Spalte Property > description aus.
   7. Klicken Sie im folgenden Dialog auf New, klicken Sie in die Spalte Field und wählen Sie txtPicture aus und wählen Sie in der Spalte Property > picture aus.
   8. Klicken Sie auf OK.
      
      
      

Hinweis:

• Verwendete Datenquelle - Data Source: H2 Northwind > Entity: Category

Ergebnis:

• Im GUI-Builder
  

Formular ohne FieldGroup erstellen

1. Legen Sie eine neue View CategoryForm ohne Layout an.
2. Erstellen Sie ein Formular für das Entity Category.
   1. Fügen Sie ein XdevFormLayout ein.
   2. Fügen Sie 3 XdevTextFields untereinander ein.
   3. Benennen Sie die XdevTextFields in den Properties > Name um in txtCategoryname, txtDescription, txtPicture.
   4. Legen Sie für die XdevTextFields in den Properties > Caption die Beschriftungen Categoryname, Description, Picture fest.
3. Fügen Sie einen XdevButton in das XdevFormLayout ein und legen Sie in den Properties > Caption die Beschriftung Save fest.
4. Fügen Sie Event buttonClick hinzu.

5. Fügen Sie in das buttonClick Event den Code zum Auslesen der Formular-Komponenten ein. 

   Category category = new Category();
   
   // Readout the textFields and filling the entity 
   category.setCategoryname(this.textField.getValue());
   category.setDescription(this.textField2.getValue());
   category.setPicture(this.textField3.getValue());
   
   
   // Saving the entity
   try {
       new CategoryDAO().save(category);
   } catch (Exception e) {
       // TODO: handle exception
   }

Hinweis:

• Verwendete Datenquelle - Data Source: H2 Northwind > Entity: Category 

Ergebnis:

• Im GUI-Builder
  

Liste der Formular-Komponenten

Folgende UI-Komponenten können in das Mapping aufgenommen werden und lassen sich per Formular-Aktionen in der Datenbank persistieren.

• XdevTextField (Copy)
• XdevTextArea (Copy)
• XdevPasswordField (Copy)
• XdevRichTextArea (Copy)
• XdevPopupDateField (Copy)
• XdevInlineDateField (Copy)
• XdevComboBox (Copy)
• XdevNativeSelect (Copy)
• XdevListSelect (Copy)
• XdevTwinColSelect (Copy)
• XdevOptionGroup (Copy)
• XdevCheckBox (Copy)
• XdevSlider (Copy)

Examples:

• Mapping per Code - Manuelles Mapping von Komponenten an die jeweilige Eigenschaft

  fieldGroup.bind(textField, "name");

• Synchronisation - Inhalte der einzelnen UI Komponenten werden mit dem zugrunde liegenden Modell synchronisiert d.h. liegt ein Product Entity zugrunde werden die Werte der UI in das Product Entity geschrieben

  fieldGroup.commit();

• Validierung aller Felder - Alle Validierungsregeln der gemappten Felder werden angewendet und geprüft

  boolean valid = fieldGroup.isValid();
  
  if (valid) {
  	...
  } else {
  	...
  }

• Prüfen auf Veränderung - Prüft ob sich in der gesamten FieldGroup etwas verändert wurde.

  boolean modified = fieldGroup.isModified();

• FieldGroup als Anzeige - Setzt alle Felder einer Fieldgroup in einen ReadOnly Status

  fieldGroup.setReadOnly(true);