Broadcasters and Observers

There may be times when you want several elements to respond to events or changes of state easily. To do this, we can use broadcasters.

Command Attribute Forwarding

We've already seen that elements such as buttons can be hooked up to commands. In addition, if you place the disabled attribute on the command element, any elements hooked up to it will also become disabled automatically. This is a useful way to simplify the amount of code you need to write. The technique also works for other attributes as well. For instance, if you place a label attribute on a command element, any buttons attached to the command will share the same label.

var el = env.locale; Example 1 : Source View

<command id="my_command" label="Open"/>
<button command="my_command"/>
<checkbox label="Open in a new window" command="my_command"/>

In this example, the button does not have a label attribute, however it is attached to a command that does. The button will share the label with the command. The checkbox already has a label, however, it will be overridden by the command's label. The result is that both the button and the checkbox will have the same label 'Open'.

If you were to modify the command's label attribute, the label on the button and checkbox will adjust accordingly. We saw something like this in a previous section where the disabled attribute was adjusted once and propagated to other elements.

This attribute forwarding is quite useful for a number of purposes. For instance, let's say that we want the Back action in a browser to be disabled. We would need to disable the Back command on the menu, the Back button on the toolbar, the keyboard shortcut (Alt+Left for example) and any Back commands on popup menus. Although we could write a script to do this, it is quite tedious. It also has the disadvantage that we would need to know all of the places where a Back action could be. If someone added a new Back button using an extension, it wouldn't be handled. It is convenient to simply disable the Back action and have all the elements that issue the Back action disable themselves. We can use the attribute forwarding of commands to accomplish this.

Broadcasters

There is a similar element called a broadcaster. Broadcasters support attribute forwarding in the same way that commands do. They work the same as commands except that a command is used for actions, while a broadcaster is instead used for holding state information. For example, a command would be used for an action such as Back, Cut or Delete. A broadcaster would be used to hold, for instance, a flag to indicate whether the user was online or not. In the former case, menu items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete. In the latter case, various user interface elements might need to update when the user switches from offline mode to online mode.

The simplest broadcaster is shown below. You should always use an id attribute so that it can be referred to by other elements.

<broadcasterset>
  <broadcaster id="isOffline" label="Offline"/>
</broadcasterset>

Any elements that are watching the broadcaster will be modified automatically whenever the broadcaster has its label attribute changed. This results in these elements having a new label. Like other non-displayed elements, the broadcasterset element serves as a placeholder for broadcasters. You should declare all your broadcasters inside a broadcasterset element so that they are all kept together.

Making elements observers

Elements that are watching the broadcaster are called observers because they observe the state of the broadcaster. To make an element an observer, add an observes attribute to it. This is analogous to using the command attribute when attaching an element to a command element. For example, to make a button an observer of the broadcaster above:

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

The observes attribute has been placed on the button and its value has been set to the value of the id on the broadcaster to observe. Here the button will observe the broadcaster which has the id isOffline, which is the one defined earlier. If the value of the label attribute on the broadcaster changes, the observers will update the values of their label attributes also.

We could continue with additional elements. As many elements as you want can observe a single broadcaster. You can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places. You should only use broadcasters when you need multiple elements that observe an attribute. Below, some additional observers are defined:

<broadcaster id="offline_command" label="Offline" 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"/>

In this example, both the label and the accesskey will be forwarded from the broadcaster to the key, menu item and the toolbar button. The key won't use any of the received attributes for anything, but it will be disabled when the broadcaster is disabled.

You can use a broadcaster to observe any attribute that you wish. The observers will grab all the values of any attributes from the broadcasters whenever they change. Whenever the value of any of the attributes on the broadcaster changes, the observers are all notified and they update their own attributes to match. Attributes of the observers that the broadcaster doesn't have itself are not modified. The only attributes that are not updated are the id and persist attributes; these attributes are never shared. You can also use your own custom attributes if you wish.

Broadcasters aren't used frequently as commands can generally handle most uses. One thing to point out is that there really is no difference between the command element and the broadcaster element. They both do the same thing. The difference is more semantic. Use commands for actions and use broadcasters for state. In fact, any element can act as broadcaster, as long as you observe it using the observes attribute.

The Observes Element

There is also a way to be more specific about which attribute of the broadcaster to observe. This involves an observes element. Like its attribute counterpart, it allows you to define an element to be an observer. The observes element should be placed as a child of the element that is to be the observer. An example is shown below:

var el = env.locale; Example 2 : Source View

<broadcasterset>
  <broadcaster id="isOffline" label="Offline" accesskey="f"/>
</broadcasterset>
<button id="offline_button">
  <observes element="isOffline" attribute="label"/>
</button>

Two attributes have been added to the observes element. The first, element, specifies the id of the broadcaster to observe. The second, attribute, specifies the attribute to observe. The result here is that the button will receive its label from the broadcaster, and when the label is changed, the label on the button is changed. The observes element itself does not change but the element it is inside changes, which in this case is a button. Notice that the accesskey is not forwarded to the button, since it is not being obseved. If you wanted it to be, another observes element would need to be added. If you don't use any observes elements, and instead use the observes attribute directly on the button, all attributes will be observed.

Broadcast event

There is an additional event handler that we can place on the observes element which is onbroadcast. The event is called whenever the observer notices a change to the attributes of the broadcaster that it is watching. An example is shown below.

var el = env.locale; Example 3 : Source View

<broadcasterset>
  <broadcaster id="colorChanger" style="color: black"/>
</broadcasterset>
<button label="Test">
  <observes element="colorChanger" attribute="style" onbroadcast="alert('Color changed');"/>
</button>
<button label="Observer"
  oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');"
/>

Two buttons have been created, one labeled Test and the other labeled Observer. If you click on the Test button, nothing special happens. However, if you click on the Observer button, two things happen. First, the button changes to have red text and, second, an alert box appears with the message 'Color changed'.

What happens is the oncommand handler on the second button is called when the user presses on it. The script here gets a reference to the broadcaster and changes the style of it to have a color that is red. The broadcaster is not affected by the style change because it doesn't display on the screen. However, the first button has an observer which notices the change in style. The element and the attribute on the observes tag detect the style change. The style is applied to the first button automatically.

Next, because the broadcast occured, the event handler onbroadcast is called. This results in an alert message appearing. Note that the broadcast only occurs if the attributes on the broadcaster element are changed. Changing the style of the buttons directly will not cause the broadcast to occur so the alert box will not appear.

If you tried duplicating the code for the first button several times, you would end up with a series of alert boxes appearing, one for each button. This is because each button is an observer and will be notified when the style changes.

Next, we'll look at using the Document Object Model with XUL elements.