Designing Forms
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 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, ⪚ 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, ⪚ 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, ⪚
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.
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:
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.
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 often refer to the 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 or Create Object: Form command from the context menu.
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
Property 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
The Format toolbar used to format form's elements (⪚
adjusting widget's size, grouping). Formatting commands are also available
in the Format menu. More about these commands can be found
in .
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.
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.
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.
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 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 text boxes inserted in your form. For sake of
simplicity we will limit ourselves to three data
fields.
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. 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.
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 Ctrl
key is released, the dragged widget will not be moved but copied in the new location.
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, use the
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.
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 name in 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 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
CtrlS
File
Save
menu command. 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
Switch to data view toolbar button. Unless you made a
mistake while entering data sources, you should see
form's fields filled
with data from the persons table.
If you want to remove widget's data source
assignment for a form widget, you can use
Clear widget's data source button near
the Widet's data source drop down list. Similarly, you can use the
Clear form's data source button near the
Form's data source drop down list.
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.
Inserting text labels
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 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 and increase the font size using
FormatFont...
menu command.
Actions
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 (⪚ after opening a form).
Assigning actions to form buttons
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 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 the 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 (⪚ Delete Row).
Click the OK button or press
the Enter key to
accept your selection.
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 CtrlDeleteEditDelete Row
menu command (depending on your settings you may be asked to confirm the removal).
To remove an action assignment, select No type item from
the Action type drop down list of the
Assigning Action to Command 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.
Widget layouts
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.
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
FormatLayout Widgets
menu.
Widget layout is presented in the design view using a blue, green or
red box drawn with a broken line. This line is displayed only in the
form's design view.
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.
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.
Removing widget layouts
To remove widget layout without removing widgets, perform one of
these actions:
Click with the right mouse button on
the layout's border and select Break Layout
command from the context menu.
Click with the left mouse button on
the layout's border and select
FormatBreak Layout
menu command.
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.
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
The following values are available in the drop down list for
Horizontal Size Policy and
Vertical Size Policy properties 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.
Vertical and horizontal stretch
The Vertical Stretch and Horizontal 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.
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 modify the position and size of widgets 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
FormatAdjust Widgets Size
submenu of the menubar and in the
Adjust Widgets Size
submenu of the context menu. The toolbar's drop down
button Adjust Widgets Size
is also available.
To Fit
The size of the selected widgets will be altered so each widget will be
resized to its preferred size and its contents; for example, a text
label's size will be changed to fit its text. The position of the widgets
will not be changed.
To Grid
The size of the selected widgets will be altered so each widget's corner
will be placed on the form's (or other container's) grid point.
The widget's position can be slightly altered.
To Shortest
The height of the selected widgets will be altered so that each of them
will have the same height as the shortest one. The position of the widgets
will not be changed.
To Tallest
The height of the selected widgets will be altered so that each of them
will have the same height as the tallest one. The position of the widgets
will not be changed.
To Narrowest
The width of the selected widgets will be altered so that each of them
will have the same height as the narrowest one. The position of the
widgets will not be changed.
To Widest
The width of the selected widgets will be altered so that each of them
will have the same height as the widest one. The position of the widgets
will not be changed.
Aligning positions of the selected widgets. The commands are available
in the
FormatAlign Widgets Position
submenu of the menubar and in the
Align Widgets Position
submenu of the context menu. The 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
they are 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 an other (except when a
container widget contains other widget inside). Also note that clicking
a widget with a mouse button is enough to bring the widget to front.
Setting the tab order
A widget's focus determines that widget's activity available using keyboard.
Focus is related to widgets displayed in the form's data view. Exactly one
form widget can have focus at the same time. The most frequent use of focus
is text entry (when a given text field is active, i.e. it is focused).
An 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 its speed and convenience
for users. Availability of the focusing methods is controlled by
Focus Policy property of a given widget.
There is a 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 tab order for a form's widget:
Switch to design view of the form.
Execute EditEdit Tab Order...
menu command. The Edit Tab Order dialog will appear with settings for this 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 the tab order or set the automatic tab order.
To change tab order, either:
Click a selected widget name in 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 order 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, respectively) and from the top to bottom.
Click the OK button to accept the changes or Cancel button to dismiss
the changes.