Ajout d'éléments HTML

Voici un exemple qui peut être ajouté à notre fenêtre de Recherche de fichiers :

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
   id="findfile-window"
   title="Recherche de fichiers"
   orient="horizontal"
   xmlns:html="https://www.w3.org/1999/xhtml"
   xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Ensuite, vous pouvez employer des balises HTML comme vous le feriez normalement, en gardant à l'esprit ceci :

• Vous devez ajouter un préfixe html: au début de chaque balise, en supposant que vous ayez déclaré l'espace de nommage HTML comme ci-dessus.
• Vous devez taper les balises en minuscules.
• Des guillemets doivent être placés autour de toutes les valeurs d'attributs.
• XML impose qu'une barre oblique (slash) termine chaque balise qui n'ont aucun contenu. Les exemples ci-dessous vont vous l'expliciter.

Utilisation d'éléments HTML

Vous pouvez utiliser n'importe quelle balise HTML bien que certaines comme head et body ne soient d'aucune utilité. Des exemples d'emploi des éléments HTML sont montrés ci-dessous :

<html:img src="banner.jpg"/>

<html:input type="checkbox" value="true"/>

<html:table>
  <html:tr>
    <html:td>
       Un tableau simple
    </html:td>
  </html:tr>
</html:table>

Ces exemples vont créer une image à partir du fichier 'banner.jpg', une case à cocher et un tableau avec une unique cellule. Vous devriez toujours employer des éléments XUL s'ils sont disponibles et vous ne devriez pas employer des tableaux pour la mise en page sous XUL (des éléments XUL permettent de le faire).

En XUL, vous pouvez ajouter des libellés avec l'élément description ou label. Vous devriez utiliser ces éléments dès que vous le pouvez. Vous pouvez également ajouter des libellés à des contrôles soit en utilisant la balise HTML label, soit en mettant simplement le texte dans un autre élément bloc HTML (tel que p ou div) comme dans l'exemple ci-dessous.

Exemple 1: Source Voir

<html:p>
  Rechercher :
  <html:input id="find-text"/>
  <button id="okbutton" label="OK"/>
</html:p>

Ce code va afficher le texte 'Rechercher :', suivi d'un champ de saisie de texte et d'un bouton « OK ». Notez que le bouton XUL peut apparaître dans un bloc de balise HTML, comme c'est le cas ici. Du texte ne sera affiché que s'il est placé à l'intérieur de balises HTML qui sont normalement employées pour afficher du texte (comme une balise p). Tout texte placé en dehors de balises ne sera pas affiché, sauf si l'élément XUL contenant le texte le permet (l'élément description par exemple).

Les exemples suivants vont vous aider.

Exemple d'éléments HTML

Les exemples suivants illustrent l'ajout de balises HTML dans une fenêtre. Dans chaque cas, l'élément window et d'autres informations basiques ont été retirés pour plus de clarté.

Une boîte de dialogue avec une case à cocher

Exemple 2: Source Voir

<html:p>
  Cliquez sur la boîte ci-dessous pour mémoriser cette décision.
  <html:p>
    <html:input id="rtd" type="checkbox"/>
    <html:label for="rtd">Mémoriser cette décision</html:label>
  </html:p>
</html:p>

Dans ce cas, une première balise p a été utilisée pour placer du texte et une autre a été utilisée pour séparer le texte en plusieurs lignes. (NdT : selon la norme XHTML, une balise p ne peut pas inclure une autre balise p, l'exemple est donc en principe erroné.)

Texte en dehors de blocs HTML

Exemple 3: Source Voir

<html:div>
   Voulez-vous sauvegarder les documents suivants ?
   <html:hr/>
</html:div>
Rapport de dépense 1 que j'ai fait l'été dernier
<button id="yes" label="Oui"/>
<button id="no" label="Non"/>

Comme vous pouvez le voir sur cette image, le texte placé à l'intérieur des balises div a été affiché mais l'autre texte ('Rapport de dépense 1' et 'que j'ai fait l'été dernier') ne l'a pas été. Ceci est dû au fait qu'il n'y a pas d'éléments HTML ou XUL entourant le texte à afficher et capables de le faire. Pour rendre ce texte apparent, vous devez le placer à l'intérieur de balises div, ou l'inclure dans une balise description.

Les éléments HTML invalides

<html:po>Cas 1</html:po>
<div>Cas 2</div>
<html:description value="Cas 3"/>

Aucun des trois cas ci-dessus ne s'affichera pour les raisons suivantes :

Cas 1 

po n'est pas une balise HTML valide et Mozilla n'a aucune idée de ce qu'il faut en faire.

Cas 2 

div est une balise valide mais seulement en HTML. Pour qu'elle fonctionne, vous devez ajouter le qualificateur 'html:'.

Cas 3 

un élément description est valide en XUL mais pas en HTML. Il ne devrait pas avoir de qualificateur 'html:'.

Dans la page suivante, nous apprendrons comment ajouter de l'espace entre les éléments.