5.4. Designing Forms

5.4.1. Most important terms

Form - a window provided for easy data entry and presentation on the computer screen.
Form's data source - database table or query providing data displayed in the form. The data source is needed because forms itself are only tools for displaying and entering data, while tables and queries are the source of data. New, empty forms have no data source assigned, so they are not displaying any data from your database unless you assign a data source to them.
Form field - direct equivalent of column in a table or query. Most frequently used are fields for displaying text and numbers. Entering a new value or changing the existing value of such a field causes a change in bound table or query column (after accepting the change).
Form design - tasks you are performing to define appearance and functions of the form. To do this, you need to provide data source, insert form fields of various types and place them at the appropriate location.
Form widget - form's element. Main widget types are:
- Widgets displaying information, e.g. text box or image box. Each widget of this type can be bound to a data source field (a table or a query column). Therefore, such widgets are called in short form fields.
- Widgets able to perform a specified action, e.g. a push button that can close the current form. Within other applications this widget type is sometimes called form control because it can perform previously defined action of controlling your database application's behavior.
- Other widgets allowing to enrich form's appearance, e.g. "line widget" can visually separate two form areas.
Container widget - a widget that can contain other widgets within its area. For example, frame widget or tab widget are containers. Form's surface itself is a container as well. Command button cannot be called as container because it is not possible to insert a widget inside it. In more complex cases, container widget can be inserted inside a container, so nesting is possible.

Example container widgets

5.4.2. Forms versus tables

In chapter 5.2 you learned about how to enter data directly into tables using their data sheet view. However, in many cases forms are better suited for data entry:

Table can contain too many columns to display them on your screen. Form can display such a data using multiple rows.
Form allows to visually split data fields into logical groups, thus increasing readability. Labels with additional information can be inserted to give users more hints on how to use the form or what given data fields mean.
Command buttons can be used within forms for commonly used commands so users can use forms in a similar way as a standalone applications they know.
In data sheet view displaying multi-row data text fields or images is as easy as within forms.

5.4.3. Working with form design

As with table or query design, you are able to use Data View and Design View. Form designing is performed in Design View. We will ofter refer to form design window as to Form Designer.

To create a new empty form, select Insert -> Form from the Menubar. Optionally, you can use New Form command from drop-down button on the Project Navigator's toolbar.
A new window with empty rectangular from surface will appear. Beyond the form surface outer area is placed, separated from the surface using borders. You can move the borders to resize the form surface. The surface is covered with a grid painted using dots which simplifies accurate widgets positioning.

A window with design of a new form

As with table design, Form Designer provides Property pane. To save some space on the screen, the pane has been splitted with three tabs related to the currently selected form:

Property tab containing a list of properties for the currently selected widgets
Data source tab containing properties related specifically to data source of the currently selected widget or the form itself.
Widgets tab containing a hierarchy of all widgets of the form. The list simplifies widgets lookup by name and navigation between them.

There is information about currently selected widget's name and type displayed on the first and second tab.

Additional toolbars are also available:

Widgets toolbar used for inserting new widgets into the form
Format toolbar used to format form's elements (e.g. adjusting widget's size, grouping). Formatting commands are also available in the Format menu. More about these commands can be found in appendix A.6. Format Menu.

5.4.4. Using the "Widgets" tab

The "Widgets" tab in the Property pane provides a list of form widgets and their hierarchy. Each widget is presented within the hierarchy beside other widgets being on the same level (the same parent container). Child widgets (inside containers) are presented using indented names.

On the picture below, the form (a container) contains two widgets: "groupBox2" and "options" command button. In turn, "groupBox2" (being a container itself) contains two check box widgets.

Using the "Widgets" tab

Each widget has displayed its name and type. The type has also an icon displayed - the same as the one displayed on the toolbar used while form designing is performed.

Notes

