2
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd">
6
<sect1 id="designing-forms">
8
>Formulieren ontwerpen</title>
10
<sect2 id="most-important-terms">
12
>Belangrijkste termen</title>
14
<glossentry id="gloss-form">
16
>Formulier</glossterm>
19
>Een venster waarin u op een gemakkelijke manier gegevens kunt invoeren en weergeven. </para>
22
<glossentry id="gloss-form-data-source">
24
>Gegevensbron van het formulier</glossterm>
27
>Databasetabel of query die de gegevens levert die in het formulier getoond worden. De gegevensbron is nodig omdat formulieren slechts <emphasis
28
>hulpmiddelen</emphasis
29
> zijn om de gegevens te tonen of in te vullen, terwijl tabellen en query's de bron van de gegevens zijn. Aan nieuwe, lege formulieren is nog geen gegevensbron toegewezen, daarom tonen ze de gegevens uit de database pas als u er een gegevensbron aan toewijst. </para>
32
<glossentry id="gloss-form-field">
34
>Formulierveld</glossterm>
37
>Het equivalent van een kolom in een tabel of query. Velden voor tekst en getallen worden het vaakst gebruikt. Wanneer u een nieuwe waarde invult of de bestaande waarde wijzigt, wordt de ermee verbonden kolom in een tabel of query ook gewijzigd (nadat de wijziging geaccepteerd is). </para>
40
<glossentry id="gloss-form-design">
42
>Formulierontwerp</glossterm>
45
>Taken die u uitvoert om het uiterlijk en de functies van het formulier te definiëren. Hiervoor moet u een <glossterm linkend="gloss-form-data-source"
46
>gegevensbron</glossterm
47
> toewijzen, verscheidene typen <glossterm linkend="gloss-form-field"
48
>formuliervelden</glossterm
49
> invoegen en deze op de gewenste locatie plaatsen. </para>
52
<glossentry id="gloss-form-widget">
54
>Formulierelement</glossterm>
57
>Een element op een formulier. De belangrijkste typen zijn:</para>
61
>Elementen die informatie tonen, ⪚ een tekstvak of een afbeeldingsvak. Elk element van dit type kan <emphasis
63
> worden met een veld in een gegevensbron (een kolom in een tabel of query). Daarom worden zulke elementen ook wel <glossterm linkend="gloss-form-field"
64
>formuliervelden</glossterm
69
>Elementen die een gespecificeerde actie kunnen uitvoeren, ⪚ een knop waarmee het huidige formulier gesloten kan worden. In andere toepassingen heet dit type element soms <firstterm
70
>besturingselement</firstterm
71
> omdat het een een vooraf gedefinieerde actie uitvoert die het gedrag van de databasetoepassing <emphasis
77
>Andere elementen die het uiterlijk van een formulier verfraaien, bijvoorbeeld een <quote
79
> als scheiding tussen twee gebieden op een formulier. </para>
84
<glossentry id="gloss-container-widget">
86
>Containerelement</glossterm>
89
>Een element <emphasis
91
> andere elementen geplaatst kunnen worden, bijvoorbeeld frame-elementen en tabbladelementen. Het oppervlak van een formulier is ook een container. Een knop kan niet als container dienst doen omdat het niet mogelijk is om er een ander element in te plaatsen. Containerelementen kunnen genest (in andere containerelementen geplaatst) worden, dit kan nuttig zijn voor ingewikkelde formulieren. </para>
95
>Example container widgets</screeninfo>
98
<imagedata fileref="img/05_04_01_widget_containers.png" format="PNG"/>
102
>Example container widgets</phrase>
112
<sect2 id="forms-versus-tables">
114
>Formulieren contra tabellen</title>
116
>In hoofdstuk 5.2 wordt beschreven hoe u gegevens direct in tabellen kunt invullen. In veel gevallen zijn formulieren geschikter om gegevens in te voeren: </para>
120
>Een tabel kan meer kolommen bevatten dan dat er op het scherm passen. Een formulier kan zulke gegevens tonen in de vorm van meerdere regels. </para>
124
>Op een formulier kunt u gegevens<glossterm linkend="gloss-form-field"
126
> in logische groepen splitsen zodat ze beter leesbaar worden. U kunt labels met extra informatie invoegen om de gebruikers tips te geven hoe ze het formulier moeten gebruiken of labels met informatie over de betekenis van de gegevens<glossterm linkend="gloss-form-field"
132
>Voor algemene commando's kunnen knoppen op formulieren gebruikt worden, zodat gebruikers de formulieren op een zelfde manier als een losstaande toepassing waar ze mee bekend zijn kunnen gebruiken </para>
136
>Tekst<glossterm linkend="gloss-form-field"
138
> met meerdere regels of afbeeldingen kunnen in de gegevensweergave net zo gemakkelijk weergegeven worden als op formulieren. </para>
145
>Werken met formulierontwerp</title>
147
>Net als bij het ontwerpen van een tabel of een query kunt u zowel de <interface
148
>Gegevensweergave</interface
150
>Ontwerpweergave</interface
151
> gebruiken. Formulieren worden in de <interface
152
>Ontwerpweergave</interface
153
> ontworpen. Vaak noemen we het venster waarin de formulieren ontworpen worden <interface
154
>Formulierontwerper</interface
159
>Om een nieuw, leeg formulier te creëren kiest u <menuchoice
163
>Formulier</guimenuitem
165
> in het menu. U kunt ook <menuchoice
167
>Nieuw Formulier</guimenuitem
169
> kiezen op de werkbalk van de <interface
170
>Projectnavigator</interface
173
>Object aanmaken: Formulier...</guimenuitem
175
> in het contextmenu kiezen. </para>
179
>Er verschijnt een nieuw frame, u kunt de grootte wijzigen door de randen te verslepen. Over het formulier is een raster gelegd, zodat de elementen gemakkelijker op de juiste plaats gezet kunnen worden. </para>
182
>A window with design of a new form</screeninfo>
185
<imagedata fileref="img/05_04_03_new_empty_form.png" format="PNG"/>
189
>A window with design of a new form</phrase>
197
>Het venster van <interface
198
>Formulierontwerp</interface
199
> heeft (net als tabelontwerp) een <interface
200
>Eigenschappen-editor</interface
201
>. Om ruimte te besparen op het scherm zijn er drie tabbladen met eigenschappen die gerelateerd zijn aan het formulier: </para>
205
>Het tabblad <guilabel
206
>Eigenschappen</guilabel
210
>Bevat een lijst met eigenschappen van het geselecteerde element.</para>
215
>Het tabblad <guilabel
216
>Gegevensbron</guilabel
220
>Bevat eigenschappen die specifiek verband houden met de <glossterm linkend="gloss-form-data-source"
221
>gegevensbron</glossterm
222
> van het geselecteerde element of van het formulier zelf. </para>
227
>Het tabblad <guilabel
232
>Bevat een hiërarchische lijst van alle elementen op het formulier. Met behulp van deze lijst kunt u gemakkelijk elementen op naam zoeken en direct het juiste element vinden. </para>
237
>De informatie over de naam en het type van het geselecteerde element vindt u op het eerste en het tweede tabblad. </para>
239
>Er zijn ook extra werkbalken beschikbaar:</para>
243
>De werkbalk <guilabel
245
> bevat knoppen om nieuwe elementen op het formulier in te voegen. </para>
249
>De werkbalk <guilabel
251
> wordt gebruikt om de formulierelementen op te maken (bijvoorbeeld de grootte van een element veranderen, elementen groeperen). Het menu <guimenu
253
> bevat ook commando's om de grootte van elementen te wijzigen. U kunt hierover meer informatie vinden in <xref linkend="formatmenu"/>. </para>
258
<sect2 id="using-the-widgets-tab">
260
>Het tabblad <guilabel
264
>Het tabblad <guilabel
267
>Eigenschappen-editor</interface
268
> toont een lijst met elementen en hun hiërarchie. Alle elementen op hetzelfde niveau in de hiërarchie staan bij elkaar. De namen van elementen in containerelementen zijn ingesprongen. </para>
270
>In the picture below, the form (a container) contains two widgets:
278
> (being a container itself) contains two check box
288
<imagedata fileref="img/05_04_04_widgets_tab.png" format="PNG"/>
300
>Van elk element wordt de naam en het type vermeld. Het type is ook te zien aan een pictogram links van de naam - hetzelfde pictogram dat in ontwerpmodus op de werkbalk staat. </para>
306
>Wanneer u op een naam in de lijst klikt, wordt het bijbehorende element op het formulier geselecteerd. Dit maakt het gemakkelijk om een element op naam te zoeken, te selecteren en daarna op het tabblad <guilabel
307
>Eigenschappen </guilabel
308
> de eigenschappen ervan te wijzigen</para>
312
>Wanneer u de &Ctrl;-toets ingedrukt houdt kunt u meerdere elementen uit de lijst selecteren. Om een aantal elementen die onder elkaar staan te selecteren moet u de &Shift;-toets ingedrukt houden.</para>
316
When widget is inserted, it is recommended to give it a reasonable name.
317
For example, <guilabel
319
> check box widget has been named specifically
320
for its meaning, using the <guilabel
321
>Properties</guilabel
325
> property has been used to do that). Such change
326
can make it easier to find a widget within the list.
330
>Naming the widget as <guilabel
335
<imagedata fileref="img/05_04_04_renaming_widgets.png" format="PNG"/>
339
>Naming the widget as <guilabel
350
>Het is nuttig, maar niet verplicht, om de elementen duidelijke namen te geven. De naam van een element ie een eigenschap die niet zichtbaar is voor de gebruiker van het formulier. Gebruikers van het formulier zien alleen de tekst die door de eigenschap <varname
352
> bepaald wordt. </para>
355
<sect2 id="inserting-widgets-text-fields">
357
>Elementen invoegen - tekstvelden</title>
359
>Als voorbeeld maken we een formulier dat informatie geeft over personen, in dit geval een formulier dat verbonden is met de tabel <literal
363
>Als het formulier gegevens uit een database moet weergeven, moet u de juiste <glossterm linkend="gloss-form-field"
365
> op het formulier plaatsen. Hiervoor kunt u de knoppen op de werkbalk <guilabel
367
> gebruiken, elke knop correspondeert met één enkel type element. </para>
371
>Klik op de knop <guibutton
373
> op de werkbalk <guilabel
379
>Klik op het formulier met de <mousebutton
381
>muisknop. Er wordt een nieuw tekstveld op de plaats waar u geklikt hebt geplaatst. Wanneer u een rechthoek tekent met de muis de voordat u de muisknop loslaat, kunt u de gewenste grootte van het element op het formulier bepalen. </para>
385
>Als u het element wilt verplaatsen, klikt u erop en sleept u het met de muis naar de gewenste plaats. U kunt de grootte van het element wijzigen door één van de handvatten te verslepen. De handvatten zijn alleen zichtbaar als het element geselecteerd is, als u een ander element selecteert of op een lege plaats op het formulier klikt, verdwijnen de handvatten. </para>
389
>Klik nogmaals op de knop <guibutton
391
> op de werkbalk en klik daarna op- het formulier om een tweede element in te voegen. Herhaal dit nog een keer tot u drie tekstvakken op het formulier hebt. Om het eenvoudig te houden beperken we ons tot drie gegevens<glossterm linkend="gloss-form-field"
400
>In de ontwerpmodus is er een contextmenu beschikbaar, dat geopend kan worden door met de <mousebutton
401
>rechter</mousebutton
402
>muisknop op een element of op het formulier te klikken. Het menu bevat de commando's <guimenuitem
403
>Knippen</guimenuitem
405
>Kopiëren</guimenuitem
407
>Plakken</guimenuitem
409
>Verwijderen</guimenuitem
410
> en andere, sommige met submenu's. Veel van de commando's zijn ook op de <guilabel
412
> te vinden, voornamelijk bij <guimenuitem
413
>Bewerken</guimenuitem
414
>. Voor deze commando's zijn ook sneltoetsen beschikbaar. Sommige commando's zijn alleen beschikbaar voor bepaalde typen elementen. </para>
418
>Met behulp van de commando's <guimenuitem
419
>Knippen</guimenuitem
421
>Kopiëren</guimenuitem
423
>Plakken</guimenuitem
424
> kunt u elementen verplaatsen of kopiëren naar andere formulieren en zelfs naar andere databaseprojecten. </para>
428
>Wanneer u de &Ctrl;-toets ingedrukt houdt terwijl u op een element klikt, kunt u meerdere elementen selecteren. </para>
432
>Als u een kopie van een element op het formulier wilt maken, kunt u in plaats van <guimenuitem
433
>Kopiëren</guimenuitem
435
>Plakken</guimenuitem
436
> de &Ctrl;-toets ingedrukt houden terwijl u het element met de muis versleept. Wanneer u de &Ctrl;-toets loslaat, wordt het element niet verplaatst, maar wordt er een kopie van het element op de cursorpositie geplaatst. </para>
442
<sect2 id="assigning-data-sources">
444
>Gegevensbronnen toewijzen</title>
446
>Aan de <glossterm linkend="gloss-form-field"
448
> die u ingevoegd hebt, is nog geen <emphasis
449
>gegevensbron</emphasis
450
> toegewezen, ze kunnen dus nog geen informatie uit de database weergeven. Om een gegevensbron toe te wijzen gebruiken we het tabblad <guilabel
451
>Gegevensbron</guilabel
452
> in het paneel <interface
453
>Eigenschappen</interface
456
>Allereerst moet de <glossterm linkend="gloss-form-data-source"
457
>gegevensbron</glossterm
458
> van het formulier gespecificeerd worden, dat wil zeggen, de locatie waar de gegevens vandaan gehaald zullen worden. In dit geval gebruiken we de tabel <literal
460
> als <glossterm linkend="gloss-form-data-source"
461
>gegevensbron</glossterm
462
> voor het nieuwe formulier. </para>
466
>Klik op een lege plaats op het formulier om te zorgen dat de eigenschappen van het formulier gewijzigd worden.</para>
470
>Schakel over naar het tabblad <guilabel
471
>Gegevensbron</guilabel
472
> en typ de tabelnaam <literal
475
>Gegevensbron formulier</guilabel
476
> of klik op de de naam in de keuzelijst. </para>
479
>Entering <glossterm linkend="gloss-form-data-source"
480
>form's data source</glossterm
484
<imagedata fileref="img/05_04_05_entering_form_data_source.png" format="PNG"/>
488
>Entering <glossterm linkend="gloss-form-data-source"
489
>form's data source</glossterm
498
>U hebt nu de <glossterm linkend="gloss-form-data-source"
499
>gegevensbron</glossterm
500
> voor het formulier toegewezen. Nu moeten de gegevensbronnen voor de verschillende elementen nog gespecificeerd worden. </para>
504
>Klik op het eerste tekstveld, bovenin het formulier.</para>
508
>Typ de veldnaam <varname
511
>gegevensbron</guilabel
512
> (op het tabblad <guilabel
513
>Gegevensbron</guilabel
514
> in het eigenschappenpaneel) of klik op deze naam in de keuzelijst. </para>
517
>Entering widget's data source name</screeninfo>
520
<imagedata fileref="img/05_04_05_entering_text_field_data_source.png" format="PNG"/>
524
>Entering widget's data source name</phrase>
532
>Klik op het volgende tekstveld en typ <varname
534
> voor de gegevensbron.</para>
538
>Op dezelfde manier wijst u gegevensbronnen toe aan de <glossterm linkend="gloss-form-field"
550
>U kunt nu het formulierontwerp opslaan (u kunt het formulier wel testen als het nog niet opgeslagen is). Klik op <guilabel
551
>Wijzigingen in objecten opslaan</guilabel
552
> op de werkbalk of gebruik het menu <menuchoice
554
><keycombo action="simul"
562
>Opslaan</guimenuitem
564
>. Bij het opslaan wordt een naam voor het formulier gevraagd. Typ <literal
566
> voor de formuliernaam en klik op <guibutton
568
>. De formuliernaam wordt automatisch bij de eigenschappen ingevuld. </para>
570
>U wilt nu waarschijnlijk het formulier testen. Klik op <guibutton
571
>Overschakelen naar gegevensweergave</guibutton
572
> op de werkbalk. Als de gegevensbronnen correct zijn toegewezen, ziet u de de gegevens uit de tabel <literal
574
> in de <glossterm linkend="gloss-form-field"
575
>formuliervelden</glossterm
581
> form in data view after inserting text fields and assigning data sources</screeninfo>
584
<imagedata fileref="img/05_04_06_form_with_text_fields.png" format="PNG"/>
590
> form in data view after inserting text fields and assigning data sources</phrase>
599
>Als u de toewijzing van een <glossterm linkend="gloss-form-data-source"
600
>gegevensbron</glossterm
601
> voor een element wilt verwijderen, klikt u op <guibutton
602
>Gegevensbron van element wissen</guibutton
603
> bij de keuzelijst <guilabel
605
>. Om de toewijzing van de gegevensbron voor het formulier te verwijderen, klikt u op <guibutton
606
>Gegevensbron wissen</guibutton
607
> bij de keuzelijst <guilabel
608
>Gegevensbron formulier</guilabel
614
>Ga naar geselecteerde gegevensbron</guibutton
615
> om de bijbehorende tabel of query in de <interface
616
>Projectnavigator</interface
617
> te selecteren. Op deze manier kunt u snel de tabel of query openen die als <glossterm linkend="gloss-form-data-source"
618
>gegevensbron</glossterm
619
> aan het formulier is toegewezen. </para>
622
<!-- TODO: mention about creating Auto Fields by using drag & drop -->
626
<sect2 id="inserting-text-labels">
628
>Tekstlabels invoegen</title>
630
>Om het voor de gebruiker van het formulier gemakkelijker te maken om de bedoeling van de velden te zien, kunt u er tekstlabels met een duidelijke omschrijving aan toevoegen. Hiervoor gebruikt u het element <literal
634
>Voeg drie tekstlabels in op het formulier, links van de drie tekstvakken (of rechts als de tekstrichting van rechts naar links loopt). Wanneer een tekstlabel ingevoegd wordt, verschijnt er een tekstcursor op de plaats waar u de gewenste naam kunt typen. Geef de tekstlabels de volgende namen: <literal
640
>. Voeg bovenaan het formulier ook een tekstlabel in met de naam van het formulier: <literal
642
>. Maak dit label groter kies <menuchoice
646
>Lettertype...</guimenuitem
648
> om de tekst groter te zetten. </para>
651
>Ready to use form after adding text labels</screeninfo>
654
<imagedata fileref="img/05_04_06_form_with_labels.png" format="PNG"/>
658
>Ready to use form after adding text labels</phrase>
671
> is één handeling in de toepassing die de gebruiker kan uitvoeren. De handeling kan ook automatisch uitgevoerd worden als reactie op een bepaalde gebeurtenis, (bijvoorbeeld na het openen van een formulier). </para>
673
<sect3 id="assigning-actions-to-form-buttons">
675
>Acties aan knoppen toewijzen</title>
677
>Er kunnen allerlei acties aan knoppen toegewezen worden. De toegewezen actie wordt uitgevoerd nadat er op de knop is geklikt. </para>
679
>Een actie toewijzen:</para>
683
>Schakel over naar de <interface
684
>Ontwerpweergave</interface
689
>Selecteer de knop door erop te klikken, voeg eventueel eerst een nieuwe knop in. Geef de knop een naam en druk op de <keycombo action="press"
695
>Klik met de &RMB; op de knop om het contextmenu te openen. </para>
700
>Actie toewijzen...</guimenuitem
701
> in het contextmenu. </para>
705
>Het dialoogvenster <guilabel
706
>Actie toewijzen aan opdrachtknop</guilabel
707
> wordt geopend, hierin staat een lijst met beschikbare acties. Als er een actie aan de knop is toegewezen, is deze geselecteerd. Anders is in de keuzelijst <guilabel
711
> geselecteerd. </para>
715
>Selecteer het item <guilabel
716
>Toepassing</guilabel
717
> in de keuzelijst <guilabel
719
>. Er verschijnt een lijst met alle beschikbare acties in de toepassing. </para>
723
>Kies één van de acties (bijvoorbeeld <guilabel
724
>Rij verwijderen</guilabel
731
> of druk op de <keycombo action="press"
733
>-toets om uw keuze te accepteren. </para>
739
>Delete Row</guilabel
740
> action to a form's button</screeninfo>
743
<imagedata fileref="img/05_04_07_assigning_action_to_button.png" format="PNG"/>
748
>Delete Row</guilabel
749
> action to a form's button</phrase>
755
>Als u wilt testen of de actie werkt, moet u overschakelen naar de <emphasis
756
>gegevensweergave</emphasis
757
>. Als u bijvoorbeeld de actie <guilabel
758
>Rij verwijderen</guilabel
759
> hebt toegewezen en u klikt op de knop, wordt de huidige rij uit de database verwijderd op dezelfde manier als wanneer u <menuchoice
761
> <keycombo action="simul"
769
>Rij verwijderen</guimenuitem
771
> in het menu kiest (afhankelijk van de instellingen kan er een vraag om bevestiging volgen). </para>
777
>Om een toegewezen actie te verwijderen, kiest u <guilabel
778
>Geen actie</guilabel
779
> in de keuzelijst <guilabel
781
> in het dialoogvenster <guilabel
782
>Actie toewijzen aan opdrachtknop</guilabel
787
>Acties werken alleen in de <emphasis
788
>gegevensweergave</emphasis
789
> van een formulier. Niet alle acties zijn zinvol, in de gegevensweergave is bijvoorbeeld <guimenuitem
790
>Lettertype...</guimenuitem
791
> niet beschikbaar (vooropgesteld dat er geen geselecteerde elementen in ontwerpweergave zijn), wijzigingen aan het lettertype hebben geen effect in de gegevensweergave. </para>
798
<sect2 id="widget-layouts">
800
>Elementen-layouts</title>
802
>In veel gevallen moeten de elementen overzichtelijk geplaatst en uitgelijnd worden. U kunt de elementen handmatig verplaatsen, uitlijnen en van grootte veranderen, maar dit is arbeidsintensief. Wanneer een gebruiker de grootte van het formulier verandert, wordt geen rekening gehouden met de plaats van de elementen. Bovendien kunt u niet bepalen hoeveel ruimte een formulier nodig heeft, omdat gebruikers met andere schermindelingen en resoluties werken. </para>
805
The following example presents a form where text fields and labels were
806
placed by hand. Some of them cannot fit in the form's window.
810
>An example form with widgets that cannot not fit in the window</screeninfo>
813
<imagedata fileref="img/05_04_08_form_no_fit.png" format="PNG"/>
817
>An example form with widgets that cannot not fit in the window</phrase>
823
>Er is een speciaal hulpmiddel waarmee u de elementen op een formulier automatisch kunt indelen: elementen-layout. Hiermee kunt u twee of meer elementen groeperen, zodat deze op de juiste plaats staan en de juiste grootte hebben. </para>
825
>Met elementen-layouts wordt het uitlijnen gemakkelijker, tekstvelden staan dichter bij elkaar en de afstand tussen de elementen is overal hetzelfde. </para>
828
>Example form with layout used</screeninfo>
831
<imagedata fileref="img/05_04_08_form_well_fit.png" format="PNG"/>
835
>Example form with layout used</phrase>
841
>Er zijn twee manieren om elementen-layout te gebruiken.</para>
845
>Selecteer twee of meer elementen die u wilt groeperen en kies een layout in het contextmenu bij <guilabel
846
>Element-leyout activeren</guilabel
851
>Klik op een containerelement (of op het formulier), en kies een layout in het contextmenu bij "Element-leyout activeren". Alle elementen in de container of op het formulier krijgen dezelfde layout. </para>
855
>In elk van deze gevallen kunt u ook het menu <menuchoice
859
>Elementen-layout activeren</guimenuitem
864
>Selecting widgets that will be put into a layout</screeninfo>
867
<imagedata fileref="img/05_04_08_form_layout_selecting.png" format="PNG"/>
871
>Selecting widgets that will be put into a layout</phrase>
877
>Four widgets are selected</screeninfo>
880
<imagedata fileref="img/05_04_08_form_layout_selected.png" format="PNG"/>
884
>Four widgets are selected</phrase>
890
>Using the context menu for putting the widgets into a grid layout</screeninfo>
893
<imagedata fileref="img/05_04_08_form_layout_popup.png" format="PNG"/>
897
>Using the context menu for putting the widgets into a grid layout</phrase>
903
>Elementen-layouts zijn in de ontwerpweergave herkenbaar aan een rechthoek met een blauwe, groene of rode stippellijn. </para>
906
>Widgets within a grid layout</screeninfo>
909
<imagedata fileref="img/05_04_08_form_layout_grid.png" format="PNG"/>
913
>Widgets within a grid layout</phrase>
919
>De elementen-layout kan op het raster afgestemd worden, maar er zijn ook andere mogelijkheden.</para>
926
>Verticale elementen-layout</para>
929
>Vertical widget layout</screeninfo>
932
<imagedata fileref="img/05_04_08_form_layout_vertical.png" format="PNG"/>
936
>Vertical widget layout</phrase>
948
>Horizontale elementen-layout</para>
951
>Horizontal widget layout</screeninfo>
954
<imagedata fileref="img/05_04_08_form_layout_horizontal.png" format="PNG"/>
958
>Horizontal widget layout</phrase>
965
<!-- TODO podzia poziomy / pionowy
967
><img src="img/05_04_08_form_layout_vertical_splitter.png">
971
><img src="img/05_04_08_form_layout_horizontal_splitter.png">
978
<sect3 id="springs-in-widget-layouts">
980
>Vering in elementen-layouts</title>
984
> in elementen-layouts is een speciaal, onzichtbaar element waarmee de positie en de grootte van elementen in een layout bijgesteld kan worden. Met behulp van vering kan een element uitgerekt of samengedrukt worden. Vering kan aan de boven-, onder, linker, of rechterkant van een element geplaatst worden, zodat het element de gewenste grootte en positie blijft houden. </para>
986
>Vering gebruiken:</para>
990
>Klik op het vering-pictogram op de werkbalk <guilabel
996
>Klik op het formulier op de de plaats waar de vering ingevoegd moet worden. </para>
1000
For the following example, the spring has been inserted on the left
1001
hand of the text label "Persons". The label is thus displayed on the
1002
right hand of the form. To make the spring work, it has been put into
1003
a common horizontal layout with the label.
1007
>Horizontal layout containing a spring and a text label</screeninfo>
1010
<imagedata fileref="img/05_04_08_form_spring.png" format="PNG"/>
1014
>Horizontal layout containing a spring and a text label</phrase>
1020
>Vering werkt alleen in een globale layout, dat wil zeggen een layout voor het formulier. De vering gebruikt de rand van het formulier om de elementen uit te rekken of samen te drukken. </para>
1024
TODO: The entire text in this section is built around a screenshot
1025
example, so it's commented out for now.
1027
<sect3 id="advanced-widget-layouts">
1029
>Advanced widget layouts</title>
1031
Widget layouts can be combined (or nested). On the following example
1032
you can identify two nested layouts:
1037
Horizontal layout with a spring, aligning the <literal
1039
text label to the right.
1044
>Grid layout grouping widgets on the whole form.</para>
1049
>Two widget layouts combined: horizontal layout inside of a grid layout</screeninfo>
1052
<imagedata fileref="img/05_04_08_form_advanced_layout.png" format="PNG"/>
1056
>Two widget layouts combined: horizontal layout inside of a grid layout</phrase>
1061
The horizontal layout is treated in the example as a single widget by
1062
the grid layout - it takes exactly one <quote
1065
After opening a form designed this way in the data view, you can notice
1066
(by resizing the form) that:
1073
> text label thanks to the spring used is constantly
1074
aligned to the to the right side of the form.
1079
Text fields take all of the available width thanks to putting them
1080
into the grid layout.
1085
All the form's widgets are pushed to the top thanks to the spring
1086
used at the bottom of the form.
1092
>The form using the two layouts displayed in data view</screeninfo>
1095
<imagedata fileref="img/05_04_08_form_advanced_layout_view.png" format="PNG"/>
1099
>The form using the two layouts displayed in data view</phrase>
1106
<sect3 id="removing-widget-layouts">
1108
>Elementen-layouts verwijderen</title>
1110
>Wanneer u de layout wilt verwijderen zonder dat de elementen verwijderd worden, moet u één van de volgende manieren gebruiken: </para>
1114
>Klik met de <mousebutton
1115
>rechter</mousebutton
1116
>muisknop op de rand van de layout en kies <guimenuitem
1117
>Layout opheffen</guimenuitem
1118
> in het contexmenu. </para>
1122
>Klik met de <mousebutton
1123
>linker</mousebutton
1124
>muisknop op de rand van de layout en kies het menu <menuchoice
1128
>Layout opheffen</guimenuitem
1135
>Als u het menu <guimenuitem
1136
>Layout opheffen</guimenuitem
1137
> kiest, worden de elementen in de layout niet verwijderd. Als u de elementen ook wilt verwijderen, klikt u op de rand van de layout en drukt u daarna op de <keycap
1139
>-toets of kiest u <menuchoice
1143
>Verwijderen</guimenuitem
1145
> in het menu of in het contextmenu. </para>
1149
<sect3 id="size-policies-for-widgets-within-a-layout">
1151
>Variabele afmetingen van elementen in een layout</title>
1153
>U kunt de elementen een vaste grootte geven, maar in &kexi; kunt u ook kiezen uit verscheidene andere manieren om de grootte van elementen in te stellen. <emphasis
1154
>Variabele afmetingen</emphasis
1155
> bieden een flexibele methode om te bepalen hoeveel een element uitgerekt (of samengedrukt) wordt, afhankelijk van naastgelegen elementen en de beschikbare ruimte op het formulier. </para>
1157
>Nadat u een <emphasis
1159
> voor de elementen geactiveerd hebt, krijgt elk element een proportionele (<guilabel
1161
>) variabele afmeting. De grootte van deze elementen wordt automatisch gewijzigd, afhankelijk van het type en de afmetingen van de layout. Bijvoorbeeld: De grootte van drie knoppen in een horizontale layout zal zo gewijzigd worden, dat de zichtbare tekst er precies op past. </para>
1164
>Eigenschappen-editor</interface
1165
> kunt u voor elk element de variabele afmetingen instellen. Deze instellingen staan bij elkaar in de groep eigenschappen <guilabel
1166
>Variabele afmetingen</guilabel
1170
>A group of properties for defining a widget's size policy</screeninfo>
1173
<imagedata fileref="img/05_04_09_size_policy_properties.png" format="PNG"/>
1177
>A group of properties for defining a widget's size policy</phrase>
1183
>Deze groep eigenschappen bevat:</para>
1188
>Horizontaal variabel afmetingen</guilabel
1192
>bepalen de horizontale grootte van het element,</para>
1198
>Verticaal variabele afmetingen</guilabel
1202
>bepalen de verticale grootte van het element,</para>
1208
>Horizontaal uitrekken</guilabel
1212
>bepaalt de mate waarin de <guilabel
1213
>Horizontaal variabele afmetingen</guilabel
1214
> beïnvloed worden, </para>
1220
>verticaal uitrekken</guilabel
1224
>bepaalt de mate waarin de <guilabel
1225
>Verticaal variabele afmetingen</guilabel
1226
> beïnvloed worden </para>
1233
>Waarden van variabele afmetingen</title>
1235
>De volgende waarden zijn beschikbaar in de keuzelijst bij <guilabel
1236
>Horizontaal variabele afmetingen</guilabel
1238
>Verticaal variabele afmetingen</guilabel
1240
>Eigenschappen-editor</interface
1250
>deze waarde betekent dat de afmetingen van het element niet automatisch gewijzigd kunnen worden; de afmetingen (breedte of hoogte), die tijdens het ontwerpen gedefinieerd zijn, blijven behouden, </para>
1260
>deze waarde betekent dat de oorspronkelijke grootte van het element als minimale grootte wordt ingesteld, de afmetingen voldoen en het is niet nodig om het element groter te maken, maar zodra het nodig is, wordt het element groter gemaakt. Dit type van variabele afmetingen kan worden gebruikt om het element tot de totale breedte of hoogte te vergroten, in het bijzonder als u de uitrekwaarde op groter dan 0 instelt. </para>
1263
>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>
1266
<imagedata fileref="img/05_04_09_size_policy_minimum.png" format="PNG"/>
1270
>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>
1284
>deze waarde betekent dat de oorspronkelijke grootte van het element als maximale grootte wordt ingesteld en dat het element kleiner gemaakt kan worden, zonder dat het onbruikbaar of onleesbaar wordt, als andere elementen meer ruimte nodig hebben, </para>
1294
>deze waarde betekent dat de oorspronkelijke grootte van het element het beste is en de voorkeur heeft; het element kan echter groter of kleiner gemaakt worden en het zal leesbaar blijven, </para>
1297
>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</screeninfo>
1300
<imagedata fileref="img/05_04_09_size_policy_preferred.png" format="PNG"/>
1304
>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</phrase>
1314
>Toenemend</guilabel
1318
>deze waarde betekent dat de oorspronkelijke grootte van het element redelijk is, maar het element kan kleiner gemaakt worden; het kan ook zo groter gemaakt worden om zo veel mogelijk ruimte in te nemen, </para>
1324
>Minimum toenemend</guilabel
1328
>deze waarde betekent dat de oorspronkelijke grootte van het element toegestaan is; het kan groter gemaakt worden om zo veel mogelijk ruimte in te nemen, </para>
1334
>Genegeerd</guilabel
1338
>deze waarde betekent dat de oorspronkelijke grootte van het element genegeerd wordt; het element kan groter gemaakt worden om zo veel mogelijk ruimte in te nemen, maar andere elementen maken dat gewoonlijk niet mogelijk </para>
1343
>Verschillende typen elementen hebben ook verschillende standaarden voor de variabele afmetingen; knoppen hebben bijvoorbeeld als standaard dat de variabele afmetingen ingesteld zijn op <guilabel
1345
> (in beide richtingen), terwijl voor tekstvakken de verticaal variabele afmetingen ingesteld zijn op <guilabel
1349
>De meestgebruikte variabele afmetingen zijn <guilabel
1360
>Verticaal en horizontaal uitrekken</title>
1362
>De eigenschappen <guilabel
1363
>Verticaal uitrekken</guilabel
1365
>Horizontaal uitrekken</guilabel
1366
> accepteren waarden die groter dan of gelijk aan 0 zijn (de waarde moet een heel getal zijn). Met behulp van deze eigenschappen kunt u het gedrag van variabele afmetingen preciezer instellen. De standaardwaarden voor beide eigenschappen is 0. Een hogere waarde voor het uitrekken betekent dat het element meer vergroot wordt dan elementen waarvoor een lagere waarde ingesteld is. </para>
1369
>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</screeninfo>
1372
<imagedata fileref="img/05_04_09_size_policy_vertical_stretch.png" format="PNG"/>
1376
>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</phrase>
1385
<sect2 id="setting-widgets-size-and-position-by-hand">
1387
>Afmetingen en positie van elementen handmatig instellen</title>
1389
>In het geval dat uw formulier geen layout heeft waarmee de positie en de afmetingen automatisch ingesteld worden, wilt u waarschijnlijk de positie en afmetingen van elementen handmatig instellen om het formulier overzichtelijker te maken. De formulierontwerper van &kexi; maakt dit gemakkelijker door middel van de volgende groep commando's: </para>
1393
>De afmetingen van geselecteerde elementen aanpassen. De commando's hiervoor zijn beschikbaar bij <menuchoice
1397
>Grootte van elementen aanpassen</guisubmenu
1401
> en in het contextmenu bij <menuchoice
1403
>Grootte van elementen aanpassen</guisubmenu
1405
>. U kunt ook op de knop <guibutton
1406
>Grootte van elementen aanpassen</guibutton
1407
> op de werkbalk klikken. </para>
1411
><!--<img src="img/aofit.png" class="icon"
1417
>De grootte van de geselecteerde elementen wordt zo gewijzigd, dat elk element precies groot genoeg voor de inhoud ervan is, de grootte van een label wordt bijvoorbeeld aangepast aan de tekst. De positie van de elementen wordt niet gewijzigd. </para>
1422
><!--<img src="img/aogrid.png" class="icon"
1424
>Aan raster</guilabel
1428
>De grootte van de geselecteerde elementen wordt zo gewijzigd, dat de hoekpunten van elk element op een rasterpunt van het formulier (of van een andere container) worden geplaatst. De positie van het element kan iets gewijzigd worden. </para>
1433
><!--<img src="img/aoshortest.png" class="icon"
1435
>Aan kortste</guilabel
1439
>De hoogte van de geselecteerde elementen worden zo gewijzigd, dat ze allemaal dezelfde hoogte hebben als de kortste. De positie van de elementen wordt niet gewijzigd. </para>
1444
><!--<img src="img/aotallest.png" class="icon"
1446
>Aan langste</guilabel
1450
>De hoogte van de geselecteerde elementen worden zo gewijzigd, dat ze allemaal dezelfde hoogte hebben als de langste. De positie van de elementen wordt niet gewijzigd. </para>
1455
><!--<img src="img/aonarrowest.png" class="icon"
1457
>Aan smalste</guilabel
1461
>De breedte van de geselecteerde elementen worden zo gewijzigd, dat ze allemaal dezelfde hoogte hebben als de smalste. De positie van de elementen wordt niet gewijzigd. </para>
1466
><!--<img src="img/aowidest.png" class="icon"
1468
>Aan breedste</guilabel
1472
>De breedte van de geselecteerde elementen worden zo gewijzigd, dat ze allemaal dezelfde hoogte hebben als de breedste. De positie van de elementen wordt niet gewijzigd. </para>
1479
>De positie van geselecteerde elementen uitlijnen. De commando's hiervoor zijn beschikbar bij <menuchoice
1483
>Elementen uitlijnen</guisubmenu
1487
> en in het contextmenu bij <menuchoice
1489
>Elementen uitlijnen</guisubmenu
1491
>. U kunt ook op de knop <guibutton
1492
>Elementen uitlijnen</guibutton
1493
> op de werkbalk klikken. </para>
1497
><!--<img src="img/aoleft.png" class="icon"
1499
>Aan linkerrand</guilabel
1503
>De linkerranden van de geselecteerde elementen worden uitgelijnd op de linkerrand van het element dat het verst naar links staat. </para>
1508
><!--<img src="img/aoright.png" class="icon"
1510
>Aan rechterrand</guilabel
1514
>De rechterranden van de geselecteerde elementen worden uitgelijnd op de rechterrand van het element dat het verst naar rechts staat. </para>
1519
><!--<img src="img/aotop.png" class="icon"
1521
>Aan bovenrand</guilabel
1525
>De bovenranden van de geselecteerde elementen worden uitgelijnd op de bovenrand van het element dat het het hoogst bovenin staat. </para>
1530
><!--<img src="img/aobottom.png" class="icon"
1532
>Aan onderrand</guilabel
1536
>De onderranden van de geselecteerde elementen worden uitgelijnd op de onderrand van het element dat het het laagst onderin staat. </para>
1541
><!--<img src="img/aopos2grid.png" class="icon"
1543
>Aan raster</guilabel
1547
>De linkerbovenhoeken van de elementen worden naar het dichtstbijzijnde rasterpunt verplaatst. </para>
1552
>Geen van de bovenstaande commando's wijzigen iets aan de grootte van de elementen.</para>
1556
>Er zijn nog andere commando's beschikbaar: <guimenuitem
1557
>Element naar voorgrond verplaatsen</guimenuitem
1558
> (vóór alle andere elementen) en <guimenuitem
1559
>Element naar achtergrond verplaatsen</guimenuitem
1560
> (achter alle andere elementen). Deze twee commando's worden zelden gebruikt, omdat elementen zelden op elkaar geplaatst worden (behalve wanneer een container elementen bevat). Bovendien kunt u een element ook naar de voorgrond verplaatsen door er met de muis op te klikken. </para>
1563
<sect2 id="setting-the-tab-order">
1565
>De tabvolgorde instellen</title>
1567
>De focus op een element bepaalt dat dat element met het toetsenbord geactiveerd kan worden. Focus hangt samen met elementen die in de gegevensweergave van een formulier zichtbaar zijn. Er kan altijd maar één element de focus hebben. Focus wordt het vaakst gebruikt voor tekstvakken (een actief tekstvak heeft de focus). Een ander voorbeeld is een knop - wanneer de knop de focus heeft, kunt u deze met de <keycombo action="press"
1569
>toets of met de <keycombo action="press"
1575
> in plaats van er met de muis op te moeten klikken. </para>
1577
>Er zijn verscheidene methoden om elementen actief te maken (het element de focus geven): klikken met de muis, het muiswieltje bewegen terwijl de muiscursor zich boven het element bevindt, of met de <keycombo action="press"
1579
>-toets. De laatste methode wordt vaak gebruikt omdat deze snel en gemakkelijk is. De beschikbaarheid van de methode wordt bepaald door de eigenschap <guilabel
1580
>Focusbesturing</guilabel
1581
> van het betreffende element. </para>
1583
>Wanneer u de focus verplaatst (elementen activeert) met behulp van de <keycombo action="press"
1585
>-toets wordt rekening gehouden met de ingestelde tabvolgorde op het formulier. Telkens wanneer u op de <keycombo action="press"
1587
>-toets drukt, springt de focus naar het volgende element, de tabvolgorde bepaalt de volgorde waarop de elementen geactiveerd worden.. </para>
1589
>De tabvolgorde van elementen veranderen:</para>
1593
>Schakel over naar de ontwerpweergave.</para>
1601
>Tabvolgorde bewerken...</guimenuitem
1603
> op de menubalk. Het dialoogvenster <guilabel
1604
>Tabvolgorde bewerken</guilabel
1605
> wordt geopend, hierin kunt u de instellingen wijzigen. </para>
1608
>A window for editing tab order for a form</screeninfo>
1611
<imagedata fileref="img/05_04_11_tab_stop_dialog.png" format="PNG"/>
1615
>A window for editing tab order for a form</phrase>
1621
>Het dialoogvenster bevat een lijst met twee kolommen: in de eerste kolom staan de namen, in de tweede het type van de elementen. Voor de duidelijkheid staat het bijbehorende pictogram vóór de naam. Alleen de elementen waarvoor de 	-toets beschikbaar is voor de focusbesturing staan in de lijst. In dit venster kunt u de tabvolgorde wijzigen, u kunt ook automatische tabvolgorde instellen. </para>
1625
>De tabvolgorde wijzigen:</para>
1629
>Klik op een element in de lijst en sleep het met de muis naar de gewenste plaats (omhoog of omlaag). </para>
1633
>Klik op een element in de lijst en klik daarna op de knop <guibutton
1634
>Omhoog verplaatsen</guibutton
1636
>Omlaag verplaatsen</guibutton
1637
> om het element op de gewenste positie te plaatsen. </para>
1641
>Activeer het keuzevakje <guilabel
1642
>Tabvolgorde automatisch instellen</guilabel
1643
>. Als deze optie ingeschakeld is, worden wijzigingen in de lijst genegeerd - &kexi; stelt de tabvolgorde automatisch in. Dit betekent dat het element linksboven (of rechtsboven als de tekstrichting van rechts naar links ingesteld is) als eerste de focus krijgt, de volgorde loopt daarna van links naar rechts (of van rechts naar links) en van boven naar beneden. </para>
1646
>Automatic tab order for a form</screeninfo>
1649
<imagedata fileref="img/05_04_11_auto_tab_stop.png" format="PNG"/>
1653
>Automatic tab order for a form</phrase>
1665
> om de wijzigingen op te slaan of op <guibutton
1666
>Annuleren</guibutton
1667
> om de wijzigingen te negeren. </para>
added
removed
docs/calligra/kexi/designingforms.docbook
