Home arrow XML arrow Page 2 - Back to XUL: The Interface
XML

Back to XUL: The Interface


This article, the second in a series about the XML variant called XUL, gets you started on creating the main interface for an application. Among other things, it covers sub-menus, toolbars, and the main content window.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
January 23, 2006
TABLE OF CONTENTS:
  1. · Back to XUL: The Interface
  2. · Adding the sub-menu
  3. · Don't forget the toolbar
  4. · The main content window

print this article
SEARCH DEVARTICLES

Back to XUL: The Interface - Adding the sub-menu
(Page 2 of 4 )

So now we have the menubar; the main container for our menus; and a menu, the File menu.  Now we have to add the sub-menu that expands when the file menu is selected.  To do this, simply add a menupopup element and list the menuitems:

<menupopup>
          <menuitem id="menuOpen" label="&openLabel;"
accesskey="O" key="openKey"/>
          <menuitem id="menuClose" label="&closeLabel;"
accesskey="C" key="closeKey"/>
         <menuitem id="menuSave" label="&saveLabel;"
accesskey="S" key="saveKey"/>
          <menuseparator/>

There are several things to note here. The menuseperator simply renders a horizontal line across the menu to visually separate menu items. We have again  specified accesskey attributes on these two menuitems, but the key attribute has also been used.  This means that in addition to using the ALT + underlined-letter short-cut, you can also specify a further keyboard shortcut to bypass the menu system altogether.  The key attribute links the menu item with an element declared outside of code for the menu itself: a keyset.

Defining the keyset and its children separate from the menu code helps ensure your programming retains a modular formation, and for ease of reading, it is a good idea to add this near the top of the application code:

<keyset>
    <key id="openKey" modifiers="control" key="O"/>
    <key id="closeKey" modifiers="control" key="X"/>
   <key id="saveKey" modifiers="control" key="S"/>
</keyset>

The ID attribute links the key to the element it is to be used with.  The modifiers and key attributes specify which special key, such as the shift or Ctrl key, and which other key combination is to be used.  As you can see, this means that when someone presses CTRL + O in this example, the Open action will be initiated.

You may at this point be wondering how to add a second-level sub-menu to the existing menu structure.  This is very easy; you just nest in another menu element, complete with its own menupopup and menuitems:

<menu id="menuNew" label="&newLabel;" accesskey="N">
            <menupopup>
              <menuitem id="menuXUL" label="&xulLabel;"
accesskey="X"/>
              <menuitem id="menuHTM" label="&htmLabel;"
accesskey="H"/>
              <menuitem id="menuXML" label="&xmlLabel;"
accesskey="M"/>
              </menupopup>
</menu>

This will allow the user to specify which simple template to use.  To complete the File menu, we will provide a means for closing the editor:

<menuseparator/>
          <menuitem id="menuExit" label="&exitLabel;"
accesskey="E" key="exitKey"/>
      </menupopup>
</menu>

To complete the menubar, add the following code:

<menu id="menuEdit" label="&editLabel;" accesskey="E">
        <menupopup>
          <menuitem id="menuCopy" label="&copyLabel;"
accesskey="C" key="copyKey"/>
          <menuitem id="menuPaste" label="&pasteLabel;"
accesskey="P" key="pasteKey"/>
          <menuitem id="menuCut" label="&cutLabel;" accesskey="U"
key="cutKey"/>
        </menupopup>
      </menu>
      <menu id="menuHelp" label="&helpLabel;" accesskey="H">
        <menupopup>
          <menuitem id="menuContents" label="&helpContentsLabel;"
accesskey="C" key="contentsKey"/>
          <menuitem id="menuAbout" label="&aboutLabel;"
accesskey="A" key="aboutKey"/>
        </menupopup>
      </menu>
    </menubar>
</toolbox>

This will give the application standard Edit and Help menus.  Donít forget to update the keyset element with the appropriate shortcut key syntax.


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