Netscape DevEdge

Skip to: [content] [navigation]

The XML Binding Language

By Marcell Ortutay

Contents


An Overview of XBL

XBL is the XML Binding Language. You can use XBL to add styles, properties and methods to existing HTML elements, as well as create and define new tags with their own set of styles, properties and methods. XBL makes use of familiar Cascading Style Sheet (CSS) mechanisms to "bind" to a particular document, but is much more powerful than CSS. Currently, only Mozilla based browsers such as Netscape 6.1 or later support XBL. However XBL has been submitted to the W3C for consideration for standardization. This article shows some of the possibilities of this up & coming technology.

About this article

Throughout this article you may encounter interactive XBL demos. These demos will only work on Mozilla based browsers such as Netscape 6 and later. Please download the latest version of Netscape 7.x if you are not running a Mozilla based browser or Netscape 7.x.

In this article you may also encounter bold green text. Clicking on this text will result in pop up with the definition of the highlighted word.

Finally, you may notice that clicking on the file names for the sample code (in Mozilla based browsers) will cause the sample code below to collapse. This effect is created using XBL. Although we will not fully explain how this works, you can take a look at the code if you are interested (right click and select "Save As" to download).

For example, suppose you want your page to have drop down menus. Normally, you would have to write a long JavaScript to create the drop down menu effect. However with XBL you can use an external file to define the script for your rollovers, and in your main HTML file you can define drop down menus using the following easy to read code:

xbl_menus.html <menus>
     <menu-group>
          <header>A header</header>
          <items>
               <item><a href="Url1.html">item 1</a></item>
               <item><a href="Url2.html">item 2</a></item>
          </items>
     </menu-group>
     <menu-group>
          <header>XBL</header>
          <items>
               <item>Questions</item>
               <item>Syntax</item>
               <item>Sample Code</item>
          </items>

     </menu-group>
</menus>

Once you link this code to an XBL binding, the code above will be displayed like this (scroll over the text):

Of course, you can change the styling of the elements in the menus, replace the headers and items in the menu with images; XBL is very flexible. For more information about the drop down menu example, click here.

Why should I use XBL instead of DHTML for things like drop down menus?
If you use XBL, your code will be much easier to read. Also, adding an extra item or even another menu is incredibly easy if you use XBL, while using DHTML would take much more work to add to the menus. In addition, it is very easy to re-use the code to make these drop down menus work, and it is also easy to change the XBL bindings to change the way the menus look and work.


Introduction/Syntax

Basic XBL document

All pages that use XBL should include 3 basic files: A markup file (usually in HTML or XML), a stylesheet (usually in CSS), and an XML document with XBL binding. It is important to note the difference between XBL and XML. An "XBL file" in fact ends in .xml; it is in fact an XML file, and it uses special tags. From this point on, we will refer to this file as the "XBL file," but it is really an XML file that contains XBL bindings.

About this Article

Here are templates for those three files. Please save these files onto your computer. (If you want to save these files to your hard drive, either copy the source into your favorite text editor, or download the file by right clicking on the file name and selecting "Save As."):

File Description View Source (New window)
xbl_example.html This is the markup file. It says where elements defined with XBL will go. (Note: This may also be an XML file) View Source
xbl_example.css This is the stylesheet. It links the markup and XBL files together. It also give a style to the elements in the markup file. View Source
xbl_example.xml This is the XBL file. It will add methods, properties, event handlers and more to elements in your markup file. View Source

How these files work

This is the source for the HTML file:
xbl_example.html <html>
<head>
     <title>Welcome to XBL!</title>
     <link rel="stylesheet" type="text/css" href="xbl_example.css">
</head>
<body>
<span class="xbl_example">XBL is cool!</span>
<new-tag>This tag was defined with XBL</new-tag>
</body>
</html>

This looks more or less like any HTML file. It uses the stylesheet xbl_example.css, which will link this HTML to the XBL code. Notice how the span has class="xbl_example"; this is a selector which will be used by the style sheet to specify which HTML elements will be bound to which XBL bindings. Also notice how we have used a tag called "new-tag." This tag would normally be ignored, however using XBL we can define this tag so that it will be recognized by the browser.


