| blob | b205fe7128b360de0af6bbda2fa1275679cbd07f |
1 <!--
2 <!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd" >
4 -->
6 <sect1 id="designing-forms">
7 <title>Designing Forms</title>
9 <sect2 id="most-important-terms">
10 <title>Most important terms</title>
11 <glosslist>
12 <glossentry id="gloss-form">
13 <glossterm>Form</glossterm>
14 <glossdef>
15 <para>
16 A window provided for easy data entry and presentation on the
17 computer screen.
18 </para>
19 </glossdef>
20 </glossentry>
21 <glossentry id="gloss-form-data-source">
22 <glossterm>Form's data source</glossterm>
23 <glossdef>
24 <para>
25 Database table or query providing data displayed in the
26 form. The data source is needed because forms itself are only
27 <emphasis>tools</emphasis> for displaying and entering data,
28 while tables and queries are the source of data. New, empty
29 forms have no data source assigned, so they are not displaying
30 any data from your database unless you assign a data source
31 to them.
32 </para>
33 </glossdef>
34 </glossentry>
35 <glossentry id="gloss-form-field">
36 <glossterm>Form field</glossterm>
37 <glossdef>
38 <para>
39 Direct equivalent of a column in a table or query. Most frequently
40 used are fields for displaying text and numbers. Entering a new
41 value or changing the existing value of such a field causes a change
42 in the bound table or query column (after accepting the change).
43 </para>
44 </glossdef>
45 </glossentry>
46 <glossentry id="gloss-form-design">
47 <glossterm>Form design</glossterm>
48 <glossdef>
49 <para>
50 Tasks you are performing to define the appearance and functions of
51 the form. To do this, you need to provide
52 <glossterm linkend="gloss-form-data-source">data source</glossterm>,
53 insert <glossterm linkend="gloss-form-field">form fields</glossterm>
54 of various types and place them at the appropriate location.
55 </para>
56 </glossdef>
57 </glossentry>
58 <glossentry id="gloss-form-widget">
59 <glossterm>Form widget</glossterm>
60 <glossdef>
61 <para>Form's element. Main widget types are:</para>
62 <itemizedlist>
63 <listitem>
64 <para>
65 Widgets displaying information, ⪚ a text box or an image box. Each
66 widget of this type can be <emphasis>bound</emphasis> to a data
67 source field (a table or a query column). Therefore, such widgets
68 are called in short <glossterm linkend="gloss-form-field">form fields</glossterm>.
69 </para>
70 </listitem>
71 <listitem>
72 <para>
73 Widgets able to perform a specified action, ⪚ a push button
74 that can close the current form. Within other applications this
75 widget type is sometimes called <firstterm>form control</firstterm>
76 because it can perform previously defined action of
77 <emphasis>controlling</emphasis> your database application's
78 behavior.
79 </para>
80 </listitem>
81 <listitem>
82 <para>
83 Other widgets allowing to enrich a form's appearance, ⪚
84 a <quote>line widget</quote> can visually separate two form
85 areas.
86 </para>
87 </listitem>
88 </itemizedlist>
89 </glossdef>
90 </glossentry>
91 <glossentry id="gloss-container-widget">
92 <glossterm>Container widget</glossterm>
93 <glossdef>
94 <para>
95 A widget that can <emphasis>contain</emphasis> other widgets within
96 its area. For example, frame widget or tab widget are containers.
97 The form's surface itself is a container as well. A command button cannot
98 be called as container because it is not possible to insert a widget
99 inside it. In more complex cases, container widgets can be inserted
100 inside a container, so nesting is possible.
101 </para>
102 <!--
103 <screenshot>
104 <screeninfo>Example container widgets</screeninfo>
105 <mediaobject>
106 <imageobject>
107 <imagedata fileref="img/05_04_01_widget_containers.png" format="PNG"/>
108 </imageobject>
109 <textobject>
110 <phrase>Example container widgets</phrase>
111 </textobject>
112 </mediaobject>
113 </screenshot>-->
114 </glossdef>
115 </glossentry>
116 </glosslist>
117 </sect2>
119 <sect2 id="forms-versus-tables">
120 <title>Forms versus tables</title>
121 <para>
122 In chapter <!--<a href="05_02_00_entering_data_into_tables.html">5.2</a>-->
123 5.2 you learned about how to enter data directly into tables using their
124 data sheet view. However, in many cases forms are better suited for data
125 entry:
126 </para>
127 <itemizedlist>
128 <listitem>
129 <para>
130 A table can contain too many columns to display them on your
131 screen. A form can display such a data using multiple rows.
132 </para>
133 </listitem>
134 <listitem>
135 <para>
136 A form allows to visually split data <glossterm linkend="gloss-form-field">fields</glossterm>
137 into logical groups, thus increasing readability. Labels with
138 additional information can be inserted to give users more hints
139 on how to use the form or what given data <glossterm linkend="gloss-form-field">fields</glossterm> mean.
140 </para>
141 </listitem>
142 <listitem>
143 <para>
144 Command buttons can be used within forms for commonly used commands
145 so users can use forms in a similar way as a standalone applications they
146 know.
147 </para>
148 </listitem>
149 <listitem>
150 <para>In data sheet view displaying multi-row data text
151 <glossterm linkend="gloss-form-field">fields</glossterm> or images
152 is as easy as within forms.
153 </para>
154 </listitem>
155 </itemizedlist>
156 </sect2>
158 <sect2>
159 <title>Working with form design</title>
160 <para>As with table or query design, you are able to use <interface>Data View</interface>
161 and <interface>Design View</interface>. Form designing is performed in
162 <interface>Design View</interface>. We will often refer to the form design window as to
163 <interface>Form Designer</interface>.
164 </para>
165 <procedure>
166 <step>
167 <para>To create a new empty form, select
168 <menuchoice><guimenu>Insert</guimenu><guimenuitem>
169 <!--<img src="img/form_newobj.png" class="icon">-->Form</guimenuitem></menuchoice>
170 from the Menubar. Optionally, you can use
171 <menuchoice><guimenuitem>
172 <!--<img src="img/form_newobj.png" class="icon">-->New Form</guimenuitem></menuchoice>
173 command from drop-down button on the <interface>Project Navigator's</interface>
174 toolbar or <menuchoice><guimenuitem>Create Object: Form</guimenuitem></menuchoice> command from the context menu.
175 </para>
176 </step>
177 <step>
178 <para>A new frame will appear, you can resize the form by moving the
179 borders. The form is covered with a grid which simplifies
180 accurate positioning of the widgets.
181 </para>
182 <!--<screenshot>
183 <screeninfo>A window with design of a new form</screeninfo>
184 <mediaobject>
185 <imageobject>
186 <imagedata fileref="img/05_04_03_new_empty_form.png" format="PNG"/>
187 </imageobject>
188 <textobject>
189 <phrase>A window with design of a new form</phrase>
190 </textobject>
191 </mediaobject>
192 </screenshot>-->
193 </step>
194 </procedure>
195 <para>As with table design, <interface>Form Designer</interface> provides
196 <interface>Property pane</interface>. To save some space on the screen,
197 the pane has three tabs related to the currently
198 selected form:
199 </para>
200 <variablelist>
201 <varlistentry>
202 <term>The <guilabel>Properties</guilabel> tab</term>
203 <listitem>
204 <para>Contains a list of properties for the currently selected widget.</para>
205 </listitem>
206 </varlistentry>
207 <varlistentry>
208 <term>
209 <!--<img src="img/property_pane_datasource_tab.png" class="icon">-->
210 The <guilabel>Data source</guilabel> tab
211 </term>
212 <listitem>
213 <para>
214 Contains properties related specifically to the <glossterm linkend="gloss-form-data-source">data source</glossterm>
215 of the currently selected widget or the form itself.
216 </para>
217 </listitem>
218 </varlistentry>
219 <varlistentry>
220 <term>
221 <!--<img src="img/property_pane_widget_tab.png" class="icon">-->
222 The <guilabel>Widgets</guilabel> tab
223 </term>
224 <listitem>
225 <para>
226 Contains a hierarchy of all widgets of the form. The list simplifies
227 widgets lookup by name and navigation between them.
228 </para>
229 </listitem>
230 </varlistentry>
231 </variablelist>
232 <para>
233 There is information about currently selected widget's name and type displayed
234 on the first and second tab.
235 </para>
236 <para>Additional toolbars are also available:</para>
237 <itemizedlist>
238 <listitem>
239 <para>
240 The <guilabel>Widgets</guilabel> toolbar used for inserting new widgets
241 into the form
242 </para>
243 </listitem>
244 <listitem>
245 <para>
246 The <guilabel>Format</guilabel> toolbar used to format form's elements (⪚
247 adjusting widget's size, grouping). Formatting commands are also available
248 in the <guimenu>Format</guimenu> menu. More about these commands can be found
249 in <xref linkend="formatmenu"/>.
250 <!--<a href="aa_05_00_menu.html#menu_format">A.6. Format Menu</a>-->
251 </para>
252 </listitem>
253 </itemizedlist>
254 </sect2>
256 <sect2 id="using-the-widgets-tab">
257 <title>Using the <guilabel>Widgets</guilabel> tab</title>
258 <para>
259 The <guilabel>Widgets</guilabel> tab in the <interface>Property pane</interface> provides
260 a list of form widgets and their hierarchy. Each widget is presented
261 within the hierarchy beside other widgets being on the same level
262 (the same parent container). Child widgets (inside containers) are
263 presented using indented names.
264 </para>
265 <!--<para>In the picture below, the form (a container) contains two widgets:
266 <guilabel>groupBox2</guilabel> and <guibutton>options</guibutton> command button. In
267 turn, <guilabel>groupBox2</guilabel> (being a container itself) contains two check box
268 widgets.
269 </para>
270 <screenshot>
271 <screeninfo>Using the <quote>Widgets</quote> tab</screeninfo>
272 <mediaobject>
273 <imageobject>
274 <imagedata fileref="img/05_04_04_widgets_tab.png" format="PNG"/>
275 </imageobject>
276 <textobject>
277 <phrase>Using the <quote>Widgets</quote> tab</phrase>
278 </textobject>
279 </mediaobject>
280 </screenshot>-->
281 <para>
282 Each widget has displayed its name and type. The type has also an icon
283 displayed - the same as the one displayed on the toolbar used while
284 form designing is performed.
285 </para>
286 <note>
287 <itemizedlist>
288 <listitem>
289 <para>
290 Changing the current selection on the list causes appropriate selection
291 on the designed form. This allows for easier widget lookup by name and
292 easier navigation. For example, it is possible to select a widget by
293 name, and then switch to the <guilabel>Properties</guilabel> tab to change the
294 widget's properties.</para>
295 </listitem>
296 <listitem>
297 <para>
298 Keeping the <keycap>Ctrl</keycap> key pressed while an item on the
299 widgets list is being selected allows to select multiple widgets at a time.
300 Keeping the <keycap>Shift</keycap> key pressed allows to select entire lists
301 of widgets.</para>
302 </listitem>
303 <!--<listitem>
304 <para>
305 When widget is inserted, it is recommended to give it a reasonable name.
306 For example, <guilabel>green</guilabel> check box widget has been named specifically
307 for its meaning, using the <guilabel>Properties</guilabel> tab
308 (<guilabel>Name</guilabel> property has been used to do that). Such change
309 can make it easier to find a widget within the list.
310 </para>
311 <screenshot>
312 <screeninfo>Naming the widget as <guilabel>green</guilabel></screeninfo>
313 <mediaobject>
314 <imageobject>
315 <imagedata fileref="img/05_04_04_renaming_widgets.png" format="PNG"/>
316 </imageobject>
317 <textobject>
318 <phrase>Naming the widget as <guilabel>green</guilabel></phrase>
319 </textobject>
320 </mediaobject>
321 </screenshot>
322 </listitem>-->
323 </itemizedlist>
324 </note>
325 <para>
326 Giving widgets reasonable names can be useful but is not mandatory. Note
327 that widget's name is a property that is not visible to the user of your form.
328 Users will only see a widget text, provided by <varname>Text</varname> property
329 or similar.
330 </para>
331 </sect2>
333 <sect2 id="inserting-widgets-text-fields">
334 <title>Inserting widgets - text fields</title>
335 <para>
336 Let's create a form providing information about persons, i.e. a form connected
337 it with <literal>Persons</literal> table.
338 </para>
339 <para>
340 If the form being designed should present data obtained from the database,
341 you need to place appropriate <glossterm linkend="gloss-form-field">fields</glossterm>
342 on it. To do this, use the buttons on the <guilabel>Widgets</guilabel> toolbar. Each button corresponds to a single widget type.
343 </para>
344 <procedure>
345 <step>
346 <para>
347 Click <!--<img src="img/lineedit.png" class="icon">-->
348 <guibutton>Text Box</guibutton> button on the <guilabel>Widgets</guilabel> toolbar.
349 </para>
350 </step>
351 <step>
352 <para>
353 Click on the form surface with the <mousebutton>left</mousebutton> mouse
354 button. A new text box widget will be placed in the point where you clicked.
355 Before you release you can drag your mouse to specify a desired size for the widget.
356 </para>
357 </step>
358 <step>
359 <para>
360 If needed, move the inserted widget using drag & drop to a desired
361 position. You can resize the widget afterwards by dragging one of the
362 small boxes appearing near its corners. Note that the boxes are only
363 visible when the widget is selected. If you select another widget or the
364 form surface, the boxes disappear.
365 </para>
366 </step>
367 <step>
368 <para>Click the <guibutton>Text Box</guibutton> toolbar button again and click
369 on the form surface to insert another widget. Repeat this action once
370 again until you get three text boxes inserted in your form. For sake of
371 simplicity we will limit ourselves to three data
372 <glossterm linkend="gloss-form-field">fields</glossterm>.
373 </para>
374 </step>
375 </procedure>
376 <note>
377 <itemizedlist>
378 <listitem>
379 <para>
380 There is a context menu available in form's design mode, activated by a
381 <mousebutton>right</mousebutton> mouse button click the desired widget
382 or the form's surface. The menu offers commands like
383 <!--<img src="img/editcut.png" class="icon">--><guimenuitem>Cut</guimenuitem>,
384 <!--<img src="img/editcopy.png" class="icon">--><guimenuitem>Copy</guimenuitem>,
385 <!--<img src="img/editpaste.png" class="icon">--><guimenuitem>Paste</guimenuitem>,
386 <!--<img src="img/editdelete.png" class="icon">--><guimenuitem>Delete</guimenuitem>
387 and other, more complex. Many of the commands are also provided in the
388 <guilabel>Menubar</guilabel>, usually <guimenuitem>Edit</guimenuitem>.
389 Keyboard shortcuts are also available for these commands. Some of the
390 commands are only available for certain types of widgets.
391 </para>
392 </listitem>
393 <listitem>
394 <para>
395 The commands <guimenuitem>
396 <!--<img src="img/editcut.png" class="icon">-->Cut</guimenuitem>,<guimenuitem>
397 <!--<img src="img/editcopy.png" class="icon">-->Copy</guimenuitem> and <guimenuitem>
398 <!--<img src="img/editpaste.png" class="icon">-->Paste</guimenuitem>
399 makes it possible to move or copy widgets between forms, even between separate
400 database projects.
401 </para>
402 </listitem>
403 <listitem>
404 <para>
405 Holding the <keycap>Ctrl</keycap> key down while clicking a widget allows to select
406 multiple widgets.
407 </para>
408 </listitem>
409 <listitem>
410 <para>
411 Instead of using <guimenuitem>
412 <!--<img src="img/editcopy.png" class="icon">-->Copy</guimenuitem>
413 and <guimenuitem>
414 <!--<img src="img/editpaste.png" class="icon">-->Paste</guimenuitem>
415 commands, to duplicate a widget within the same form you can hold down the
416 <keycap>Ctrl</keycap> key while moving the widget. After the <keycap>Ctrl</keycap>
417 key is released, the dragged widget will not be moved but copied in the new location.
418 </para>
419 </listitem>
420 </itemizedlist>
421 </note>
422 </sect2>
424 <sect2 id="assigning-data-sources">
425 <title>Assigning data sources</title>
426 <para>
427 The <glossterm linkend="gloss-form-field">fields</glossterm> you inserted
428 have no <emphasis>data source</emphasis> assigned yet,
429 so these are not able to display information from the database. To assign data
430 source, use the <!--<img src="img/database.png" class="icon">-->
431 <guilabel>Data Source</guilabel> tab of the <interface>Property pane</interface>.
432 </para>
433 <para>
434 The very first step is to specify the <glossterm linkend="gloss-form-data-source">form's data source</glossterm>,
435 i.e. a place the displayed data will be fetched from. As mentioned above, you
436 will use table <literal>persons</literal> as a
437 <glossterm linkend="gloss-form-data-source">data source</glossterm>
438 for your new form.
439 </para>
440 <procedure>
441 <step>
442 <para>Click on the form's surface, as you will alter its properties.</para>
443 </step>
444 <step>
445 <para>
446 Switch to the <!--<img src="img/database.png" class="icon">-->
447 <guilabel>Data Source</guilabel> tab and enter <literal>persons</literal>
448 table name in the <guilabel>Form's data source</guilabel> drop down list.
449 Alternatively, you can select this name from the drop down list.
450 </para>
451 <!--<screenshot>
452 <screeninfo>Entering <glossterm linkend="gloss-form-data-source">form's data source</glossterm> name</screeninfo>
453 <mediaobject>
454 <imageobject>
455 <imagedata fileref="img/05_04_05_entering_form_data_source.png" format="PNG"/>
456 </imageobject>
457 <textobject>
458 <phrase>Entering <glossterm linkend="gloss-form-data-source">form's data source</glossterm> name</phrase>
459 </textobject>
460 </mediaobject>
461 </screenshot>-->
462 </step>
463 </procedure>
464 <para>
465 You have assigned <glossterm linkend="gloss-form-data-source">form's data source</glossterm>. Now you need to do specify
466 widget's data source.
467 </para>
468 <procedure>
469 <step>
470 <para>Click the first text field widget at the top of the form.</para>
471 </step>
472 <step>
473 <para>
474 In the <!--<img src="img/database.png" class="icon">--><guilabel>Data Source</guilabel>
475 tab of the property pane enter field name <varname>name</varname> in the
476 <emphasis>Widget's data source</emphasis> drop down list. Alternatively, you can select
477 this name from the drop down list.
478 </para>
479 <!--<screenshot>
480 <screeninfo>Entering widget's data source name</screeninfo>
481 <mediaobject>
482 <imageobject>
483 <imagedata fileref="img/05_04_05_entering_text_field_data_source.png" format="PNG"/>
484 </imageobject>
485 <textobject>
486 <phrase>Entering widget's data source name</phrase>
487 </textobject>
488 </mediaobject>
489 </screenshot>-->
490 </step>
491 <step>
492 <para>Click on next text field widget and enter <varname>surname</varname> as the data source.</para>
493 </step>
494 <step>
495 <para>
496 Enter data sources for <varname>street</varname>, <varname>house_number</varname>
497 and <varname>city</varname> text <glossterm linkend="gloss-form-field">fields</glossterm>
498 in a similar way.
499 </para>
500 </step>
501 </procedure>
502 <para>
503 You can now save the form's design (this is not mandatory to test the
504 form in action). To save, click the
505 <!--<img src="img/filesave.png" class="icon">-->
506 <guilabel>Save object changes</guilabel> toolbar button or use the
507 <menuchoice><shortcut><keycombo action="simul"><keycap>Ctrl</keycap><keycap>S</keycap></keycombo></shortcut>
508 <guimenu>File</guimenu><guimenuitem>
509 <!--<img src="img/filesave.png" class="icon">-->Save</guimenuitem></menuchoice>
510 menu command. Upon saving you will be asked for entering the form's name. Enter
511 <literal>Persons</literal> as caption and click the <guibutton>OK</guibutton>
512 button. The form's name will be filled automatically.
513 </para>
514 <para>
515 This is the right moment for testing your form. Click the <!--<img src="img/state_data.png" class="icon">-->
516 <guibutton>Switch to data view</guibutton> toolbar button. Unless you made a
517 mistake while entering data sources, you should see
518 <glossterm linkend="gloss-form-field">form's fields</glossterm> filled
519 with data from the <literal>persons</literal> table.
520 </para>
521 <!--<screenshot>
522 <screeninfo>The <literal>Persons</literal> form in data view after inserting text fields and assigning data sources</screeninfo>
523 <mediaobject>
524 <imageobject>
525 <imagedata fileref="img/05_04_06_form_with_text_fields.png" format="PNG"/>
526 </imageobject>
527 <textobject>
528 <phrase>The <literal>Persons</literal> form in data view after inserting text fields and assigning data sources</phrase>
529 </textobject>
530 </mediaobject>
531 </screenshot>-->
532 <note>
533 <itemizedlist>
534 <listitem>
535 <para>
536 If you want to remove widget's <glossterm linkend="gloss-form-data-source">data source</glossterm>
537 assignment for a form widget, you can use <!--<img src="img/clear_left.png" class="icon">-->
538 <guibutton>Clear widget's data source</guibutton> button near
539 the <guilabel>Widet's data source</guilabel> drop down list. Similarly, you can use the
540 <!--<img src="img/clear_left.png" class="icon">-->
541 <guibutton>Clear form's data source</guibutton> button near the
542 <guilabel>Form's data source</guilabel> drop down list.
543 </para>
544 </listitem>
545 <listitem>
546 <para>
547 Use the <!--<img src="img/goto.png" class="icon">-->
548 <guibutton>Go to selected form's data source</guibutton> button to select
549 appropriate table or query in the <interface>Project Navigator</interface>,
550 so you can quickly open a table or query being the
551 <glossterm linkend="gloss-form-data-source">data source</glossterm>
552 of the form.
553 </para>
554 </listitem>
555 </itemizedlist>
556 <!-- TODO: mention about creating Auto Fields by using drag & drop -->
557 </note>
558 </sect2>
560 <sect2 id="inserting-text-labels">
561 <title>Inserting text labels</title>
562 <para>
563 To make it easier for the form's user to identify the meaning of every field
564 widget, these should have added text labels with appropriate titles. To
565 create text labels the <!--<img src="img/label.png" class="icon">-->
566 <literal>Label</literal> widget is used.
567 </para>
568 <para>
569 Insert three text label widgets onto the form, placing them on the left
570 side of the text fields (or on the right hand if your operating system
571 uses right-to-left layout). On inserting a new label, a text cursor
572 appears at the location where you can enter the desired title. Enter consecutively:
573 <literal>Name</literal>, <literal>Surname</literal> and <literal>Street</literal>. Additionally,
574 on the top of the form insert another label displaying name of the form,
575 i.e. <literal>Persons</literal>. Enlarge this label's size and and increase the font size using
576 <!--<a href="aa_00_00_menu.html#menu_format_font">-->
577 <menuchoice><guimenu>Format</guimenu><guimenuitem>Font...</guimenuitem></menuchoice>
578 <!--</a>-->
579 menu command.
580 </para>
581 <!--<screenshot>
582 <screeninfo>Ready to use form after adding text labels</screeninfo>
583 <mediaobject>
584 <imageobject>
585 <imagedata fileref="img/05_04_06_form_with_labels.png" format="PNG"/>
586 </imageobject>
587 <textobject>
588 <phrase>Ready to use form after adding text labels</phrase>
589 </textobject>
590 </mediaobject>
591 </screenshot>-->
592 </sect2>
594 <sect2 id="actions">
595 <title>Actions</title>
596 <para>
597 An <literal>Action</literal> is a single activity isolated in the application,
598 available for the user to execute. It can also be executed automatically as a
599 reaction for a given event (⪚ after opening a form).
600 </para>
602 <sect3 id="assigning-actions-to-form-buttons">
603 <title>Assigning actions to form buttons</title>
604 <para>
605 Many actions can be assigned to form button. The assigned action is executed
606 after button is clicked.
607 </para>
608 <para>To assign action:</para>
609 <procedure>
610 <step>
611 <para>Switch to form's <interface>Design view</interface> if you have not done yet.</para>
612 </step>
613 <step>
614 <para>
615 Select the existing button widget by clicking on it or put a new button
616 widget onto the form. If you inserted a new button, enter its title and
617 press <keycombo action="press"><keycap>Enter</keycap></keycombo> key.
618 </para>
619 </step>
620 <step>
621 <para>
622 Click the button widget with the <mousebutton>right</mousebutton> mouse
623 button to display the context menu.
624 </para>
625 </step>
626 <step>
627 <para>
628 From the context menu select
629 <!--<img src="img/form_action.png" class="icon">-->
630 <guimenuitem>Assign action...</guimenuitem> command.
631 </para>
632 </step>
633 <step>
634 <para>
635 An <guilabel>Assigning Action to Command Button</guilabel> dialog window
636 will appear presenting a list of available actions. One of the actions
637 is selected if the widget already has action assigned. Otherwise the
638 <guilabel>Action type</guilabel> drop down list has the <guilabel>No type</guilabel>
639 item selected.
640 </para>
641 </step>
642 <step>
643 <para>
644 From the <guilabel>Action type</guilabel> drop down list select
645 <guilabel>Application</guilabel> item. Available application-wide actions
646 will be listed.
647 </para>
648 </step>
649 <step>
650 <para>Select one of the actions on the list (⪚ <guilabel>Delete Row</guilabel>).</para>
651 </step>
652 <step>
653 <para>
654 Click the <guibutton>OK</guibutton> button or press
655 the <keycombo action="press"><keycap>Enter</keycap></keycombo> key to
656 accept your selection.
657 </para>
658 </step>
659 </procedure>
660 <!--<screenshot>
661 <screeninfo>Assigning <guilabel>Delete Row</guilabel> action to a form's button</screeninfo>
662 <mediaobject>
663 <imageobject>
664 <imagedata fileref="img/05_04_07_assigning_action_to_button.png" format="PNG"/>
665 </imageobject>
666 <textobject>
667 <phrase>Assigning <guilabel>Delete Row</guilabel> action to a form's button</phrase>
668 </textobject>
669 </mediaobject>
670 </screenshot>-->
671 <para>
672 After switching to the form's <emphasis>data view</emphasis> you can try
673 whether the action works. For example, if you assigned <guilabel>Delete Row</guilabel>
674 action, clicking the button, the current database row will be deleted, similarly
675 to executing <menuchoice><shortcut><keycombo action="simul"><keycap>Ctrl</keycap><keycap>Delete</keycap></keycombo></shortcut><guimenu>Edit</guimenu><guimenuitem>Delete Row</guimenuitem></menuchoice>
676 menu command (depending on your settings you may be asked to confirm the removal).
677 </para>
679 <note>
680 <itemizedlist>
681 <listitem>
682 <para>
683 To remove an action assignment, select <guilabel>No type</guilabel> item from
684 the <guilabel>Action type</guilabel> drop down list of the
685 <guilabel>Assigning Action to Command Button</guilabel> dialog window.
686 </para>
687 </listitem>
688 <listitem>
689 <para>
690 Actions only work in the form's <emphasis>data view</emphasis>. Not every
691 action's assignment is reasonable. For example, the
692 <guimenuitem>Font...</guimenuitem> action is available in data view, but
693 only if you have a widget selected in the <interface>Design view</interface>. If you
694 make changes to the font settings the changes are applied to the text
695 of that selected widget.
696 </para>
697 </listitem>
698 </itemizedlist>
699 </note>
700 </sect3>
701 </sect2>
703 <sect2 id="widget-layouts">
704 <title>Widget layouts</title>
705 <para>
706 In most cases form widgets should be conveniently arranged and aligned.
707 Positioning, aligning and resizing widgets by hand is not easy and these
708 parameters are not adjusted when the user resizes the form. In fact the
709 situation is even worse because you cannot assume a given form requires
710 a given space because users have different font sizes and display resolutions.
711 </para>
712 <!--
713 <para>
714 The following example presents a form where text fields and labels were
715 placed by hand. Some of them cannot fit in the form's window.
716 </para>
717 <screenshot>
718 <screeninfo>An example form with widgets that cannot not fit in the window</screeninfo>
719 <mediaobject>
720 <imageobject>
721 <imagedata fileref="img/05_04_08_form_no_fit.png" format="PNG"/>
722 </imageobject>
723 <textobject>
724 <phrase>An example form with widgets that cannot not fit in the window</phrase>
725 </textobject>
726 </mediaobject>
727 </screenshot>-->
728 <para>
729 Using special tool called widget layouts can help to automatically lay
730 out the form widgets. Widget layout is an action of grouping two or more
731 widgets so these are well positioned and have appropriate sizes.
732 </para>
733 <para>
734 Using layout in a form improves alignment. Moreover, its space is
735 better used. Text fields are closer to each other, spacing is constant.
736 </para>
737 <!--<screenshot>
738 <screeninfo>Example form with layout used</screeninfo>
739 <mediaobject>
740 <imageobject>
741 <imagedata fileref="img/05_04_08_form_well_fit.png" format="PNG"/>
742 </imageobject>
743 <textobject>
744 <phrase>Example form with layout used</phrase>
745 </textobject>
746 </mediaobject>
747 </screenshot>-->
748 <para>There are two methods to create widget layout.</para>
749 <itemizedlist>
750 <listitem>
751 <para>
752 Select two or more widgets that should be placed in a common layout,
753 and select one of the layout types from the context menu item
754 <!--<a href="aa_00_00_menu.html#menu_format_layout">-->
755 <guilabel>Layout Widgets</guilabel>
756 <!--</a>-->.
757 </para>
758 </listitem>
759 <listitem>
760 <para>
761 Click a container widget (or a form surface itself), where widgets are
762 inserted and select one of the layout types from the context menu item
763 <!--<a href="aa_00_00_menu.html#menu_format_layout">-->Layout Widgets
764 <!--</a>-->.
765 All widgets existing within the container or within the
766 form, being on the same level will be put into a single common layout.
767 </para>
768 </listitem>
769 </itemizedlist>
770 <para>
771 In each of these cases you can also use
772 <menuchoice><guimenu>Format</guimenu><guimenuitem>Layout Widgets</guimenuitem></menuchoice>
773 menu.
774 </para>
775 <!--<screenshot>
776 <screeninfo>Selecting widgets that will be put into a layout</screeninfo>
777 <mediaobject>
778 <imageobject>
779 <imagedata fileref="img/05_04_08_form_layout_selecting.png" format="PNG"/>
780 </imageobject>
781 <textobject>
782 <phrase>Selecting widgets that will be put into a layout</phrase>
783 </textobject>
784 </mediaobject>
785 </screenshot>
786 <screenshot>
787 <screeninfo>Four widgets are selected</screeninfo>
788 <mediaobject>
789 <imageobject>
790 <imagedata fileref="img/05_04_08_form_layout_selected.png" format="PNG"/>
791 </imageobject>
792 <textobject>
793 <phrase>Four widgets are selected</phrase>
794 </textobject>
795 </mediaobject>
796 </screenshot>
797 <screenshot>
798 <screeninfo>Using the context menu for putting the widgets into a grid layout</screeninfo>
799 <mediaobject>
800 <imageobject>
801 <imagedata fileref="img/05_04_08_form_layout_popup.png" format="PNG"/>
802 </imageobject>
803 <textobject>
804 <phrase>Using the context menu for putting the widgets into a grid layout</phrase>
805 </textobject>
806 </mediaobject>
807 </screenshot>-->
808 <para>
809 Widget layout is presented in the design view using a blue, green or
810 red box drawn with a broken line. This line is displayed only in the
811 form's design view.
812 </para>
813 <!--<screenshot>
814 <screeninfo>Widgets within a grid layout</screeninfo>
815 <mediaobject>
816 <imageobject>
817 <imagedata fileref="img/05_04_08_form_layout_grid.png" format="PNG"/>
818 </imageobject>
819 <textobject>
820 <phrase>Widgets within a grid layout</phrase>
821 </textobject>
822 </mediaobject>
823 </screenshot>-->
824 <para>Besides the grid type, there are other widget layout types.</para>
825 <variablelist>
826 <varlistentry>
827 <term>vertical</term>
828 <listitem>
829 <para>Vertical widget layout</para>
830 <!--<screenshot>
831 <screeninfo>Vertical widget layout</screeninfo>
832 <mediaobject>
833 <imageobject>
834 <imagedata fileref="img/05_04_08_form_layout_vertical.png" format="PNG"/>
835 </imageobject>
836 <textobject>
837 <phrase>Vertical widget layout</phrase>
838 </textobject>
839 </mediaobject>
840 </screenshot>-->
841 </listitem>
842 </varlistentry>
843 <varlistentry>
844 <term>horizontal</term>
845 <listitem>
846 <para>Horizontal widget layout</para>
847 <!--<screenshot>
848 <screeninfo>Horizontal widget layout</screeninfo>
849 <mediaobject>
850 <imageobject>
851 <imagedata fileref="img/05_04_08_form_layout_horizontal.png" format="PNG"/>
852 </imageobject>
853 <textobject>
854 <phrase>Horizontal widget layout</phrase>
855 </textobject>
856 </mediaobject>
857 </screenshot>-->
858 </listitem>
859 </varlistentry>
860 <!-- TODO podzia poziomy / pionowy
861 <br><img src="img/05_04_08_form_layout_vertical_splitter.png">
862 <br><br>
863 <br><img src="img/05_04_08_form_layout_horizontal_splitter.png">
864 <br><br>
865 </li> -->
866 </variablelist>
868 <sect3 id="springs-in-widget-layouts">
869 <title>Springs in widget layouts</title>
870 <para>
871 A <emphasis>spring</emphasis> in widget layouts is a special, invisible element allowing
872 to adjust widget's position and size within layouts. Such a spring
873 stretches or squeezes a widget on the right, top, bottom or left hand,
874 so it can have desired size and position.
875 </para>
876 <para>To use a spring:</para>
877 <procedure>
878 <step>
879 <para>
880 Select <!--<img src="img/spring.png" class="icon">-->spring icon on the
881 <guilabel>Widgets</guilabel> toolbar.
882 </para>
883 </step>
884 <step>
885 <para>Click on a selected point of the form to insert the spring.</para>
886 </step>
887 </procedure>
888 <!--<para>
889 For the following example, the spring has been inserted on the left
890 hand of the text label "Persons". The label is thus displayed on the
891 right hand of the form. To make the spring work, it has been put into
892 a common horizontal layout with the label.
893 </para>
894 <screenshot>
895 <screeninfo>Horizontal layout containing a spring and a text label</screeninfo>
896 <mediaobject>
897 <imageobject>
898 <imagedata fileref="img/05_04_08_form_spring.png" format="PNG"/>
899 </imageobject>
900 <textobject>
901 <phrase>Horizontal layout containing a spring and a text label</phrase>
902 </textobject>
903 </mediaobject>
904 </screenshot>-->
905 <para>
906 To make springs work you need to create a global widget layout, i.e. a
907 layout for the form itself. Then, springs can use edges of the form as
908 a boundary for expanding.
909 </para>
910 </sect3>
911 <!--
913 TODO: The entire text in this section is built around a screenshot
914 example, so it's commented out for now.
916 <sect3 id="advanced-widget-layouts">
917 <title>Advanced widget layouts</title>
918 <para>
919 Widget layouts can be combined (or nested). On the following example
920 you can identify two nested layouts:
921 </para>
922 <orderedlist>
923 <listitem>
924 <para>
925 Horizontal layout with a spring, aligning the <literal>Persons</literal>
926 text label to the right.
927 </para>
928 </listitem>
929 <listitem>
930 <para>Grid layout grouping widgets on the whole form.</para>
931 </listitem>
932 </orderedlist>
933 <screenshot>
934 <screeninfo>Two widget layouts combined: horizontal layout inside of a grid layout</screeninfo>
935 <mediaobject>
936 <imageobject>
937 <imagedata fileref="img/05_04_08_form_advanced_layout.png" format="PNG"/>
938 </imageobject>
939 <textobject>
940 <phrase>Two widget layouts combined: horizontal layout inside of a grid layout</phrase>
941 </textobject>
942 </mediaobject>
943 </screenshot>
944 <para>
945 The horizontal layout is treated in the example as a single widget by
946 the grid layout - it takes exactly one <quote>cell</quote> of the grid.
947 After opening a form designed this way in the data view, you can notice
948 (by resizing the form) that:
949 </para>
950 <itemizedlist>
951 <listitem>
952 <para>
953 <literal>Persons</literal> text label thanks to the spring used is constantly
954 aligned to the to the right side of the form.
955 </para>
956 </listitem>
957 <listitem>
958 <para>
959 Text fields take all of the available width thanks to putting them
960 into the grid layout.
961 </para>
962 </listitem>
963 <listitem>
964 <para>
965 All the form's widgets are pushed to the top thanks to the spring
966 used at the bottom of the form.
967 </para>
968 </listitem>
969 </itemizedlist>
970 <screenshot>
971 <screeninfo>The form using the two layouts displayed in data view</screeninfo>
972 <mediaobject>
973 <imageobject>
974 <imagedata fileref="img/05_04_08_form_advanced_layout_view.png" format="PNG"/>
975 </imageobject>
976 <textobject>
977 <phrase>The form using the two layouts displayed in data view</phrase>
978 </textobject>
979 </mediaobject>
980 </screenshot>
981 </sect3>-->
983 <sect3 id="removing-widget-layouts">
984 <title>Removing widget layouts</title>
985 <para>
986 To remove widget layout without removing widgets, perform one of
987 these actions:
988 </para>
989 <itemizedlist>
990 <listitem>
991 <para>
992 Click with the <mousebutton>right</mousebutton> mouse button on
993 the layout's border and select <guimenuitem>Break Layout</guimenuitem>
994 command from the context menu.
995 </para>
996 </listitem>
997 <listitem>
998 <para>
999 Click with the <mousebutton>left</mousebutton> mouse button on
1000 the layout's border and select
1001 <menuchoice><guimenu>Format</guimenu><guimenuitem>Break Layout</guimenuitem></menuchoice>
1002 menu command.
1003 </para>
1004 </listitem>
1005 </itemizedlist>
1006 <note>
1007 <para>
1008 Removing widget layout using the <guimenuitem>Break Layout</guimenuitem>
1009 command will not remove widgets contained in the layout. If you want to
1010 remove the widgets as well, just select the layout by clicking on its
1011 border and press <keycap>Delete</keycap> key or use
1012 <menuchoice><guimenu>Edit</guimenu><guimenuitem>
1013 <!--<img src="img/editdelete.png" class="icon">-->Delete</guimenuitem></menuchoice>
1014 menu command or context menu command.
1015 </para>
1016 </note>
1017 </sect3>
1019 <sect3 id="size-policies-for-widgets-within-a-layout">
1020 <title>Size policies for widgets within a layout</title>
1021 <para>
1022 Instead of setting a fixed size for your widgets, in &kexi; you can
1023 choose between various widget's size policies. A <emphasis>size policy</emphasis>
1024 is a flexible strategy for controlling how a widget is stretched (or shrunk)
1025 depending on other neighbouring widgets and space available within the form.
1026 </para>
1027 <para>
1028 After putting widgets into a <emphasis>layout</emphasis>, typically each widget
1029 gets a proportional (<guilabel>Preferred</guilabel>) size policy. These widgets
1030 will be automatically resized with preferred settings, depending on their
1031 type and size of the entire layout itself. For example, three buttons put
1032 into the horizontal layout will be resized to fit their visible text.
1033 </para>
1034 <para>For each widget inserted into the form, there are settings for size policy
1035 available in the <interface>Property Editor</interface>. The settings are presented
1036 as a group of properties called <guilabel>Size Policy</guilabel>.
1037 </para>
1038 <!--<screenshot>
1039 <screeninfo>A group of properties for defining a widget's size policy</screeninfo>
1040 <mediaobject>
1041 <imageobject>
1042 <imagedata fileref="img/05_04_09_size_policy_properties.png" format="PNG"/>
1043 </imageobject>
1044 <textobject>
1045 <phrase>A group of properties for defining a widget's size policy</phrase>
1046 </textobject>
1047 </mediaobject>
1048 </screenshot>-->
1049 <para>This group of properties contains:</para>
1050 <variablelist>
1051 <varlistentry>
1052 <term><guilabel>Horizontal Size Policy</guilabel></term>
1053 <listitem>
1054 <para>defining horizontal size of the widget,</para>
1055 </listitem>
1056 </varlistentry>
1057 <varlistentry>
1058 <term><guilabel>Vertical Size Policy</guilabel></term>
1059 <listitem>
1060 <para>defining vertical size of the widget,</para>
1061 </listitem>
1062 </varlistentry>
1063 <varlistentry>
1064 <term><guilabel>Horizontal Stretch</guilabel></term>
1065 <listitem>
1066 <para>
1067 defining strength of activity of the
1068 <guilabel>Horizontal Size Policy</guilabel>,
1069 </para>
1070 </listitem>
1071 </varlistentry>
1072 <varlistentry>
1073 <term><guilabel>Vertical Stretch</guilabel></term>
1074 <listitem>
1075 <para>
1076 defining strength of activity of the
1077 <guilabel>Vertical Size Policy</guilabel>
1078 </para>
1079 </listitem>
1080 </varlistentry>
1081 </variablelist>
1083 <sect4>
1084 <title>Values of size policies</title>
1085 <para>
1086 The following values are available in the drop down list for
1087 <guilabel>Horizontal Size Policy</guilabel> and
1088 <guilabel>Vertical Size Policy</guilabel> properties visible
1089 in the <interface>Property Editor</interface>:
1090 </para>
1091 <variablelist>
1092 <varlistentry>
1093 <term><guilabel>Fixed</guilabel></term>
1094 <listitem>
1095 <para>
1096 this value means that the widget cannot be automatically resized; it
1097 should maintain the constant size defined at design time (width or height),
1098 </para>
1099 </listitem>
1100 </varlistentry>
1101 <varlistentry>
1102 <term><guilabel>Minimum</guilabel></term>
1103 <listitem>
1104 <para>
1105 this value means that the original size of the widget is set as minimal
1106 allowed, it is sufficient and there is no need for expanding the widget,
1107 but the widget will be expanded if needed. This type of policy can be used
1108 to force the widget to be expanded to the whole width or height, especially
1109 if you set a stretch value greater than 0.
1110 </para>
1111 <!--<screenshot>
1112 <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>
1113 <mediaobject>
1114 <imageobject>
1115 <imagedata fileref="img/05_04_09_size_policy_minimum.png" format="PNG"/>
1116 </imageobject>
1117 <textobject>
1118 <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>
1119 </textobject>
1120 </mediaobject>
1121 </screenshot>-->
1122 </listitem>
1123 </varlistentry>
1124 <varlistentry>
1125 <term><guilabel>Maximum</guilabel></term>
1126 <listitem>
1127 <para>
1128 this value means that the original size of the widget is set as maximum
1129 allowed and can be decreased without breaking the widget's usability
1130 and readability if other widgets need more space,
1131 </para>
1132 </listitem>
1133 </varlistentry>
1134 <varlistentry>
1135 <term><guilabel>Preferred</guilabel></term>
1136 <listitem>
1137 <para>
1138 this value means that the original size of the widget is the best and
1139 preferred; the widget can be shrunk or expanded however and it
1140 will stay readable,
1141 </para>
1142 <!--<screenshot>
1143 <screeninfo>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</screeninfo>
1144 <mediaobject>
1145 <imageobject>
1146 <imagedata fileref="img/05_04_09_size_policy_preferred.png" format="PNG"/>
1147 </imageobject>
1148 <textobject>
1149 <phrase>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</phrase>
1150 </textobject>
1151 </mediaobject>
1152 </screenshot>-->
1153 </listitem>
1154 </varlistentry>
1155 <varlistentry>
1156 <term><guilabel>Expanding</guilabel></term>
1157 <listitem>
1158 <para>
1159 this value means that the original size of the widget is reasonable but
1160 the widget can be also shrunk; it can be expanded as well to take
1161 as much space as possible,
1162 </para>
1163 </listitem>
1164 </varlistentry>
1165 <varlistentry>
1166 <term><guilabel>Minimum Expanding</guilabel></term>
1167 <listitem>
1168 <para>
1169 this value means that the original size of the widget is allowed; it
1170 can be expanded to take as much space as possible,
1171 </para>
1172 </listitem>
1173 </varlistentry>
1174 <varlistentry>
1175 <term><guilabel>Ignored</guilabel></term>
1176 <listitem>
1177 <para>
1178 this value means that the original size of the widget is ignored; the
1179 widget can be expanded to take as much space as possible but other
1180 widgets usually will not allow for that
1181 </para>
1182 </listitem>
1183 </varlistentry>
1184 </variablelist>
1185 <para>
1186 Different widget types have various default size policies; for example,
1187 button widgets have default size policy set to <guilabel>Minimum</guilabel> (in both directions),
1188 while text field widgets have vertical size policy set to <guilabel>Fixed</guilabel>.
1189 </para>
1190 <para>
1191 The most frequently used size policies are <guilabel>Preferred</guilabel>,
1192 <guilabel>Minimum</guilabel> and <guilabel>Maximum</guilabel>.
1193 </para>
1194 </sect4>
1196 <sect4>
1197 <title>Vertical and horizontal stretch</title>
1198 <para>
1199 The <guilabel>Vertical Stretch</guilabel> and <guilabel>Horizontal Stretch</guilabel>
1200 properties accept integer values greater than or equal to 0. These properties allow to fine-tune the
1201 behavior of size policies. The default value for the properties is 0.
1202 A higher value of the stretch means that the widget will be expanded
1203 more than widgets for which a lower stretch value is set. <!--For example,
1204 the following image presents two buttons where the first button has
1205 Vertical Stretch set to 0 and the second button has Vertical Stretch
1206 set to 1.-->
1207 </para>
1208 <!--<screenshot>
1209 <screeninfo>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</screeninfo>
1210 <mediaobject>
1211 <imageobject>
1212 <imagedata fileref="img/05_04_09_size_policy_vertical_stretch.png" format="PNG"/>
1213 </imageobject>
1214 <textobject>
1215 <phrase>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</phrase>
1216 </textobject>
1217 </mediaobject>
1218 </screenshot>-->
1219 </sect4>
1220 </sect3>
1221 </sect2>
1223 <sect2 id="setting-widgets-size-and-position-by-hand">
1224 <title>Setting widgets size and position by hand</title>
1225 <para>In case when your form has no main layout set for auto-positioning and
1226 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
1227 designer simplifies this task by offering the following groups of commands:
1228 </para>
1229 <itemizedlist>
1230 <listitem>
1231 <para>
1232 Adjusting sizes of selected widgets. The commands are available in the
1233 <menuchoice><guimenu>Format</guimenu><guisubmenu>Adjust Widgets Size</guisubmenu></menuchoice>
1234 submenu of the menubar and in the
1235 <menuchoice><guisubmenu>Adjust Widgets Size</guisubmenu></menuchoice>
1236 submenu of the context menu. The toolbar's drop down
1237 button <!--<img src="img/aogrid.png" class="icon">--><guibutton>Adjust Widgets Size</guibutton>
1238 is also available.
1239 </para>
1240 <variablelist>
1241 <varlistentry>
1242 <term><!--<img src="img/aofit.png" class="icon">--><guilabel>To Fit</guilabel></term>
1243 <listitem>
1244 <para>
1245 The size of the selected widgets will be altered so each widget will be
1246 resized to its preferred size and its contents; for example, a text
1247 label's size will be changed to fit its text. The position of the widgets
1248 will not be changed.
1249 </para>
1250 </listitem>
1251 </varlistentry>
1252 <varlistentry>
1253 <term><!--<img src="img/aogrid.png" class="icon">--><guilabel>To Grid</guilabel></term>
1254 <listitem>
1255 <para>
1256 The size of the selected widgets will be altered so each widget's corner
1257 will be placed on the form's (or other container's) grid point.
1258 The widget's position can be slightly altered.
1259 </para>
1260 </listitem>
1261 </varlistentry>
1262 <varlistentry>
1263 <term><!--<img src="img/aoshortest.png" class="icon">--><guilabel>To Shortest</guilabel></term>
1264 <listitem>
1265 <para>
1266 The height of the selected widgets will be altered so that each of them
1267 will have the same height as the shortest one. The position of the widgets
1268 will not be changed.
1269 </para>
1270 </listitem>
1271 </varlistentry>
1272 <varlistentry>
1273 <term><!--<img src="img/aotallest.png" class="icon">--><guilabel>To Tallest</guilabel></term>
1274 <listitem>
1275 <para>
1276 The height of the selected widgets will be altered so that each of them
1277 will have the same height as the tallest one. The position of the widgets
1278 will not be changed.
1279 </para>
1280 </listitem>
1281 </varlistentry>
1282 <varlistentry>
1283 <term><!--<img src="img/aonarrowest.png" class="icon">--><guilabel>To Narrowest</guilabel></term>
1284 <listitem>
1285 <para>
1286 The width of the selected widgets will be altered so that each of them
1287 will have the same height as the narrowest one. The position of the
1288 widgets will not be changed.
1289 </para>
1290 </listitem>
1291 </varlistentry>
1292 <varlistentry>
1293 <term><!--<img src="img/aowidest.png" class="icon">--><guilabel>To Widest</guilabel></term>
1294 <listitem>
1295 <para>
1296 The width of the selected widgets will be altered so that each of them
1297 will have the same height as the widest one. The position of the widgets
1298 will not be changed.
1299 </para>
1300 </listitem>
1301 </varlistentry>
1302 </variablelist>
1303 </listitem>
1304 <listitem>
1305 <para>
1306 Aligning positions of the selected widgets. The commands are available
1307 in the
1308 <menuchoice><guimenu>Format</guimenu><guisubmenu>Align Widgets Position</guisubmenu></menuchoice>
1309 submenu of the menubar and in the
1310 <menuchoice><guisubmenu>Align Widgets Position</guisubmenu></menuchoice>
1311 submenu of the context menu. The toolbar's drop
1312 down button <!--<img src="img/aoleft.png" class="icon">-->
1313 <guibutton>Align Widgets Position</guibutton> is also available.
1314 </para>
1315 <variablelist>
1316 <varlistentry>
1317 <term><!--<img src="img/aoleft.png" class="icon">--><guilabel>To Left</guilabel></term>
1318 <listitem>
1319 <para>
1320 All the selected widgets' left positions will be moved to the
1321 position of the leftmost widget's left edge.
1322 </para>
1323 </listitem>
1324 </varlistentry>
1325 <varlistentry>
1326 <term><!--<img src="img/aoright.png" class="icon">--><guilabel>To Right</guilabel></term>
1327 <listitem>
1328 <para>
1329 All the selected widgets' right positions will be moved to the
1330 position of the rightmost widget's right edge.
1331 </para>
1332 </listitem>
1333 </varlistentry>
1334 <varlistentry>
1335 <term><!--<img src="img/aotop.png" class="icon">--><guilabel>To Top</guilabel></term>
1336 <listitem>
1337 <para>
1338 All the selected widgets' top positions will be moved to the
1339 position of the uppermost widget's upper edge.
1340 </para>
1341 </listitem>
1342 </varlistentry>
1343 <varlistentry>
1344 <term><!--<img src="img/aobottom.png" class="icon">--><guilabel>To Bottom</guilabel></term>
1345 <listitem>
1346 <para>
1347 All the selected widgets' bottom positions will be moved to the
1348 position of the bottommost widget's bottom edge.
1349 </para>
1350 </listitem>
1351 </varlistentry>
1352 <varlistentry>
1353 <term><!--<img src="img/aopos2grid.png" class="icon">--><guilabel>To Grid</guilabel></term>
1354 <listitem>
1355 <para>
1356 All the selected widgets' top-left corners will be moved so that
1357 they are positioned in the nearest grid point.
1358 </para>
1359 </listitem>
1360 </varlistentry>
1361 </variablelist>
1362 <para>None of the above commands resizes the widgets.</para>
1363 </listitem>
1364 </itemizedlist>
1365 <para>
1366 There are also additional commands available:
1367 <!--<img src="img/raise.png" class="icon">--><guimenuitem>Bring Widget to Front</guimenuitem>
1368 (i.e. above all other widgets) and
1369 <!--<img src="img/lower.png" class="icon">--><guimenuitem>Send Widget to Back</guimenuitem> (i.e. below all
1370 other widgets). These two commands are rarely used, as it is not
1371 common to place one widget on top of an other (except when a
1372 container widget contains other widget inside). Also note that clicking
1373 a widget with a mouse button is enough to bring the widget to front.
1374 </para>
1375 </sect2>
1377 <sect2 id="setting-the-tab-order">
1378 <title>Setting the tab order</title>
1379 <para>
1380 A widget's focus determines that widget's activity available using keyboard.
1381 Focus is related to widgets displayed in the form's data view. Exactly one
1382 form widget can have focus at the same time. The most frequent use of focus
1383 is text entry (when a given text field is active, i.e. it is focused).
1384 An other example is a button widget - when focused, it is possible to
1385 <quote>press</quote> it using the <keycombo action="press"><keycap>Enter</keycap></keycombo>
1386 or <keycombo action="press"><keycap>Space</keycap></keycombo> key instead of a mouse button.
1387 </para>
1388 <para>
1389 There are a few methods of making the widgets active (moving the focus
1390 to the widget): clicking with a mouse button, rotating the mouse wheel
1391 over the widget, or using the <keycombo action="press"><keycap>Tab</keycap></keycombo>
1392 key. The latter method is often used because of its speed and convenience
1393 for users. Availability of the focusing methods is controlled by
1394 <guilabel>Focus Policy</guilabel> property of a given widget.
1395 </para>
1396 <para>
1397 There is a relationship between focusing (activating) widgets using <keycombo action="press"><keycap>Tab</keycap></keycombo>
1398 key and tab order setting of a form. After pressing the <keycombo action="press"><keycap>Tab</keycap></keycombo> key, the
1399 next widget should be focused, so the form should know about the tab order.
1400 </para>
1401 <para>To alter tab order for a form's widget:</para>
1402 <procedure>
1403 <step>
1404 <para>Switch to design view of the form.</para>
1405 </step>
1406 <step>
1407 <para>
1408 Execute <menuchoice><guimenu>Edit</guimenu><guimenuitem>Edit Tab Order...</guimenuitem></menuchoice>
1409 menu command. The <guilabel>Edit Tab Order</guilabel> dialog will appear with settings for this form.
1410 </para>
1411 <!--<screenshot>
1412 <screeninfo>A window for editing tab order for a form</screeninfo>
1413 <mediaobject>
1414 <imageobject>
1415 <imagedata fileref="img/05_04_11_tab_stop_dialog.png" format="PNG"/>
1416 </imageobject>
1417 <textobject>
1418 <phrase>A window for editing tab order for a form</phrase>
1419 </textobject>
1420 </mediaobject>
1421 </screenshot>-->
1422 <para>
1423 The window contains a list with two columns: the first column displays
1424 widget names, the second - types of the widgets. To make it easier to
1425 recognize meaning of the names and types for the user, icons related
1426 to the types are also displayed. The list contains only widgets having
1427 focus policy allowing to use the <keycap>Tab</keycap> key. The window
1428 allows you to change the tab order or set the automatic tab order.
1429 </para>
1430 </step>
1431 <step>
1432 <para>To change tab order, either:</para>
1433 <itemizedlist>
1434 <listitem>
1435 <para>
1436 Click a selected widget name in the widgets list and drag it
1437 to a desired position (up or down) using the mouse.
1438 </para>
1439 </listitem>
1440 <listitem>
1441 <para>
1442 Click a selected widget name on the widgets list and use
1443 <guibutton>Move Up</guibutton> or <guibutton>Move Down</guibutton>
1444 buttons, to move the widgets to a desired position.
1445 </para>
1446 </listitem>
1447 <listitem>
1448 <para>
1449 Click the <guilabel>Handle tab order automatically</guilabel> check box to set the
1450 automatic tab order for the form. If this option has been switched
1451 on, any changes made to the list of widgets by hand are not taken
1452 into account - &kexi; will be handling the tab orders on its own.
1453 The automatic ordering means that the top-left widget will be focused
1454 first (or the top-right if your operating system uses right-to-left
1455 layout), and the order comes from the left to right (from the right
1456 to left, respectively) and from the top to bottom.
1457 </para>
1458 <!--<screenshot>
1459 <screeninfo>Automatic tab order for a form</screeninfo>
1460 <mediaobject>
1461 <imageobject>
1462 <imagedata fileref="img/05_04_11_auto_tab_stop.png" format="PNG"/>
1463 </imageobject>
1464 <textobject>
1465 <phrase>Automatic tab order for a form</phrase>
1466 </textobject>
1467 </mediaobject>
1468 </screenshot>-->
1469 </listitem>
1470 </itemizedlist>
1471 </step>
1472 <step>
1473 <para>
1474 Click the <guibutton>OK</guibutton> button to accept the changes or <guibutton>Cancel</guibutton> button to dismiss
1475 the changes.
1476 </para>
1477 </step>
1478 </procedure>
1479 </sect2>
1480 </sect1>