Home arrow XML arrow 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
(Page 1 of 4 )

If you are creating a large application with several windows, local overlays can be used to share common elements between the various windows; if for example you have two windows in your application and both of them have a file menu, rather than having the file menu code in both of the windows, you can define an overlay and then share this one file between both windows. This centralizes the code for the file menu and makes updating/extending the menu much easier because code changes are only required in one place. The Mozilla suite of applications makes extensive use of overlays for this very purpose, with all of the main applications in the suite sharing many of their menus and functionality.

When creating XUL applications, remember that if you need a file menu in your application, you can easily make use of the Mozilla overlay for this feature and cut down massively on the amount of coding you need to do (Iíve avoided this in previous tutorials as it is counter-productive to the learning process when getting to know and understand XUL).

Dynamic overlays work in a subtly different way and can be used to add additional content to an existing application at runtime.  If you write an application designed to run as an add-on to the navigator part of the Mozilla suite, you are going to want to perhaps add a menu item to launch it or control it, and to do this without having to modify the Mozilla source files you use a dynamic overlay to add the additional content at run-time. 

The main files of a XUL application are known as the base files; the master, or default, skin is called the base skin and shares the same name as the base XUL file.  In the application developed in earlier XUL tutorials the base XUL file is called interface.xul and the base skin file is called interface.css for example.  Overlay files should share the name of the application they are used with, with Overlay at the end: interfaceOverlay.xul for example, would be appropriate.

You can use any element within an overlay, and when the overlay is processed the children of the overlay element become the children of the element the overlay targets.  By default these children are placed below the children of the targeted element, so in a dynamic overlay an additional menu item would appear after the existing items in the targeted menu, although this can be changed with the use of attributes to specify where in the element tree the overlaid children appear.

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