An Introduction to XUL Part 2 (
Page 1 of 6 )
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.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">
<menupopup>
<menuitem label="I am a menu item!"/>
<menuitem label="I am also a menu item!"/>
</menupopup>
</button>
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.