A Close look at the CSS

This is the code for the CSS file:
xbl_example.css .xbl_example { -moz-binding: url(xbl_example.xml#xbl_example)}
new-tag { -moz-binding: url(xbl_example.xml#new-tag) }

This CSS connects the HTML and XBL files together. In order to link the HTML and XBL files, we will need to use a special CSS property called -moz-binding. The -moz-binding property will take certain elements from the HTML file and tell them which XBL code they should be bound to. This property, like all properties that begin with "-moz," is specific to browsers powered by the Gecko engine, such as Netscape 6.x, Netscape 7.x and Mozilla. No other browsers will recognize properties that start with -moz.

For example, take a look at

.xbl_example { -moz-binding: url(xbl_example.xml#xbl_example)}

This means that any element that has class="xbl_example" will be bound to the XBL code with the id xbl_example in the file xbl_example.xml

The format for the -moz-binding property is:

[selector 1] { -moz-binding: url([file][selector 2]); }
In which...
[selector 1] This is a normal CSS selector, so it can be a class, an id, a tag, or a combination of them. This will select an element or group of elements in the HTML file and bind them to the correct XBL code
[file] This is the XML file with the XBL code; if the XBL code is in netscape.xml you would replace this with netscape.xml
[selector 2] This is the selector in your XBL code. Each "binding" in the XBL file has an id. To bind HTML elements to XBL code, you need to place the id of the XBL binding that you want to be applied to the HTML elements selected by [selector 1]


Explanation of the XBL code

Finally, here is the source for the for the XBL file. The XBL will define the class"xbl_example" and <new-tag> that we used in the HTML file. To do this we will need to use the following code.

xbl_example.xml <bindings   xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">

     <binding id="xbl_example">
          <content>
               <html:a href="page.html"><children/></html:a>
          </content>
     </binding>

     <binding id="new-tag">
          <content>
               <children/>
          </content>
     </binding>

</bindings>

The first line of xbl_example.xml is the <bindings> tag. This is the main element in your XBL document which will contain the <binding> elements in your XBL file. Every XBL document should include a <bindings> tag.

The first line also defines the XML namespace for HTML. Since we are writing an XBL document, the tags that are available in HTML would normally not be available. However many people may want to use HTML tags in their XBL documents, so it is possible to do that using namespaces.

By setting xmlns:html="http://www.w3.org/1999/xhtml", any tag that is written in the format <html:tag> ... </html:tag> will be displayed as if it were an HTML tag. So, for example, to insert an HTML link using the namespace you would use the code:

<html:a href="http://www.netscape.com">Visit Netscape</html:a>

You are, of course, not limited to using HTML namespaces. There are other languages that you can create a namespace for, such as XUL, (to use a XUL namespace, put xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" in the <bindings> tag.

The next part of the xbl_example.xml file is a <binding> element. In general, the binding element will contain new methods, properties, and anonymous content that will be applied to the HTML or XML elements that the CSS specifies.

Lets take another look at the code for the binding element in the XBL:

<binding id="xbl_example">
     <content>
          <html:a href="page.html">
               <children/>
          </html:a>
     </content>
</binding>

The first thing to notice is this binding element has the id "xbl_example." Remember that in the CSS stylesheet we defined the rule:
.xbl_example { -moz-binding: url(xbl_example.xml#xbl_example)}
Therefore, any elements in the HTML file will have the binding with id="xbl_example" applied to them as described above.

Now, lets take a closer look at the <children/> element that is inside the binding. The <children/> element represents everything contained inside the HTML element being defined by XBL. Take a look at this HTML:

<html>
<head>
     <title>Welcome to XBL!</title>
     <link rel="stylesheet" type="text/css" href="xbl_example.css">
</head>
<body>
<span class="xbl_example">XBL is cool!</span>
<new-tag>This tag was defined with XBL</new-tag>
</body>
</html>

The children of the class "xbl_example" and the children of "new-tag" have been high-lighted green. When the browser is parsing the page, in the XBL file it will see <children/>. In the place of the <children/> element it will grab whatever is inside the HTML elements that the XBL is defining, and put it in the place of the <children/> tag.

Finally, we see that before and after the <children/> element there is anonymous content.

<content>
     <html:a href="page.html">
          <children/>
     </html:a>
</content>

In this case we can see that the anonymous content is an HTML anchor tag and a closing anchor tag. This means that whenever this XBL binding is used, it will insert an HTML anchor tag linking to page.html before the <children/>, and the closing tag after.

The binding element can also contain many other things, including:

  • Events
  • Methods
  • Properties
  • Constructors
  • Many other elements
For a complete list of elements that can be included in the binding element, refer to the W3C Note on XBL.


Events

One of the most useful features in XBL is the ability to add event handlers elements. If you have an event handler (also called "event listener"), you can specify a certain code that should be executed whenever an event is triggered. Here is an example: (Event handlers are highlighted in green)

xbl_example.xml <binding id="xbl_example">
     <content>
          <html:a href="page.html">
               <children/>
          </html:a>
     </content>
     
     <handlers>
          <handler event="click">
               alert("The mouse has been clicked!");
          </handler>

          <handler event="mouseover">
               this.style.color="blue"
               this.style.backgroundColor="red"
          </handler>
     </handlers>
     

</binding>

This XBL says that any HTML element bound to the xbl_example will have an event handler for the event "click" and "mouseover". Whenever the user places the mouse cursor over an HTML element bound to xbl_example the mouseover event will be triggered, and the color and background color will be changed. When the mouse is clicked an alert message will pop up. You may add as many event handlers as you want.


Methods

Using XBL you can add methods to any HTML or XML element. Here is the XBL you would you to add the method "newColors" to the XBL binding "new-tag":

color_example.xml <binding id="new-tag">
     <content>
          <children/>
     </content>

     <implementation>
     <method name="newColors">
          <body>
               newColor=parseInt(Math.random()*999999);
               this.style.color=newColor;
               newBackgroundColor=parseInt(Math.random()*999999);
               bodyElement=document.getElementsByTagName("html").item(0);
               bodyElement.style.backgroundColor=newBackgroundColor;
          </body>
     </method>
     </implementation>

     <handlers>
          <handler event="click">
               this.newColors();
          </handler>
     </handlers>
</binding>

(Note: Colors generated by this example will not be brighter than #999999. In order to keep this example simple, brighter colors, such as #DFDFDF, will not be generated)

Here is a working example of the above XBL code (click on the text):

Download/View Source:
To download, right click and select Save As
color_example.html
View Source Download File
color_example.css
View Source Download File
color_example.xml
View Source Download File

All methods are contained in an <implementation> tag. The implementation tag contains not only methods, but also properties, and constructors (we will discuss these later). If a methods is not inside the implementation it will not work.

Inside the implementation is a <method> element. Each method element has a name attribute. The name attribute determines what a particular method's name is. For example, suppose you use: <method name="myMethod">. If you want to call this method, you will then use this JavaScript code to call the method: [object].myMethod(), where [object] is the object with the method myMethod.

Finally, there is the <body> element. Any JavaScript inside this tag will be executed when the method is called

Warning: Due to an apparent bug with XBL, it is not possible to alter the style of an element if the element contains anonymous content. All anonymous content must be removed if you want to alter the style of an element through XBL.

Passing Parameters to Methods

Often times you will want to pass parameters to your methods. This, of course, is possible in XBL. Let's say you have an XBL binding with a method called "moveTo," which takes two parameters: two numbers which will be used to move the element to a new location. Here is the XBL code you would use to do that:

moveto_example.xml <bindings   xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">

     <binding id="move-tag">
          <content>
               <children/>
          </content>

          <implementation>
          <method name="moveTo">
               <parameter name="left_coord"/>
               <parameter name="top_coord"/>

               <body>
                    this.style.left=left_coord;
                    this.style.top=top_coord;
               </body>
          </method>
          </implementation>
     </binding>

</bindings>

[Note: In this case, we did not define an event handler for the method; the method will have be called somewhere else in the JavaScript using document.getElementsByTagName("move-tag").item(0).moveTo(100,100) ]

As you can see from looking at the green text, you use the "<parameter>" tag to pass parameters to the method. Each parameter must have a name attribute, and the name attribute will correspond with the variables name in the JavaScript code (As you can tell from the underlined green text).

The parameters will be received in the order that they are passed; if you pass parameters to the function using [object].moveTo(150, 20), the first parameter (150) will be put in the first parameter tag in the XBL code (<parameter name="left_coord"/>), and will be in the variable left_coord in the JavaScript. The second parameter (20) will be put in the second parameter tag in the XBL code (<parameter name="top_coord"/>), and will be in the variable top_coord in the JavaScript.

Here is a working example of the above XBL code:

Download/View Source:
To download, right click and select Save As
moveto_example.html
View Source Download File
moveto_example.css
View Source Download File
moveto_example.xml
View Source Download File





Properties

It is also possible in XBL to assign properties to elements. If you want to add a property to an XBL binding, you will need to use code similar to the following:
img_example.xml <bindings   xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">

     <binding id="rollover1" >
          <implementation>
               <property name="original_src"/>
               <property name="rollover_src"/>
               
               <constructor>
                    this.original_src="css_gif.gif";
                    this.rollover_src="css_gif_on.gif";
               </constructor>
          </implementation>
          
          <handlers>
               <handler event="mouseover">
                    this.src=this.rollover_src;
               </handler>
               
               <handler event="mouseout">
                    this.src=this.original_src;
               </handler>
          </handlers>
     </binding>
</bindings>
(Warning: This code is only for the sake of example, it will only switch image sources between "css_gif.gif" and "css_gif_on.gif," if you are looking for a generic rollover XBL binding, click here)

A property for an XBL binding must be declared in the "<implementation>." Inside the implementation to declare a property, you need to use the "<property>" element to add a property to the XBL binding. Each property element must have a name, the name (as you can tell from the green underlined text), will be used to grab the property later on in the JavaScript code.

To initialize the properties you will need to use constructors. Using a constructor, you can set the properties initial value using: this.[property name]=[initial value]. Once the property has been initialized, you can access it using [object].[property name].

Here is a working example of the property example XBL code (move mouse over image):

Download/View Source:
To download, right click and select Save As
prop_example.html
View Source Download File
prop_example.css
View Source Download File
prop_example.xml
View Source Download File

Two useful event handlers of the property element are the onset and onget event handlers. The onset event handler is triggered whenever a property is set. The onget event handler is triggered whenever the property is accessed from somewhere. Here is an example:

<property name="example" onset="alert('The value is now'+val)" onget="alert('The value is'+val)">

Also notice how there is a special variable "val" used in the event handlers. This variable is the current value of the property.


Constructors

Constructors are used to initialize elements. When a page loads, any elements with XBL bindings will run constructors in those bindings (if they have constructors). You can use any JavaScript in constructors, including changing styles, inserting code forks, and running any methods.

As an example, suppose you want to adjust to font size on your webpage based on the screen size of the user. You could use this XBL constructor:

construct_example.xml <bindings>
  xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">

   <binding id="body">
      <content>
         <children/>
      </content>
      
      <implementation>
         <constructor>
            <![CDATA[
            if(window.innerWidth<500) {
               this.style.fontSize="10pt";
            }
            else {
               this.style.fontSize=(window.innerWidth/50+"pt");
            }
            ]]>
         </constructor>
      </implementation>
   </binding>

</bindings>

The constructor goes inside the implementation.

To see this constructor in action, try it out by resizing this iframe; type in a number to resize the iframe, and notice how the constructor scales the text to the width.

Download/View Source:
To download, right click & select Save As
construct_example.html
View Source Download File
construct_example.css
View Source Download File
construct_example.xml
View Source Download File

An important thing to notice in this constructor is our use of the <![CDATA[ ... ]]> element. Had we not used this, then we would have run into problems when we tried to execute this line: if(window.innerWidth<640) {. The < (less than) operator is also the same character that is used start tags; when the browser sees it, it assumes that we are placing a new tag in the document. However, using <![CDATA[ we can tell the browser not look for any tags, we are telling the browser that anything it sees is literal data, until it encounters the ending section of <![CDATA[, which is ]]>. When it sees the ending section, it will no longer interpret everything as literal data.


Sample Code


Image Rollovers

Using XBL it is possible to simplify the process of making image rollovers. We can create the attributes "rollover" and "rollout" to define what we want to images to be before and after the mouse is moved over the image. Here is the XBL binding to make use of the attributes:

rollovers_example.xml <bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:html="http://www.w3.org/1999/xhtml">

     <binding id="img">
          <handlers>
               <handler event="mouseover">
                    this.src=this.getAttribute("rollover");
               </handler>
               <handler event="mouseout">
                    this.src=this.getAttribute("rollout");
               </handler>
          </handlers>
     </binding>
</bindings>

The HTML code to apply this binding is fairly straight forward; you add the attributes rollover and rollout and make them point to the correct images. Here is a sample img tag that makes use of the XBL rollover binding:

<img src="original_image.gif" rollover="rollover.gif" rollout="rollout.gif">

Here is the full HTML file that uses these image rollovers:

rollovers_example.html <html>
<head>
<style>
img {
     -moz-binding: url(rollovers_example.xml#img);
}
</style>
</head>

<body>

<img src="css_gif.gif" rollover="css_gif_on.gif" rollout="css_gif.gif">

</body>
</html>

And here is the working example:
Download/View Source:
To download, right click and select Save As
rollovers_example.html
View Source Download File
rollovers_example.xml
View Source Download File
rollovers_example.zip
Both files; working example


Drop Down Menus

A very useful XBL binding is one that allows you to very simply create drop down menus without having to write excessive DHTML code.

Here is a working example of the above XBL code (click on the text):

Download/View Source:
To download, right click and select Save As
xbl_menus.html
View Source Download File
xbl_menus.css
View Source Download File
xbl_menus.xml
View Source Download File
xbl_menus.zip
All three files; working example

Here is the code for the HTML file:

xbl_menus.html <html>
<head>
<link rel="stylesheet" type="text/css" href="xbl_menus.css">
</head>

<body>

<menus>
     <menu-group>
          <header>A header</header>
          <items>
               <item><a href="Url1.html">item 1</a></item>
               <item><a href="Url2.html">item 2</a></item>
          </items>
     </menu-group>
     <menu-group>
          <header>XBL</header>
          <items>
               <item>Questions</item>
               <item>Syntax</item>
               <item>Sample Code</item>
          </items>

     </menu-group>
</menus>

<br>

These drop down menus were written in XBL! Additional content will go here.

</body>
</html>

As you can see, this is much simpler to read than drop down menus written in DHTML.

To use drop down menus on your own site, the elements for the menus must be placed in the correct order and in the correct place. The <menus> tag will contain all of the additional code for XBL drop down menus will go inside this element.

Next, we have the <menu-group> element. This will contain each individual drop down menu. If you want to create a new menu, you can declare it using the menu-group element. This element will contain the <header> and <items> elements.

The <header> element contains the header for the drop down menu, this is what the user will move the mouse over to make the drop down menu appear. This can be replaced with an image, and may contain any other HTML.

Finally, the <items> element contains the items in the drop down menu that the user can click on. Each individual item is in its own <item> element, and inside item elements there may be text, an image, or any HTML. All item elements must be inside the items element.

Note: The markup for these elements must be well formed

The style sheet is like any normal CSS file. You may change any style, but be sure not to remove the -moz-binding property.


Conclusion

XBL is a very powerful binding language that makes the creation of Dynamic Web pages much easier. If adopted by the W3C as a standard, XBL will become a very powerful tool for Web Developers in all Standards compliant browsers. For more information on XBL, refer to the W3C Note on XBL. (Note: Although this outline is on the W3C site, it is not yet a W3C Standard. There may be differences in the note and the current implementation of XBL in Mozilla based browsers)















A+R