Reusable components are the foundation of
modular design in programming. Mozilla provides component design
capabilities through XBL and custom implementation.

In this article, I’ll create a custom, reusable
component bound to custom behaviors through XBL. Using the
techniques I describe, you can create custom components to use in
Mozilla-based browsers. (Note: The following code samples were tested in Firefox version 1.0.1.)

While the Web server enjoys its own level of
programmability, the Web front end is usually confined to the
limitations of the browser. Internet Explorer overcame this issue
by allowing the incorporation of ActiveX controls into Web pages
that can create interoperability between the various components
through the script. All of this was finally extended and
componentized with HyperText Components (HTCs).

IE’s capabilities are a result of bandage fixes
to meet market demands for functionality. Mozilla, on the other
hand, was designed to be an environment for a secure relationship
between HTML and dynamic behavior. This is apparent in Mozilla’s
implementation of XBL, which lets you group HTML elements into a
cohesive component that allows custom control creation.

A good example of a custom control is a
definition box on a Web page that highlights information through
the use of a floating DIV element “bound” to a custom element. The
definition data is then displayed in the DIV. This is a very useful
control because it increases the real estate of the Web page
without decreasing the aesthetics. It also binds the content of the
definition information to a particular area on the page such as an
image or a word.

Customarily, this is accomplished by handling
mouseover events for a
particular element. The event handler then sets the innerHTML of a DIV element
to the information provided and makes the element visible. The mouseout event is
responsible for hiding the DIV element after the mouse focus leaves
the element. Here’s a bit of simple code that accomplish this
task:

<script language=”JavaScript”>
function element_onmouseover(info) {
    var msg =
document.getElementById(“divMsg”);
    msg.innerHTML = info;
    msg.style.visibility = “visible”;
}
function element_onmouseout() {
    var msg =
document.getElementById(“divMsg”);
    msg.style.visibility = “hidden”;
}
</script>
<a href=”#” onmouseover=”element_onmouseover(‘After.’)”
 onmouseout=”element_onmouseout()”>
<div style=”visibility:hidden;”
id=”divMsg”>Before.</div>

With XBL, you create content groups and then
the group can be referenced as an individual control. Using the
same basic setup as before, I’ll create the control using XBL, and
go ahead and add additional style information to create the
floating text appearance:

<?xml version=”1.0″?>
<bindings xmlns=”http://www.mozilla.org/xbl”
 xmlns:html=”http://www.w3.org/1999/xhtml”>
    <binding id=”custom”
styleexplicitcontent=”true”>
        <implementation>

            <property
name=”definition”/>
       
</implementation>
        <handlers>

            <handler
event=”mouseover”>
                if
(typeof(this.definition) == “undefined”)
                    this.definition
= this.getAttribute(“definition”);
                var
msg = document.getAnonymousNodes(this)[1];
                msg.innerHTML
= this.definition;
                msg.style.left
= event.clientX;
                msg.style.top
= event.clientY;
                msg.style.visibility
= “visible”;
            </handler>

            <handler
event=”mouseout”>
                var
msg = document.getAnonymousNodes(this)[1];
                msg.style.visibility
= “hidden”;
            </handler>

        </handlers>

        <content>

            <children/>

            <html:div
id=”msg”
 style=”position:absolute;visibility:hidden;border:1px
solid
 #000000;background-color:#FFFFFF;”></html:div>

        </content>

    </binding>
</bindings>

Starting from the top of our XBL, notice I add
a property called definition to the
implementation. This will store the information in the attribute of
the custom tag. I add two event handlers, one for mouseover and one for mouseout. The mouseover event handler gets
the second node in the anonymous content, our HTMLDivElement element. It
sets the innerHTML
property of the element, positions the element to the mouseover event’s clientX and clientY properties, and sets
its visibility to visible. The DIV will
display on the page with the top, left corner where the mouse
pointer is located. When the mouseout event occurs, the
visibility is set to hidden. Finally, the DIV
element is added in the content section of the
XBL.

Here’s a sample HTML page that utilizes the
XBL:

<html>
<head>
<style>
custom {
    -moz-binding: url(test.xml#custom);
}
</style>
</head>
<body>
<custom definition=”Definition for Element 1″
style=”cursor:default;”>Element
 1</custom><br><br>
<custom definition=”Definition for Element 2″
style=”cursor:default;”>Element
 2</custom><br><br>
</body>
</html>

You can see that the binding is implemented in
the STYLE tag. The definition attribute defines the information
that will be displayed in the DIV. Save the XBL to a file called
“test.xml”, copy the previous HTML to another file, and try this
out in your Mozilla-based browser.

Keep your developer skills sharp by automatically signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.