Home arrow XML arrow An Introduction to XUL Part 2

An Introduction to XUL Part 2

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



In addition to standard buttons, you can easily add other types of buttons using the type attribute; you can create buttons that behave as checkboxes so that any number of these types of button can be in a selected/pressed state at any one time, similar to the B, I, and A buttons in a document editing application.  Or you can create buttons that behave as radio buttons, so that only one button within that group can be selected at any one time, much like the justification buttons in a similar application.  Add the following lines of code directly beneath the existing button in your XUL document:

<button label="I am a Checkbox button!" type="checkbox"/>
<button label="I am also a Checkbox button!" type="checkbox"/>

Now save the file and run it again using the DOS command.   Your window will now have three buttons on it, two that can remain in a ‘checked’ state simultaneously.

Add a group of radio buttons now using the below code, which again should be placed directly beneath the above button code:

<button label="I am a Radio button!" group="myGroup" type="radio"/>
<button label="I am also a Radio button!" group="myGroup" type="radio"/>
<button label="I am another Radio button!" group="myGroup" type="radio"/>

You use the group attribute to specify that the radio buttons belong in a specific group, which is needed when there are more than one set of buttons in your interface working the way radio buttons do.

You can even create a menu type button, where the button expands into a set of sub–buttons, grouping related items in a space saving format.  Add the next block of code beneath the existing buttons:

<button label="I am a menu button!" type="menu">
      <menuitem label="I am a menu item!"/>
      <menuitem label="I am also a menu item!"/>

This will give you a rather nice little expandable button at the bottom of your window.  It may be useful to know that the submenu that pops up will happily transcend the border of the window itself rather than resize the window to make room for the additional items.  You can alter the appearance of this button slightly by changing the type from menu to menu-button, which puts the little drop-down arrow outside of the button.

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