Changing the current selection on the list causes appropriate selection on the designed form. This allows for easier widget lookup by name and easier navigation. For example, it is possible to select a widget by name, and then switch to the "Properties" tab to change the widget's properties.
Keeping the Ctrl key pressed while an item on the widgets list is being selected allows to select multiple widgets at a time. Keeping the Shift key allows to select entire lists of widgets
When widget is inserted, it is recommended to give it a reasonable name. For example, "green" check box widget has been named specifically for its meaning, using the "Properties" tab (Name property has been used to do that). Such change can make it easier to find a widget within the list.

Naming the widget as "green"

Giving widgets reasonable names can be useful but is not mandatory. Note that widget's name is a property that is not visible to the user of your form. Users will can only see a widget text, provided by Text property or similar.

5.4.5. Inserting widgets - text fields

Let's create a form providing information about persons, i.e. a form connected it with Persons table.

If the form being designed should present data obtained from the database, you need to place appropriate fields on it. To do this, use Widgets toolbar containing a set of togglable buttons. Each button corresponds with a single widget type.

Click Text Box button on the Widgets toolbar.
Click on the form surface with &LMB;. New text box widget will be placed in the point where you clicked. Before you release &LMB; you can drag your mouse to specify a desired size for the widget.
If needed, move the inserted widget using drag & drop to a desired position. You can resize the widget afterwards by dragging one of the small boxes appearing near its corners. Note that the boxes are only visible when the widget is selected. If you select another widget or the form surface, the boxes disappear.
Click Text Box toolbar button again and click on the form surface to insert another widget. Repeat this action once again until you get three text boxes inserted in your form. For sake of simplicity we will limit ourselves to three data fields.

Notes

There is context menu available in form's design mode, activated by &RMB; click on selected widget or form's surface. The menu offers commands like Cut, Copy, Paste, Delete and other, more complex. Many of the commands are also provided in the Menubar, usually Edit. Keyboard shortcuts are also available for these commands. Some of the commands are only available for certain types of widgets.
Commands Cut, Copy and Paste makes it possible to move or copy widgets between forms, even between separate database projects.
Holding the Ctrl key down while clicking a widget allows to select multiple widgets.
Instead of using Copy and Paste commands, to duplicate a widget within the same form you can hold down the Ctrl key while moving the widget. After the Ctrl key is released, the dragged widget will not be moved but copied in the new location.

5.4.6. Assigning data sources

The fields you inserted have no data source assigned yet, so these are not able to display information from the database. To assign data source, Data Source tab of the Property pane.

The very first step is to specify the form's data source, i.e. a place the displayed data will be fetched from. As mentioned above, you will use table persons as a data source for your new form.

Click on the form's surface, as you will alter its properties.
Switch to the Data Source tab and enter persons table name in the Form's data source drop down list. Alternatively, you can select this name from the drop down list.

Entering form's data source name

You have assigned form's data source. Now you need to do specify field widget's data source.

Click the first text field widget at the top of the form.
In the Data Source tab of the property pane enter field name name in the data source drop down list. Alternatively, you can select this name from the drop down list.

Entering field's data source "name"
Click next text field widget and enter surname as the data source.
Enter data sources for street, house_number and city text fields in a similar way.

You can now save the form's design (this is not mandatory to test the form in action). To save, click the Save object changes toolbar button or use the File -> Save menu command. Upon saving you will be asked for entering the form's name. Enter Persons as caption and click OK button. Form's name will be filled automatically.

It is right moment for testing your form. Click the Switch to data view toolbar button. Unless you made a mistake when while entering data sources, you should see form's fields filled with data from the persons table.

The Persons form in data view after inserting text fields and assigning data sources

Notes

If you want to remove data source assignment for a form widget, you can use Clear widget's data source button near the Source field drop down list. Similarly, you can use Clear data source button near the Form's data source drop down list.
Use Go to selected data source button to select appropriate table or query in the Project Navigator, so you can quickly open a table or query being the data source of the form.

5.4.7. Inserting text labels

To make it easier for the form's user to identify meaning of every field widget, these should have added text labels with appropriate titles. To create text labels Label widget is used.

