Bouton et JavaScript

Nous allons créer un exemple de bouton pour notre interface et lui assigner des gestionnaires d'évènements afin qu'il réponde aux actions de l'utilisateur.

La balise button

XUL dispose d'un composant pour dessiner un bouton, c'est la balise button. Et nous affichons un texte dans ce bouton comme nous l'avons déja vu, avec la balise description:

<button>
    <description value="Soumettre" />
</button>

Les principaux attributs de button

label: pour afficher un texte sur le bouton, on peut aussi utiliser simplement l'attribut label:

<button label="Soumettre" />

image: de même que l'on attribue un libellé, on peut assigner l'URL d'une image à afficher sur le bouton:

<button image="save.gif" />

type: par défault, si aucun type n'est spécifié, ce sera un bouton ordinaire. Mais il est possible de créer d'autres types, tels que checkbox pour ajouter une case à cocher ou radio pour ajouter un rond radio alternatif, et d'autres encore.

oncommand: C'est un gestionnaire d'évènement qui permet d'assigner l'action qui doit être effectuée lorsque l'on clique sur le bouton.

Utiliser JavaScript

On peut assigner une commande JavaScript à l'attribut onCommand:

onCommand="alert('clic');"

Noter bien qu'à l'intérieur de la chaîne assignée, on utilise des guillemets simples, puisque les guillemets double sont utilisés pour délimiter la chaîne.

On peut aussi utiliser une fonction JavaScript:

<window>
<script>
function clicking(txt)
{
   alert(txt)
}
</script>
<button onCommand="clicking('clic');" />
</window>

On a vu ainsi l'essentiel de ce qu'ik faut savoir pour pouvoir ajouter des boutons à notre interface graphique.

• Démo: code.zip