7.2 Modification d'une interface XUL

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Le DOM fournit de nombreuses fonctions pour modifier un document.

Création de nouveaux éléments

Vous pouvez créer de nouveaux éléments en utilisant la fonction createElement() du document. Elle ne prend qu'un argument, le nom de la balise de l'élément à créer. Vous pouvez ensuite lui affecter des attributs en utilisant la fonction setAttribute() et ajouter cet élément au document XUL grâce à la fonction appendChild(). L'exemple suivant ajoute 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);
}
</script>

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

• Le script récupère d'abord avec getElementById() une référence à la boîte qui est le container dans lequel le nouveau bouton sera ajouté.
• La fonction createElement crée un nouveau bouton.
• Nous assignons un libellé Un bouton à ce bouton avec la fonction setAttribute.
• La fonction appendChild de la boîte est appelée pour lui ajouter le bouton.

La fonction createElement() va créer l'élément type par défaut du document. Pour des documents XUL, il sera généralement question de création d'éléments XUL. Pour un document HTML, un élément HTML sera créé, et donc, il aura les fonctionnalités et les fonctions d'un élément HTML. La fonction createElementNS() peut être utilisée pour créer des éléments dans un espace de nommage différent.

La fonction appendChild() est utilisée pour ajouter un élément en tant qu'enfant d'un autre élément. Il existe trois fonctions associées qui sont les fonctions insertBefore(), replaceChild() et removeChild(). Leur syntaxe est la suivante :

parent.appendChild(elementEnfant);
parent.insertBefore(elementEnfant, referenceChild);
parent.replaceChild(nouvelElementEnfant, ancienElementEnfant);
parent.removeChild(elementEnfant);

Le nom de ces fonctions suffit à comprendre ce qu'elles font.

• La fonction insertBefore() insère un nouveau n½ud enfant avant un autre existant. Elle est utilisée pour réaliser une insertion à l'intérieur d'une série d'enfants plutôt qu'à la fin comme le fait la fonction appendChild.
• La fonction replaceChild() efface un enfant existant et en ajoute un nouveau à sa place, à la même position.
• Pour finir, la fonction removeChild() supprime un n½ud.

Notez que pour toutes ces fonctions, l'enfant de référence ou l'enfant à supprimer doit exister sinon une erreur sera générée.

Il est fréquent que vous vouliez effacer un élément existant et l'ajouter autre part. Dans ce cas, vous pouvez simplement ajouter l'élément sans l'effacer préalablement. Puisqu'un n½ud ne peut exister qu'à un seul emplacement à la fois, le mécanisme d'insertion se chargera toujours d'effacer d'abord le n½ud de son emplacement initial. C'est une méthode pratique pour déplacer un n½ud dans un document.

Copie de n½uds

Toutefois, pour copier un n½ud, vous devrez appeler la fonction cloneNode(). Cette fonction réalise une copie d'un n½ud existant, ce qui vous permet ensuite de l'ajouter autre part. Le n½ud original restera à sa place. Elle prend un argument booléen indiquant si elle doit copier tous les n½uds enfants ou non. Si la valeur est false, seul le n½ud est copié, comme s'il n'avait jamais eu aucun enfant. Si la valeur est true, tous les enfants sont également copiés. La copie est faite récursivement, donc pour de larges structures d'arbres, assurez-vous de vouloir réellement passer cette valeur true à la fonction cloneNode(). Voici un exemple :

Exemple 7.2.2 : Source Voir

<hbox height="400">
  <button label="Copier"
          oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/>

  <vbox>
    <button label="Premier"/>
    <button label="Deuxième"/>
  </vbox>
</hbox>

Lorsque le bouton Copier est appuyé :

• nous récupérons l'élément voisin suivant de même niveau que le bouton, qui est dans ce cas l'élément vbox.
• une copie de cet élément est effectuée en utilisant la fonction cloneNode()
• et la copie est ajoutée à la fin grâce à appendChild().

Vous noterez que certains éléments, tels que listbox et menulist disposent de fonctions de modification spécialisées supplémentaires que vous devriez utiliser dès que vous le pouvez. Elles seront décrites dans une prochaine section.

Manipulation d'éléments basiques

