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.
Overlays in XUL - Creating an overlay (Page 2 of 4 )
Creating overlays is easy; you still need the XML declaration and the XUL namespace is added as an attribute of an <overlay> element instead of a <window> element. Elements within the overlay file should have an ID attribute which is used to match the overlaid content with the main application. Create a XUL file that contains the following code:
Now save this file into the content folder of your application with a filename of newmenuOverlay.xul. Next, we need to import the overlay content into the main XUL file of the application; in this case, I am using the XUL editor created in previous articles as an example. Near the top of the file, add the following processing instruction:
Finally, in the location that you would like the new menu to appear, add this code:
<menu id="overlaidMenu" label="New Menu"/>
As you can see, the ID of the element in both the overlay file itself, and the final line of code in the main application file are the same. Notice also that the overlay file is understood and processed by Mozilla using a chrome URL, even though we havenít registered the overlay with the chrome in the same way that we have had to register some of the other key elements of the application such as the DTD and skin files. The chrome is intelligent enough to pick these up without special instructions.