|
|
<!--
|
|
|
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd">
|
|
|
|
|
|
-->
|
|
|
|
|
|
<sect1 id="designing-forms">
|
|
|
<title
|
|
|
>Concevoir des formulaires</title>
|
|
|
|
|
|
<sect2 id="most-important-terms">
|
|
|
<title
|
|
|
>Les termes les plus importants</title>
|
|
|
<glosslist>
|
|
|
<glossentry id="gloss-form">
|
|
|
<glossterm
|
|
|
>Formulaire</glossterm>
|
|
|
<glossdef>
|
|
|
<para
|
|
|
>Une fenêtre servant à faciliter la saisie et la présentation des données sur l'écran de l'ordinateur. </para>
|
|
|
</glossdef>
|
|
|
</glossentry>
|
|
|
<glossentry id="gloss-form-data-source">
|
|
|
<glossterm
|
|
|
>Source de données du formulaire</glossterm>
|
|
|
<glossdef>
|
|
|
<para
|
|
|
>Une table ou requête de base de données fournissant les données affichées dans le formulaire. La source de données est nécessaire car les formulaires ne sont que des <emphasis
|
|
|
>outils</emphasis
|
|
|
> permettant d'afficher et de saisir des donnés, alors que les tables et les requêtes sont les sources des données. Les nouveaux formulaires, vides, ne sont associés à aucune source de données donc n'affichent aucune donnée de votre base de données, à moins que vous ne leur assigniez une source de données. </para>
|
|
|
</glossdef>
|
|
|
</glossentry>
|
|
|
<glossentry id="gloss-form-field">
|
|
|
<glossterm
|
|
|
>Champ de formulaire</glossterm>
|
|
|
<glossdef>
|
|
|
<para
|
|
|
>Équivalent direct d'une colonne dans une table ou une requête. Les plus fréquemment utilisés sont les champs servant à afficher du texte et des nombres. L'entrée d'une nouvelle valeur dans un tel champ provoque un changement dans la colonne correspondante de la table ou requête liée (après avoir accepté le changement). </para>
|
|
|
</glossdef>
|
|
|
</glossentry>
|
|
|
<glossentry id="gloss-form-design">
|
|
|
<glossterm
|
|
|
>Conception du formulaire</glossterm>
|
|
|
<glossdef>
|
|
|
<para
|
|
|
>Les actions à effectuer pour définir l'apparence et les fonctionnalités du formulaire. Pour ce faire, vous devez fournir une <glossterm linkend="gloss-form-data-source"
|
|
|
>source de données</glossterm
|
|
|
>, insérer des <glossterm linkend="gloss-form-field"
|
|
|
>champs de formulaire</glossterm
|
|
|
> de différents types et les placer aux endroits souhaités. </para>
|
|
|
</glossdef>
|
|
|
</glossentry>
|
|
|
<glossentry id="gloss-form-widget">
|
|
|
<glossterm
|
|
|
>Élément de formulaire</glossterm>
|
|
|
<glossdef>
|
|
|
<para
|
|
|
>Les principaux types d'éléments de formulaires sont :</para>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Des éléments affichant des information, &pex; une zone de texte ou une boîte à image. Chaque élément de ce type peut être <emphasis
|
|
|
>lié </emphasis
|
|
|
> à un champ de la source de données (une colonne d'une table ou d'une requête). C'est pour cela que l'on appelle aussi de tels éléments des <glossterm linkend="gloss-form-field"
|
|
|
>champs de formulaire</glossterm
|
|
|
>. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Des éléments permettant d'effectuer une action bien précise, &pex; un bouton poussoir qui permet de fermer le formulaire actif. Dans d'autres applications, ce type d'éléments est parfois appelé <firstterm
|
|
|
>contrôleur de formulaire</firstterm
|
|
|
> car il peut accomplir des actions prédéfinies permettant de <emphasis
|
|
|
>contrôler</emphasis
|
|
|
> le comportement de votre application de base de données. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>D'autres éléments permettent d'enrichir l'apparence de votre formulaire, &pex; un élément <quote
|
|
|
>ligne</quote
|
|
|
> permet de séparer graphiquement deux zones du formulaire. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
</glossdef>
|
|
|
</glossentry>
|
|
|
<glossentry id="gloss-container-widget">
|
|
|
<glossterm
|
|
|
>Élément contenant</glossterm>
|
|
|
<glossdef>
|
|
|
<para
|
|
|
>Un élément qui peut <emphasis
|
|
|
>contenir </emphasis
|
|
|
> d'autres éléments dans sa surface. Par exemple, un cadre ou des onglets sont des contenants. La surface du formulaire elle-même est un contenant. En revanche, un bouton de commande ne peut pas être appelé un contenant car il n'est pas possible d'insérer un autre élément à l'intérieur. Dans des cas complexes, on peut insérer des contenants dans des contenants, ce qui permet de les imbriquer. </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
|
|
|
>Comparaison entre formulaires et tables</title>
|
|
|
<para
|
|
|
>Dans le chapitre 5.2, vous avez appris à saisir des données directement dans les tables en utilisant le mode données de la table. Cependant, dans la plupart des cas, les formulaires sont plus adaptés pour saisir des données : </para>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Une table peut avoir trop de colonnes pour que vous puissiez les afficher toutes à l'écran. Un formulaire permet d'afficher de telles données sur plusieurs lignes. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>un formulaire permet de séparer graphiquement les <glossterm linkend="gloss-form-field"
|
|
|
>champs</glossterm
|
|
|
> de données en plusieurs groupes logiques, améliorant ainsi la lisibilité. Des étiquettes, avec des informations additionnelles, peuvent être insérées pour donner aux utilisateurs plus de précisions sur la façon d'utiliser le formulaire ou sur ce que tel ou tel <glossterm linkend="gloss-form-field"
|
|
|
>champ</glossterm
|
|
|
> de données signifie. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Des boutons de commande peuvent être utilisés dans les formulaires pour implémenter les commandes les plus fréquentes, afin que les utilisateurs puissent utiliser les formulaires comme les applications qu'ils connaissent. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>En mode données, l'affichage de <glossterm linkend="gloss-form-field"
|
|
|
>champ</glossterm
|
|
|
> de texte multiligne ou d'images est aussi aisé que dans les formulaires. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
</sect2>
|
|
|
|
|
|
<sect2>
|
|
|
<title
|
|
|
>Concevoir un formulaire</title>
|
|
|
<para
|
|
|
>Comme pour la conception de tables ou de requêtes, vous pouvez utiliser le <interface
|
|
|
>mode données</interface
|
|
|
> et le <interface
|
|
|
>mode conception</interface
|
|
|
>. La conception de formulaires est réalisée en <interface
|
|
|
>mode conception</interface
|
|
|
>. Nous allons souvent parler de la fenêtre de conception de formulaire comme du <interface
|
|
|
>concepteur de formulaire</interface
|
|
|
>. </para>
|
|
|
<procedure>
|
|
|
<step>
|
|
|
<para
|
|
|
>Pour créer un nouveau formulaire vide, choisissez <menuchoice
|
|
|
><guimenu
|
|
|
>Insérer</guimenu
|
|
|
><guimenuitem
|
|
|
> Formulaire</guimenuitem
|
|
|
></menuchoice
|
|
|
> dans la barre de menu. Vous pouvez aussi utiliser la commande <menuchoice
|
|
|
><guimenuitem
|
|
|
>Nouveau formulaire</guimenuitem
|
|
|
></menuchoice
|
|
|
> du bouton de la barre d'outil du <interface
|
|
|
>navigateur de projet</interface
|
|
|
> ou la commande <menuchoice
|
|
|
><guimenuitem
|
|
|
>Créer un objet : Formulaire</guimenuitem
|
|
|
></menuchoice
|
|
|
> du menu contextuel. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Un nouveau cadre va apparaître, vous pouvez redimensionner le formulaire en déplaçant les bordures. Le formulaire est couvert d'une grille qui simplifie le placement précis des éléments. </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
|
|
|
>Comme pour la conception de tables, le <interface
|
|
|
>concepteur de formulaire</interface
|
|
|
> fournit un <interface
|
|
|
>panneau de propriétés</interface
|
|
|
>. Pour économiser de l'espace sur l'écran, le panneau a trois onglets relatifs au formulaire actuellement sélectionné. </para>
|
|
|
<variablelist>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
>L'onglet <guilabel
|
|
|
>Propriétés</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Contient une liste de propriétés de l'élément actuellement sélectionné.</para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
>L'onglet <guilabel
|
|
|
>Source de données</guilabel
|
|
|
> </term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Contient des propriétés concernant spécifiquement la <glossterm linkend="gloss-form-data-source"
|
|
|
>source de données</glossterm
|
|
|
> de l'élément actuellement sélectionné ou du formulaire lui-même. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
>L'onglet <guilabel
|
|
|
>Élements graphiques</guilabel
|
|
|
> </term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Contient une hiérarchie de toutes les éléments du formulaire. La liste simplifie la navigation entre les éléments et leur recherche par nom. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
</variablelist>
|
|
|
<para
|
|
|
>Des informations sur le nom et le type de l'élément actuellement sélectionné sont disponibles dans le premier et deuxième onglet. </para>
|
|
|
<para
|
|
|
>Des barres d'outils supplémentaires sont aussi disponibles :</para>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La barre d'outils <guilabel
|
|
|
>Éléments graphiques</guilabel
|
|
|
>, utilisée pour insérer de nouveaux éléments dans le formulaire. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La barre d'outils <guilabel
|
|
|
>Format</guilabel
|
|
|
>, utilisée pour mettre en forme les éléments du formulaire (&pex; ajuster la taille des éléments, leur regroupement). Les commandes de mise en forme sont aussi disponibles dans le menu <guimenu
|
|
|
>Format</guimenu
|
|
|
>. Vous trouverez plus de renseignements sur ces commandes en allant voir <xref linkend="formatmenu"/>. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
</sect2>
|
|
|
|
|
|
<sect2 id="using-the-widgets-tab">
|
|
|
<title
|
|
|
>Utilisation de l'onglet <guilabel
|
|
|
>Élements</guilabel
|
|
|
></title>
|
|
|
<para
|
|
|
>L'onglet <guilabel
|
|
|
>Éléments</guilabel
|
|
|
> du <interface
|
|
|
>panneau de propriétés</interface
|
|
|
> fournit une liste d'éléments du formulaire et leur hiérarchie. Chaque élément est présenté dans la hiérarchie avec les autres éléments au même niveau (ayant le même conteneur parent). Les éléments enfants (à l'intérieur des conteneurs) sont affichés avec des noms indentés. </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
|
|
|
>Le nom et le type de chaque élément sont affichés. L'icône du type est aussi affichée – la même que celle affichée dans la barre d'outils utilisée lors de la conception du formulaire. </para>
|
|
|
<note>
|
|
|
<itemizedlist>
|
|
|
<listitem
|
|
|
>
|
|
|
<para
|
|
|
>Le changement d'élément sélectionné dans la liste provoque le changement correspondant de la sélection dans le formulaire. Cela permet une navigation et une recherche par nom dans les éléments plus faciles. Par exemple, il est possible de sélectionner un élément par son nom, puis de passer dans l'onglet <guilabel
|
|
|
>Propriétés</guilabel
|
|
|
> pour changer les propriétés de l'élément.</para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Garder la touche <keycap
|
|
|
>Ctrl</keycap
|
|
|
> enfoncée pendant qu'un élément de la liste est sélectionné permet d'en sélectionner plusieurs à la fois. Garder la touche <keycap
|
|
|
>Shift</keycap
|
|
|
> enfoncée permet de sélectionner des listes entières d'éléments.</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
|
|
|
>Donner des noms ayant du sens aux éléments peut être utile mais n'est pas obligatoire. Notez que le nom des éléments est une propriété qui n'est pas visible par les utilisateurs de votre formulaire. Les utilisateurs ne vont voir que le texte de l'élément, fourni par la propriété <varname
|
|
|
>Texte</varname
|
|
|
> ou une propriété similaire. </para>
|
|
|
</sect2>
|
|
|
|
|
|
<sect2 id="inserting-widgets-text-fields">
|
|
|
<title
|
|
|
>Insérer des éléments — Zones de texte</title>
|
|
|
<para
|
|
|
>Nous allons créer un formulaire fournissant des informations à propos des personnes, c'est-à-dire un formulaire connecté à la table <literal
|
|
|
>Personnes</literal
|
|
|
>. </para>
|
|
|
<para
|
|
|
>Si le formulaire que vous concevez doit présenter des données tirées de la base de données, vous devez placer des <glossterm linkend="gloss-form-field"
|
|
|
>champs</glossterm
|
|
|
> appropriés dessus. Pour ce faire, utilisez les boutons de la barre d'outils <guilabel
|
|
|
>Éléments graphiques</guilabel
|
|
|
>. Chaque bouton correspond à un type d'élément. </para>
|
|
|
<procedure>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez sur le bouton <guibutton
|
|
|
>Zone de texte</guibutton
|
|
|
> de la barre d'outils <guilabel
|
|
|
>Éléments graphiques</guilabel
|
|
|
>. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez sur la surface du formulaire avec le bouton <mousebutton
|
|
|
>gauche</mousebutton
|
|
|
> de la souris. Une nouvelle zone de texte va être placée au point où vous cliquez. Avant de relâcher, vous pouvez déplacer la souris afin de préciser la taille désirée pour cet élément. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Si besoin est, vous pouvez déplacer l'élément inséré à la position désirée par un glisser & déposer. Vous pouvez ensuite redimensionner l'élément en déplaçant une des petites boîtes apparaissant aux coins. Remarquez que ces boîtes ne sont visibles que lorsque l'élément est sélectionné. Si vous sélectionner un autre élément ou la surface du formulaire, les boîtes vont disparaître. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez une nouvelle fois sur le bouton de barre d'outils <guibutton
|
|
|
>Zone de texte</guibutton
|
|
|
> puis sur la surface du formulaire pour insérer un nouvel élément. Répétez cette action encore une fois afin d'obtenir trois zones de texte insérées dans votre formulaire. Par garder les choses simples, on va se limiter à trois <glossterm linkend="gloss-form-field"
|
|
|
>champs</glossterm
|
|
|
> de donnée. </para>
|
|
|
</step>
|
|
|
</procedure>
|
|
|
<note>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Il y a un menu contextuel disponible en mode conception. Vous pouvez l'activer par un clic <mousebutton
|
|
|
>droit</mousebutton
|
|
|
> de la souris sur l'élément souhaité ou la surface du formulaire. Le menu propose des commandes comme <guimenuitem
|
|
|
>Couper</guimenuitem
|
|
|
>, <guimenuitem
|
|
|
>Copier</guimenuitem
|
|
|
>, <guimenuitem
|
|
|
>Coller</guimenuitem
|
|
|
>, <guimenuitem
|
|
|
>Supprimer</guimenuitem
|
|
|
> et d'autres, plus complexes. Beaucoup de ces commandes sont aussi proposées dans la <guilabel
|
|
|
>barre de menus</guilabel
|
|
|
>, dans le menu <guimenuitem
|
|
|
>Édition</guimenuitem
|
|
|
>. Des raccourcis claviers sont aussi disponibles pour ces commandes. Certaines de ces commandes ne sont disponibles que pour certains type d'éléments. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Les commandes <guimenuitem
|
|
|
>Couper</guimenuitem
|
|
|
>, <guimenuitem
|
|
|
>Copier</guimenuitem
|
|
|
> et <guimenuitem
|
|
|
>Coller</guimenuitem
|
|
|
> permettent de copier ou déplacer des éléments graphiques entre les formulaires, et même entre des projets de base de données différents. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Maintenir la touche <keycap
|
|
|
>Ctrl</keycap
|
|
|
> enfoncée lors du clic sur un élément permet d'en sélectionner plusieurs. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Au lieu d'utiliser les commandes <guimenuitem
|
|
|
>Copier</guimenuitem
|
|
|
> et <guimenuitem
|
|
|
>Coller</guimenuitem
|
|
|
> pour dupliquer un élément à l'intérieur du même formulaire, vous pouvez maintenir la touche <keycap
|
|
|
>Ctrl</keycap
|
|
|
> enfoncée pendant que vous déplacez un élément. Après que la touche <keycap
|
|
|
>Ctrl</keycap
|
|
|
> est relâché, l'élément concerné ne sera pas déplacé mais copié au nouvel emplacement. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
</note>
|
|
|
</sect2>
|
|
|
|
|
|
<sect2 id="assigning-data-sources">
|
|
|
<title
|
|
|
>Assigner des sources de données</title>
|
|
|
<para
|
|
|
>Les <glossterm linkend="gloss-form-field"
|
|
|
>champs</glossterm
|
|
|
> que vous insérez n'ont pas encore de <emphasis
|
|
|
>source de données</emphasis
|
|
|
> assignées, donc sont incapables d'afficher des informations venant de la base de données. Pour assigner une source de données, utilisez l'onglet <guilabel
|
|
|
>Source de données</guilabel
|
|
|
> du <interface
|
|
|
>panneau de propriétés</interface
|
|
|
>. </para>
|
|
|
<para
|
|
|
>La première étape est de préciser la <glossterm linkend="gloss-form-data-source"
|
|
|
>source de données du formulaire</glossterm
|
|
|
>, c'est-à-dire l'endroit d'où les données affichées vont être cherchées. Comme expliqué ci-dessus, vous allez utiliser la table <literal
|
|
|
>personnes</literal
|
|
|
> comme <glossterm linkend="gloss-form-data-source"
|
|
|
>source de données</glossterm
|
|
|
> pour votre nouveau formulaire. </para>
|
|
|
<procedure>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez sur la surface du formulaire, puisque vous allez modifier ses propriétés.</para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Allez dans l'onglet <guilabel
|
|
|
>Source de données</guilabel
|
|
|
> et saisissez le nom de la table <literal
|
|
|
>personnes</literal
|
|
|
> dans la liste déroulante <guilabel
|
|
|
>Source des données du formulaire</guilabel
|
|
|
>. Vous pouvez aussi choisir son nom dans la liste déroulante. </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
|
|
|
>Vous avez choisi la <glossterm linkend="gloss-form-data-source"
|
|
|
>source de données du formulaire</glossterm
|
|
|
>. Maintenant vous devez précisez la source des données des éléments. </para>
|
|
|
<procedure>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez sur la première zone de texte en haut du formulaire.</para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Dans l'onglet <guilabel
|
|
|
>Source de données</guilabel
|
|
|
> du panneau de propriétés, saisissez le nom du champ <varname
|
|
|
>prenom</varname
|
|
|
> dans la liste déroulante <emphasis
|
|
|
>Champ source :</emphasis
|
|
|
>. Vous pouvez aussi choisir ce nom dans la liste déroulante. </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
|
|
|
>Cliquez sur la zone de texte en dessous et saisissez <varname
|
|
|
>nom</varname
|
|
|
> comme source de données.</para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Saisissez les sources de données des <glossterm linkend="gloss-form-field"
|
|
|
>zones</glossterm
|
|
|
> de texte <varname
|
|
|
>rue</varname
|
|
|
>, <varname
|
|
|
>numero</varname
|
|
|
> et <varname
|
|
|
>ville</varname
|
|
|
> de la même manière. </para>
|
|
|
</step>
|
|
|
</procedure>
|
|
|
<para
|
|
|
>Vous pouvez maintenant enregistrer l'organisation du formulaire (ce n'est pas obligatoire pour le tester). Pour l'enregistrer, cliquez sur le bouton <guilabel
|
|
|
>Enregistrer les modifications de l'objet</guilabel
|
|
|
> ou utilisez la commande du menu <menuchoice
|
|
|
><shortcut
|
|
|
><keycombo action="simul"
|
|
|
><keycap
|
|
|
>Ctrl</keycap
|
|
|
><keycap
|
|
|
>S</keycap
|
|
|
></keycombo
|
|
|
></shortcut
|
|
|
> <guimenu
|
|
|
>Fichier</guimenu
|
|
|
> <guimenuitem
|
|
|
>Enregistrer</guimenuitem
|
|
|
></menuchoice
|
|
|
>. Lors de l'enregistrement, on va vous demander le nom du formulaire. Saisissez <literal
|
|
|
>Personnes</literal
|
|
|
> comme légende et cliquez sur le bouton <guibutton
|
|
|
>OK</guibutton
|
|
|
>. Le nom du formulaire est alors rempli automatiquement. </para>
|
|
|
<para
|
|
|
>C'est le bon moment pour tester votre formulaire. Cliquez sur le bouton de la barre d'outils <guibutton
|
|
|
>Passer en mode données</guibutton
|
|
|
>. À moins que vous ayez fait une erreur, vous devriez voir les <glossterm linkend="gloss-form-field"
|
|
|
>champs du formulaire</glossterm
|
|
|
> remplis de données provenant de la table <literal
|
|
|
>personne</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
|
|
|
>Si vous voulez supprimer le lien entre une <glossterm linkend="gloss-form-data-source"
|
|
|
>source de données</glossterm
|
|
|
> et un élément, vous pouvez utiliser le bouton <guibutton
|
|
|
>Effacer la source de données de l'élément</guibutton
|
|
|
> près de la liste déroulante <guilabel
|
|
|
>Source de données de l'élément</guilabel
|
|
|
>. De la même manière, vous pouvez utiliser le bouton <guibutton
|
|
|
>Effacer la source de données du formulaire </guibutton
|
|
|
> près de la liste déroulante <guilabel
|
|
|
>Source de données du formulaire</guilabel
|
|
|
>. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Utilisez le bouton <guibutton
|
|
|
>Aller à la source de données du formulaire</guibutton
|
|
|
> pour sélectionner la table ou requête correspondante dans le <interface
|
|
|
>Navigateur de projet</interface
|
|
|
>, afin de pouvoir rapidement ouvrir la table ou la requête étant la <glossterm linkend="gloss-form-data-source"
|
|
|
>source de données</glossterm
|
|
|
> du formulaire. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
<!-- TODO: mention about creating Auto Fields by using drag & drop -->
|
|
|
</note>
|
|
|
</sect2>
|
|
|
|
|
|
<sect2 id="inserting-text-labels">
|
|
|
<title
|
|
|
>Insérer des légendes</title>
|
|
|
<para
|
|
|
>Pour faciliter l'identification de chaque champ par l'utilisateur du formulaire, on peut ajouter à ces champs des étiquettes avec un texte approprié. Pour créer des étiquettes, on utilise l'élément <literal
|
|
|
>Étiquette</literal
|
|
|
>. </para>
|
|
|
<para
|
|
|
>Insérez trois étiquettes dans le formulaire, les plaçant à gauche des champs (ou à droite si votre système d'exploitation utilise un arrangement de droite à gauche). Lors de l'insertion d'une étiquette, un curseur apparaît à l'endroit où vous pouvez saisir le texte voulu. Saisissez successivement : <literal
|
|
|
>Prénom</literal
|
|
|
>, <literal
|
|
|
>Nom</literal
|
|
|
> et <literal
|
|
|
>Rue</literal
|
|
|
>. Insérez de plus une autre étiquette en haut du formulaire affichant le nom du formulaire, c'est-à-dire <literal
|
|
|
>Personnes</literal
|
|
|
>. Agrandissez cette étiquette, ainsi que la taille de la police utilisée grâce à la commande du menu <menuchoice
|
|
|
><guimenu
|
|
|
>Format</guimenu
|
|
|
><guimenuitem
|
|
|
>Police...</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
|
|
|
>Actions</title>
|
|
|
<para
|
|
|
>Une <literal
|
|
|
>Action</literal
|
|
|
> est une activité dans l'application, à la disposition de l'utilisateur. Elle peut être exécutée automatiquement, en réagissant à certains événements (&pex; à l'ouverture d'un formulaire). </para>
|
|
|
|
|
|
<sect3 id="assigning-actions-to-form-buttons">
|
|
|
<title
|
|
|
>Assigner des actions à des boutons du formulaire</title>
|
|
|
<para
|
|
|
>De nombreuses actions peuvent être assignées aux boutons d'un formulaire. Les actions ainsi assignées sont lancées après que le bouton soit cliqué. </para>
|
|
|
<para
|
|
|
>Pour assigner une action :</para>
|
|
|
<procedure>
|
|
|
<step>
|
|
|
<para
|
|
|
>Passer le <interface
|
|
|
>mode conception</interface
|
|
|
> si ce n'est pas déjà fait.</para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Sélectionnez le bouton existant en cliquant dessus ou ajoutez un nouveau bouton dans le formulaire. Si vous avez inséré un nouveau bouton, saisissez son titre et appuyez sur la touche <keycombo action="press"
|
|
|
><keycap
|
|
|
>Entrée</keycap
|
|
|
></keycombo
|
|
|
>. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez sur le bouton avec le bouton <mousebutton
|
|
|
>droit</mousebutton
|
|
|
> de la souris afin d'afficher le menu contextuel. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Dans ce menu contextuel, sélectionnez la commande <guimenuitem
|
|
|
>Assigner une action...</guimenuitem
|
|
|
>. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Une fenêtre de dialogue <guilabel
|
|
|
>Assignation d'une action à un bouton de commande</guilabel
|
|
|
> apparaît alors, présentant une liste des actions disponibles. Une de ces actions est sélectionnée si il y a déjà une action assignée à cet élément. Sinon, c'est l'élément <guilabel
|
|
|
>Pas d'action</guilabel
|
|
|
> qui est sélectionné dans la liste déroulante <guilabel
|
|
|
>Type d'action :</guilabel
|
|
|
>. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Dans la liste déroulante <guilabel
|
|
|
>Type d'action :</guilabel
|
|
|
>, choisissez l'élément <guilabel
|
|
|
>Application</guilabel
|
|
|
>. Les actions disponibles agissant au niveau de l'application vont s'afficher. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Choisissez une de ces actions de cette liste (&pex; <guilabel
|
|
|
>Supprimer la ligne sélectionnée</guilabel
|
|
|
>).</para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez sur le bouton <guibutton
|
|
|
>OK</guibutton
|
|
|
> ou pressez la touche <keycombo action="press"
|
|
|
><keycap
|
|
|
>Entrée</keycap
|
|
|
></keycombo
|
|
|
> pour valider votre choix </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
|
|
|
>Après être passé dans le <emphasis
|
|
|
>mode données</emphasis
|
|
|
> du formulaire, vous pouvez essayer l'action que vous venez de définir. Par exemple, si vous avez assigné l'action <guilabel
|
|
|
>Supprimer la ligne</guilabel
|
|
|
>, en cliquant sur le bouton, la ligne sélectionnée va être supprimée, tout comme si vous aviez choisi la commande <menuchoice
|
|
|
><shortcut
|
|
|
><keycombo action="simul"
|
|
|
><keycap
|
|
|
>Contrôle</keycap
|
|
|
><keycap
|
|
|
>Suppr</keycap
|
|
|
></keycombo
|
|
|
></shortcut
|
|
|
><guimenu
|
|
|
>Édition</guimenu
|
|
|
><guimenuitem
|
|
|
>Supprimer la ligne</guimenuitem
|
|
|
></menuchoice
|
|
|
> dans le menu (selon vos préférences, &kexi; vous demandera peut-être de confirmer la suppression). </para>
|
|
|
|
|
|
<note>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Pour supprimer l'assignation d'une action, choisissez l'élément <guilabel
|
|
|
>Pas de type</guilabel
|
|
|
> de la liste déroulante <guilabel
|
|
|
>Type d'action</guilabel
|
|
|
>, dans la fenêtre de dialogue <guilabel
|
|
|
>Assignation d'une action à un bouton de commande</guilabel
|
|
|
>. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Les actions ne fonctionnent que lorsque le formulaire est en <emphasis
|
|
|
>mode données</emphasis
|
|
|
>. Certaines assignations d'actions ne sont pas pertinents. Par exemple, l'action <guimenuitem
|
|
|
>Police...</guimenuitem
|
|
|
> est disponible en mode donnés, mais seulement si vous avez un élément sélectionné dans le <interface
|
|
|
>mode conception</interface
|
|
|
>. Si vous changez les propriétés de la police, les changements sont appliqués au texte de cet élément sélectionné. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
</note>
|
|
|
</sect3>
|
|
|
</sect2>
|
|
|
|
|
|
<sect2 id="widget-layouts">
|
|
|
<title
|
|
|
>Mises en page des éléments</title>
|
|
|
<para
|
|
|
>Dans la plupart des cas, les éléments devront être arrangés et alignés. Ce n'est pas très pratique de les positionner et de les redimensionner à la main et de plus les positions et tailles ne sont pas ajustées lorsque l'utilisateur redimensionne le formulaire. En fait, la situation est encore pire puisque vous ne pouvez pas prévoir l'espace requis par un formulaire donnée, à cause des différentes tailles de polices et résolutions d'écrans possibles. </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
|
|
|
>Vous pouvez vous aider d'un outil spécial, appelé la disposition des éléments, pour automatiquement répartir les éléments du formulaire. La disposition des éléments est l'action de grouper deux éléments ou plus, afin que ceux-ci soient bien placés et aient la bonne taille. </para>
|
|
|
<para
|
|
|
>Utiliser la disposition des éléments dans un formulaire améliore l'alignement. De plus, l'espace est mieux utilisé. Les zones de texte sont plus proches les unes des autres et l'espacement est constant. </para>
|
|
|
<!--<screenshot>
|
|
|
<screeninfo
|
|
|
>Example form with layout used</screeninfo>
|
|
|
<mediaobject>
|
|
|
<imageobject>
|
|
|
<imagedata fileref="img/05_04_08_form_well_fit.png" format="PNG"/>
|
|
|
</imageobject>
|
|
|
<textobject>
|
|
|
<phrase
|
|
|
>Example form with layout used</phrase>
|
|
|
</textobject>
|
|
|
</mediaobject>
|
|
|
</screenshot
|
|
|
>-->
|
|
|
<para
|
|
|
>Il y a deux méthodes pour créer une disposition des éléments.</para>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Sélectionnez deux éléments ou plus, que vous voulez placer dans une disposition commune, puis choisissez un des types de dispositions à partir de l'élément <guilabel
|
|
|
>Éléments de disposition</guilabel
|
|
|
> du menu contextuel. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Cliquez sur un élément conteneur (ou la surface du formulaire elle-même), où des éléments ont été insérés et choisissez un des types de disposition à partir de l'élément de menu contextuel Éléments de disposition. Tous les éléments de ce conteneur ou de ce formulaire étant du même niveau vont être placés selon cette disposition. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
<para
|
|
|
>Pour chacune des deux méthodes, vous pouvez aussi utiliser <menuchoice
|
|
|
><guimenu
|
|
|
>Format</guimenu
|
|
|
><guimenuitem
|
|
|
>Éléments de disposition</guimenuitem
|
|
|
></menuchoice
|
|
|
> dans le menu. </para>
|
|
|
<!--<screenshot>
|
|
|
<screeninfo
|
|
|
>Selecting widgets that will be put into a layout</screeninfo>
|
|
|
<mediaobject>
|
|
|
<imageobject>
|
|
|
<imagedata fileref="img/05_04_08_form_layout_selecting.png" format="PNG"/>
|
|
|
</imageobject>
|
|
|
<textobject>
|
|
|
<phrase
|
|
|
>Selecting widgets that will be put into a layout</phrase>
|
|
|
</textobject>
|
|
|
</mediaobject>
|
|
|
</screenshot>
|
|
|
<screenshot>
|
|
|
<screeninfo
|
|
|
>Four widgets are selected</screeninfo>
|
|
|
<mediaobject>
|
|
|
<imageobject>
|
|
|
<imagedata fileref="img/05_04_08_form_layout_selected.png" format="PNG"/>
|
|
|
</imageobject>
|
|
|
<textobject>
|
|
|
<phrase
|
|
|
>Four widgets are selected</phrase>
|
|
|
</textobject>
|
|
|
</mediaobject>
|
|
|
</screenshot>
|
|
|
<screenshot>
|
|
|
<screeninfo
|
|
|
>Using the context menu for putting the widgets into a grid layout</screeninfo>
|
|
|
<mediaobject>
|
|
|
<imageobject>
|
|
|
<imagedata fileref="img/05_04_08_form_layout_popup.png" format="PNG"/>
|
|
|
</imageobject>
|
|
|
<textobject>
|
|
|
<phrase
|
|
|
>Using the context menu for putting the widgets into a grid layout</phrase>
|
|
|
</textobject>
|
|
|
</mediaobject>
|
|
|
</screenshot
|
|
|
>-->
|
|
|
<para
|
|
|
>La disposition des éléments est représentée dans le mode conception grâce à une boîte bleue, verte ou rouge tracée en ligne brisée. Cette ligne n'apparaît que dans le mode conception du formulaire. </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
|
|
|
>En plus du type Grille, il y a d'autres type de dispositions d'éléments.</para>
|
|
|
<variablelist>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
>verticale</term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Disposition verticale des éléments</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
|
|
|
>horizontale</term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Disposition horizontale des éléments</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
|
|
|
>Ressorts dans les dispositions d'éléments</title>
|
|
|
<para
|
|
|
>Un <emphasis
|
|
|
>ressort</emphasis
|
|
|
> est un élément spécial, invisible, permettant d'ajuster le positionnement et la taille des éléments dans les dispositions. Un ressort s'étire ou se compresse vers le haut, le bas, la gauche ou la droite, donc il peut avoir la taille et la position désirée. </para>
|
|
|
<para
|
|
|
>Pour utiliser un ressort :</para>
|
|
|
<procedure>
|
|
|
<step>
|
|
|
<para
|
|
|
>Choisissez l'icône du ressort dans la barre d'outils <guilabel
|
|
|
>Éléments</guilabel
|
|
|
>. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Cliquez à l'endroit voulu du formulaire pour y insérer un ressort.</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
|
|
|
>Pour faire fonctionner vos ressorts, vous devez créer une disposition d'éléments globale, c'est-à-dire une disposition pour la formulaire lui-même. Les ressorts pourront alors se servir des bords du formulaire comme limite de leur 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
|
|
|
>Supprimer des dispositions d'éléments</title>
|
|
|
<para
|
|
|
>Pour supprimer une disposition d'éléments sans supprimer les éléments, suivez une des méthodes suivantes : </para>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Cliquez avec le bouton <mousebutton
|
|
|
>droit</mousebutton
|
|
|
> de la souris sur la bordure de la disposition et choisissez la commande <guimenuitem
|
|
|
>Casser la disposition</guimenuitem
|
|
|
> dans le menu contextuel. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Cliquez avec le bouton <mousebutton
|
|
|
>gauche</mousebutton
|
|
|
> de la souris sur la bordure de la disposition et choisissez la commande du menu <menuchoice
|
|
|
><guimenu
|
|
|
>Format</guimenu
|
|
|
><guimenuitem
|
|
|
>Casser la disposition</guimenuitem
|
|
|
></menuchoice
|
|
|
>. </para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
<note>
|
|
|
<para
|
|
|
>Supprimer une disposition d'éléments grâce à la commande <guimenuitem
|
|
|
>Casser la disposition</guimenuitem
|
|
|
> ne va pas supprimer les éléments contenus dans la disposition. Si vous voulez aussi supprimer les éléments, sélectionnez simplement la disposition en cliquant sur son contour et appuyez sur la touche <keycap
|
|
|
>Delete</keycap
|
|
|
> ou utilisez la commande du menu ou du menu contextuel <menuchoice
|
|
|
><guimenu
|
|
|
>Édition</guimenu
|
|
|
><guimenuitem
|
|
|
>Supprimer</guimenuitem
|
|
|
></menuchoice
|
|
|
>. </para>
|
|
|
</note>
|
|
|
</sect3>
|
|
|
|
|
|
<sect3 id="size-policies-for-widgets-within-a-layout">
|
|
|
<title
|
|
|
>Politiques de taille des éléments dans une disposition</title>
|
|
|
<para
|
|
|
>Au lieu de préciser une taille fixe pour vos éléments dans &kexi;, vous pouvez choisir parmi plusieurs politiques de tailles d'éléments. Une <emphasis
|
|
|
>politique de taille</emphasis
|
|
|
> est une manière flexible de contrôler comment un élément est étiré (ou compressé) en fonction des autres éléments avoisinants et de l'espace disponible sur le formulaire. </para>
|
|
|
<para
|
|
|
>Après avoir placé des éléments dans une <emphasis
|
|
|
>disposition</emphasis
|
|
|
>, chaque élément reçoit par défaut une politique de taille proportionnelle (<guilabel
|
|
|
>Adapté</guilabel
|
|
|
>). Ces éléments seront automatiquement redimensionnés avec les propriétés les plus adaptées, en fonction du type et de la taille de toute la disposition. Par exemple, trois boutons placés dans une disposition horizontale seront redimensionnés pour s'adapter à leur texte visible. </para>
|
|
|
<para
|
|
|
>Pour chaque élément inséré dans le formulaire, les préférences pour la politique de taille sont disponibles dans l'<interface
|
|
|
>Éditeur de propriété</interface
|
|
|
>. Les possibilités sont présentées dans un groupe de propriétés appelées <guilabel
|
|
|
>Politique de tailles</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
|
|
|
>Ce groupe de propriétés contient :</para>
|
|
|
<variablelist>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Type de taille horizontale</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>définit la taille horizontale de l'élément,</para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Type de taille verticale</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>définit la taille verticale de l'élement,</para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Étirement horizontal</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>définit la force de l'action du <guilabel
|
|
|
>Type de taille horizontale</guilabel
|
|
|
> </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Étirement vertical</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>définit la force de l'action du <guilabel
|
|
|
>Type de taille verticale</guilabel
|
|
|
> </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
</variablelist>
|
|
|
|
|
|
<sect4>
|
|
|
<title
|
|
|
>Valeurs des politiques de taille</title>
|
|
|
<para
|
|
|
>Dans la liste déroulante des propriétés <guilabel
|
|
|
>Type de taille horizontale</guilabel
|
|
|
> et <guilabel
|
|
|
>Type de taille verticale</guilabel
|
|
|
>, visibles dans l'<interface
|
|
|
>Éditeur de propriétés</interface
|
|
|
>, les valeurs disponibles sont les suivantes : </para>
|
|
|
<variablelist>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Fixée</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Cette valeur signifie que l'élément ne peut pas être automatiquement redimensionné, il doit maintenir tout le temps la taille constante définit au moment de la conception (largeur et hauteur), </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Minimum</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>cette valeur signifie que la taille initiale de l'objet est fixée au minimum permis, c'est suffisant et il n'y a pas besoin d'étirer l'élément, mais l'élément sera étiré si nécessaire. Ce type de politique peut être utilisé pour forcer l'élément à être étiré sur toute la largeur ou hauteur, surtout si vous avez choisi une valeur d'étirement plus grande que 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
|
|
|
>cette valeur signifie que la taille originale de l'élément est fixée au maximum permis et peut être diminuée si d'autres éléments ont besoin de plus d'espace, sans compromettre l'utilisation et la lisibilité de l'élément. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Préférée</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>cette valeur signifie que la taille originale de l'élément est la meilleure et la préférée ; l'élément peut cependant être étiré ou compressé et il va rester lisible, </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
|
|
|
>Expansion</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>cette valeur signifie que la taille originale de l'élément est raisonnable mais l'élément peut aussi être compressé, il peut de même être étiré pour prendre autant de place que possible, </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Expansion minimale</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>cette valeur signifie que la taille initiale de l'élément est permise, il peut aussi être étiré pour prendre autant de place que possible, </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><guilabel
|
|
|
>Ignorée</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>cette valeur signifie que la taille originale de l'élément est ignorée, l'élément peut être étiré pour prendre autant de place que possible mais les autres éléments ne le permettent normalement pas </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
</variablelist>
|
|
|
<para
|
|
|
>Des types d'éléments différents ont des politiques de tailles par défaut différentes ; par exemple, les boutons ont une politique de taille <guilabel
|
|
|
>Minimum</guilabel
|
|
|
> par défaut (dans les deux directions), alors que les zones de texte ont une politique de taille <guilabel
|
|
|
>Fixée</guilabel
|
|
|
> par défaut. </para>
|
|
|
<para
|
|
|
>Les politiques de tailles les plus fréquemment utilisées sont <guilabel
|
|
|
>Préférée</guilabel
|
|
|
>, <guilabel
|
|
|
>Minimum</guilabel
|
|
|
> et <guilabel
|
|
|
>Maximum</guilabel
|
|
|
> </para>
|
|
|
</sect4>
|
|
|
|
|
|
<sect4>
|
|
|
<title
|
|
|
>Étirement vertical et horizontal</title>
|
|
|
<para
|
|
|
>Les propriétés d'<guilabel
|
|
|
>Étirement vertical</guilabel
|
|
|
> et d'<guilabel
|
|
|
>Étirement vertical</guilabel
|
|
|
> acceptent des valeurs supérieures ou égales à 0. ces propriétés permettent d'ajuster précisément le comportement des politiques de taille. Ces propriétés sont à 0 par défaut. Une autre valeur de ces étirements signifie que cet élément sera étiré plus que les éléments ayant une valeur plus faible. </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
|
|
|
>Choisir manuellement la taille et la position des éléments</title>
|
|
|
<para
|
|
|
>SI votre formulaire n'a pas de disposition principale permettant de positionner et redimensionner automatiquement vos éléments, vous voudrez probablement modifier la position et la taille des éléments pour que le formulaire paraisse plus net et soit plus facile à utiliser. Le concepteur de formulaire de &kexi; simplifie ce travail grâce aux commandes suivantes : </para>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Ajuster la taille des différents éléments. Les commandes sont disponibles dans le sous-menu <menuchoice
|
|
|
><guimenu
|
|
|
>Format</guimenu
|
|
|
><guisubmenu
|
|
|
>Ajuster la taille des éléments</guisubmenu
|
|
|
></menuchoice
|
|
|
> de la barre des menus et dans le sous-menu <menuchoice
|
|
|
><guisubmenu
|
|
|
>Ajuster la taille des éléments</guisubmenu
|
|
|
></menuchoice
|
|
|
> du menu contextuel. Il y a aussi un bouton <guibutton
|
|
|
>Ajuster la taille des éléments</guibutton
|
|
|
> disponible dans la barre d'outils. </para>
|
|
|
<variablelist>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aofit.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Adapter </guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La taille des éléments sélectionnés va être modifiée afin que chaque élément soit redimensionné à la taille adaptée par rapport à son contenu ; par exemple, la taille d'une zone de texte va être modifiée pour correspondre au texte. La position des éléments ne sera pas modifiée. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aogrid.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Sur la grille</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La taille des éléments sélectionnés va être modifiée afin que les coins de chaque élément soit placés sur les points de la grille du formulaire (ou du conteneur). La position des éléments peut être légèrement modifiée. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aoshortest.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Pour le plus petit</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La taille des éléments sélectionnés va être modifiée pour que chacun ait la même hauteur que le plus petit. La position des éléments ne sera pas modifiée. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aotallest.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Pour le plus grand</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La taille des éléments sélectionnés va être modifiée pour que chacun ait la même hauteur que le plus grand. La position des éléments ne sera pas modifiée. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aonarrowest.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Pour le plus étroit</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La taille des éléments sélectionnés va être modifiée pour que chacun ait la même largeur que le moins large. La position des éléments ne sera pas modifiée. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aowidest.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Pour le plus large</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>La taille des éléments sélectionnés va être modifiée pour que chacun ait la même largeur que le plus large. La position des éléments ne sera pas modifiée. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
</variablelist>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Aligner la position des différents éléments. Les commandes sont disponibles dans le sous-menu <menuchoice
|
|
|
><guimenu
|
|
|
>Format</guimenu
|
|
|
><guisubmenu
|
|
|
>Aligner la position des éléments</guisubmenu
|
|
|
></menuchoice
|
|
|
> de la barre des menus et dans le sous-menu <menuchoice
|
|
|
><guisubmenu
|
|
|
>Aligner la position des éléments</guisubmenu
|
|
|
></menuchoice
|
|
|
> du menu contextuel. Il y a aussi un bouton <guibutton
|
|
|
>Aligner la position des éléments</guibutton
|
|
|
> disponible dans la barre d'outils. </para>
|
|
|
<variablelist>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aoleft.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Vers la gauche</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Les éléments sélectionnés vont être déplacés jusqu'à ce que leur arête gauche soit au niveau de celle de l'élément le plus à gauche. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aoright.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Vers la droite </guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Les éléments sélectionnés vont être déplacés jusqu'à ce que leur arête droite soit au niveau de celle de l'élément le plus à droite. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aotop.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Vers le haut</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Les éléments sélectionnés vont être déplacés jusqu'à ce que leur arête supérieure soit au niveau de celle de l'élément le plus haut. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aobottom.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Vers le bas</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Les éléments sélectionnés vont être déplacés jusqu'à ce que leur arête inférieure soit au niveau de celle de l'élément le plus bas. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
<varlistentry>
|
|
|
<term
|
|
|
><!--<img src="img/aopos2grid.png" class="icon"
|
|
|
>--><guilabel
|
|
|
>Sur la grille</guilabel
|
|
|
></term>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Tous les éléments sélectionnés vont être déplacés afin que leurs coins supérieurs gauches soient positionnés sur un point de la grille. </para>
|
|
|
</listitem>
|
|
|
</varlistentry>
|
|
|
</variablelist>
|
|
|
<para
|
|
|
>Toutes les commandes ci-dessus laissent la taille des éléments intacte.</para>
|
|
|
</listitem>
|
|
|
</itemizedlist>
|
|
|
<para
|
|
|
>Il y a encore d'autres commandes disponibles :<guimenuitem
|
|
|
>Amener l'élément au premier plan</guimenuitem
|
|
|
> (c'est-à-dire au-dessus de tous les autres éléments) et <guimenuitem
|
|
|
>Envoyer l'élément en arrière</guimenuitem
|
|
|
> (c'est-à-dire en-dessous de tous les autres éléments). Ces deux commandes sont rarement utilisées, car ce n'est pas fréquent de placer un élément au sommet d'un autre (à part quand un élément conteneur contient d'autres éléments). Notez aussi que cliquer sur un élément avec la souris suffit à l'amener au premier plan. </para>
|
|
|
</sect2>
|
|
|
|
|
|
<sect2 id="setting-the-tab-order">
|
|
|
<title
|
|
|
>Choisir l'ordre de tabulation</title>
|
|
|
<para
|
|
|
>L'activation d'un élément détermine si cet élément est accessible par le clavier. Elle concerne les éléments d'un formulaire en mode données. Il ne peut y avoir qu'un élément de formulaire activé à la fois. L'utilisation la plus fréquente de l'activation est l'entrée de texte (lorsque qu'un champ de texte est actif). Un bouton peut aussi s'en servir – lorsqu'il est activé, il est possible de le <quote
|
|
|
>presser</quote
|
|
|
> en utilisant la touche <keycombo action="press"
|
|
|
><keycap
|
|
|
>Entrée</keycap
|
|
|
></keycombo
|
|
|
> ou la touche <keycombo action="press"
|
|
|
><keycap
|
|
|
>Espace</keycap
|
|
|
></keycombo
|
|
|
> au lieu d'un bouton de la souris. </para>
|
|
|
<para
|
|
|
>Il y a plusieurs méthodes pour rendre un élément actif (c'est-à-dire déplacer l'activation sur cet élément) : cliquer dessus avec la souris, faire tourner la molette de la souris dessus, ou utiliser la touche <keycombo action="press"
|
|
|
><keycap
|
|
|
>Tab</keycap
|
|
|
></keycombo
|
|
|
>. Les utilisateurs choisissent souvent cette dernière méthode car elle est rapide et pratique. La disponibilité des différentes méthodes d'activation est contrôlée par la propriété <guilabel
|
|
|
>Politique de focus</guilabel
|
|
|
> de chaque élément. </para>
|
|
|
<para
|
|
|
>Il y a une relation entre l'activation des éléments par la touche <keycombo action="press"
|
|
|
><keycap
|
|
|
>Tab</keycap
|
|
|
></keycombo
|
|
|
> et l'ordre de tabulation dans un formulaire. Après avoir pressé la touche <keycombo action="press"
|
|
|
><keycap
|
|
|
>Tab</keycap
|
|
|
></keycombo
|
|
|
>, l'élément suivant est activé, donc le formulaire doit savoir quel est l'ordre de tabulation. </para>
|
|
|
<para
|
|
|
>Pour modifier l'ordre de tabulation pour un élément du formulaire :</para>
|
|
|
<procedure>
|
|
|
<step>
|
|
|
<para
|
|
|
>Passez votre formulaire en mode conception.</para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Choisissez la commande <menuchoice
|
|
|
><guimenu
|
|
|
>Édition</guimenu
|
|
|
><guimenuitem
|
|
|
>Modifier l'ordre de tabulation...</guimenuitem
|
|
|
></menuchoice
|
|
|
> dans le menu. Une fenêtre de dialogue <guilabel
|
|
|
>Modifier l'ordre de tabulation...</guilabel
|
|
|
> apparait alors, avec les réglages concernant ce formulaire. </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
|
|
|
>La fenêtre contient une liste comportant deux colonnes : la première affiche les noms des éléments, la seconde les types des éléments. Pour rendre l'identification des noms et des types plus facile pour l'utilisateur, des icônes adaptées aux types sont aussi affichées. La liste ne contient que les éléments dont la politique de focus autorise l'utilisation de la touche <keycap
|
|
|
>Tab</keycap
|
|
|
> pour les activer. Cette fenêtre vous permet de changer l'ordre de tabulation ou de choisir l'ordre automatique. </para>
|
|
|
</step>
|
|
|
<step>
|
|
|
<para
|
|
|
>Pour changer l'ordre de tabulation, vous pouvez :</para>
|
|
|
<itemizedlist>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Cliquer sur le nom de l'élément et le déplacer où vous voulez (plus haut ou plus bas) grâce à la souris. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Cliquer sur le nom de l'élément dans la liste et utiliser les boutons <guibutton
|
|
|
>Monter d'un niveau</guibutton
|
|
|
> et <guibutton
|
|
|
>Descendre d'un niveau</guibutton
|
|
|
> pour le déplacer à la position voulue. </para>
|
|
|
</listitem>
|
|
|
<listitem>
|
|
|
<para
|
|
|
>Sélectionnez la case à cocher <guilabel
|
|
|
>Gérer automatiquement l'ordre de tabulation</guilabel
|
|
|
> pour permettre de fixer automatiquement l'ordre de tabulation. Une fois cette option choisie, tous les changements effectués manuellement sont ignorés – &kexi; va gérer l'ordre de tabulation tout seul. L'ordre automatique signifie que l'élément en haut à gauche sera activé le premier (ou en haut à droite si votre système d'exploitation utilise une disposition de droite à gauche), et l'ordre continue ensuite de gauche à droite (respectivement de droite à gauche) et de haut en bas. </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
|
|
|
>Cliquez sur le bouton <guibutton
|
|
|
>OK</guibutton
|
|
|
> pour accepter les changement ou sur le bouton <guibutton
|
|
|
>Annuler</guibutton
|
|
|
> pour annuler les changements. </para>
|
|
|
</step>
|
|
|
</procedure>
|
|
|
</sect2>
|
|
|
</sect1>
|
