Home arrow XML arrow An Introduction to XUL Part 6

An Introduction to XUL Part 6

Learn about XUL, a subset of XML used to describe user interfaces, that helps you to make rich user interfaces with nothing more complicated than a text editor. In the sixth part of this series learn about XBL, another of XMLs many faces and a partner in crime with XUL, also called XML Binding Language.

  1. An Introduction to XUL Part 6
  2. Stylesheet
  3. Customization
  4. Adding the Code to our XUL
By: Dan Wellman
Rating: starstarstarstarstar / 10
June 27, 2005

print this article



CSS, as you know, will change the appearance of any given element on screen.  XBL is a method of changing the behavior of any given element.  You could use a binding to add specific elements that were rendered automatically when your binding element was described in the XUL file.  XBL is used in conjunction with both XUL and CSS.

Like all XML documents, XBL documents must begin with the XML declaration.  The root element is the <bindings> element which contains the XBL namespace. Separate binding elements are then defined as children of this element and the elements you wish to add bindings for are then added as children of this element.  XBL files do not have their own extension, they are saved as XML files.

Once your binding file has been created, you then need to create a CCS rule that specifies a class of the element you are creating the bind for and a style rule telling the XUL file were to look to get the binding.  This is typically a chrome URL with a fragment identifier pointing the binding element. 

For example, you may want to define a binding that adds a default menu bar to the top of your window elements.  First, create the XBL file:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
  <binding id="defaultmenu">

      <xul:menu value="file" label="file"/>
      <xul:menu label="edit"/>
      <xul:menu label="view"/>
      <xul:menu label="help"/>

You start with the xml declaration, add the root bindings element with the XBL namespace and the XUL namespace with appropriate prefix.  The binding element specifies how the binding will work and holds the content element.  The content element contains the elements that you want to add to the element you are binding to, in this case, your default menus.  Each of the menus are declared with the XUL prefix, this is because they are XUL elements and not XBL elements.  All elements added inside the content element are added anonymously which means that Mozilla treats them as one element.  There are implications to this that we wont worry about for this example, but that you might need to know for future use, namely that because they are added anonymously, they are not accessible through a script in the normal way.  Save this file as bindexample.xml.

>>> More XML Articles          >>> More By Dan Wellman

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: