Home arrow XML arrow Page 4 - An Introduction to XUL Part 2

Menu Bar and Interface - XML

Learn about XUL, a subset of XML used to describe user interfaces, that helps you to make rich user interfaces with nothing more complicated than a text editor. In the second part of this series, Dan Wellman covers implementing more kinds of buttons. He also begins talking about creating Menu Bars, Tooltips, and Status Bars.

TABLE OF CONTENTS:
  1. An Introduction to XUL Part 2
  2. Organizing Buttons
  3. Changing Textbox Attributes
  4. Menu Bar and Interface
  5. Cleaning Up and Adding a Status Bar
  6. Using ToolTips and Progress Bars
By: Dan Wellman
Rating: starstarstarstarstar / 10
May 30, 2005

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Now, no interface would be complete without the menu bar at the top of the window that had the usual File, Edit, View, etc menus on it.  Windows applications that don’t have these just don’t feel right.  Fortunately, the required code to add these is very straightforward and leads on from the interface objects we have created so far.  XUL makes so much sense that you could probably code this yourself without me telling you how.  Nevertheless, the below section of code will add a very simple File menu to the top of your window.  Make sure you place it above the first buttons you created so that it appears in the right place:

<menubar>
  <menu id=”fileMenu” label="File" accesskey="F">
    <menupopup>
      <menuitem label="Open"/>
      <menuitem label="Close"/>
      <menuitem label="New"/>
    </menupopup>
  </menu>
</menubar>

As you can see, the menu element is a child element of the menubar element and the menu element draws on syntax we have already looked at, namely the <menupopup> and <menuitem> elements, which themselves are children and grand-children respectively of the aptly named <menu> element.  The acceskey specifies the shortcut letter that can be used in conjunction with the Alt key to open the menu, and underlines the proposed letter all by itself.  You’ll notice that clicking on the grippy does nothing at this stage.  You can add to the functionality of the grippy by placing the menubar in a toolbox, similar to the toolbar element looked at previously.  Add the <toolbox> and </toolbox> tags so that they encapsulate the menubar and then execute the file again.

Now when you click on the grippy, the menubar is collapsed, however, clicking it again does not expand the menu once more.  When opened from within Mozilla using a chrome URL, the grippy will work as it should, but you can get rid of the grippy altogether by using the grippyhidden=”true” attribute of the menubar (note that this attribute is also available to the toolbar element).  Additionally, the menulist items can be separated using the <menuseparator> tag placed between the items that should be separated.  This draws a line between the separated items. 

Images are also very easy to add:

<image source="xul.jpg"/>

The image is stretched to fit the width of the window; this can be adjusted obviously using attributes of the image element.  Note that source is the name of the attribute that specifies the path and name of the image instead of src.

Another interface feature available to you is a tabbed window area; this is easily coded using <tab> elements nested within a <tabs> element.  Add the following block of code beneath the bottom textbox:

<tabs>
  <tab label="Tab One"/>
  <tab label="Tab Two"/>
  <tab label="Tab Three"/>
</tabs>

Take a look at the effect it gives you; it’s surprisingly easy to create these different interface controls and elements, a feature of XUL that has made it a popular choice for open source programmers as something to get stuck into.  To add content to the individual tabbed sections, you need to place the above code into a <tabbox> container and use <tabpanels>:

<tabbox>
  <tabs>
    <tab label="Tab One"/>
    <tab label="Tab Two" value="2"/>
    <tab label="Tab Three" value="3"/>
  </tabs>
  <tabpanels>
    <description value="This is tab 1"/>
    <description value="This is tab 2"/>
    <description value="This is tab 3"/>
  </tabpanels>
</tabbox>

Looking at your window now, you’ll probably agree that it’s looking a little bit untidy; you’ve basically got a long list of menus, buttons and controls.



 
 
>>> More XML Articles          >>> More By Dan Wellman
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

XML ARTICLES

- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: