2.3 Ajouter des libéllés et des images

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Cette section décrit la façon d'ajouter des libellés et des images dans une fenêtre. En complément, nous verront comment inclure des élements dans des groupes.

Éléments de texte

Vous ne pouvez pas écrire du texte directement dans un fichier XUL sans le placer entre des balises, et espérer qu'il s'affiche. Vous avez deux éléments XUL à votre disposition pour cela.

Élément label

La façon la plus basique pour inclure du texte dans une fenêtre est d'utiliser l'élément label. Il sert à placer un libellé à côté d'un contrôle, tel qu'un bouton. Voici un exemple :

Exemple 2.3.1 : Source Voir

<label value="ceci est du texte"/>

L'attribut value sert à spécifier le texte à afficher. Le texte ne sera pas coupé, et donc apparaîtra sur une seule ligne. Il s'agit de la syntaxe la plus courante pour des libellés.

Si le texte doit être coupé, vous pouvez placer son contenu à l'intérieur de balises ouvrantes et fermantes comme dans l'exemple suivant :

<label>Ceci est un texte plus long qui peut être coupé sur plusieurs lignes.<label>

Comme en HTML, les césures de ligne et espaces supplémentaires sont réduits à un simple espace. Plus tard, nous verrons comment imposer la largeur des éléments pour que la césure se voit plus facilement.

Attribut control

Vous pouvez utiliser l'attribut control pour définir quel contrôle est associé au libellé. Lorsque l'utilisateur clique sur le libellé associé, le contrôle obtient le focus. Cette association est également importante pour l'accessibilité, permettant aux lecteurs vocaux de lire le libellé du contrôle que l'utilisateur a tabulé. Définissez la valeur de l'attribut control avec l'id de l'élément obtiendra le focus.

Exemple 2.3.2 : Source Voir

<label value="Cliquez ici" control="open-button" />
<button id="open-button" label="Ouvrir"/>

Dans l'exemple du dessus, en cliquant sur le libellé, le focus sera mis sur le bouton.

Élément description

Pour du texte descriptif non associé avec un contrôle particulier, vous pouvez utiliser l'élément description. Cet élément est utile pour du texte informatif placé en haut d'une boîte de dialogue ou d'un groupe de contrôles par exemple. Comme pour l'élément label, vous pouvez soit utiliser l'attribut value pour une seule ligne de texte, soit placer le contenu du texte dans des balises ouvrantes et fermantes description pour des blocs de texte plus long. L'usage veut que la syntaxe avec attribut serve pour les libellés et que celle avec le contenu de texte serve pour des descriptions.

Exemple 2.3.3 : Source Voir

<description>
  Cette longue section de texte est affichée.
</description>

Intrinsèquement, les deux éléments label et description sont les mêmes. Les éléments label sont généralement utilisés pour des libellés, tels que ceux des champs de saisie. L'élément description est généralement employé pour d'autres textes descriptifs telle qu'une information placée en haut d'une boîte de dialogue.

Les images

Comme en HTML, XUL a un élement pour afficher des images à l'intérieur d'une fenêtre. Cet élement est nommé naturellement image. Notez que le nom de la balise est différent de celle en HTML (image au lieu de img). Vous pouvez utiliser l'attribut src pour indiquer l'URL de l'image. L'exemple suivant le montre :

<image src="images/banner.jpg" />

Bien que vous pouvez utiliser cette syntaxe, il est préférable d'utiliser une feuille de styles pour spécifier une URL. Une section ultérieure vous décrirera comment utiliser des feuilles de styles, mais l'exemple ci-dessous vous permettra d'appréhender le sujet. Vous pouvez utiliser le style CSS list-style-image pour définir l'URL de l'image. Voici des exemples :

XUL :
<image id="image1"/>
<image id="search"/>

Feuille CSS :
#image1 {
   list-style-image : url(chrome://findfile/skin/banner.jpg);
}
#search {
   list-style-image: url(chrome://findfile/skin/images/search.jpg);
}

Ces images proviennent du répertoire chrome, dans le thème du paquetage findfile. Comme les images varient selon le thème graphique, vous devez normalement mettre les images dans le répertoire skin.

---

Dans la section suivante, nous apprendrons comment ajouter des contrôles de saisie à une fenêtre.