You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1698 lines
61 KiB
1698 lines
61 KiB
<!--
|
|
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd">
|
|
|
|
-->
|
|
|
|
<sect1 id="designing-forms">
|
|
<title
|
|
>Konstruera formulär</title>
|
|
|
|
<sect2 id="most-important-terms">
|
|
<title
|
|
>Den viktigaste terminologin</title>
|
|
<glosslist>
|
|
<glossentry id="gloss-form">
|
|
<glossterm
|
|
>Formulär</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Ett fönster som tillhandahålls för att enkelt mata in och presentera data på datorskärmen. </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-data-source">
|
|
<glossterm
|
|
>Formulärets datakälla</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Databastabell eller förfrågan som tillhandahåller data som visas i formuläret. Datakällan behövs eftersom själva formuläret bara är <emphasis
|
|
>verktyg</emphasis
|
|
> för att visa och mata in data, medan tabeller och förfrågningar är datakällor. Nya, tomma, formulär har ingen tilldelad datakälla, så de visar ingen data från databasen om du inte tilldelar dem en datakälla. </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-field">
|
|
<glossterm
|
|
>Formulärfält</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Direkt ekvivalent till en kolumn i en tabell eller förfrågan. Fält för att visa text och tal är de som oftast används. Att skriva in ett nytt värde eller ändra befintligt värde i ett sådant fält orsakar en ändring i den anslutna tabellen eller frågekolumnen (efter ändringen har accepterats). </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-design">
|
|
<glossterm
|
|
>Formulärkonstruktion</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Aktiviteter du utför för att definiera utseendet och funktionen hos formuläret. För att göra det måste du tillhandahålla en <glossterm linkend="gloss-form-data-source"
|
|
>datakälla</glossterm
|
|
>, infoga <glossterm linkend="gloss-form-field"
|
|
>formulärfält</glossterm
|
|
> av diverse typer och placera dem på lämpliga ställen. </para>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-form-widget">
|
|
<glossterm
|
|
>Grafisk formulärkomponent</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>Formulärets element. De huvudsakliga typerna av grafiska komponenter är:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Grafiska komponenter som visar information, t.ex. en textruta eller en bildruta. Varje komponent av denna typ kan <emphasis
|
|
>anslutas</emphasis
|
|
> till en datakällas fält (en tabell eller frågekolumn). Därför kallas sådana grafiska komponenter för <glossterm linkend="gloss-form-field"
|
|
>formulärfält</glossterm
|
|
>. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Grafiska komponenter som kan utföra en viss angiven åtgärd, t.ex. en tryckknapp som kan stänga det aktuella formuläret. I andra program kallas komponenttypen ibland <firstterm
|
|
>formulärkontroll</firstterm
|
|
> eftersom den kan utföra fördefinierade åtgärder för att <emphasis
|
|
>kontrollera</emphasis
|
|
> databasens programbeteende. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Övriga grafiska komponenter för att berika formulärets utseende, t.ex. en <quote
|
|
>linjekomponent</quote
|
|
> som visuellt kan separera två områden i formuläret. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</glossdef>
|
|
</glossentry>
|
|
<glossentry id="gloss-container-widget">
|
|
<glossterm
|
|
>Omgivande grafisk komponent</glossterm>
|
|
<glossdef>
|
|
<para
|
|
>En grafisk komponent som kan <emphasis
|
|
>innehålla</emphasis
|
|
> andra komponenter inne i sitt område. Till exempel är ramkomponenter och flikkomponenter omgivande komponenter. Själva formulärets yta är också en omgivande komponent. En kommandoknapp kan inte kallas en omgivande komponent eftersom det inte är möjligt att infoga en komponent inne i den. I mer komplicerade fall, kan omgivande komponenter infogas i en omgivande komponent, alltså är en hierarki möjlig. </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
|
|
>Formulär eller tabeller</title>
|
|
<para
|
|
>I kapitel 5.2 fick du lära dig om hur data direkt matas in i tabeller med deras datavy. I många fall är dock formulär bättre lämpade för att mata in data: </para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>En tabell kan innehålla för många kolumner för att visa på skärmen. Ett formulär kan visa sådan data med användning av flera rader. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Ett formulär tillåter att <glossterm linkend="gloss-form-field"
|
|
>fälten</glossterm
|
|
> med data delas upp visuellt i logiska grupper, och ökar på så sätt läsbarheten. Etiketter med ytterligare information kan infogas för att ge användare fler tips om hur formuläret ska användas, eller vad ett givet <glossterm linkend="gloss-form-field"
|
|
>fält</glossterm
|
|
> med data betyder. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Kommandoknappar kan användas i formulär för ofta använda kommandon, så att användare kan använda formulär på liknande sätt som fristående program de känner till. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>I datavyn som visar flera rader med data är <glossterm linkend="gloss-form-field"
|
|
>textfält</glossterm
|
|
> eller bilder lika lätt som i formulär. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</sect2>
|
|
|
|
<sect2>
|
|
<title
|
|
>Arbeta med formulärkonstruktion</title>
|
|
<para
|
|
>Som vid konstruktion av en tabell eller en förfrågan, har du möjlighet att använda <interface
|
|
>datavy</interface
|
|
> och <interface
|
|
>konstruktionsvy</interface
|
|
>. Formulärkonstruktion utförs i <interface
|
|
>konstruktionsvyn</interface
|
|
>. Vi kallar ofta fönstret för formulärkonstruktion för <interface
|
|
>Formulärfönstret</interface
|
|
>. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>För att skapa ett nytt tomt formulär, välj <menuchoice
|
|
><guimenu
|
|
>Infoga</guimenu
|
|
> <guimenuitem
|
|
>Formulär</guimenuitem
|
|
></menuchoice
|
|
> i menyraden. Som ett alternativ kan du använda kommandot <menuchoice
|
|
><guimenuitem
|
|
>Nytt formulär</guimenuitem
|
|
></menuchoice
|
|
> i kombinationsrutan på verktygsraden i <interface
|
|
>projektnavigeringen</interface
|
|
> eller <menuchoice
|
|
><guimenuitem
|
|
>Skapa objekt: Formulär</guimenuitem
|
|
></menuchoice
|
|
> i den sammanhangsberoende menyn. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>En ny ram visas, och du kan ändar formuärets storlek genom att flytta kanterna. Formuläret täcks av ett rutnät som förenklar noggrann placering av komponenterna. </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
|
|
>Liksom för tabellkonstruktion, tillhandahåller <interface
|
|
>formulärfönstret</interface
|
|
> en <interface
|
|
>egenskapsruta</interface
|
|
>. För att spara utrymme på skärmen har rutan tre flikar som hör ihop med formuläret som för närvarande är valt: </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
>Fliken <guilabel
|
|
>Egenskaper</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Innehåller en lista med egenskaper för den grafiska komponent som för närvarande är markerad.</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
>Fliken <guilabel
|
|
>Datakälla</guilabel
|
|
> </term>
|
|
<listitem>
|
|
<para
|
|
>Innehåller egenskaper som specifikt har att göra med <glossterm linkend="gloss-form-data-source"
|
|
>datakällan</glossterm
|
|
> för den grafiska komponent som för närvarande är markerad, eller för själva formuläret. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
>Fliken <guilabel
|
|
>Grafiska komponenter</guilabel
|
|
> </term>
|
|
<listitem>
|
|
<para
|
|
>Innehåller en hierarki av alla grafiska komponenter i formuläret. Listan förenklar uppslagning av komponenter med namn, och navigering mellan dem. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para
|
|
>Information om namnet på den grafiska komponent som för närvarande är markerad visas på den första och andra fliken. </para>
|
|
<para
|
|
>Ytterligare verktygsrader är också tillgängliga:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Verktygsraden <guilabel
|
|
>Grafiska komponenter</guilabel
|
|
> används för att infoga nya komponenter i formuläret. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Verktygsraden <guilabel
|
|
>Format</guilabel
|
|
> används för att formatera formulärets element (t.ex. justera komponenternas storlek och gruppering). Formateringskommandon är också tillgängliga i menyn <guimenu
|
|
>Format</guimenu
|
|
>. Mer om dessa kommandon finns i <xref linkend="formatmenu"/>. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</sect2>
|
|
|
|
<sect2 id="using-the-widgets-tab">
|
|
<title
|
|
>Använda fliken <guilabel
|
|
>Grafiska komponenter</guilabel
|
|
></title>
|
|
<para
|
|
>Fliken <guilabel
|
|
>Grafiska komponenter</guilabel
|
|
> i <interface
|
|
>egenskapsrutan</interface
|
|
> tillhandahåller en lista med formulärets komponenter och deras hierarki. Varje komponent visas inne i hierarkin tillsammans med andra komponenter på samma nivå (med samma överliggande omgivande komponent). Delkomponenter (inne i en omgivande komponent) visas med indragna namn. </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
|
|
>Varje komponent visas med sitt namn och sin typ. Typen visas också med en ikon, samma som visas på verktygsraden som används när formuläret konstrueras. </para>
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem
|
|
>
|
|
<para
|
|
>Att ändra aktuell markering i listan orsakar lämplig markering i formuläret som konstrueras. Det möjliggör enklare uppslagning av komponenter enligt namn och enklare navigation. Det är till exempel möjligt att markera en komponent enligt namn, och därefter byta till fliken <guilabel
|
|
>Egenskaper</guilabel
|
|
> för att ändra komponentens egenskaper.</para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Genom att hålla nere tangenten <keycap
|
|
>Ctrl</keycap
|
|
> medan ett objekt i komponentlistan markeras, gör det möjligt att markera flera komponenter samtidigt. Att hålla nere <keycap
|
|
>Skift</keycap
|
|
> gör det möjligt att markera en hel lista med komponenter.</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
|
|
>Att ge grafiska komponenter rimliga namn kan vara användbart, men krävs inte. Observera att den grafiska komponentens namn är en egenskap som inte är synlig för användaren av ett formulär. Användare ser bara den grafiska komponentens text, som tillhandahålls av egenskapen <varname
|
|
>Text</varname
|
|
> eller liknande. </para>
|
|
</sect2>
|
|
|
|
<sect2 id="inserting-widgets-text-fields">
|
|
<title
|
|
>Infoga grafiska komponenter - textfält</title>
|
|
<para
|
|
>Låt oss skapa ett formulär som tillhandahåller information om personer, dvs. ett formulär sammankopplat med tabellen <literal
|
|
>personer</literal
|
|
>. </para>
|
|
<para
|
|
>Om formuläret som konstrueras ska visa data som hämtas från databasen, måste du placera lämpliga <glossterm linkend="gloss-form-field"
|
|
>fält</glossterm
|
|
> på det. Använd knapparna på verktygsraden <guilabel
|
|
>Grafiska komponenter</guilabel
|
|
> för att göra det. Varje knapp motsvarar en enskild komponenttyp. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Klicka på knappen <guibutton
|
|
>Textruta</guibutton
|
|
> på verktygsraden <guilabel
|
|
>Grafiska komponenter</guilabel
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Klicka på formulärets yta med <mousebutton
|
|
>vänster</mousebutton
|
|
> musknapp. En ny textruta placeras på punkten där du klickade. Innan du släpper knappen kan du dra musen för att ange önskad storlek på komponenten. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Om det behövs, flytta den infogade komponenten genom att dra och släppa den på önskad plats. Du kan ändra storlek på komponenten efteråt genom att dra en av de små rutorna som syns nära dess hörn. Om du markerar en annan komponent eller formulärets yta, så försvinner rutorna. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Klicka på verktygsradens knapp <guibutton
|
|
>Textruta</guibutton
|
|
> igen och klicka på formulärets yta för att infoga ytterligare en grafisk komponent. Upprepa åtgärden igen till du har tre textrutor infogade i formuläret. För enkelhetens skull begränsar vi oss till tre <glossterm linkend="gloss-form-field"
|
|
>datafält</glossterm
|
|
>. </para>
|
|
</step>
|
|
</procedure>
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Det finns en sammanhangsberoende meny tillgänglig i formulärets konstruktionsläge, som aktiveras genom att klicka med <mousebutton
|
|
>höger</mousebutton
|
|
> musknapp på önskad komponent eller på formulärets yta. Menyn erbjuder alternativ som <guimenuitem
|
|
>Klipp ut</guimenuitem
|
|
>, <guimenuitem
|
|
>Kopiera</guimenuitem
|
|
>, <guimenuitem
|
|
>Klistra in</guimenuitem
|
|
>, <guimenuitem
|
|
>Ta bort</guimenuitem
|
|
> och andra, komplexare. Många av alternativen erbjuds också via menyraden, oftast i menyn <guimenuitem
|
|
>Redigera</guimenuitem
|
|
>. Snabbtangenter är också tillgängliga för alternativen. Vissa alternativ är bara tillgängliga för vissa komponenttyper. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Alternativen <guimenuitem
|
|
>Klipp ut</guimenuitem
|
|
>, <guimenuitem
|
|
>Kopiera</guimenuitem
|
|
> och <guimenuitem
|
|
>Klistra in</guimenuitem
|
|
> gör det möjligt att flytta eller kopiera grafiska komponenter mellan formulär, eller till och med mellan separata databasprojekt. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Att hålla nere tangenten <keycap
|
|
>Ctrl</keycap
|
|
> medan du klickar på en komponent gör det möjligt att markera flera komponenter. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Istället för att använda alternativen <guimenuitem
|
|
>Kopiera</guimenuitem
|
|
> och <guimenuitem
|
|
>Klistra in</guimenuitem
|
|
> för att duplicera en komponent i samma formulär kan du hålla nere tangenten <keycap
|
|
>Ctrl</keycap
|
|
> medan du flyttar komponenten. När tangenten <keycap
|
|
>Ctrl</keycap
|
|
> släpps, flyttas inte komponenten som dras, utan kopieras till den nya platsen. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</note>
|
|
</sect2>
|
|
|
|
<sect2 id="assigning-data-sources">
|
|
<title
|
|
>Tilldela datakällor</title>
|
|
<para
|
|
><glossterm linkend="gloss-form-field"
|
|
>Fälten</glossterm
|
|
> du infogade har ingen <emphasis
|
|
>datakälla</emphasis
|
|
> tilldelad ännu, så de kan inte visa information från databasen. För att tilldela en datakälla, använd fliken <guilabel
|
|
>Datakälla</guilabel
|
|
> i <interface
|
|
>egenskapsrutan</interface
|
|
>. </para>
|
|
<para
|
|
>Det allra första steget är att ange <glossterm linkend="gloss-form-data-source"
|
|
>formulärets datakälla</glossterm
|
|
>, dvs. en plats som visad data hämtas från. Som nämndes ovan, ska du använda tabellen <literal
|
|
>personer</literal
|
|
> som <glossterm linkend="gloss-form-data-source"
|
|
>datakälla</glossterm
|
|
> i det nya formuläret. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Klicka på formulärets yta, eftersom du ska ändra dess egenskaper.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Byt till fliken <guilabel
|
|
>Datakälla</guilabel
|
|
> och skriv in tabellnamnet <literal>
|
|
personer</literal
|
|
> i kombinationsrutan <guilabel
|
|
>Formulärets datakälla</guilabel
|
|
>. Som ett alternativ kan du välja namnet i kombinationsrutans lista. </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
|
|
>Du har tilldelat <glossterm linkend="gloss-form-data-source"
|
|
>formulärets datakälla</glossterm
|
|
>. Nu måste du ange de grafiska komponenternas datakällor. </para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Klicka på den första textfältskomponenten längst upp i formuläret.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Skriv in fältnamnet <varname
|
|
>namn</varname
|
|
> under egenskapsrutans flik <guilabel
|
|
>Datakälla</guilabel
|
|
> i kombinationsrutan <emphasis
|
|
>Komponentens datakälla</emphasis
|
|
>. Som ett alternativ kan du välja namnet i kombinationsrutans lista. </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
|
|
>Klicka på nästa textfältkomponent och skriv in <varname
|
|
>efternamn</varname
|
|
> som datakälla.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Skriv in datakällor för <glossterm linkend="gloss-form-field"
|
|
>textfälten</glossterm
|
|
> <varname
|
|
>gatunamn</varname
|
|
>, <varname
|
|
>gatunummer</varname
|
|
> och <varname
|
|
>postort</varname
|
|
> på liknande sätt. </para>
|
|
</step>
|
|
</procedure>
|
|
<para
|
|
>Nu kan du spara formulärets konstruktion (det krävs inte för att prova formuläret i användning). Klicka på verktygsradens knapp <guilabel
|
|
>Spara objektändringar</guilabel
|
|
> för att spara, eller använd menyalternativet <menuchoice
|
|
><shortcut
|
|
><keycombo action="simul"
|
|
><keycap
|
|
>Ctrl</keycap
|
|
><keycap
|
|
>S</keycap
|
|
></keycombo
|
|
></shortcut
|
|
> <guimenu
|
|
>Arkiv</guimenu
|
|
> <guimenuitem
|
|
>Spara</guimenuitem
|
|
></menuchoice
|
|
>. När du sparar blir du tillfrågad om att ange formulärets namn. Skriv in <literal
|
|
>Personer</literal
|
|
> som rubrik och klicka på knappen <guibutton
|
|
>Ok</guibutton
|
|
>. Formulärets namn fylls automatiskt i. </para>
|
|
<para
|
|
>Detta är rätt ögonblick att prova formuläret. Klicka på verktygsradens knapp <guibutton
|
|
>Byt till datavy</guibutton
|
|
>. Om du inte gjorde något misstag när du matade in datakällorna, ska du se <glossterm linkend="gloss-form-field"
|
|
>formulärets fält</glossterm
|
|
> ifyllda med data från tabellen <literal
|
|
>personer</literal
|
|
>. </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
|
|
>Om du vill ta bort tilldelningen av komponentens <glossterm linkend="gloss-form-data-source"
|
|
>datakälla</glossterm
|
|
> för en formulärkomponent, kan du använda knappen <guibutton
|
|
>Rensa datakälla</guibutton
|
|
> intill kombinationsrutan <guilabel
|
|
>Komponentens datakälla</guilabel
|
|
>. På samma sätt kan du använda knappen <guibutton
|
|
>Rensa datakälla</guibutton
|
|
> intill kombinationsrutan <guilabel
|
|
>Formulärets datakälla</guilabel
|
|
>. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Använd knappen <guibutton
|
|
>Gå till markerad datakälla</guibutton
|
|
> för att välja lämplig tabell eller förfrågan i <interface
|
|
>projektnavigeringen</interface
|
|
>, så att du snabbt kan öppna en tabell eller förfrågan som är formulärets <glossterm linkend="gloss-form-data-source"
|
|
>datakälla</glossterm
|
|
>. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<!-- TODO: mention about creating Auto Fields by using drag & drop -->
|
|
</note>
|
|
</sect2>
|
|
|
|
<sect2 id="inserting-text-labels">
|
|
<title
|
|
>Infoga textetiketter</title>
|
|
<para
|
|
>För att göra det enklare för formulärets användare att identifiera betydelsen hos varje fältkomponenet bör de ha tillhörande textetiketter med lämpliga rubriker. För att skapa textetiketter används komponenten <literal
|
|
>Etikett</literal
|
|
>. </para>
|
|
<para
|
|
>Infoga tre textetikettkomponenter i formuläret, och placera dem till vänster om textfälten (eller till höger om operativsystemet använder höger-till-vänster layout). När du infogar en ny etikett visas en textmarkör på platsen där du kan skriva in önskad rubrik. Skriv in i tur och ordning: <literal
|
|
>Namn</literal
|
|
>, <literal
|
|
>Efternamn</literal
|
|
> och <literal
|
|
>Gatuadress</literal
|
|
>. Lägg dessutom till en annan etikett längst upp i formuläret som visar formulärets namn, dvs. <literal
|
|
>Personer</literal
|
|
>. Förstora etiketten och öka teckenstorleken genom att använda menyalternativet <menuchoice
|
|
><guimenu
|
|
>Format</guimenu
|
|
> <guimenuitem
|
|
>Teckensnitt...</guimenuitem
|
|
></menuchoice
|
|
>. </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
|
|
>Åtgärder</title>
|
|
<para
|
|
>En <literal
|
|
>åtgärd</literal
|
|
> är en enstaka isolerad aktivitet i programmet, tillgänglig för användaren att utföra. Den kan också utföras automatiskt som en reaktion på en given händelse (t.ex. efter ett formulär har öppnats). </para>
|
|
|
|
<sect3 id="assigning-actions-to-form-buttons">
|
|
<title
|
|
>Tilldela åtgärder till formulärknappar</title>
|
|
<para
|
|
>Många åtgärder kan tilldelas till formulärknappar. Den tilldelade åtgärden tförs när knappen klickas. </para>
|
|
<para
|
|
>För att tilldela en åtgärd:</para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Byt till formulärets <interface
|
|
>konstruktionsvy</interface
|
|
> om du inte redan har gjort det.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Markera den befintliga knappkomponenten genom att klicka på den eller lägg till en ny knappkomponent i formuläret. Om du infogar en ny knapp, skriv in dess rubrik och tryck på tangenten <keycombo action="press"
|
|
><keycap
|
|
>Enter</keycap
|
|
></keycombo
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Klicka på knappens grafiska komponent med <mousebutton
|
|
>höger</mousebutton
|
|
> musknapp för att visa den sammanhangsberoende menyn. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Välj alternativet <guimenuitem
|
|
>Tilldela åtgärd...</guimenuitem
|
|
> i den sammanhangsberoende menyn. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Dialogfönstret <guilabel
|
|
>Tilldela åtgärd till kommandoknapp</guilabel
|
|
> visas med en lista över tillgängliga åtgärder. En av åtgärderna är markerad om komponenten redan har en tilldelad åtgärd. Annars har kombinationsrutan <guilabel
|
|
>Åtgärdstyp</guilabel
|
|
> värdet <guilabel
|
|
>Ingen åtgärd</guilabel
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Välj alternativet <guilabel
|
|
>Program</guilabel
|
|
> i kombinationsrutan <guilabel
|
|
>Åtgärdstyp</guilabel
|
|
>. Tillgängliga åtgärder för hela programmet visas. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Välj en av åtgärderna i listan (t.ex. <guilabel
|
|
>Ta bort rad</guilabel
|
|
>).</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Klicka på knappen <guibutton
|
|
>Ok</guibutton
|
|
> eller tryck på tangenten <keycombo action="press"
|
|
><keycap
|
|
>Enter</keycap
|
|
></keycombo
|
|
> för att acceptera ditt val. </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
|
|
>Efter att ha bytt till formulärets <emphasis
|
|
>datavy</emphasis
|
|
> kan du prova om åtgärden fungerar. Om du till exempel tilldelade åtgärden <guilabel
|
|
>Ta bort rad</guilabel
|
|
>, och klickar på knappen så tas den nuvarande raden i databasen bort, på samma sätt som att utföra menykommandot <menuchoice
|
|
><shortcut
|
|
><keycombo action="simul"
|
|
><keycap
|
|
>Ctrl</keycap
|
|
><keycap
|
|
>Delete</keycap
|
|
></keycombo
|
|
></shortcut
|
|
><guimenu
|
|
>Redigera</guimenu
|
|
> <guimenuitem
|
|
>Ta bort rad</guimenuitem
|
|
></menuchoice
|
|
> (beroende på dina inställningar kan du bli tillfrågad om att bekräfta borttagningen). </para>
|
|
|
|
<note>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>För att ta bort en tilldelad åtgärd, välj <guilabel
|
|
>Ingen åtgärd</guilabel
|
|
> i kombinationsrutan <guilabel
|
|
>Åtgärdstyp</guilabel
|
|
> i dialogfönstret <guilabel
|
|
>Tilldela åtgärd till kommandoknapp</guilabel
|
|
>. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Åtgärder fungerar bara i formulärets <emphasis
|
|
>datavy</emphasis
|
|
>: Alla tänkbara tilldelningar av åtgärder är inte rimliga. Åtgärden <guimenuitem
|
|
>Teckensnitt...</guimenuitem
|
|
> är till exempel tillgänglig i datavyn, men bara om du har markerat en komponent i <interface
|
|
>konstruktionsvyn</interface
|
|
>. Om du ändrar teckeninställningarna så utförs ändringarna på texten i den markerade komponenten. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
</note>
|
|
</sect3>
|
|
</sect2>
|
|
|
|
<sect2 id="widget-layouts">
|
|
<title
|
|
>Layout av grafiska komponenter</title>
|
|
<para
|
|
>I de flesta fall ska formulärets grafiska komponenter vara bekvämt arrangerade och justerade. Att placera, justera och ändra storlek på komponenter för hand är inte lätt och parametrarna justeras inte om användaren ändras storlek på formuläret. I själva verket är situationen ännu värre, eftersom du inte kan anta att ett givet formulär kräver en given storlek, eftersom användare har olika teckenstorlekar och upplösningar på bildskärmen. </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
|
|
>Att använda ett specialverktyg som kallas komponentlayout kan hjälpa till att automatiskt skapa en layout för formulärkomponenter. Komponentlayout är åtgärden att gruppera två eller flera komponenter så att de är bra placerade och har lämpliga storlekar. </para>
|
|
<para
|
|
>Att använda en layout i ett formulär förbättrar justering av position. Dessutom används dess utrymme på ett bättre sätt. Textfält är närmare varandra, och mellanrummet är konstant. </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
|
|
>Det finns två sätt att skapa en layout av grafiska komponenter.</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Markera två eller flera komponenter som ska ingå i en gemensam layout, och välj en av layouttyperna i den sammanhangsberoende menyns alternativ <guilabel
|
|
>Layout av grafiska komponenter</guilabel
|
|
>. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Klicka på en omgivande komponent (eller själva formulärets yta), där komponenter infogas och välj en av layouttyperna med den sammanhangsberoende menyns alternativ Layout av grafiska komponenter. Alla komponenter som finns inne i den omgivande komponenten eller inne i formuläret på samma nivå läggs till i en enda gemensam layout. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<para
|
|
>I båda dessa fall kan du också använda menyn <menuchoice
|
|
><guimenu
|
|
>Format</guimenu
|
|
> <guimenuitem
|
|
>Layout av grafiska komponenter</guimenuitem
|
|
></menuchoice
|
|
>. </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
|
|
>Komponentlayout visas i konstruktionsvyn med användning av en blå, grön eller röd ruta som ritas med en sträckad linje. Linjen visas bara i formulärets konstruktionsvy. </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
|
|
>Förutom rutnätstypen finns det andra typer av layout för grafiska komponenter.</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
>vertikal</term>
|
|
<listitem>
|
|
<para
|
|
>Vertikal layout av grafiska komponenter</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
|
|
>horisontell</term>
|
|
<listitem>
|
|
<para
|
|
>Horisontell layout av grafiska komponenter</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
|
|
>Fjädrar i layout av grafiska komponenter</title>
|
|
<para
|
|
>En <emphasis
|
|
>fjäder</emphasis
|
|
> i en komponentlayout är ett särskilt osynligt element som gör det möjligt att justera komponenters position och storlek i en layout. En sådan fjäder sträcker ut eller pressar ihop en komponent på högra, övre, nedre eller vänstra sidan, så att den får önskad storlek och position. </para>
|
|
<para
|
|
>För att använda en fjäder:</para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Välj fjäderikonen i verktygsraden <guilabel
|
|
>Grafiska komponenter</guilabel
|
|
>. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Klicka på en vald punkt i formuläret för att infoga fjädern.</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
|
|
>För att få fjädrar att fungera måste du skapa en global komponentlayout, dvs. en layout för själva formuläret. Därefter kan fjädrarna använda formulärets kanter som en gräns för expansion. </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
|
|
>Ta bort layout av grafiska komponenter</title>
|
|
<para
|
|
>För att ta bort layout av grafiska komponenter utan att ta bort komponenterna, utför en av följande åtgärder: </para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Klicka med <mousebutton
|
|
>höger</mousebutton
|
|
> musknapp på layoutens kant och välj alternativet <guimenuitem
|
|
>Bryt layout</guimenuitem
|
|
> i den sammanhangsberoende menyn. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Klicka med <mousebutton
|
|
>vänster</mousebutton
|
|
> musknapp på layoutens kant och välj menyalternativet <menuchoice
|
|
><guimenu
|
|
>Format</guimenu
|
|
> <guimenuitem
|
|
>Bryt layout</guimenuitem
|
|
></menuchoice
|
|
>. </para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<note>
|
|
<para
|
|
>Att ta bort komponentlayouten med alternativet <guimenuitem
|
|
>Bryt layout</guimenuitem
|
|
> tar inte bort komponenterna i layouten. Om du också vill ta bort komponenterna, markera bara layouten genom att klicka på dess kant och tryck på tangenten <keycap
|
|
>Delete</keycap
|
|
> eller använd menyalternativet <menuchoice
|
|
><guimenu
|
|
>Redigera</guimenu
|
|
> <guimenuitem
|
|
>Ta bort</guimenuitem
|
|
></menuchoice
|
|
> eller den sammanhangsberoende menyns alternativ. </para>
|
|
</note>
|
|
</sect3>
|
|
|
|
<sect3 id="size-policies-for-widgets-within-a-layout">
|
|
<title
|
|
>Storlekspolicy för komponenter i en layout</title>
|
|
<para
|
|
>Istället för att ange en fast storlek på komponenter kan du välja en komponents storlekspolicy i &kexi; bland flera tillgängliga. En <emphasis
|
|
>storlekspolicy</emphasis
|
|
> är en flexibel strategi för att styra hur en komponent sträcks ut (eller krymper ihop) beroende på andra grannkomponenter och tillgängligt utrymme i formuläret. </para>
|
|
<para
|
|
>Efter att ha infogat komponenter i en <emphasis
|
|
>layout</emphasis
|
|
>, får varje komponent typiskt en proportionell (<guilabel
|
|
>Föredragen</guilabel
|
|
>) storlekspolicy. Dessa komponenter ändrar automatiskt storlek med föredragna inställningar, beroende på sin typ och storleken hos hela layouten. Tre knappar som infogats i en horisontell layout ändrar till exempel storlek så att deras synliga text får plats. </para>
|
|
<para
|
|
>Det finns inställningar av storlekspolicy för varje komponent som infogas i formuläret i <interface
|
|
>egenskapseditorn</interface
|
|
>. Inställningarna presenteras som en grupp egenskaper som kallas <guilabel
|
|
>Storlekspolicy</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
|
|
>Denna grupp av egenskaper innehåller:</para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Horisontell storlekspolicy</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definierar den grafiska komponentens horisontella storlek,</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Vertikal storlekspolicy</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definierar den grafiska komponentens vertikala storlek,</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Horisontell sträckning</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definierar aktivitetsstyrkan hos <guilabel
|
|
>Horisontell storlekspolicy</guilabel
|
|
>, </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Vertikal sträckning</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>definierar aktivitetsstyrkan hos <guilabel
|
|
>Vertikal storlekspolicy</guilabel
|
|
> </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
|
|
<sect4>
|
|
<title
|
|
>Värden för en storlekspolicy</title>
|
|
<para
|
|
>Följande värden är tillgängliga i kombinationsrutorna för egenskaperna <guilabel
|
|
>Horisontell storlekspolicy</guilabel
|
|
> och <guilabel
|
|
>Vertikal storlekspolicy</guilabel
|
|
> som visas i <interface
|
|
>egenskapseditorn</interface
|
|
>: </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Fast</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>värdet betyder att komponentens storlek inte automatiskt kan ändras. den ska behålla den konstanta storlek som definierades när den konstruerades (bredd och höjd). </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Minimum</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>värdet betyder att komponentens ursprungliga storlek är inställd till det minsta tillåtna värdet, som är tillräckligt och det finns inget behov av att expandera komponenten, men den kan expanderas om det behövs. Denna policytyp kan användas för att tvinga komponenten att expanderas till hela bredden eller höjden, särskilt om du anger ett sträckningsvärde större än 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
|
|
>värdet betyder att komponentens ursprungliga storlek är inställd till det största tillåtna värdet, och det kan minskas om det behövs utan att förstöra komponentens användbarhet och läsbarhet om andra komponenter behöver större utrymme. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Föredragen</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>värdet betyder att komponentens ursprungliga storlek är den bästa och föredras. Komponenten kan dock krympas eller expanderas och den förblir läsbar. </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
|
|
>Expanderande</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>värdet betyder att komponentens ursprungliga storlek är rimlig men komponenten kan också krympas. Den kan också expanderas för att uppta så mycket utrymme som möjligt. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Minimum expanderande</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>värdet betyder att komponentens ursprungliga storlek är tillåten. Den kan expanderas för att uppta så mycket utrymme som möjligt. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><guilabel
|
|
>Ignorerad</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>värdet betyder att komponentens ursprungliga storlek ignoreras. Komponenten kan expanderas för att uppta så mycket utrymme som möjligt, men andra komponenter tillåter oftast inte det. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para
|
|
>Varje komponenttyp har en förvald storlekspolicy. Till exempel har knappkomponenter förvald storlekspolicy inställd till <guilabel
|
|
>Minimum</guilabel
|
|
> ( i båda riktningar), medan textfältkomponenter har den vertikala storlekspolicyn inställd till <guilabel
|
|
>Fast</guilabel
|
|
>. </para>
|
|
<para
|
|
>Oftast använd storlekspolicy är <guilabel
|
|
>Föredragen</guilabel
|
|
>, <guilabel
|
|
>Minimum</guilabel
|
|
> och <guilabel
|
|
>Maximum</guilabel
|
|
>. </para>
|
|
</sect4>
|
|
|
|
<sect4>
|
|
<title
|
|
>Vertikal och horisontell sträckning</title>
|
|
<para
|
|
>Egenskaperna <guilabel
|
|
>Vertikal sträckning</guilabel
|
|
> och <guilabel
|
|
>Horisontell sträckning</guilabel
|
|
> accepterar heltalsvärden större än eller lika med 0. Egenskaperna tillåter finjustering av en storlekspolicy. Förvalt värde för egenskaperna är 0. Ett större värde på sträckningen betyder att komponenten expanderas mer än komponenter som har ett lägre sträckningsvärde inställt. </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
|
|
>Ställa in komponenternas storlek och position för hand</title>
|
|
<para
|
|
>I fallet då formuläret inte har någon huvudlayout inställd för automatisk placering och storleksändring av komponenterna, behöver du troligen ändra komponenternas position och storlek så att formuläret ser renare ut och blir enklare att använda. Formulärfönstret i &kexi; förenklar uppgiften genom att erbjuda följande kommandogrupp: </para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Justera storlekar för markerade komponenter. Dessa kommandon är tillgängliga i menyradens undermeny <menuchoice
|
|
><guimenu
|
|
>Format</guimenu
|
|
> <guisubmenu
|
|
>Justera komponenternas storlek</guisubmenu
|
|
></menuchoice
|
|
> och i den sammanhangsberoende menyns undermeny <menuchoice
|
|
><guisubmenu
|
|
>Justera komponenternas storlek</guisubmenu
|
|
></menuchoice
|
|
>. Verktygsradens kombinationsruta <guibutton
|
|
>Justera komponenternas storlek</guibutton
|
|
> är också tillgänglig. </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aofit.png" class="icon"
|
|
>--><guilabel
|
|
>Passa in</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Storleken för markerade komponenter ändras så att storleken på varje komponent ändras till dess föredragna storlek och dess innehåll, till exempel en textetiketts storlek, ändras så att den passar texten. Komponentens position ändras inte. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aogrid.png" class="icon"
|
|
>--><guilabel
|
|
>Till rutnät</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Storleken för markerade komponenter ändras så att hörn på varje komponent placeras på formulärets rutnätspunker (eller på en annan omgivande komponents rutnätspunkter). Komponentens position kan ändras något. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aoshortest.png" class="icon"
|
|
>--><guilabel
|
|
>Till kortaste</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Höjden på markerade komponenter ändras så att var och en av dem får samma höjd som den kortaste. Komponenternas positioner ändras inte. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aotallest.png" class="icon"
|
|
>--><guilabel
|
|
>Till längsta</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Höjden på markerade komponenter ändras så att var och en av dem får samma höjd som den längsta. Komponenternas positioner ändras inte. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aonarrowest.png" class="icon"
|
|
>--><guilabel
|
|
>Till smalaste</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Bredden på markerade komponenter ändras så att var och en av dem får samma bredd som den smalaste. Komponenternas positioner ändras inte. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aowidest.png" class="icon"
|
|
>--><guilabel
|
|
>Till bredaste</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Bredden på markerade komponenter ändras så att var och en av dem får samma bredd som den bredaste. Komponenternas positioner ändras inte. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Justera positioner för markerade komponenter. Dessa kommandon är tillgängliga i menyradens undermeny <menuchoice
|
|
><guimenu
|
|
>Format</guimenu
|
|
> <guisubmenu
|
|
>Justera komponenternas position</guisubmenu
|
|
></menuchoice
|
|
> och i den sammanhangsberoende menyns undermeny <menuchoice
|
|
><guisubmenu
|
|
>Justera komponenternas position</guisubmenu
|
|
></menuchoice
|
|
>. Verktygsradens kombinationsruta <guibutton
|
|
>Justera komponenternas position</guibutton
|
|
> är också tillgänglig. </para>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aoleft.png" class="icon"
|
|
>--><guilabel
|
|
>Åt vänster</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Alla markerade komponenters vänsterkanter flyttas till positionen för vänsterkanten på den komponent som är längst åt vänster. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aoright.png" class="icon"
|
|
>--><guilabel
|
|
>Åt höger</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Alla markerade komponenters högerkanter flyttas till positionen för högerkanten på den komponent som är längst åt höger. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aotop.png" class="icon"
|
|
>--><guilabel
|
|
>Uppåt</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Alla markerade komponenters överkanter flyttas till positionen för överkanten på den komponent som är längst upp. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aobottom.png" class="icon"
|
|
>--><guilabel
|
|
>Neråt</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Alla markerade komponenters underkanter flyttas till positionen för underkanten på den komponent som är längst ner. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term
|
|
><!--<img src="img/aopos2grid.png" class="icon"
|
|
>--><guilabel
|
|
>Till rutnät</guilabel
|
|
></term>
|
|
<listitem>
|
|
<para
|
|
>Alla markerade komponenters övre vänstra hörn flyttas så att de är placerade på närmaste rutnätspunkt. </para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
<para
|
|
>Inget av ovanstående kommandon ändrar komponenternas storlek.</para>
|
|
</listitem>
|
|
</itemizedlist>
|
|
<para
|
|
>Det finns också ytterligare kommandon tillgängliga: <guimenuitem
|
|
>Lägg grafisk komponent överst</guimenuitem
|
|
> (dvs. ovanpå alla andra komponenter) och <guimenuitem
|
|
>Lägg grafisk komponent underst</guimenuitem
|
|
> (dvs. under alla andra komponenter). Dessa två kommandon används sällan, eftersom det inte är vanligt att placera en komponent ovanpå en annan (utom när en omgivande komponent innehåller andra komponenter). Observera också att det är tillräckligt att klicka på en komponent med en musknapp för att lägga komponenten överst. </para>
|
|
</sect2>
|
|
|
|
<sect2 id="setting-the-tab-order">
|
|
<title
|
|
>Ange tabulatorordningen</title>
|
|
<para
|
|
>Komponentens fokus bestämmer tillgänglig aktiviteter med tangentbordet. Fokus hör ihop med komponenter som visas i formulärets datavy. Exakt en komponent kan ha fokus i ett givet ögonblick. Den vanligaste användningen av fokus är textinmatning (när ett givet textfält är aktivt, dvs. har fokus). Ett annat exempel är en knappkomponent: när den har fokus är det möjligt att <quote
|
|
>trycka</quote
|
|
> på den genom att använda tangenterna <keycombo action="press"
|
|
><keycap
|
|
>Enter</keycap
|
|
></keycombo
|
|
> eller <keycombo action="press"
|
|
><keycap
|
|
>Mellanslag</keycap
|
|
></keycombo
|
|
> istället för med en musknapp. </para>
|
|
<para
|
|
>Det finns några metoder att aktivera komponenter (flytta fokus till komponenten): att klicka med en musknapp, att rotera mushjulet över komponenten, eller använda tangenten <keycombo action="press"
|
|
><keycap
|
|
>Tabulator</keycap
|
|
></keycombo
|
|
>. Den sista metoden används ofta på grund av dess snabbhet och bekvämlighet för användare. Tillgängligheten hos fokusmetoderna styrs av en given komponents egenskap <guilabel
|
|
>Fokuspolicy</guilabel
|
|
>. </para>
|
|
<para
|
|
>Det finns ett förhållande mellan fokusering (aktivering) av komponenter med tangenten <keycombo action="press"
|
|
><keycap
|
|
>Tabulator</keycap
|
|
></keycombo
|
|
> och formulärets inställning av tabulatorordning. När tangenten <keycombo action="press"
|
|
><keycap
|
|
>Tabulator</keycap
|
|
></keycombo
|
|
> trycks, ska nästa komponent fokuseras, så formuläret måste känna till tabulatorordningen. </para>
|
|
<para
|
|
>För att ändra tabulatorordning för formulärets komponenter:</para>
|
|
<procedure>
|
|
<step>
|
|
<para
|
|
>Byt till formulärets konstruktionsvy.</para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>Utför menykommandot <menuchoice
|
|
><guimenu
|
|
>Redigera</guimenu
|
|
> <guimenuitem
|
|
>Redigera tabulatorordning...</guimenuitem
|
|
></menuchoice
|
|
>. Dialogrutan <guilabel
|
|
>Redigera tabulatorordning</guilabel
|
|
> visas med formulärets inställningar. </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
|
|
>Fönstret innehåller en lista med två kolumner: den första kolumnen visar komponentnamn, den andra komponenttyper. För att göra det enklare för användaren att känna igen betydelsen hos namn och typer, visas också ikoner som hör ihop med typerna. Listan innehåller bara komponenter som har en fokuspolicy som tillåter att tangenten <keycap
|
|
>Tabulator</keycap
|
|
> används. Fönstret låter dig ändra tabulatorordning eller ställa in automatisk tabulatorordning. </para>
|
|
</step>
|
|
<step>
|
|
<para
|
|
>För att ändra tabulatorordning, antingen:</para>
|
|
<itemizedlist>
|
|
<listitem>
|
|
<para
|
|
>Klicka på ett markerat komponentnamn i komponentlistan och dra det till önskad plats (uppåt eller neråt) genom att använda musen. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Klicka på ett markerat komponentnamn i komponentlistan och använd knapparna <guibutton
|
|
>Flytta ner</guibutton
|
|
> eller <guibutton
|
|
>Flytta upp</guibutton
|
|
> för att flytta komponenterna till önskad position. </para>
|
|
</listitem>
|
|
<listitem>
|
|
<para
|
|
>Markera kryssrutan <guilabel
|
|
>Hantera tabulatorordning automatiskt</guilabel
|
|
> för att ställa in automatiskt tabulatorordning för formuläret. Om alternativet har aktiverats, tas ingen hänsyn till eventuella ändringar som görs i komponentlistan för hand. &kexi; hanterar tabulatorordningen själv. Den automatiska ordningen betyder att komponenten längst upp till höger fokuseras först (eller längst upp till höger om operativsystemet använder höger-till-vänster layout), och ordningen bestäms av vänster till höger (eller höger till vänster) och uppifrån och neråt. </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
|
|
>Klicka på knappen <guibutton
|
|
>Ok</guibutton
|
|
> för att acceptera ändringarna eller knappen <guibutton
|
|
>Avbryt</guibutton
|
|
> för att kasta ändringarna. </para>
|
|
</step>
|
|
</procedure>
|
|
</sect2>
|
|
</sect1>
|