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