Explore forms

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

Explore a form, then create a new form
  1. Expand the OfficeStore project and find the Entities node.
  2. Expand the Entities node and double-click on the OrderForm.4fdm file.
    The OrderForm.4fdm file 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 re-sized 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 Files > 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 the tour.