xulfr.org

7.2 Document Object Model

Écrit par Neil Deakin. Traduit par Chaddaï Fouché (19/07/2004).
Page originale : http://www.xulplanet.com/tutorials/xultu/dom.html xulplanet.com

Le Document Object Model (DOM, modèle objet d'un document) peut être utilisé pour obtenir des informations à propos d'éléments XUL ou les modifier.

Modifier des éléments avec le DOM

Les éléments XUL supportent les propriétés et méthodes DOM qui vous permettront d'obtenir des informations sur eux et de modifier n'importe quel élément. Nous ne fournirons pas une description complète des fonctionnalités du DOM ici, mais nous donnerons quelques exemples.

L'attribut id peut être utilisé pour identifier des éléments. Nous avons ajouté l'attribut id à un certain nombre d'éléments de notre boîte de dialogue de recherche de fichier. Par exemple, nous pouvons récupérer par le script suivant l'état de la case à cocher pour rendre la recherche sensible à la casse : 

var state=document.getElementById('casecheck').checked;

La valeur casecheck correspond à l'attribut id de la case à cocher pour la sensibilité à la casse. Une fois que nous savons si elle est cochée ou non, nous pouvons utiliser cette indication pour effectuer la recherche. Nous pourrions procéder de façon similaire pour l'autre case à cocher, ou n'importe quel autre élément qui a un attribut id. Nous aurons besoin de récupérer le texte dans le champ de saisie par exemple.

Ça ne sert à rien d'afficher la barre de progression et l'arbre de données vide quand la boîte de dialogue pour la recherche de fichiers est affichée pour la première fois. Ceux-ci ont été ajoutés de façon à ce que nous puissions les voir. Retirons les maintenant, et affichons les lorsque le bouton Rechercher est pressé. Tout d'abord, nous devons les rendre invisible initialement. La propriété CSS display est utilisée pour contrôler si un élément est visible ou pas.

Nous allons modifier la barre de progression de façon à ce qu'elle soit cachée à l'origine. Nous allons aussi lui ajouter un attribut id pour nous permettre de nous y référer dans un script, pour la cacher ou l'afficher. Tant que nous y sommes, cachons aussi le séparateur et l'arbre des résultats puisque nous n'avons besoin d'eux qu'après avoir effectué une recherche. 

<tree id="results" style="display: none;" flex="1">
  .
  .
  .

<splitter id="splitbar" resizeafter="grow" style="display:none;"/>

<hbox>

  <progressmeter id="progmeter" value="50%"
    style="margin: 4px; display: none;"/>

Nous avons ajouté une propriété CSS display de valeur none. L'élément est ainsi caché lors de sa première apparition. Par défaut, la propriété display a une valeur qui provoque l'affichage de l'élément. La valeur exacte est différente pour chaque élément car ils ont chaucn leur propre façon de s'afficher. Voyez le fichier xul.css dans l'archive toolkit.jar dans le répertoire Chrome de Mozilla pour des détails à propos des styles par défaut de chaque élément XUL et le fichier html.css dans le répertoire res de Mozilla pour les styles par défaut des éléments HTML.

D'abord, ajoutons une fonction qui sera appelée quand le bouton Rechercher sera pressé. Nous mettrons les scripts dans un fichier séparé findfile.js. Dans la section précédente, nous avons ajouté l'élément script dans le fichier XUL. Si vous ne l'avez pas encore fait, faites le maintenant, comme ci-dessous. Nous ajouterons aussi un gestionnaire oncommand au bouton Rechercher. 

<script src="findfile.js"/>
  .
  .
  .
<button id="find-button" label="Find" default="true"
  oncommand="doFind();"/>

A présent, créez un autre fichier nommé findfile.js dans le même répertoire que findfile.xul. Nous ajouterons la fonction doFind() dans ce fichier. La balise script peut contenir du code directement à l'intérieur. Cependant, pour diverses raisons, notament pour des performances supérieures, vous devriez toujours mettre vos scripts dans des fichiers séparés, excepté pour les courts morceaux de code qui peuvent se trouver directement dans les gestionnaires d'évènement. 

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.setAttribute("style","margin: 4ex; display: -moz-xul-box;");
}

Cette fonction récupère d'abord une référence sur la barre de progression en utilisant son id, progmeter. La seconde ligne du corps de la fonction change la valeur de l'attribut style de la barre de progression de façon à avoir un display en -moz-xul-box, qui est la valeur de display pour les boîtes XUL et les éléments qui sont basés dessus. Notez que nous avons aussi dû ajouter margin pour éviter que cela ne soit effacé.

Finalement, ajoutons une boîte de dialogue qui affiche ce que nous sommes en train de rechercher. Evidemment nous n'en voudront pas dans la version finale, mais rajoutons la maintenant pour nous assurer que quelque chose se produise. 

function doFind()
{
  var meter=document.getElementById('progmeter');
  meter.setAttribute("style","display: inline;");
  var searchtext=document.getElementById('find-text').value;
  alert("Recherche de \""+searchtext+"\"");
}

Maintenant, avec cette boîte de dialogue ici, nous savons ce qui devrait se produire quand nous cliquons sur le bouton Rechercher. Nous pouvons ajouter du code pour obtenir aussi ce qui est sélectionné dans les listes déroulantes.

Créer de nouveaux éléments

Vous pouvez créer de nouveaux éléments en utilisant la fonction createElement du document. Elle prend un argument, le nom de la balise représentant l'élément à créer. Vous pouvez ensuite modifier des attributs de l'élément en utilisant la fonction setAttribute et l'ajouter au document XUL en utilisant la fonction appendChild. Par exemple, le code suivant va ajouter un bouton à une fenêtre XUL :

Exemple 7.2.1 : Source Voir 


<script>
function addButton()
{
  var aBox = document.getElementById("aBox");

  var button = document.createElement("button");
  button.setAttribute("label","Un bouton");
  aBox.appendChild(button);
  window.sizeToContent();
}
</script>

<box id="aBox">
  <button label="Ajouter" oncommand="addButton();"/>
</box>

Ce script commence par obtenir une référence sur la boîte (box), qui est celle à laquelle nous allons ajouter un nouveau bouton. La fonction createElement crée un nouveau bouton. Nous lui assignons le label (l'étiquette) Un bouton via la fonction setAttribute. La fonction appendChild de la boîte (box) est appelée pour ajouter le bouton à l'intérieur. Pour conclure, nous appelons la méthode sizeToContent de la fenêtre (window) qui ajuste alors sa taille pour contenir le nouveau bouton.

Pour une liste plus complète des fonctions disponibles pour les éléments XUL, reportez vous à la référence.

Dans la prochaine section, nous découvrirons comment rajouter des raccourcis clavier.