Designing Forms- 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 a 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 the bound table or query column (after accepting the change).
- Form design
Tasks you are performing to define the 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. a text box or an 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 a form's appearance, e.g. a “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. The form's surface itself is a container as well. A command button cannot be called as container because it is not possible to insert a widget inside it. In more complex cases, container widgets can be inserted inside a container, so nesting is possible.
In chapter Entering Data Into Tables 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:
A table can contain too many columns to display them on your screen. A form can display such a data using multiple rows.
A 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.
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 often refer to the form design window as to Form Designer.
To create a new empty form, select Form from the toolbar. Optionally, you can use the Create Object: Form command from drop-down button on the Project Navigator's toolbar or Create Object: Form command from the context menu of the Project Navigator.
A new frame will appear, you can resize the form by moving the borders. The form is covered with a grid which simplifies accurate positioning of the widgets.
As with table design, Form Designer provides a Property Editor pane. To save some space on the screen, the pane has three tabs related to the currently selected form:
- The Properties tab
Contains a list of properties for the currently selected widget.
- The Data source tab
Contains properties related specifically to the data source of the currently selected widget or the form itself.
- The Widgets tab
Contains 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:
The Widgets toolbar used for inserting new widgets into the form. Select to display it.
The widgets tab in the Properties 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.
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.
Note
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 pressed allows to select entire lists of widgets.
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 only see a widget text, provided by Text property or similar.
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 the buttons on the Widgets toolbar. Each button corresponds to a single widget type.
Click Text Box button on the Widgets toolbar.
Click on the form surface with the left mouse button. A new text box widget will be placed in the point where you clicked. Before you release 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 the Text Box toolbar button again and click on the form surface to insert another widget. Repeat this action once again until you get three more text boxes inserted in your form. For the sake of simplicity we will limit ourselves to five data fields.
Note
There is a context menu available in form's design mode, activated by a right mouse button click the desired widget or the form's surface. The menu offers commands like Cut, Copy, Paste, Delete and other, more complex. Keyboard shortcuts are also available for these commands. Some of the commands are only available for certain types of widgets.
The 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 mouse button is released, the dragged widget will not be moved but copied in the new location.
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, use the (Data Source) tab of the Property Editor 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 personstable name in the Form's data source drop down list. Alternatively, you can select this name from the drop down list.
You have assigned form's data source. Now you need to do specify 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 namein the Widget's data source drop down list. Alternatively, you can select this name from the drop down list.Click on next text field widget and enter
surnameas 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 toolbar button. Upon saving you will be asked for entering the form's name. Enter Persons as caption and click the OK button. The form's name will be filled automatically.
This is the right moment for testing your form. Click the Data toolbar button. Unless you made a mistake while entering data sources, you should see the form's fields filled with data from the Persons table.
Note
If you want to remove widget's data source assignment for a form widget, you can use the
button in the Widget's data source box.Use the
(Go to selected form's 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.
To make it easier for the form's user to identify the meaning of every field widget, these should have added text labels with appropriate titles. To create text labels the Label widget is used.
Insert three text label widgets onto the form, placing them on the left side of the text fields (or on the right hand if your operating system uses right-to-left layout). On inserting a new label, a text cursor appears at the location where you can enter the desired title. Enter consecutively: Name, Surname, Street, House Number and City. Additionally, on the top of the form insert another label displaying name of the form, i.e. Persons. Enlarge this label's size and increase the font size using Font in the Properties tab.
An Action is a single activity isolated in the application, available for the user to execute. It can also be executed automatically as a reaction for a given event (e.g. after opening a form).
Many actions can be assigned to form button. The 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 right mouse button to display the context menu.
From the context menu select Assign action... command.
An Assigning Action to 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 category list has the No action item selected.
From the Action category list select Application actions item. Available application-wide actions will be listed.
Select one of the actions on the list (e.g. Delete Selected object).
After switching to the form's data view you can try whether the action works.
Note
To remove an action assignment, select the No action item from the Action category list of the Assigning Action to Button dialog window.
Actions only work in the form's data view. Not every action's assignment is reasonable. For example, the Font... action is available in data view, but only if you have a widget selected in the Design view. If you make changes to the font settings the changes are applied to the text of that selected widget.
In most cases form widgets should be conveniently arranged 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.
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 a form improves alignment. Moreover, its space is better used. Text fields are closer to each other, spacing is constant.
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 on a line 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.
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
The following values are available in the drop down list for Hor. Policy and Vert. Policy visible in the Property Editor:
- Fixed
this value means that the widget cannot be automatically resized; it should maintain the constant size defined at design time (width or height),
- Minimum
this 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 the widget to be expanded to the whole width or height, especially if you set a stretch value greater than 0.
- Maximum
this 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
this 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,
- Expanding
this 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
this value means that the original size of the widget is allowed; it can be expanded to take as much space as possible,
- Ignored
this 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.
The Vert. Stretch and Hor. Stretch properties accept integer values greater than or equal to 0. These properties allow to fine-tune the behavior of size policies. The default value for the properties is 0. A higher value of the stretch means that the widget will be expanded more than widgets for which a lower stretch value is set.