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.