6.7 Broadcasters et Observateurs

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.

Parfois, vous voulez que plusieurs éléments répondent à des événements ou changent d'état aisément. Pour cela, nous pouvons utiliser les « broadcasters » (diffuseurs).

Commandes de transmission d'attributs

Nous avons vu précédemment que les éléments tels que les boutons peuvent être ancrés à des commandes. De plus, si vous placez l'attribut disabled sur l'élément command, tous les éléments ancrés sur celui-ci seront eux aussi désactivés automatiquement. C'est une façon utile de diminuer la taille du code nécessaire. Cette technique fonctionne aussi pour les autres attributs. Par exemple, si vous placez un attribut label sur un élément command, chaque bouton attaché à la commande partagera ce libellé.

Exemple 6.7.1 : Source Voir

<command id="ma_commande" label="Ouvrir"/>

<button command="ma_commande"/>
<checkbox label="Ouvrir une nouvelle fenêtre" command="ma_commande"/>

Dans cet exemple, le bouton n'a pas d'attribut label, néanmoins il est attaché à une commande qui en possède un. Le bouton va donc le partager avec la commande. La case à cocher a déjà un libellé, néanmoins, il va être surchargé par celui de la commande. Le résultat est que le bouton et la case à cocher auront le même libellé Ouvrir.

Si vous modifiez l'attribut label de la commande, les libellés du bouton et de la case à cocher changeront eux aussi. Nous avons vu une application similaire dans une section précédente où l'attribut disabled était défini puis propagé aux autres éléments.

Cette transmission d'attribut est relativement utile pour plusieurs raisons. Par exemple, disons que nous voulons désactiver l'action « Page précédente » dans un navigateur. Nous aurions besoin de désactiver cette action dans le menu, dans la barre des tâches, le raccourci clavier (Alt+Gauche par ex.) et chaque commande « Page précédente » des menus déroulants. Écrire un script pour le faire n'est pas très simple. Le désavantage est de devoir prévoir tous les endroits où pourraient se trouver les boutons « Page précédente ». Si quelqu'un a ajouté un nouveau bouton « Page précédente » en utilisant une extension, il ne serait pas pris en compte. Il est plus pratique de désactiver simplement l'action « Page précédente » et que tous les éléments utilisant cette action se désactivent eux-mêmes. Nous pouvons utiliser la transmission d'attributs des commandes pour accomplir cela.

Broadcasters

Il y existe un élément similaire appelé broadcaster. Les broadcasters supportent la transmission d'attributs de la même manière que les commandes. Ils fonctionnent de la même manière excepté le fait qu'une commande est utilisée pour les actions, alors qu'un broadcaster est utilisé pour contenir l'information d'un état. Par exemple, un élément command serait utilisé pour une action comme « Page précédente », « Couper » ou « Supprimer ». Un broadcaster serait utilisé pour contenir, par exemple, un drapeau indiquant si l'utilisateur est en ligne ou non. Dans le premier cas, les éléments du menu et de la barre des tâches nécessiteraient d'être désactivés lorsqu'il n'y a pas de page de retour, ou aucun texte à couper, à effacer. Dans le second cas, plusieurs éléments de l'interface auraient besoin d'être mis à jour lorsque l'utilisateur passerait du mode en ligne au mode hors ligne.

Le broadcaster le plus simple est défini ci-dessous. Vous devriez toujours utiliser un attribut id afin qu'il puisse être référencé à partir d'autres éléments.

<broadcasterset>
  <broadcaster id="isOffline" label="Hors ligne"/>
</broadcasterset>

Tous les éléments qui « observent » le broadcaster seront modifiés automatiquement chaque fois que l'attribut label du broadcaster change. Ces éléments auront comme résultat un nouveau libellé. Tout comme d'autres éléments non affichés, l'élément broadcasterset est un conteneur pour les broadcasters. Vous devez déclarer tous vos broadcasters dans un élément broadcasterset afin de les réunir.

Création d'éléments observateurs

Les éléments qui observent le broadcaster sont appelés observateurs car ils « observent » l'état du broadcaster. Pour qu'un élément devienne un observateur, ajoutez lui un attribut observes. Il est analogue à l'attribut command utilisé pour attacher un élément à un élément command. Par exemple, pour qu'un bouton devienne un observateur du broadcaster décrit ci-dessus :

<button id="offline_button" observes="isOffline"/>

L'attribut observes a été placé sur le bouton et sa valeur a été affectée à la valeur de l'id du broadcaster à observer. Ici, le bouton va observer le broadcaster avec l'id isOffline qui a été défini un peu plus haut dans le code. Si la valeur de l'attribut label du broadcaster change, les observateurs mettront à jour leur valeur de l'attribut label.

Nous pourrions continuer avec d'autres éléments. Autant d'éléments que vous voulez peuvent observer le même broadcaster. Vous pouvez aussi n'avoir qu'un seul élément observateur, mais cela ne servirait pas à grand chose puisque la raison principale d'utiliser les broadcasters est d'avoir des attributs transmis à de multiples endroits. Vous ne devriez utiliser les broadcasters que lorsque vous avez besoin que plusieurs éléments aient à observer un attribut. D'autres observateurs sont décrits ci-dessous :