Insert three text label widgets onto the form, placing them on the left hand of the text fields (or on the right hand if your operating system uses right-to-left layout). On inserting every new label, a text cursor appears inside where you can enter desired title. Enter consecutively: Name, Surname and Street. Additionally, on the top of the form insert another label displaying name of the form, i.e. "Persons". Enlarge this label's size and set larger font using Format -> Font menu command.

Ready to use form after adding text labels

5.4.8. Actions

Action is a single activity isolates in the application, available for user to execute. It can be also executed automatically as an reaction for a given event (e.g. after opening a form).

Assigning actions to form buttons

Most actions can be assigned to form button. Assigned action is executed after button is clicked.

To assign action:

Switch to form's design view if you have not done yet.
Select the existing button widget by clicking on it or put a new button widget onto the form. If you inserted a new button, enter its title and press Enter key.
Click the button widget with the &RMB; to display context menu.
From the context menu select Assign action... command.

An Assigning Action to Command Button dialog window will appear presenting a list of available actions. One of the actions is selected if the widget already has action assigned. Otherwise the Action type drop down list has No type item selected.

From the Action type drop down list select Application item. Available application-wide actions will be listed.

Select one of the actions on the list (e.g. "Delete Row").

Click OK button or press Enter key to accept your selection.

Assigning "Delete Row" action to a form's button

After switching to the form's data view you can try whether the action works. For example, if you assigned "Delete Row" action, clicking the button, the current database row will be deleted, similarly to executing Edit > Delete Row menu command (depending on your settings you may be asked to confirm the removal).

Notes

To remove action assignment, select No type item from the Action type drop down list of the Assigning Action to Command Button dialog window.
Action only work in the form's data view. Not every action's assignment is reasonable. For example, Font... actions is not available in the form's data view, so having it assigned to the button has no effect.

5.4.9. Widget layouts

In most cases form widgets should be reasonable placed and aligned. Positioning, aligning and resizing widgets by hand is not easy and these parameters are not adjusted when the user resizes the form. In fact the situation is even worse because you cannot assume a given form requires a given space because users have different font sizes and display resolutions.

The following example presents a form where text fields and labels were placed by hand. Some of them cannot fit in the form's window.

An example form with widgets that cannot not fit in the window

Using special tool called widget layouts can help to automatically lay out the form widgets. Widget layout is an action of grouping two or more widgets so these are well positioned and have appropriate sizes.

Using layout in this form improves alignment. Moreover, its space is better developed. Text fields are closer each other, spacing is constant.

Example form with layout used

There are two methods to create widget layout.

Select two or more widgets that should be placed in a common layout, and select one of the layout types from the context menu item Layout Widgets.
Click a container widget (or a form surface itself), where widgets are inserted and select one of the layout types from the context menu item Layout Widgets. All widgets existing within the container or within the form, being on the same level will be put into a single common layout.

In each of these cases you can also use Format -> Layout Widgets menu.

Selecting widgets that will be put into a layout

Four widgets are selected

Using the context menu for putting the widgets into a grid layout

Widget layout is presented in the design view using a blue, green or red box drawn with broken line. This line is displayed only in the form's design view.

Widgets within a grid layout

Besides the grid type, there are other widget layout types.

vertical

Vertical widget layout
horizontal

Horizontal widget layout

Springs in widget layouts

A spring in widget layouts is a special, invisible element allowing to adjust widget's position and size within layouts. Such a spring stretches or squeezes a widget on the right, top, bottom or left hand, so it can have desired size and position.

To use a spring:

Select spring icon on the Widgets toolbar.
Click on a selected point of the form to insert the spring.

For the following example, the spring has been inserted on the left hand of the text label "Persons". The label is thus displayed on the right hand of the form. To make the spring work, it has been put into a common horizontal layout with the label.

Horizontal layout containing a spring and a text label

To make springs work you need to create a global widget layout i.e. a layout for the form itself. Then, springs can use edges of the form as a boundary for expanding.

Advanced widget layouts

Widget layouts can be combined (or nested). On the following example you can identify two nested layouts:

horizontal layout with a spring, aligning the "Persons" text label to the right
grid layout grouping widgets on the whole form

