XML Reference Guide

Mar 14, 2003

␡

⎙ Print

< Back Page 103 of 278 Next >

If you were involved in browser scripting in the 1990's, you may remember a great deal of aggravation when it came to making things work across browsers and across versions. Part of the problem was in detemrining how to get the browser to react to an event such as a mouse click.

So it just makes sense that some people (in this case, the W3C's XML Working Group) would take it upon themselves to develop a standard way to trigger events. The result is the XML Events specification.

Reading the XML Events specification without having seen it in action can be daunting, with its talk of listeners and observers and bubbling and so on, but it all comes down to this:

To specify an event, you need to know three things:

What the event is (mouseclick, document load, etc.)

Where it's going (the element actually clicked, the document loaded, etc.)

What element takes action (the page to reload, etc.)

What should happpen when the event takes place (the script to run, page to load, etc.)

Let's look at it this way: consider a simple HTML link:

<a href="index.html" id="theLink">This is <b>definitely</b> a link.</a>

As you know, when you click the text in this link, say, the word "definitely", the browser goes to the address specified by the href attribute. We can also look at it this way:

We have an event, the mouse click. It happens to a target, the b element, and when it's seen by the observer, the a element, a handler, the instruction to go to the new address, gets executed.

In the case of HTML, certain events are a given: unless you do something to change it, when you click a link the browser goes to a new URL. The purpose of XML Events is to genericise these associations so any type of element can correspond to any kind of event.

To do that, we can create a listener which associates the event, observer, target, and handler.

For example, we can duplicate our HTML link:

<ev:listener ev:event="activate" ev:observer="theLink" ev:handler="#gotonewURL" />

In this case, #gotonewURL represents a script that extracts the proper URL and sends the browser to it. (XML Events doesn't specify how handlers are ultimately specified or found.)

Notice that I didn't specify the target. If I'd specified theLink as the target, the user would have to click on the a element for the listener to activate. If the user clicked on the word "definitely", the target would be the b element, and not the a element, so it wouldn't work.

On the other hand, if I don't specify a target here, that means that any element within the a element can be the target, and the observer will still see it. How is that possible?

XML Events have two phases: capture, and bubbling. It works like this: When an event happens to an element, it doesn't actually happen to that element immediately. Instead, it starts at the top level -- the document itself -- and works its way down the tree to the target (see, it does matter!) in the capture phase. After it reaches the target, it works its way back up the tree in the bubbling phase. During this process, any observer registered to see the event can act on it.

I could go on for pages about phases and propogation and determining observers and so on, but the important thing here is that you understand that you have a great deal of control over how events are perceived and targeted, so I encourage you to check out the resources for more information.

Before I go, though, let's see some examples, as implemented in the X-Smiles browser as part of its XForms implementation. Consider this listener:

<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    xmlns:xforms="http://www.w3.org/2002/xforms">

      <head>

             <xforms:model>
                  <xforms:instance xmlns="" id="instance1">
                        <my/>
                  </xforms:instance>

                  <xforms:message id="theMessage" 
                         level="ephemeral">Hi there!</xforms:message>

                  <ev:listener observer="theTrigger" 
                         event="click" handler="#theMessage" />
            </xforms:model>
      </head>
<body>

<xforms:trigger id="theTrigger">
  <xforms:label>Click Me!</xforms:label>
</xforms:trigger>

</body>
</html>

Let's take this one step at a time. First, we have a listener that defines the theTrigger element as the observer, looking for a click event, and when it finds it, it should execute the theMessage handler, popping up a message. When the user clicks the button, it "sees" the event and executes the handler, popping up the message.

Now, that's not to say this is the only way we can set up an event. In fact, we don't actually need the listener element at all. You could instead just place the event on the handler:

<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xforms="http://www.w3.org/2002/xforms">

      <head>

             <xforms:model>
                  <xforms:instance xmlns="" id="instance1">
                        <my/>
                  </xforms:instance>

                  <xforms:message id="theMessage" 
                         level="ephemeral" ev:observer="theTrigger" 
                         ev:event="click">Hi there!</xforms:message>

            </xforms:model>
      </head>
<body>

<xforms:trigger id="theTrigger">
  <xforms:label>Click Me!</xforms:label>
</xforms:trigger>

</body>
</html>

Or you can eliminate the middleman entirely and place the event within the observer:

<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xforms="http://www.w3.org/2002/xforms">

      <head>

             <xforms:model>
                  <xforms:instance xmlns="" id="instance1">
                        <my/>
                  </xforms:instance>

                  

            </xforms:model>
      </head>
<body>

<xforms:trigger id="theTrigger">
  <xforms:label>Click Me!</xforms:label>
  <xforms:message level="ephemeral" 
       ev:event="click">Hi there!</xforms:message>
</xforms:trigger>

</body>
</html>

In this case, the parent of the element on which the event is specified becomes the observer. We've specified the event on the message element, so the trigger is the observer, just as before.

OK, so that's the basics. As I said, there's a good deal more, if you need to delve into it, but that should get you started.

< Back Page 103 of 278 Next >

🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Email Address