Du code HTML dans XUL

Au prix d'une définition d'espace de nom supplémentaire, vous pouvez inclure du code HTML dans votre interface XUL:

xmlns:html="http://www.w3.org/1999/xhtml"

Cet attribut s'ajoute aux attributs de window, et vient donc à coté de l'espace de nom de XUL.

Le format global étant XML, les balises sans contenu sont terminées par "/>" comme en XHTML et non pas par ">" comme en HTML 4.
Les noms de balises et attributs doivent être entièrement en minuscules.

Comment utiliser HTML

Toutes les balises HTML peuvent être intégrées parmi les balises XUL, dès lors qu'elles sont préfixées par "html:", pour les marqueurs ouvrant et fermant.
Par exemple:

<box>
    <html:div>
        Mon texte
    </html:div>
</box>

Tandis que l'exemple suivant ne fonctionnerait pas:

<box>
    <div>
        Mon texte
    </div>
</box>

car la balise div ne fait par partie de l'espace de nom par défaut, celui de XUL.
Pas plus que cet autre exemple:

<box>
    <html:div>
        Mon texte
    </html:div>
       Autre texte
</box>

En effet, le second texte n'est pas placé dans une balise XUL ni HTML.

Exemple

Nous utilisons un champ d'entrée de texte et un bouton HTML. Lorsque l'utilisateur clique sur le bouton, le texte entré se trouve transféré à un composant XUL, en l'occurence un simple label.

Le code HTML:

<html:input id="hin" type="text" value="Taper un texte" />
<html:input type="button" value="Submit" onclick="pass();"/>

Un gestionnaire d'évènement onclick appelle une fonction JavaScript quand on clique sur le bouton.
Le code XUL:

<label id="xlab" value="Vide" />

La fonction JavaScript:

function pass()
{
	var source = document.getElementById("hin");
	var target = document.getElementById("xlab");
	target.value = source.value;
}

L'élément HTML est retrouvé par son ID, de même que l'élément XUL.

Démo: code.zip

Voir aussi

Canvas. Créer une surface de dessin.