Cet article traite de la manipulation d'interfaces en XUL, à l'aide du DOM et d'autres API. Il explique le concept desdocuments DOM, présente quelques exemples simples d'appels DOM utilisés pour effectuer des manipulations basiques sur un document, et ensuite la façon de travailler avec ducontenu XBL anonyme à l'aide de méthodes spécifiques à Mozilla.
Il est écrit pour des développeurs XUL débutants et de niveau moyen. Nous supposons que le lecteur a des connaissances de base à la fois en XUL et en JavaScript. Il peut également être intéressant de consulter quelques documents d'introduction relatifs au DOM, comme l'article À propos du Document Object Model ou la page d'introduction de la Référence du DOM Gecko.
Introduction
Comme vous le savez, XUL est un langage XML utilisé dans plusieurs applications basées sur Mozilla, comme Firefox et Thunderbird, pour décrire l'interface utilisateur. Dans les applications XUL, JavaScript définit le comportement, à l'aide des API DOM pour accéder au document XUL.
En quoi consistent ces API DOM ?
Ce sont les interfaces utilisées dans toute interaction entre un script et un document. Si vous avez écrit n'importe quel script interagissant avec un document XUL (ou HTML), vous avez déjà utilisé des appels DOM. La méthode DOM la plus connue est probablement document.getElementById(), qui renvoie un élément depuis son id. Vous avez peut-être utilisé d'autres appels, comme element.setAttribute(), ou, si vous avez écrit une extension, la méthode addEventListener(). Toutes celles-ci sont définies dans le DOM.
D'autres méthodes DOM permettent également de créer, déplacer ou supprimer des éléments d'un document. Celles-ci seront présentées dans une section ultérieure. Pour l'instant, préoccupons-nous de ce qu'est undocument .
Définition d'un document
Un document est une structure de données manipulée à l'aide des API DOM. Une structure logique de tout élément est un arbre, dont les nœuds sont les éléments, attributes, instructions de traitement, commentaires, etc. Utilisez l'outil Inspecteur DOM pour voir la représentation sous forme d'arbre de n'importe quel document. Todo: simple example of a XUL document and a tree
Vous pouvez penser à un document comme à une représentation en mémoire de HTML valide ou de XML bien formé (en ce compris du XUL).
Il est important de se souvenir de différentes pages Web (et même différentes instances de la même page Web) correspondent à différents documents. Chaque fenêtre XUL possède son propre document distinct, et il peut même y avoir un certain nombre de documents différents dans une même fenêtre, lorsqu'uil y a des élements <iframe>, <browser>, ou encore <tabbrowser>. Vous devez vous assurer de toujours manipuler le bon document. (Consultez Travailler avec des fenêtres dans le chrome pour en savoir plus.) Lorsque votre script est inclus à l'aide d'une balise <script>, la propriété document référence le document DOM dont le script fait partie.
Exemples : utilisation de méthodes DOM
Cette section présente l'utilisation des méthodes DOM appendChild(), createElement(), insertBefore(), et removeChild().
Suppression de tous les enfants d'un élément
Cet exemple supprime tous les enfants d'un élément dont l'id est "unCertainElement" du document courant, en appelant la méthode removeChild() pour supprimer le premier enfant et ce jusqu'à ce que plus aucun d'entre-eux ne reste.
Notez que hasChildNodes() et firstChild font également partie de l'API DOM.
var element = document.getElementById("unCertainElement");
while(element.hasChildNodes())
element.removeChild(element.firstChild);
Insertion d'éléments de menu dans un menu
Cet exemple ajoute deux nouveaux élements de menu à un <menupopup>, au début et à la fin de celui-ci. Il utilise la méthode document.createElementNS() pour créer les éléments, et insertBefore() avec appendChild() pour insérer les éléments créés dans le document.
Notes :
document.createElementNS()crée un élément, mais ne le place nulle part dans le document. Il faut utiliser d'autres méthodes DOM, commeappendChild()pour insérer l'élément nouvellement créé dans le document.appendChild()ajoute le nœud après tous les autres nœuds, tandis queinsertBefore()l'insère avant le nœud référencé dans son second paramètre.
function createMenuItem(aLabel) {
const XUL_NS = "https://www.mozilla.org/keymaster/gat...re.is.only.xul";
var item = document.createElementNS(XUL_NS, "menuitem"); // crée un nouvel élément de menu XUL
item.setAttribute("label", aLabel);
return item;
}
var popup = document.getElementById("myPopup"); // un élément <menupopup>
var first = createMenuItem("Premier choix");
var last = createMenuItem("Dernier choix");
popup.insertBefore(first, popup.firstChild);
popup.appendChild(last);
Il est également possible d'utiliser appendChild() et insertBefore() pour déplacer des éléments existants. Par exemple, vous pouvez déplacer l'élément nommé « First item » vers la fin du menu en ajoutant cette ligne à la fin du bout de code ci-dessus :
popup.appendChild(first);
Cette instruction supprimerait le nœud de sa position courante dans le document et le réinsèrerait à la fin du menu.
Contenu anonyme (XBL)
XBL est le langage utilisé dans Mozilla pour définir de nouveaux éléments d'interface. Ces outils définis en XBL peuvent choisir de définir un certain contenu qui sera inséré dans l'élément conteneur lorsque la liaison (binding) est attachée. Ce contenu, appelécontenu anonyme , n'est pas accessible à travers les méthodes DOM normales.
Il est nécessaire d'utiliser les méthodes de l'interface nsIDOMDocumentXBL à la place. Par exemple :
// récupère le premier enfant anonyme du nœud donné document.getAnonymousNodes(node)[0]; // renvoie une NodeList d'éléments anonymes dont l'attribut anonid vaut el1 document.getAnonymousElementByAttribute(node, "anonid", "el1");
Une fois que vous avez une référence à un nœud anonyme, vous pouvez utiliser les méthodes DOM normales pour naviguer et manipuler les autres nœuds de cette liaison XBL.