<broadcaster id="offline_command" label="Hors ligne" accesskey="f"/>

<keyset>
  <key id="goonline_key" observes="offline_command" modifiers="accel" key="O"/>
<keyset>
<menuitem id="offline_menuitem" observes="offline_command"/>
<toolbarbutton id="offline_toolbarbutton" observes="offline_command"/>

Dans cet exemple, label et l'accesskey seront transmis par le broadcaster au raccourci clavier, à l'item de menu et au bouton de la barre d'outils. Le raccourci clavier n'utilisera aucun des attributs reçus, mais il sera désactivé lorsque le broadcaster le sera.

Vous pouvez utiliser un broadcaster pour observer n'importe quel attribut désiré. Les observateurs récupèreront les valeurs de chaque attribut, via les broadcasters, dès qu'ils changeront. Si jamais la valeur d'un seul attribut change, les observateurs seront avisés et ajusteront leurs propres attributs en conséquence. Les attributs des observateurs que le broadcaster ne possède pas lui-même ne sont pas modifiés. Les seuls attributs qui ne sont pas modifiés sont les attributs id et persist ; ces attributs ne sont jamais partagés. Vous pouvez également utiliser vos propres attributs si vous le désirez.

Les broadcasters ne sont pas fréquemment utilisés, car les commandes peuvent en général convenir à la majorité des usages. Une chose à préciser est qu'il n'y a pas vraiment de différence entre l'élément command et l'élément broadcaster. Ils font tous les deux la même chose. La différence est plutôt sémantique. Utilisez les commandes pour les actions et utilisez les broadcasters pour les états. En fait, chaque élément peut agir comme un broadcaster, tant que vous l'observez en utilisant l'attribut observes.

L'élément Observes

Il existe un moyen de spécifier plus précisemment les attributs du broadcaster à observer. Cela implique un élément observes. Tout comme son attribut l'indique, il vous permet d'indiquer à un élément qu'il est un observateur. L'élément observes doit être placé en tant qu'enfant de l'élément qui doit être l'observateur. Voici un exemple :

Exemple 6.7.2 : Source Voir

<broadcasterset>
  <broadcaster id="isOffline" label="Hors ligne" accesskey="f"/>
</broadcasterset>

<button id="offline_button">
  <observes element="isOffline" attribute="label"/>
</button>

Deux attributs ont été ajoutés à l'élément observes. Le premier, element, spécifie l'identifiant du broadcaster à observer. Le second, attribute, spécifie l'attribut à observer. Le résultat est que le bouton recevra son libellé du broadcaster, et quand l'attribut label sera modifié, le libellé du bouton sera changé. L'élément observes ne change pas, contrairement à l'élément qui le contient, qui est dans ce cas un button. Notez que l'attribut accesskey n'est pas transmis au bouton, puisque il n'est pas observé. Si vous voulez que ce soit le cas, un autre élément observes devra être ajouté. Si vous n'utilisez aucun élément observes, et qu'à la place vous utilisez l'attribut observes directement sur le bouton, tous les attributs seront observés.

Événement broadcast

Il existe un gestionnaire d'événements supplémentaire, onbroadcast, que nous pouvons placer sur l'élément observes. L'événement est appelé dès que l'observateur détecte un changement dans l'attribut du broadcaster qu'il observe. Un exemple est décrit ci-dessous :

Exemple 6.7.3 : Source Voir

<broadcasterset>
  <broadcaster id="colorChanger" style="color: black"/>
</broadcasterset>

<button label="Test">
  <observes element="colorChanger" attribute="style" onbroadcast="alert('La couleur a changé');"/>
</button>

<button label="Observateur"
  oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');"
/>

Deux boutons ont été créés, un nommé Test et l'autre Observateur. Si vous cliquez sur le bouton « Test », rien ne se produit. En revanche, si vous cliquez sur le bouton « Observateur », deux choses surviennent. Premièrement, le texte du bouton devient rouge, deuxièmement, un message d'alerte apparaît avec le message La couleur a changé.

Voilà ce qui se passe : le gestionnaire oncommand du second bouton est appelé lorsque l'utilisateur appuie dessus. Le script dispose ici d'une référence au broadcaster et change le style de celui-ci afin qu'il ait une couleur (color) rouge. Le broadcaster n'est pas affecté par le changement de style car il n'est pas affiché à l'écran. Néanmoins, le premier bouton a un observateur qui tient compte du changement de style. Les attributs element et attribute sur la balise observes détecte le changement de style. Le style est appliqué automatiquement au premier bouton.

Ensuite, puisque la transmission se fait, le gestionnaire d'événement onbroadcast est appelé. Il en résulte l'affichage d'un message d'alerte. Notez que la transmission ne se fait que si les attributs de l'élément broadcaster sont modifiés. Changer le style du bouton directement ne déclenchera aucune diffusion d'événement et le message d'alerte ne s'affichera pas.

Si vous essayez de dupliquer le code du premier bouton (button) plusieurs fois, vous verrez une série de messages d'alerte, un pour chaque bouton, car chaque bouton est un observateur et sera prévenu du changement de style.

---

Nous verrons dans la section suivante l'utilisation du Modèle Objet de Document (DOM) avec les éléments XUL.