Home arrow XML arrow Page 2 - Overlays in XUL
XML

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
TABLE OF CONTENTS:
  1. · Overlays in XUL
  2. · Creating an overlay
  3. · Adjusting the overlay to your application
  4. · Creating a dynamic overlay

print this article
SEARCH DEVARTICLES

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:

<?xml version="1.0"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">
<menu id="overlaidMenu">
  <menupopup id="newPopup">
    <menuitem id="menuitem1" label="New item 1"/>
    <menuitem id="menuitem1" label="New item 2"/>
    <menuitem id="menuitem1" label="New item 3"/>
    <menuitem id="menuitem1" label="New item 4"/>
  </menupopup>
</menu>
</overlay>

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:

<?xul-overlay
href="chrome://interface/content/newmenuOverlay.xul"?>

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.


blog comments powered by Disqus
XML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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