Les éléments principaux de XUL, tels que les boutons, les cases à cocher et les boutons radios, peuvent être manipulés grâce à de nombreuses propriétés de script. Les propriétés disponibles sont listées sur la page référence des éléments car celles disponibles varient selon les éléments. Les propriétés communes que vous pouvez manipuler sont label, value, checked et disabled. Elles affectent ou effacent les attributs correspondants si nécessaire.

Exemples de propriétés label et value

Voici un exemple simple de changement d'un libellé de bouton :

Exemple 7.2.3 : Source Voir

<button label="Bonjour" oncommand="this.label = 'Aurevoir';"/>

Lorsque le bouton est pressé, son libellé est modifié. Cette technique fonctionne pour une large majorité d'éléments ayant des libellés (label). Pour les champs de saisie, vous pouvez faire quelque chose de similaire pour sa propriété value.

Exemple 7.2.4 : Source Voir

<button label="Ajouter" oncommand="this.nextSibling.value += '1';"/>
<textbox/>

Cet exemple ajoute un 1 dans le champ de saisie chaque fois que le bouton est pressé. La propriété nextSibling permet d'atteindre l'élément suivant le bouton (this), le champ de saisie textbox. L'opérateur += sert à ajouter un 1 à la fin du texte de la valeur courante. Notez que vous pouvez encore ajouter du texte dans ce champ de saisie. Vous pouvez récupérer le libellé courant ou la valeur en utilisant ses propriétés, comme dans l'exemple suivant :

Exemple 7.2.5 : Source Voir

<button label="Bonjour" oncommand="alert(this.label);"/>

Changement d'état d'une case à cocher

Les cases à cocher disposent d'une propriété checked qui sert à les cocher ou à les décocher. Il est facile de comprendre son usage. Dans l'exemple à suivre, nous inversons l'état de la propriété checked chaque fois que le bouton est pressé. Tandis que les libellés et les valeurs sont des chaînes de caractères, vous noterez que la propriété checked est un booléen qui prend une valeur true ou false.

Exemple 7.2.6 : Source Voir

<button label="Changer" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/>
<checkbox label="Cochez pour les messages"/>

Les boutons radios peuvent également être sélectionnés en utilisant des propriétés, toutefois, un seul est sélectionné à la fois dans un groupe, tous les autres étant décochés. Vous n'avez pas à réaliser cette gestion manuellement. La propriété selectedIndex du radiogroup peut être utilisée pour cela. La propriété selectedIndex sert à récupérer l'index du bouton radio sélectionné dans le groupe. Il sert également à le modifier.

Modification de l'état activé ou désactivé d'un élément

Il est habituel de désactiver des champs particuliers qui ne servent pas dans une situation donnée. Par exemple, dans la boîte de dialogue des préférences, vous avez le choix entre plusieurs possibilités, mais seul un choix permet un paramétrage supplémentaire. Voici un exemple de création de ce type d'interface :

Exemple 7.2.7 : Source Voir

<script>
function updateState() {
  var name = document.getElementById("name");
  var sindex = document.getElementById("group").selectedIndex;
  if (sindex == 0) name.disabled = true;
  else name.disabled = false;
}
</script>

<radiogroup id="group" onselect="updateState();">
  <radio label="Nom aléatoire" selected="true"/>
  <hbox>
    <radio label="Spécifiez un nom :"/>
    <textbox id="name" value="Alain" disabled="true"/>
  </hbox>
</radiogroup>

Dans cet exemple, une fonction updateState() est appelée chaque fois qu'un événement de sélection est déclenché depuis le groupe de boutons radios. Elle est exécutée lorsque qu'un bouton radio est sélectionné. La fonction retournera l'indice de l'élément radio actuellement sélectionné en utilisant la propriété selectedIndex. Vous noterez que bien qu'un bouton radio se trouve à l'intérieur d'une boîte hbox, il reste attaché au groupe radio. Si le premier bouton radio est sélectionné (index de 0), le champ de saisie est désactivé en définissant sa propriété disabled à true. Si le second bouton radio est sélectionné, le champ de saisie est activé.

---

La section suivante fournira plus de détails sur la manipulation des groupes de boutons radios et la manipulation des listes.