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

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

Back to XUL: The Interface - Don't forget the toolbar
(Page 3 of 4 )

Another common interface feature that is used as standard in many applications is a toolbar that features icons representing the action to which the button is linked. Again, it is very easy to add this to our interface, and varies from the above code in only a few ways:

    <toolbar id="buttonBar">
      <toolbarbutton id="buttonOpen" image="open.gif"

A toolbar is used instead of a menubar, and a toolbarbutton in place of a menu element.  The image attribute specifies the icon to use and the tooltiptext provides an HTML style text-popup to indicate the function of the button.

I have created a set of my own icons to use here, feel free to download them and use them also if you wish. For now, these have been put into the main content window, but can be moved into a skin directory later on if necessary.

Other buttons can now be added:

      <toolbarbutton id="buttonSave" image="save.gif"
      <toolbarbutton id="buttonNew" image="new.gif"

In the same way that you can have expanding sub-menus, you can also create buttons with expanding sub-menus built into them:

<toolbarbutton id="buttonToolbar" image="menubar.gif" type="menu"
          <menuitem id="buttonMenubar" label="&menubarLabel;"/>
          <menuitem id="buttonToolbar" label="&toolbarLabel;"/>
          <menuitem id="buttontoolbarButton"
          <menuitem id="buttonMenuseparator"

You simply enclose a menupopup with the usual menuitems within the toolbarbutton element.  It couldn’t really be any easier.  Notice the naming convention of elementtypeName. It is not necessarily important which naming convention you use, it is just important that you choose one and stick to it. This is to make it easier for you to code, and for others to interpret your code. This consistency is an important aspect of programming.

You can now add the rest of the code to finish the toolbar:

<toolbarbutton id="formsButton" image="forms.gif" type="menu"
          <menuitem id="textboxButton" label="&textboxLabel;"/>
          <menuitem id="listboxButton" label="&listboxLabel;"/>
          <menuitem id="radioButton" label="&radioLabel;"/>
      <toolbarbutton image="window.gif" type="menu"
          <menuitem id="windowButton" label="&windowLabel;"/>
          <menuitem id="wizardButton" label="&wizardLabel;"/>
          <menuitem id="editorButton" label="&editorLabel;"/>
          <menuitem id="browserButton" label=&browserLabel;"/>
          <menuitem id="iframeButton" label="&iframeLabel;"/>
          <menuitem id="titlebarButton" label="&titlebarLabel;"/>

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