path: root/doc/kexi/designingforms.docbook

<!--
  <!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, &eg; 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, &eg; 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, &eg;
                  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 (&eg;
            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 &amp; 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 (&eg; 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 (&eg; <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>