Two widget layouts combined: horizontal layout inside of a grid layout

The horizontal layout is treat in the example as a single widget by the grid layout - it takes exactly one "cell" of the grid. After opening a form designed this way in the data view, you can notice (by resizing the form) that:

"Persons" text label thanks to the spring used is constantly aligned to the to the right side of the form
text fields take all of the available width thanks to putting them into the grid layout
all the form's widgets are pushed to the top thanks to the spring used at the bottom of the form

The form using the two layouts displayed in data view

Removing widget layouts

To remove widget layout without removing widgets, perform one of these actions:

click with the &RMB; on the layout's border and select Break Layout command from the context menu
click with the &LMB; on the layout's border and select Format -> Break Layout menu command

Notes

Removing widget layout using the Break Layout command will not remove widgets contained in the layout. If you want to remove the widgets as well, just select the layout by clicking on its border and press Delete key or use Edit -> Delete menu command or context menu command.

Size policies for widgets within a layout

Instead of setting a fixed size for your widgets, in &kexi; you can choose between various widget's size policies. A size policy is a flexible strategy for controlling how a widget is stretched (or shrunk) depending on other neighbouring widgets and space available within the form.

After putting widgets into a layout, typically each widget gets a proportional (Preferred) size policy. These widgets will be automatically resized with preferred settings, depending on their type and size of the entire layout itself. For example, three buttons put into the horizontal layout will be resized to fit their visible text.

For each widget inserted into the form, there are settings for size policy available in the Property Editor. The settings are presented as a group of properties called Size Policy.

A group of properties for defining a widget's size policy

This group of properties contains:

Horizontal Size Policy defining horizontal size of the widget,
Vertical Size Policy defining vertical size of the widget,
Horizontal Stretch defining strength of activity of the Horizontal Size Policy,
Vertical Stretch defining strength of activity of the Vertical Size Policy

Values of size policies

There are following values available on the drop down list for Horizontal Size Policy and Vertical Size Policy properties visible in the Property Editor:

Fixed value means that the widget cannot be automatically resized; it should maintain the constant size defined on design time (width or height),
Minimum value means that the original size of the widget is set as minimal allowed, it is sufficient and there is no need for expanding the widget, but the widget will be expanded if needed. This type of policy can be used to force widget to be expanded to the whole width or height, especially if you set a stretch value greater than 0.

Text field and two buttons within a grid layout (Minimum horizontal size policy is set for both buttons, so these are slightly wider than needed)
Maximum value means that the original size of the widget is set as maximum allowed and can be decreased without breaking the widget's usability and readability if other widgets need more space,
Preferred value means that the original size of the widget is the best and preferred; the widget can be shrunk or expanded however and it will stay readable,

Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)
Expanding value means that the original size of the widget is reasonable but the widget can be also shrunk; it can be expanded as well to take as much space as possible,
Minimum Expanding value means that the original size of the widget is allowed; it can be expanded to take as much space as possible,
Ignored value means that the original size of the widget is ignored; the widget can be expanded to take as much space as possible but other widgets usually will not allow for that

Different widget types have various default size policies; for example, button widgets have default size policy set to Minimum (in both directions), while text field widgets have vertical size policy set to Fixed.

The most frequently used size policies are Preferred, Minimum and Maximum.

Vertical and horizontal stretch

Vertical Stretch and Horizontal Stretch properties accept integer values greater or equal to 0. These properties allow to fine-tune the behavior of size policies. Default value for the properties is 0. Greater value of the stretch means that the widget will be expanded more than other widgets having smaller stretch value set. For example, the following image presents two buttons where the first button has Vertical Stretch set to 0 and the second button has Vertical Stretch set to 1.

Size of button widgets affected by setting Vertical Stretch property of the second button to 1

5.4.10. Setting widgets size and position by hand

In case when your form has no main layout set for auto-positioning and auto-resizing its widgets, you will probably want to align widget's position and size so the form can look cleaner and be easier to use. The &kexi; form designer simplifies this task by offering the following groups of commands:

