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
desactivado attribute on the
comando element, any elements hooked up to it will also become disabled automatically. This is 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
comando element, any buttons attached to the command will share the same label.
<command id="mi_comando" label="Abrir"/> <button command="mi_comando"/> <checkbox label="Abrir en una ventan nueva" command="mi_comando"/>
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
desactivado 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.
There is a similar element called a
emisor. 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
comando would be used for an action such as Back, Cut or Delete. A
emisor 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 UI 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
comando attribute when attaching an element to a
comando element. For example, to make a button an observer of the broadcaster above:
<button id="offline_button" observes="isOffline"/>
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
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
comando element and the
emisor 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
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:
<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,
elemento, specifies the id of the broadcaster to observe. The second,
atributo, 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 does not change but instead the element it is inside changes, which in this case is a
botón. 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.
El evento emisor
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.
<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
elemento and the
atributo 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
emisor 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
botón 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.
Seguimos con el uso del DOM con elementos XUL.