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

Using ToolTips and Progress Bars - 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



One feature that I haven’t mentioned yet is the tool tip feature; tooltips are the ‘helpful’ popups that give you additional information when you hover the mouse pointer over an element on the screen.  For text-only tooltips, you can just add a tooltiptext=" texthere" attribute to almost any element.  For tooltips containing other types of content, you have to use the tooltip element and associate it with the relevant element in the much the same way that labels are associated with controls.  In your working file, add the tooltip element set to one of the buttons and make sure you add the tooltip attribute to the button element that the tooltip is to be associated with:

<button label="I am a button!" tooltip="tooltip1"/>
    <tooltip id="tooltip1">
      <description value="A tooltip!"/>

Another cool interface element you can create easily is the progress bar; with just a few lines of code, you can have a window that pops up displaying a visual indication of how long a task has left to complete, or evidence that there is activity going on within the application.  The following code will display a window with a progress meter in it:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="progress" title="Progress Meter" width="150" height="150" screenX="50" screenY="100" xmlns="http://
  <label value="Loading…" />
  <progressmeter mode="undetermined" />

The mode attribute of the progress meter can be either undetermined, as above, or determined.  With a determined mode, you also need to specify a value in percent of what percentage of the bar is filled.  If you change the above code to read:

<progressmeter mode="determined" value="50%" />

then executed the file, you would see that the progress bar is half filled.  In fact, the value of mode can be anything other than "undetermined" to get this effect.  The next article in this series looks at how to specify the position of elements in a little more detail.

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