2.4 Les champs de saisie

Écrit par Neil Deakin. Traduit par Benoit Salandre (14/01/2004).
Page originale : http://www.xulplanet.com/tutorials/xultu/inputs.html

XUL possède des éléments qui sont similaires aux champs de formulaires du HTML.

Les champs de Saisie de Texte

Le HTML possède une balise input pouvant être utilisée comme champ de saisie de texte. XUL possède un élément similaire, textbox, utilisé comme champ de saisie de texte. Sans aucun attribut, l'élément textbox crée une boîte dans laquelle l'utilisateur peut entrer du texte. Les boîtes de texte acceptent plusieurs attributs similaires à la balise input de l'HTML. En voici quelques unes:

id: Un identifiant unique permettant d'identifier la boîte de texte.
class: La classe du style de la boîte de texte.
value: Si vous voulez donner une valeur par défaut à la boîte de texte, renseignez l'attribut value.
disabled: mettre la valeur true pour empêcher l'insertion de texte.
type: Vous pouvez renseigner cet attribut avec la valeur spéciale password pour créer une boîte de texte dans laquelle tout ce qui est saisi est caché. C'est utilisé habituellement pour les champs de saisie de mot de passe.
maxlength: Le nombre maximum de caractères que l'on peut saisir dans la boîte de texte.

Notez que, bien qu'en HTML différentes sortes de champs peuvent être créés avec l'élément input, il y a un élément différent pour chaque type de champs en XUL. L'exemple suivant montre quelques boîtes de texte :

Exemple 2.4.1 : Source Voir

<label control="some-text" value="Entrez du texte"/>
<textbox id="some-text"/>
<label control="some-password" value="Entrez un mot de passe"/>
<textbox id="some-password" type="password" maxlength="8"/>

Les exemples de boîtes de texte ci-dessus créeront des champs de saisie qui ne pourront être utilisés que pour saisir une seule ligne de texte. Le HTML possède aussi un élément textarea pour créer une zone de saisie plus grande. Dans XUL, vous pouvez utiliser l'élément textbox de la même façon -- deux éléments distincts ne sont pas nécessaires. Si vous mettez l'attribut multiline à la valeur true, le champ de saisie de texte affichera plusieurs lignes.

Par exemple :

Exemple 2.4.2 : Source Voir

<textbox multiline="true"
           value="Voici du texte qui pourrait s'étaler sur plusieurs lignes."/>

Comme avec la balise textarea du HTML, vous pouvez utiliser les attributs rows et cols pour déterminer la taille. Cela devrait ajuster le nombre de lignes et de colonnes de caractères à afficher.

Maintenant, ajoutons un champ de saisie de recherche à la boîte de dialogue de recherche de fichiers. Nous allons utiliser l'élément textbox.

<label value="Chercher :" control="find-text"/>
<textbox id="find-text"/>

<button id="find-button" label="Rechercher" default="true"/>

Ajoutez ces lignes avant les boutons que nous avons créés dans la dernière section. Si vous ouvrez cette fenêtre, vous verrez quelque chose comme ce qui est montré dans l'image ci-dessous.

Notez que l'étiquette et le champ de saisie de texte sont maintenant apparus dans la fenêtre. La boîte de texte est complètement fonctionnelle et vous pouvez tapez et sélectionner du texte dedans. Notez aussi que l'attribut control a été utilisé. Ainsi, la boîte de texte est sélectionnée lorsque l'on clique sur l' étiquette.

Les Cases à Cocher et les Boutons Radio

Deux éléments supplémentaires sont utilisés pour la création de cases à cocher et de boutons radio. Ce sont des variantes de boutons simples. La case à cocher est utilisée pour les options qui peuvent être activées ou désactivées. Les boutons radio peuvent être utilisés dans un but similaire quand il y a un ensemble de boutons où un seul d'entre eux peut-être sélectionné à la fois.

Vous pouvez employer la plupart des attributs des boutons avec les cases à cocher et les boutons radio. L'exemple ci-dessous montre des cases à cocher et boutons radio simples.

<checkbox id="case-sensitive" checked="true" label="Sensible à la casse"/>
<radio id="orange" label="Orange"/>
<radio id="violet" selected="true" label="Violet"/>

<radio id="yellow" label="Jaune"/>

La première ligne crée une simple case à cocher. Quand l'utilisateur clique sur la case à cocher, celle-ci bascule entre coché et décoché. L'attribut checked peut être utilisé pour indiquer l'état par défaut. Il vous faudra l'initialiser soit à true, soit à false. L'attribut label peut être utilisé pour ajouter une étiquette qui apparaitra à côté de la boîte à cocher. Pour les boutons radio, vous utiliserez l'attribut selected à la place de l'attribut checked. Initialisez le à true pour avoir un bouton radio sélectionné par défaut, ou ne le mettez pas pour les autres boutons radio.

Pour grouper des boutons radio, vous avez besoin d'utiliser l'élément radiogroup. Un seul bouton radio peut-être sélectionné dans un radiogroup. Cliquer sur l'un deux désélectionnera tous les autres du même groupe. C'est ce que démontre l'exemple suivant.

Exemple 2.4.3: Source Voir

<radiogroup>
  <radio id="orange" label="Orange"/>
  <radio id="violet" selected="true" label="Violet"/>
  <radio id="Jaune" label="Jaune"/>
</radiogroup>

Les cases à cocher et les boutons radios sont simplement des boutons spécialisés. Souvenez vous que les boutons sont fait d'une étiquette et d'une image. Une case à cocher est juste une étiquette avec une image représentant une coche. Vous pouvez aussi utiliser plusieurs des attributs des boutons :

label: L'étiquette de la case à cocher ou du bouton radio.
disabled: Mettez la valeur à true ou à false pour désactiver ou activer la case à cocher ou le bouton radio.
accesskey: La touche clavier pouvant être utilisée comme raccourci pour sélectionner l'élément. La lettre spécifiée est habituellement soulignée dans l'étiquette.

Dans la prochaine section, nous allons voir quelques éléments pour la création de boîtes de listes.

L'exemple de recherche de fichier jusqu'à maintenant : Source Voir