Adjusting sizes of selected widgets. The commands are available in the Format -> Adjust Widgets Size submenu of the Menubar and in the Adjust Widgets Size submenu of the context menu. Toolbar's drop down button Adjust Widgets Size is also available.
- To Fit - sizes of the selected widgets will be altered so each widget will be resized to its preferred size and its contents; for example, text label's size will be changed to fit its text. Position of the widgets will not be changed.
- To Grid - sizes of the selected widgets will be altered so each widget's corner will be placed in the form's (or other container's) grid point. Widget's position can be slightly altered.
- To Shortest - height of the selected widgets will be altered so that each of them will have the same height as the shortest one. Position of the widgets will not be changed.
- To Tallest - height of the selected widgets will be altered so that each of them will have the same height as the tallest one. Position of the widgets will not be changed.
- To Narrowest - width of the selected widgets will be altered so that each of them will have the same height as the narrowest one. Position of the widgets will not be changed.
- To Widest - width of the selected widgets will be altered so that each of them will have the same height as the widest one. Position of the widgets will not be changed.
Aligning positions of the selected widgets. The commands are available in the Format -> Align Widgets Position submenu of the Menubar and in the Align Widgets Position submenu of the context menu. Toolbar's drop down button Align Widgets Position is also available.
- To Left - all the selected widgets' left positions will be moved to the position of the leftmost widget's left edge.
- To Right - all the selected widgets' right positions will be moved to the position of the rightmost widget's right edge.
- To Top - all the selected widgets' top positions will be moved to the position of the uppermost widget's upper edge.
- To Bottom - all the selected widgets' bottom positions will be moved to the position of the bottommost widget's bottom edge.
- To Grid - all the selected widgets' top-left corners will be moved so that it is positioned in the nearest grid point.
None of the above commands resizes the widgets.

There are also additional commands available: Bring Widget to Front (i.e. above all other widgets) and Send Widget to Back (i.e. below all other widgets). These two commands are rarely used, as it is not common to place one widget on top of other (with an exception when a container widget contains other widget inside). Also note that clicking a widget with mouse button is enough to bring the widget to front.

5.4.11. Setting the tab order

Widget's focus determines widget's activity available using keyboard. Focus is related to widgets displayed in form's data view. Exactly one form widget can have focus at the same time. Most frequent use of focus is text entry (when a given text field is active, i.e. it is focused). Other example is a button widget - when focused, it is possible to "press" it using the Enter or Space key instead of a mouse button.

There are a few methods of making the widgets active (moving the focus to the widget): clicking with a mouse button, rotating the mouse wheel over the widget, or using the Tab key. The latter method is often used because of it's speed and convenience for users. Availability of the focusing methods is controlled by Focus Policy property of a given widget.

There is relationship between focusing (activating) widgets using Tab key and tab order setting of a form. After pressing the Tab key, the next widget should be focused, so the form should know about the tab order.

To alter table order for a form's widget:

switch to design view of the form
execute Edit -> Edit Tab Order menu command. Edit Tab Order will appear with settings for this form.

A window for editing tab order for a form

The window contains a list with two columns: the first column displays widget names, the second - types of the widgets. To make it easier to recognize meaning of the names and types for the user, icons related to the types are also displayed. The list contains only widgets having focus policy allowing to use the Tab key. The window allows you to change tab order or set the automatic tab order.
To change tab order, either:
- Click a selected widget name on the widgets list and drag it to a desired position (up or down) using the mouse.
- Click a selected widget name on the widgets list and use Move Up or Move Down buttons, to move the widgets to a desired position.
- Click the Handle tab stops automatically check box to set the automatic tab order for the form. If this option has been switched on, any changes made to the list of widgets by hand are not taken into account - &kexi; will be handling the tab orders on its own. The automatic ordering means that the top-left widget will be focused first (or the top-right if your operating system uses right-to-left layout), and the order comes from the left to right (from the right to left, appropriately) and from the top to bottom.
  
  Automatic tab order for a form
Click the OK button to accept the changes or Cancel button to dismiss the changes.