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
attribute on the disabled
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 command
attribute on a label
element, any buttons attached to the command will share the same label.command
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
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'.label
If you were to modify the command's
attribute, the label on the button and checkbox will adjust accordingly. We saw something like this in a previous section where the label
attribute was adjusted once and propagated to other elements.disabled
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
. 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 broadcaster
would be used for an action such as Back, Cut or Delete. A command
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.broadcaster
The simplest broadcaster is shown below. You should always use an
attribute so that it can be referred to by other elements.id
<broadcasterset> <broadcaster id="isOffline" label="Offline"/> </broadcasterset>
Any elements that are watching the broadcaster will be modified automatically whenever the broadcaster has its
attribute changed. This results in these elements having a new label. Like other non-displayed elements, the label
element serves as a placeholder for broadcasters. You should declare all your broadcasters inside a broadcasterset
element so that they are all kept together.broadcasterset
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
attribute to it. This is analogous to using the observes
attribute when attaching an element to a command
element. For example, to make a button an observer of the broadcaster above:command
<button id="offline_button" observes="isOffline"/>
The
attribute has been placed on the button and its value has been set to the value of the observes
on the broadcaster to observe. Here the button will observe the broadcaster which has the id id
isOffline
, which is the one defined earlier. If the value of the
attribute on the broadcaster changes, the observers will update the values of their label
attributes also.label
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
and the label
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.accesskey
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
and id
attributes; these attributes are never shared. You can also use your own custom attributes if you wish.persist
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
element and the command
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 broadcaster
attribute.observes
The Observes Element
There is also a way to be more specific about which attribute of the broadcaster to observe. This involves an
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:observes
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
element. The first, observes
, specifies the id of the broadcaster to observe. The second, element
, 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 attribute
element itself does not change but the element it is inside changes, which in this case is a observes
. Notice that the button
is not forwarded to the button, since it is not being obseved. If you wanted it to be, another accesskey
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.observes
Broadcast event
There is an additional event handler that we can place on the
element which is observes
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
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 oncommand
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
and the element
on the attribute
tag detect the style change. The style is applied to the first button automatically.observes
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
element are changed. Changing the style of the buttons directly will not cause the broadcast to occur so the alert box will not appear.broadcaster
If you tried duplicating the code for the first
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.button
Next, we'll look at using the Document Object Model with XUL elements.