Explore forms

Follow these steps to explore the visual tools for user interface development.

Before you begin: The OfficeStore project must be opened in the Project view.

  1. Expand the OfficeStore Model project. Expand the src node and the Entities folder.
  2. Doubleclick on the OrderForm.4fdm file.
    OrderForm.4fdm is a form and opens in the Form Designer.
    Figure: The OrderForm.4fdm file

    This figure shows the OrderForm.4fdm file open in Form Designer.
  3. Customize your working environment to best suit you.
    All panels can be resized with the mouse or closed and reopened with Window > Views. Try pressing Alt-F11 to toggle to Document editing. Select Alt-F11 again to return to normal view. Double-click on the title of the Form Structure view to undock it. Double-click again to re-dock it into its last position.
  4. Scroll down in the Form Structure view to the Form section and select a form item.
    The item is also selected in the form design.
    Figure: Selecting a form item in the Form Structure view

    This figure shows how selecting an item in the Form Structure view also locates and selects the form item in Form Designer.
  5. Use the Form from Database wizard to create a new form:
    1. Select File > New > Genero > Form from Database (.4fd).
      Figure: Creating a new form

      This figure shows the Form from Database (.4fd) option selected in the File > New dialog.
    2. Select the officestore database and the account table (use the double arrow to select all columns in the account table for the form).
      Figure: Selecting database and columns for a new form

      This figure is a screenshot showing the Database and Column selection dialog of the Form from Database wizard. The officestore database and all columns of the account table have been selected.
    3. Select Finish.
      The form is now ready to use or modify in Form Designer. Additional table columns, container, and widgets can be added.
      Figure: Form created from the Form from Database wizard

      This figure shows the form created from the Form from Database wizard.
  6. Select the Records tab at the bottom of the window.
    The Records tab represents the data set for your form. Additional records can be added here or in the design.
  7. Right-click on the record and select Add Field.
    A field is added to the record with default values.
    Figure: Adding a new field to a form record

    This figure shows how to add a field to an existing form record in Form Designer.
  8. Switch to the Form tab.
    Note that the new field has been placed on the form in the top left. This field's properties and placement can be modified.
  9. Right-click on the new field and select Convert Widget > FFLabel to change the field to a form field label.
    Figure: The Convert Widget menu

    This figure is a screenshot of the Convert Widget menu.
  10. In the properties for the new field, change its color value from Black to Blue.
    The color changes on the form design.
    Figure: The color property

    This figure shows color property options for a form item.
  11. Select Build > Preview to get an idea about how the form will render in the Desktop client.
  12. Close the form preview and the untitled form (do not save it) to complete this section of the tour.