Écrit par Neil Deakin.
Traduit par Laurent Jouanneau (10/03/2004).
Page originale :
http://www.xulplanet.com/tutorials/xultu/textimage.html
Cette section décrit la façon d'ajouter des libellés et des images dans une fenêtre.
Vous ne pouvez pas écrire du texte directement dans un fichier XUL sans les mettre entre des balises, et s'attendre à ce qu'il s'affiche.
La façon la plus basique pour inclure du texte dans une fenêtre
est d'utiliser l'élément description. Voici un exemple :
<description value="ceci est du texte"/>L'attribut value peut être utilisé
pour spécifier un texte que vous voulez afficher. Le texte ne sera
pas coupé, et donc apparaîtra sur une seule ligne. C'est adapté
pour de courtes sections de textes.
Pour les textes plus long, vous pouvez placer le contenu à l'intérieur
des balises description ouvrante et fermante.
Contrairement au texte spécifié dans l'attribut value, le texte
sera coupé en plusieurs lignes si nécessaire.
Comme en HTML, les sauts de lignes et les espaces en trop seront
regroupés en un seul espace. Plus tard nous allons voir comment
définir la taille des éléments, et donc nous pourrons voir
le découpage.
<description>
Cette longue section de texte est affiché
</description>Un second élément,
label,
peut être utilisé pour un usage similaire, à l'exception qu'il est
déstiné pour les libellés de contrôles, tels que les boutons ou les
champs de saisie de texte. Vous pouvez utiliser l'attribut
control pour indiquer à quel contrôle
il est associé. Quand l'utilisateur cliquera sur le libellé, le contrôle
aura le focus. Spécifiez la valeur de l'attribut
control avec l'
id de l'élement qui aura le focus.
<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.
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 puissiez utiliser cette syntaxe, il est préférable d'utiliser
une feuille de style pour spécifier une URL. Vous pouvez utiliser le style CSS
list-style-image pour cela. 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, du thème du package findfile. Parce que les images varient selon les thèmes, vous devriez 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.