...

Generating Forms

1. Create a new View view CategoryForm  without  without layout.
2. Add the Category entity to the view via drag and drop.
3. In the following form wizard click OK.
   

...

• In the GUI-Builder
  
• Mapping -  Map between form components and Category entity attributes in XdevFieldGroup > Properties > Field mapping.
  
• Generated Form Actions

  • New -  Generates new, empty record in the memory.

    Code Block
    language java theme Confluence
    this.fieldGroup.setItemDataSource(new Category());

  • Reset - Resets all form components.

    Code Block
    language java theme Confluence
    this.fieldGroup.discard();

  • Save -   Saves the record in the database.

    Code Block
    language java theme Confluence
    this.fieldGroup.save();

  • Save + new -   Saves the record in the database and generates a new, empty record in the memory.

    Code Block
    language java theme Confluence
    this.fieldGroup.save(); this.fieldGroup.setItemDataSource(new Category());

Further

...

form actions

• Create empty product object and pass it to XdevFieldGroup, e.g. to create a new record:

  Code Block
  language java theme Confluence
  Products product = new Products(); fieldGroup.setItemDataSource(product);

• Load record with ID 5 and pass to XdevFieldGroup::

  Code Block
  language java theme Confluence
  Category category = new CategoryDAO().find(5); fieldGroup.setItemDataSource(category);

• Transmit Pass the selected line of an XdevFieldGroup (without support of GUI builder) in Property > Connected form. To achieve this, you will need to create the value change event in XdevTable.

  Code Block
  language java theme Confluence
  BeanItem<Category> item = table.getSelectedItem(); fieldGroup.setItemDataSource(item);

Creating forms manually

1. Create a new View view CategoryForm  without layout.
2. Create a form for the Category entity.
   
   1. Add an XdevFormLayout.
   2. Add three XdevTextFields one below the other.
   3. Rename the XdevTextFields in Properties >Name as txtCategoryname,txtDescription, and txtPicture.
   4. Under Properties > Caption, select the labels Categoryname, Description, Picture for the XdevTextFields.
3. Add an XdevFieldGroup anywhere.
4. Click Structure >fieldGroup.
   
5. Connect the form components using the corresponding attributes of the Category entity.
   
   1. Klicken Sie in den Click Properties > Type > ... .
   2. Geben Sie im folgenden Dialog in das Suchfeld Categories ein und wählen Sie das Entity Category ausIn the following dialog, enter Categories in the search field and select the Category entity.
      
   3. Klicken Sie auf Click OK.
   4. Klicken Sie in den Click 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.
   Klicken Sie auf OK.
   Image Removed
   

Hinweis:

...

1. 1. ClickNew in the following dialog, then click the Field column, select txtCategoryname and select Property > categoryname.
   2. ClickNew in the following dialog, then click the Field column, select txtDescription and select Property > description.
   3. ClickNew in the following dialog, then click the Field column, select txtPicture and select Property > picture.
   4. Click  OK.
      Image Added
      
      

Note:

• Data sources used - Data Source: H2 Northwind > Entity: Category

...

Result:

• Im In the GUI - Builder
  

...

Create form without FieldGroup

...

1. Create a new view CategoryForm without layout.
2. Create a form for the Category entity.
   
   1. Add an XdevFormLayout.
   2. Add 3 XdevTextFields one below the other.
   3. Rename the XdevTextFields in Properties>Name into txtCategoryname,txtDescription,txtPicture.
   4. Under Properties > Caption, select Categoryname, Description, Picture festfor the XdevTextFields.
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 einAdd an XdevButton to the XdevFormLayout and then under Properties > Caption add the label Save .
6. Add Event buttonClick .
7. Add the code for reading out the form components to the  buttonClick  event. 

Code Block
language java theme Confluence
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 }

...

Note:

• Verwendete DatenquelleData source used - Data Source: H2 Northwind > Entity: Category 

...

Result:

• Im In the GUI - Builder
  

List of all form components

The following UI components can be included in the mapping and can persist in the database via form actions.

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

Examples:

• Mapping by code -  Manually maps components to the respective property

  Code Block
  language java theme Confluence
  fieldGroup.bind(textField, "name");

• Synchronization - Contents of the individual UI components are synchronized with the underlying model, i.e., If they are based on a product entity, the values of the UI will be written into the product entity.

  Code Block
  language java theme Confluence
  fieldGroup.commit();

• Validation of all fields - All of the validation rules for the mapped fields are applied and tested

  Code Block
  language java theme Confluence
  boolean valid = fieldGroup.isValid(); if (valid) { ... } else { ... }

• Checking for change - Determines whether there have been any changes throughout the entire FieldGroup

  Code Block
  language java theme Confluence
  boolean modified = fieldGroup.isModified();

• Field Group as Ad - Sets all fields in a field group to read only

  Code Block
  language java theme Confluence
  fieldGroup.setReadOnly(true);

...