You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1481 lines
66 KiB
1481 lines
66 KiB
<!--
|
|
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd" >
|
|
|
|
-->
|
|
|
|
<sect1 id="designing-forms">
|
|
<title>Designing Forms</title>
|
|
|
|
<sect2 id="most-important-terms">
|
|
<title>Most important terms</title>
|
|
<glosslist>
|
|
<glossentry id="gloss-form">
|
|
<glossterm>Form</glossterm>
|
|
<glossdef>
|
|
<para>
|
|
A window provided for easy data entry and presentation on the
|
|
computer screen.
|
|
</para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-data-source">
|
|
<glossterm>Form's data source</glossterm>
|
|
<glossdef>
|
|
<para>
|
|
Database table or query providing data displayed in the
|
|
form. The data source is needed because forms itself are only
|
|
<emphasis>tools</emphasis> 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.
|
|
</para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-field">
|
|
<glossterm>Form field</glossterm>
|
|
<glossdef>
|
|
<para>
|
|
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).
|
|
</para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-design">
|
|
<glossterm>Form design</glossterm>
|
|
<glossdef>
|
|
<para>
|
|
Tasks you are performing to define the appearance and functions of
|
|
the form. To do this, you need to provide
|
|
<glossterm linkend="gloss-form-data-source">data source</glossterm>,
|
|
insert <glossterm linkend="gloss-form-field">form fields</glossterm>
|
|
of various types and place them at the appropriate location.
|
|
</para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-widget">
|
|
<glossterm>Form widget</glossterm>
|
|
<glossdef>
|
|
<para>Form's element. Main widget types are:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
Widgets displaying information, ⪚ a text box or an image box. Each
|
|
widget of this type can be <emphasis>bound</emphasis> to a data
|
|
source field (a table or a query column). Therefore, such widgets
|
|
are called in short <glossterm linkend="gloss-form-field">form fields</glossterm>.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
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 <firstterm>form control</firstterm>
|
|
because it can perform previously defined action of
|
|
<emphasis>controlling</emphasis> your database application's
|
|
behavior.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Other widgets allowing to enrich a form's appearance, ⪚
|
|
a <quote>line widget</quote> can visually separate two form
|
|
areas.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-container-widget">
|
|
<glossterm>Container widget</glossterm>
|
|
<glossdef>
|
|
<para>
|
|
A widget that can <emphasis>contain</emphasis> 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.
|
|
</para>
|
|
<!--
|
|
<screenshot>
|
|
<screeninfo>Example container widgets</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_01_widget_containers.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Example container widgets</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</glossdef>
|
|
</glossentry>
|
|
</glosslist>
|
|
</sect2>
|
|
|
|
<sect2 id="forms-versus-tables">
|
|
<title>Forms versus tables</title>
|
|
<para>
|
|
In chapter <!--<a href="05_02_00_entering_data_into_tables.html">5.2</a>-->
|
|
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:
|
|
</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
A table can contain too many columns to display them on your
|
|
screen. A form can display such a data using multiple rows.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
A form allows to visually split data <glossterm linkend="gloss-form-field">fields</glossterm>
|
|
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 <glossterm linkend="gloss-form-field">fields</glossterm> mean.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>In data sheet view displaying multi-row data text
|
|
<glossterm linkend="gloss-form-field">fields</glossterm> or images
|
|
is as easy as within forms.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</sect2>
|
|
|
|
<sect2>
|
|
<title>Working with form design</title>
|
|
<para>As with table or query design, you are able to use <interface>Data View</interface>
|
|
and <interface>Design View</interface>. Form designing is performed in
|
|
<interface>Design View</interface>. We will often refer to the form design window as to
|
|
<interface>Form Designer</interface>.
|
|
</para>
|
|
<procedure>
|
|
<step>
|
|
<para>To create a new empty form, select
|
|
<menuchoice><guimenu>Insert</guimenu><guimenuitem>
|
|
<!--<img src="img/form_newobj.png" class="icon">-->Form</guimenuitem></menuchoice>
|
|
from the Menubar. Optionally, you can use
|
|
<menuchoice><guimenuitem>
|
|
<!--<img src="img/form_newobj.png" class="icon">-->New Form</guimenuitem></menuchoice>
|
|
command from drop-down button on the <interface>Project Navigator's</interface>
|
|
toolbar or <menuchoice><guimenuitem>Create Object: Form</guimenuitem></menuchoice> command from the context menu.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>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.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>A window with design of a new form</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_03_new_empty_form.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>A window with design of a new form</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</step>
|
|
</procedure>
|
|
<para>As with table design, <interface>Form Designer</interface> provides
|
|
<interface>Property pane</interface>. To save some space on the screen,
|
|
the pane has three tabs related to the currently
|
|
selected form:
|
|
</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term>The <guilabel>Properties</guilabel> tab</term>
|
|
<listitem>
|
|
<para>Contains a list of properties for the currently selected widget.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>
|
|
<!--<img src="img/property_pane_datasource_tab.png" class="icon">-->
|
|
The <guilabel>Data source</guilabel> tab
|
|
</term>
|
|
<listitem>
|
|
<para>
|
|
Contains properties related specifically to the <glossterm linkend="gloss-form-data-source">data source</glossterm>
|
|
of the currently selected widget or the form itself.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>
|
|
<!--<img src="img/property_pane_widget_tab.png" class="icon">-->
|
|
The <guilabel>Widgets</guilabel> tab
|
|
</term>
|
|
<listitem>
|
|
<para>
|
|
Contains a hierarchy of all widgets of the form. The list simplifies
|
|
widgets lookup by name and navigation between them.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para>
|
|
There is information about currently selected widget's name and type displayed
|
|
on the first and second tab.
|
|
</para>
|
|
<para>Additional toolbars are also available:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
The <guilabel>Widgets</guilabel> toolbar used for inserting new widgets
|
|
into the form
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
The <guilabel>Format</guilabel> toolbar used to format form's elements (⪚
|
|
adjusting widget's size, grouping). Formatting commands are also available
|
|
in the <guimenu>Format</guimenu> menu. More about these commands can be found
|
|
in <xref linkend="formatmenu"/>.
|
|
<!--<a href="aa_05_00_menu.html#menu_format">A.6. Format Menu</a>-->
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</sect2>
|
|
|
|
<sect2 id="using-the-widgets-tab">
|
|
<title>Using the <guilabel>Widgets</guilabel> tab</title>
|
|
<para>
|
|
The <guilabel>Widgets</guilabel> tab in the <interface>Property pane</interface> 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.
|
|
</para>
|
|
<!--<para>In the picture below, the form (a container) contains two widgets:
|
|
<guilabel>groupBox2</guilabel> and <guibutton>options</guibutton> command button. In
|
|
turn, <guilabel>groupBox2</guilabel> (being a container itself) contains two check box
|
|
widgets.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo>Using the <quote>Widgets</quote> tab</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_04_widgets_tab.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Using the <quote>Widgets</quote> tab</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>
|
|
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.
|
|
</para>
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
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 <guilabel>Properties</guilabel> tab to change the
|
|
widget's properties.</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Keeping the <keycap>Ctrl</keycap> key pressed while an item on the
|
|
widgets list is being selected allows to select multiple widgets at a time.
|
|
Keeping the <keycap>Shift</keycap> key pressed allows to select entire lists
|
|
of widgets.</para>
|
|
</listitem>
|
|
<!--<listitem>
|
|
<para>
|
|
When widget is inserted, it is recommended to give it a reasonable name.
|
|
For example, <guilabel>green</guilabel> check box widget has been named specifically
|
|
for its meaning, using the <guilabel>Properties</guilabel> tab
|
|
(<guilabel>Name</guilabel> property has been used to do that). Such change
|
|
can make it easier to find a widget within the list.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo>Naming the widget as <guilabel>green</guilabel></screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_04_renaming_widgets.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Naming the widget as <guilabel>green</guilabel></phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
</listitem>-->
|
|
</itemizedlist>
|
|
</note>
|
|
<para>
|
|
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 <varname>Text</varname> property
|
|
or similar.
|
|
</para>
|
|
</sect2>
|
|
|
|
<sect2 id="inserting-widgets-text-fields">
|
|
<title>Inserting widgets - text fields</title>
|
|
<para>
|
|
Let's create a form providing information about persons, i.e. a form connected
|
|
it with <literal>Persons</literal> table.
|
|
</para>
|
|
<para>
|
|
If the form being designed should present data obtained from the database,
|
|
you need to place appropriate <glossterm linkend="gloss-form-field">fields</glossterm>
|
|
on it. To do this, use the buttons on the <guilabel>Widgets</guilabel> toolbar. Each button corresponds to a single widget type.
|
|
</para>
|
|
<procedure>
|
|
<step>
|
|
<para>
|
|
Click <!--<img src="img/lineedit.png" class="icon">-->
|
|
<guibutton>Text Box</guibutton> button on the <guilabel>Widgets</guilabel> toolbar.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Click on the form surface with the <mousebutton>left</mousebutton> 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.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>Click the <guibutton>Text Box</guibutton> 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
|
|
<glossterm linkend="gloss-form-field">fields</glossterm>.
|
|
</para>
|
|
</step>
|
|
</procedure>
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
There is a context menu available in form's design mode, activated by a
|
|
<mousebutton>right</mousebutton> mouse button click the desired widget
|
|
or the form's surface. The menu offers commands like
|
|
<!--<img src="img/editcut.png" class="icon">--><guimenuitem>Cut</guimenuitem>,
|
|
<!--<img src="img/editcopy.png" class="icon">--><guimenuitem>Copy</guimenuitem>,
|
|
<!--<img src="img/editpaste.png" class="icon">--><guimenuitem>Paste</guimenuitem>,
|
|
<!--<img src="img/editdelete.png" class="icon">--><guimenuitem>Delete</guimenuitem>
|
|
and other, more complex. Many of the commands are also provided in the
|
|
<guilabel>Menubar</guilabel>, usually <guimenuitem>Edit</guimenuitem>.
|
|
Keyboard shortcuts are also available for these commands. Some of the
|
|
commands are only available for certain types of widgets.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
The commands <guimenuitem>
|
|
<!--<img src="img/editcut.png" class="icon">-->Cut</guimenuitem>,<guimenuitem>
|
|
<!--<img src="img/editcopy.png" class="icon">-->Copy</guimenuitem> and <guimenuitem>
|
|
<!--<img src="img/editpaste.png" class="icon">-->Paste</guimenuitem>
|
|
makes it possible to move or copy widgets between forms, even between separate
|
|
database projects.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Holding the <keycap>Ctrl</keycap> key down while clicking a widget allows to select
|
|
multiple widgets.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Instead of using <guimenuitem>
|
|
<!--<img src="img/editcopy.png" class="icon">-->Copy</guimenuitem>
|
|
and <guimenuitem>
|
|
<!--<img src="img/editpaste.png" class="icon">-->Paste</guimenuitem>
|
|
commands, to duplicate a widget within the same form you can hold down the
|
|
<keycap>Ctrl</keycap> key while moving the widget. After the <keycap>Ctrl</keycap>
|
|
key is released, the dragged widget will not be moved but copied in the new location.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</note>
|
|
</sect2>
|
|
|
|
<sect2 id="assigning-data-sources">
|
|
<title>Assigning data sources</title>
|
|
<para>
|
|
The <glossterm linkend="gloss-form-field">fields</glossterm> you inserted
|
|
have no <emphasis>data source</emphasis> assigned yet,
|
|
so these are not able to display information from the database. To assign data
|
|
source, use the <!--<img src="img/database.png" class="icon">-->
|
|
<guilabel>Data Source</guilabel> tab of the <interface>Property pane</interface>.
|
|
</para>
|
|
<para>
|
|
The very first step is to specify the <glossterm linkend="gloss-form-data-source">form's data source</glossterm>,
|
|
i.e. a place the displayed data will be fetched from. As mentioned above, you
|
|
will use table <literal>persons</literal> as a
|
|
<glossterm linkend="gloss-form-data-source">data source</glossterm>
|
|
for your new form.
|
|
</para>
|
|
<procedure>
|
|
<step>
|
|
<para>Click on the form's surface, as you will alter its properties.</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Switch to the <!--<img src="img/database.png" class="icon">-->
|
|
<guilabel>Data Source</guilabel> tab and enter <literal>persons</literal>
|
|
table name in the <guilabel>Form's data source</guilabel> drop down list.
|
|
Alternatively, you can select this name from the drop down list.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Entering <glossterm linkend="gloss-form-data-source">form's data source</glossterm> name</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_05_entering_form_data_source.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Entering <glossterm linkend="gloss-form-data-source">form's data source</glossterm> name</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</step>
|
|
</procedure>
|
|
<para>
|
|
You have assigned <glossterm linkend="gloss-form-data-source">form's data source</glossterm>. Now you need to do specify
|
|
widget's data source.
|
|
</para>
|
|
<procedure>
|
|
<step>
|
|
<para>Click the first text field widget at the top of the form.</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
In the <!--<img src="img/database.png" class="icon">--><guilabel>Data Source</guilabel>
|
|
tab of the property pane enter field name <varname>name</varname> in the
|
|
<emphasis>Widget's data source</emphasis> drop down list. Alternatively, you can select
|
|
this name from the drop down list.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Entering widget's data source name</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_05_entering_text_field_data_source.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Entering widget's data source name</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</step>
|
|
<step>
|
|
<para>Click on next text field widget and enter <varname>surname</varname> as the data source.</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Enter data sources for <varname>street</varname>, <varname>house_number</varname>
|
|
and <varname>city</varname> text <glossterm linkend="gloss-form-field">fields</glossterm>
|
|
in a similar way.
|
|
</para>
|
|
</step>
|
|
</procedure>
|
|
<para>
|
|
You can now save the form's design (this is not mandatory to test the
|
|
form in action). To save, click the
|
|
<!--<img src="img/filesave.png" class="icon">-->
|
|
<guilabel>Save object changes</guilabel> toolbar button or use the
|
|
<menuchoice><shortcut><keycombo action="simul"><keycap>Ctrl</keycap><keycap>S</keycap></keycombo></shortcut>
|
|
<guimenu>File</guimenu><guimenuitem>
|
|
<!--<img src="img/filesave.png" class="icon">-->Save</guimenuitem></menuchoice>
|
|
menu command. Upon saving you will be asked for entering the form's name. Enter
|
|
<literal>Persons</literal> as caption and click the <guibutton>OK</guibutton>
|
|
button. The form's name will be filled automatically.
|
|
</para>
|
|
<para>
|
|
This is the right moment for testing your form. Click the <!--<img src="img/state_data.png" class="icon">-->
|
|
<guibutton>Switch to data view</guibutton> toolbar button. Unless you made a
|
|
mistake while entering data sources, you should see
|
|
<glossterm linkend="gloss-form-field">form's fields</glossterm> filled
|
|
with data from the <literal>persons</literal> table.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>The <literal>Persons</literal> form in data view after inserting text fields and assigning data sources</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_06_form_with_text_fields.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <literal>Persons</literal> form in data view after inserting text fields and assigning data sources</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
If you want to remove widget's <glossterm linkend="gloss-form-data-source">data source</glossterm>
|
|
assignment for a form widget, you can use <!--<img src="img/clear_left.png" class="icon">-->
|
|
<guibutton>Clear widget's data source</guibutton> button near
|
|
the <guilabel>Widet's data source</guilabel> drop down list. Similarly, you can use the
|
|
<!--<img src="img/clear_left.png" class="icon">-->
|
|
<guibutton>Clear form's data source</guibutton> button near the
|
|
<guilabel>Form's data source</guilabel> drop down list.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Use the <!--<img src="img/goto.png" class="icon">-->
|
|
<guibutton>Go to selected form's data source</guibutton> button to select
|
|
appropriate table or query in the <interface>Project Navigator</interface>,
|
|
so you can quickly open a table or query being the
|
|
<glossterm linkend="gloss-form-data-source">data source</glossterm>
|
|
of the form.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<!-- TODO: mention about creating Auto Fields by using drag & drop -->
|
|
</note>
|
|
</sect2>
|
|
|
|
<sect2 id="inserting-text-labels">
|
|
<title>Inserting text labels</title>
|
|
<para>
|
|
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 <!--<img src="img/label.png" class="icon">-->
|
|
<literal>Label</literal> widget is used.
|
|
</para>
|
|
<para>
|
|
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:
|
|
<literal>Name</literal>, <literal>Surname</literal> and <literal>Street</literal>. Additionally,
|
|
on the top of the form insert another label displaying name of the form,
|
|
i.e. <literal>Persons</literal>. Enlarge this label's size and and increase the font size using
|
|
<!--<a href="aa_00_00_menu.html#menu_format_font">-->
|
|
<menuchoice><guimenu>Format</guimenu><guimenuitem>Font...</guimenuitem></menuchoice>
|
|
<!--</a>-->
|
|
menu command.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Ready to use form after adding text labels</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_06_form_with_labels.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Ready to use form after adding text labels</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</sect2>
|
|
|
|
<sect2 id="actions">
|
|
<title>Actions</title>
|
|
<para>
|
|
An <literal>Action</literal> 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).
|
|
</para>
|
|
|
|
<sect3 id="assigning-actions-to-form-buttons">
|
|
<title>Assigning actions to form buttons</title>
|
|
<para>
|
|
Many actions can be assigned to form button. The assigned action is executed
|
|
after button is clicked.
|
|
</para>
|
|
<para>To assign action:</para>
|
|
<procedure>
|
|
<step>
|
|
<para>Switch to form's <interface>Design view</interface> if you have not done yet.</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
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 <keycombo action="press"><keycap>Enter</keycap></keycombo> key.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Click the button widget with the <mousebutton>right</mousebutton> mouse
|
|
button to display the context menu.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
From the context menu select
|
|
<!--<img src="img/form_action.png" class="icon">-->
|
|
<guimenuitem>Assign action...</guimenuitem> command.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
An <guilabel>Assigning Action to Command Button</guilabel> 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
|
|
<guilabel>Action type</guilabel> drop down list has the <guilabel>No type</guilabel>
|
|
item selected.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
From the <guilabel>Action type</guilabel> drop down list select
|
|
<guilabel>Application</guilabel> item. Available application-wide actions
|
|
will be listed.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>Select one of the actions on the list (⪚ <guilabel>Delete Row</guilabel>).</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Click the <guibutton>OK</guibutton> button or press
|
|
the <keycombo action="press"><keycap>Enter</keycap></keycombo> key to
|
|
accept your selection.
|
|
</para>
|
|
</step>
|
|
</procedure>
|
|
<!--<screenshot>
|
|
<screeninfo>Assigning <guilabel>Delete Row</guilabel> action to a form's button</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_07_assigning_action_to_button.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Assigning <guilabel>Delete Row</guilabel> action to a form's button</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>
|
|
After switching to the form's <emphasis>data view</emphasis> you can try
|
|
whether the action works. For example, if you assigned <guilabel>Delete Row</guilabel>
|
|
action, clicking the button, the current database row will be deleted, similarly
|
|
to executing <menuchoice><shortcut><keycombo action="simul"><keycap>Ctrl</keycap><keycap>Delete</keycap></keycombo></shortcut><guimenu>Edit</guimenu><guimenuitem>Delete Row</guimenuitem></menuchoice>
|
|
menu command (depending on your settings you may be asked to confirm the removal).
|
|
</para>
|
|
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
To remove an action assignment, select <guilabel>No type</guilabel> item from
|
|
the <guilabel>Action type</guilabel> drop down list of the
|
|
<guilabel>Assigning Action to Command Button</guilabel> dialog window.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Actions only work in the form's <emphasis>data view</emphasis>. Not every
|
|
action's assignment is reasonable. For example, the
|
|
<guimenuitem>Font...</guimenuitem> action is available in data view, but
|
|
only if you have a widget selected in the <interface>Design view</interface>. If you
|
|
make changes to the font settings the changes are applied to the text
|
|
of that selected widget.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</note>
|
|
</sect3>
|
|
</sect2>
|
|
|
|
<sect2 id="widget-layouts">
|
|
<title>Widget layouts</title>
|
|
<para>
|
|
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.
|
|
</para>
|
|
<!--
|
|
<para>
|
|
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.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo>An example form with widgets that cannot not fit in the window</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_no_fit.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>An example form with widgets that cannot not fit in the window</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>
|
|
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.
|
|
</para>
|
|
<para>
|
|
Using layout in a form improves alignment. Moreover, its space is
|
|
better used. Text fields are closer to each other, spacing is constant.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Example form with layout used</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_well_fit.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Example form with layout used</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>There are two methods to create widget layout.</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
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
|
|
<!--<a href="aa_00_00_menu.html#menu_format_layout">-->
|
|
<guilabel>Layout Widgets</guilabel>
|
|
<!--</a>-->.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
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
|
|
<!--<a href="aa_00_00_menu.html#menu_format_layout">-->Layout Widgets
|
|
<!--</a>-->.
|
|
All widgets existing within the container or within the
|
|
form, being on the same level will be put into a single common layout.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<para>
|
|
In each of these cases you can also use
|
|
<menuchoice><guimenu>Format</guimenu><guimenuitem>Layout Widgets</guimenuitem></menuchoice>
|
|
menu.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Selecting widgets that will be put into a layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_selecting.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Selecting widgets that will be put into a layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
<screenshot>
|
|
<screeninfo>Four widgets are selected</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_selected.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Four widgets are selected</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
<screenshot>
|
|
<screeninfo>Using the context menu for putting the widgets into a grid layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_popup.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Using the context menu for putting the widgets into a grid layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>
|
|
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.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Widgets within a grid layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_grid.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Widgets within a grid layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>Besides the grid type, there are other widget layout types.</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term>vertical</term>
|
|
<listitem>
|
|
<para>Vertical widget layout</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Vertical widget layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_vertical.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Vertical widget layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>horizontal</term>
|
|
<listitem>
|
|
<para>Horizontal widget layout</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Horizontal widget layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_layout_horizontal.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Horizontal widget layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<!-- TODO podzia poziomy / pionowy
|
|
<br><img src="img/05_04_08_form_layout_vertical_splitter.png">
|
|
<br><br>
|
|
<br><img src="img/05_04_08_form_layout_horizontal_splitter.png">
|
|
<br><br>
|
|
</li> -->
|
|
</variablelist>
|
|
|
|
<sect3 id="springs-in-widget-layouts">
|
|
<title>Springs in widget layouts</title>
|
|
<para>
|
|
A <emphasis>spring</emphasis> 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.
|
|
</para>
|
|
<para>To use a spring:</para>
|
|
<procedure>
|
|
<step>
|
|
<para>
|
|
Select <!--<img src="img/spring.png" class="icon">-->spring icon on the
|
|
<guilabel>Widgets</guilabel> toolbar.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>Click on a selected point of the form to insert the spring.</para>
|
|
</step>
|
|
</procedure>
|
|
<!--<para>
|
|
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.
|
|
</para>
|
|
<screenshot>
|
|
<screeninfo>Horizontal layout containing a spring and a text label</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_spring.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Horizontal layout containing a spring and a text label</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>
|
|
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.
|
|
</para>
|
|
</sect3>
|
|
<!--
|
|
|
|
TODO: The entire text in this section is built around a screenshot
|
|
example, so it's commented out for now.
|
|
|
|
<sect3 id="advanced-widget-layouts">
|
|
<title>Advanced widget layouts</title>
|
|
<para>
|
|
Widget layouts can be combined (or nested). On the following example
|
|
you can identify two nested layouts:
|
|
</para>
|
|
<orderedlist>
|
|
<listitem>
|
|
<para>
|
|
Horizontal layout with a spring, aligning the <literal>Persons</literal>
|
|
text label to the right.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>Grid layout grouping widgets on the whole form.</para>
|
|
</listitem>
|
|
</orderedlist>
|
|
<screenshot>
|
|
<screeninfo>Two widget layouts combined: horizontal layout inside of a grid layout</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_advanced_layout.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Two widget layouts combined: horizontal layout inside of a grid layout</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
<para>
|
|
The horizontal layout is treated in the example as a single widget by
|
|
the grid layout - it takes exactly one <quote>cell</quote> of the grid.
|
|
After opening a form designed this way in the data view, you can notice
|
|
(by resizing the form) that:
|
|
</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
<literal>Persons</literal> text label thanks to the spring used is constantly
|
|
aligned to the to the right side of the form.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Text fields take all of the available width thanks to putting them
|
|
into the grid layout.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
All the form's widgets are pushed to the top thanks to the spring
|
|
used at the bottom of the form.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<screenshot>
|
|
<screeninfo>The form using the two layouts displayed in data view</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_08_form_advanced_layout_view.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The form using the two layouts displayed in data view</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>
|
|
</sect3>-->
|
|
|
|
<sect3 id="removing-widget-layouts">
|
|
<title>Removing widget layouts</title>
|
|
<para>
|
|
To remove widget layout without removing widgets, perform one of
|
|
these actions:
|
|
</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
Click with the <mousebutton>right</mousebutton> mouse button on
|
|
the layout's border and select <guimenuitem>Break Layout</guimenuitem>
|
|
command from the context menu.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Click with the <mousebutton>left</mousebutton> mouse button on
|
|
the layout's border and select
|
|
<menuchoice><guimenu>Format</guimenu><guimenuitem>Break Layout</guimenuitem></menuchoice>
|
|
menu command.
|
|
</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<note>
|
|
<para>
|
|
Removing widget layout using the <guimenuitem>Break Layout</guimenuitem>
|
|
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 <keycap>Delete</keycap> key or use
|
|
<menuchoice><guimenu>Edit</guimenu><guimenuitem>
|
|
<!--<img src="img/editdelete.png" class="icon">-->Delete</guimenuitem></menuchoice>
|
|
menu command or context menu command.
|
|
</para>
|
|
</note>
|
|
</sect3>
|
|
|
|
<sect3 id="size-policies-for-widgets-within-a-layout">
|
|
<title>Size policies for widgets within a layout</title>
|
|
<para>
|
|
Instead of setting a fixed size for your widgets, in &kexi; you can
|
|
choose between various widget's size policies. A <emphasis>size policy</emphasis>
|
|
is a flexible strategy for controlling how a widget is stretched (or shrunk)
|
|
depending on other neighbouring widgets and space available within the form.
|
|
</para>
|
|
<para>
|
|
After putting widgets into a <emphasis>layout</emphasis>, typically each widget
|
|
gets a proportional (<guilabel>Preferred</guilabel>) 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.
|
|
</para>
|
|
<para>For each widget inserted into the form, there are settings for size policy
|
|
available in the <interface>Property Editor</interface>. The settings are presented
|
|
as a group of properties called <guilabel>Size Policy</guilabel>.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>A group of properties for defining a widget's size policy</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_properties.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>A group of properties for defining a widget's size policy</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>This group of properties contains:</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><guilabel>Horizontal Size Policy</guilabel></term>
|
|
<listitem>
|
|
<para>defining horizontal size of the widget,</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Vertical Size Policy</guilabel></term>
|
|
<listitem>
|
|
<para>defining vertical size of the widget,</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Horizontal Stretch</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
defining strength of activity of the
|
|
<guilabel>Horizontal Size Policy</guilabel>,
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Vertical Stretch</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
defining strength of activity of the
|
|
<guilabel>Vertical Size Policy</guilabel>
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
|
|
<sect4>
|
|
<title>Values of size policies</title>
|
|
<para>
|
|
The following values are available in the drop down list for
|
|
<guilabel>Horizontal Size Policy</guilabel> and
|
|
<guilabel>Vertical Size Policy</guilabel> properties visible
|
|
in the <interface>Property Editor</interface>:
|
|
</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><guilabel>Fixed</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
this value means that the widget cannot be automatically resized; it
|
|
should maintain the constant size defined at design time (width or height),
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Minimum</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>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)</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_minimum.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>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)</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Maximum</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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,
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Preferred</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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,
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_preferred.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Expanding</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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,
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Minimum Expanding</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
this value means that the original size of the widget is allowed; it
|
|
can be expanded to take as much space as possible,
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><guilabel>Ignored</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para>
|
|
Different widget types have various default size policies; for example,
|
|
button widgets have default size policy set to <guilabel>Minimum</guilabel> (in both directions),
|
|
while text field widgets have vertical size policy set to <guilabel>Fixed</guilabel>.
|
|
</para>
|
|
<para>
|
|
The most frequently used size policies are <guilabel>Preferred</guilabel>,
|
|
<guilabel>Minimum</guilabel> and <guilabel>Maximum</guilabel>.
|
|
</para>
|
|
</sect4>
|
|
|
|
<sect4>
|
|
<title>Vertical and horizontal stretch</title>
|
|
<para>
|
|
The <guilabel>Vertical Stretch</guilabel> and <guilabel>Horizontal Stretch</guilabel>
|
|
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. <!--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.-->
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_09_size_policy_vertical_stretch.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</sect4>
|
|
</sect3>
|
|
</sect2>
|
|
|
|
<sect2 id="setting-widgets-size-and-position-by-hand">
|
|
<title>Setting widgets size and position by hand</title>
|
|
<para>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:
|
|
</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
Adjusting sizes of selected widgets. The commands are available in the
|
|
<menuchoice><guimenu>Format</guimenu><guisubmenu>Adjust Widgets Size</guisubmenu></menuchoice>
|
|
submenu of the menubar and in the
|
|
<menuchoice><guisubmenu>Adjust Widgets Size</guisubmenu></menuchoice>
|
|
submenu of the context menu. The toolbar's drop down
|
|
button <!--<img src="img/aogrid.png" class="icon">--><guibutton>Adjust Widgets Size</guibutton>
|
|
is also available.
|
|
</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aofit.png" class="icon">--><guilabel>To Fit</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aogrid.png" class="icon">--><guilabel>To Grid</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aoshortest.png" class="icon">--><guilabel>To Shortest</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aotallest.png" class="icon">--><guilabel>To Tallest</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aonarrowest.png" class="icon">--><guilabel>To Narrowest</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aowidest.png" class="icon">--><guilabel>To Widest</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
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.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Aligning positions of the selected widgets. The commands are available
|
|
in the
|
|
<menuchoice><guimenu>Format</guimenu><guisubmenu>Align Widgets Position</guisubmenu></menuchoice>
|
|
submenu of the menubar and in the
|
|
<menuchoice><guisubmenu>Align Widgets Position</guisubmenu></menuchoice>
|
|
submenu of the context menu. The toolbar's drop
|
|
down button <!--<img src="img/aoleft.png" class="icon">-->
|
|
<guibutton>Align Widgets Position</guibutton> is also available.
|
|
</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aoleft.png" class="icon">--><guilabel>To Left</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
All the selected widgets' left positions will be moved to the
|
|
position of the leftmost widget's left edge.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aoright.png" class="icon">--><guilabel>To Right</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
All the selected widgets' right positions will be moved to the
|
|
position of the rightmost widget's right edge.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aotop.png" class="icon">--><guilabel>To Top</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
All the selected widgets' top positions will be moved to the
|
|
position of the uppermost widget's upper edge.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aobottom.png" class="icon">--><guilabel>To Bottom</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
All the selected widgets' bottom positions will be moved to the
|
|
position of the bottommost widget's bottom edge.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term><!--<img src="img/aopos2grid.png" class="icon">--><guilabel>To Grid</guilabel></term>
|
|
<listitem>
|
|
<para>
|
|
All the selected widgets' top-left corners will be moved so that
|
|
they are positioned in the nearest grid point.
|
|
</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para>None of the above commands resizes the widgets.</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<para>
|
|
There are also additional commands available:
|
|
<!--<img src="img/raise.png" class="icon">--><guimenuitem>Bring Widget to Front</guimenuitem>
|
|
(i.e. above all other widgets) and
|
|
<!--<img src="img/lower.png" class="icon">--><guimenuitem>Send Widget to Back</guimenuitem> (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.
|
|
</para>
|
|
</sect2>
|
|
|
|
<sect2 id="setting-the-tab-order">
|
|
<title>Setting the tab order</title>
|
|
<para>
|
|
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
|
|
<quote>press</quote> it using the <keycombo action="press"><keycap>Enter</keycap></keycombo>
|
|
or <keycombo action="press"><keycap>Space</keycap></keycombo> key instead of a mouse button.
|
|
</para>
|
|
<para>
|
|
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 <keycombo action="press"><keycap>Tab</keycap></keycombo>
|
|
key. The latter method is often used because of its speed and convenience
|
|
for users. Availability of the focusing methods is controlled by
|
|
<guilabel>Focus Policy</guilabel> property of a given widget.
|
|
</para>
|
|
<para>
|
|
There is a relationship between focusing (activating) widgets using <keycombo action="press"><keycap>Tab</keycap></keycombo>
|
|
key and tab order setting of a form. After pressing the <keycombo action="press"><keycap>Tab</keycap></keycombo> key, the
|
|
next widget should be focused, so the form should know about the tab order.
|
|
</para>
|
|
<para>To alter tab order for a form's widget:</para>
|
|
<procedure>
|
|
<step>
|
|
<para>Switch to design view of the form.</para>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Execute <menuchoice><guimenu>Edit</guimenu><guimenuitem>Edit Tab Order...</guimenuitem></menuchoice>
|
|
menu command. The <guilabel>Edit Tab Order</guilabel> dialog will appear with settings for this form.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>A window for editing tab order for a form</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_11_tab_stop_dialog.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>A window for editing tab order for a form</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
<para>
|
|
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 <keycap>Tab</keycap> key. The window
|
|
allows you to change the tab order or set the automatic tab order.
|
|
</para>
|
|
</step>
|
|
<step>
|
|
<para>To change tab order, either:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para>
|
|
Click a selected widget name in the widgets list and drag it
|
|
to a desired position (up or down) using the mouse.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Click a selected widget name on the widgets list and use
|
|
<guibutton>Move Up</guibutton> or <guibutton>Move Down</guibutton>
|
|
buttons, to move the widgets to a desired position.
|
|
</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para>
|
|
Click the <guilabel>Handle tab order automatically</guilabel> 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.
|
|
</para>
|
|
<!--<screenshot>
|
|
<screeninfo>Automatic tab order for a form</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="img/05_04_11_auto_tab_stop.png" format="PNG"/>
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Automatic tab order for a form</phrase>
|
|
</textobject>
|
|
</mediaobject>
|
|
</screenshot>-->
|
|
</listitem>
|
|
</itemizedlist>
|
|
</step>
|
|
<step>
|
|
<para>
|
|
Click the <guibutton>OK</guibutton> button to accept the changes or <guibutton>Cancel</guibutton> button to dismiss
|
|
the changes.
|
|
</para>
|
|
</step>
|
|
</procedure>
|
|
</sect2>
|
|
</sect1>
|