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

Cleaning Up and Adding a Status Bar - 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.

  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



You can tidy things up a little and give the elements some room by using the <spacer> and <separator> elements.  The syntax is similar for each of these things:

<spacer height="20"/>

The above line of code will give you a space 20 pixels high in the place that you put it.  Try adding the above line before and after the various buttons near the top of the window to give the buttons a bit of room, but remember to resize the window accordingly.  The <separator> element works in very much the same way but the default size of the gap between the separated items is smaller than that of a spacer.  Note that when this item is used, an actual line is not drawn between the separated items.

Along the bottom of most applications is an information or status bar that displays pictures or text relevant to the task in hand, in browsers for example, this bar can display icons for when pop-ups are blocked, cookies are rejected or a secure area is accessed.  Creating one of these information bars in XUL is, as youíve probably guessed, a very easy thing to do.  Each holder for the icon or text is known as a statusbarpanel, and each statusbarpanel must be placed in a statusbar container.  Add the following code at the bottom of your working file:

<statusbar id="status1">
  <statusbarpanel label="secure"/>
  <statusbarpanel label="privacy"/>

When executed, your application window will now have the status bar at the bottom, with the labels inside each panel.  This is another element set that can be further contained within a toolbox, and doing so will put a line across the bottom of the status bar.  Itís not much I know, but itís an additional feature.  There are few attributes of the statusbarpanel elements, just crop and the choice of either label or source.  The crop attribute is used to specify how any text in the statusbarpanel is cropped when the element is too small for its label.  The label simply puts text in the element and the source is used to specify a picture that is used instead of text.

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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


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