Home arrow XML arrow Page 4 - Overlays in XUL

Overlays in XUL

Overlays are an important aspect of XUL, but this is a subject that Iíve barely mentioned in previous articles. Overlays can be used for a variety of purposes when designing/writing XUL applications and come in either explicit or dynamic flavors. Explicit overlays are used within your own application and form the basis of code modularization.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
May 15, 2006
  1. · Overlays in XUL
  2. · Creating an overlay
  3. · Adjusting the overlay to your application
  4. · Creating a dynamic overlay

print this article

Overlays in XUL - Creating a dynamic overlay
(Page 4 of 4 )

Creating dynamic overlays is very similar to creating explicit overlays; although this time the overlays do need to be registered fully with the chrome in order to instruct Mozilla to apply the overlay files to the target application. With this method, the source file of the application that has the overlay applied to it doesnít need to be modified.  This makes it an excellent method of creating updates or add-ons to an application that are fully packaged and made available for distribution or download.  It also means that you can create add-on components to Mozilla itself without modifying Mozillaís source code.

You could add a menuitem to one of Mozillaís menus in this way so that an application youíve written can be accessed easily.  To do this, you first create the main overlay file, like you would any other overlay by starting with the XML declaration and the overlay container:

<?xml version="1.0"?>
<overlay id="xuleditOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/

As the menuitem is to be used to open your application, youíll need a little bit of JavaScript to do this.  Normally this would go into its own JS file, but as itís just the one little function, thereís no harm in adding it in here:

<script type="application/x-javascript">
function openXulEdit() {
  window.openDialog('chrome://interface/content/', '_blank',

This simple little script calls the openDialog method and takes, most importantly, the relevant chrome URL and two additional parameters. 

All you need now is the new menuitem that you want added to Mozilla and the closing tag:

<menupopup id="windowPopup">
    <menuitem label="XUL Edit Lite 1.0" oncommand="openXulEdit
();" insertbefore="sep-window-list"/>

The menupopup ID must match that of the menupopup in Mozilla that you want to influence, in this case, the Window menu.  The oncommand attribute calls our little JavaScript snippet and the insertbefore attribute tells Mozilla to add the new menuitem right before the separator (take a look at the Window menu in Mozilla to see the separator I mean).  Save this file as xuleditOverlay.xul in your main content directory.  Next, you need to add a couple of lines of code to your existing main contents.rdf file:

<RDF:Seq about="urn:mozilla:overlays">
  <RDF:li resource="chrome://communicator/content/tasksOverlay.xul"/>
<RDF:Seq about="chrome://communicator/content/tasksOverlay.xul">

The first code block lists the file that you are going to overlay, the second lists the file to be used as the overlay.  Add these just before the closing </RDF:RDF> tag.

Finally, you need to browse to the Mozilla Chrome directory and delete the folder called "overlayinfo."  This directory will be recreated when Mozilla is next launched, so launch Mozilla and go into the overlayinfo directory.  There will be several folders in here depending on which Mozilla suite components are installed; if you go into the one called communicator, then into the content folder, youíll find an overlays.rdf file.  Open this file in a text editor and if everything worked, there will be an Li statement that matches the one you just added to your applications contents.rdf file. One final check that it has worked of course is to open the Window menu in Mozilla to check that your overlaid menuitem appears and that it launches your application when selected.   

In addition to adding content to Mozilla without altering the base files of the applications, this is the same mechanism that you can use to release additional or add-on content to your own XUL applications once they have been distributed.  You could simply create a new XUL module for your application and then package it in an installer that adds the required files and the new contents.rdf file to the existing directory structure.

So as you can see, overlays are an important aspect of XUL that can be used to add modularity to the bigger applications you create or add to the functionality of either Mozilla itself, or applications that you write.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials