Overlays in XUL
(Page 1 of 4 )
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.
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.
Next: Creating an overlay >>
More XML Articles
More By Dan Wellman
