XUL Tutorial - Adding Buttons

The window we've created so far has had nothing in it, so it isn't very interesting yet. In this section, we will add two buttons, a Find button and a Cancel button. We will also learn a simple way to position them on the window.

Like HTML, XUL has a number of tags that can be used to create user interface elements. The most basic of these is the button tag. This element is used to create simple buttons.

The button element has two main properties associated with it, a label and an image. You need one or the other or both. Thus, a button can have a label only, an image only or both a label and an image. Buttons are commonly used for the buttons on toolbars and for the OK and Cancel buttons in a dialog.

Note that a button supports more attributes than those listed above. Others will be discussed later.

By default, buttons will appear on the window without any special appearance. Only the text and image will appear. In some cases, such as the buttons on a toolbar, this may be what you want. In other cases however, you will want to have a border appear around the button. Or, you may want the text to highlight when the user moves the mouse over the button. The usual way to do this is much like in HTML by changing the styles of a button using style sheets or scripts.

You will notice that in the syntax above, a class attribute has been used. This attribute works the same as its HTML counterpart and allows you to indicate a style sheet class to use. Mozilla provides a number of classes that you can use. They are described below.

You do not need to put a class on a button and you may use your own CSS classes. Usually however, unless such visual appearance is needed for the buttons, you should just use one of the provided classes above. Note that the classes above only apply to the default skin. A custom skin could potentially provide its own button classes. For example, the default skin has some additional classes that are specific to toolbars. Look in the file chrome/skins/modern/global/skin/button.css and chrome/skins/modern/communicator/skin/button.css for more details.

The examples above will generate the buttons in the image. The dialog button differs from the default only by the extra spacing around the text and the button borders. The borderless button has no border.

You can also use multiple button classes by separating their names by a space. Remember that you do not have to use a class.

We'll start by creating a simple Find button for the find files utility. The example code below shows how to do this:

This code creates a simple button with the label Find. This button is specified to be the default button, meaning that the user can press the ENTER key to activate the Find button. We've also specified a class for the button, dialog, which is used for buttons in a dialog box.

Let's add this code to the file findfile.xul that we created in the previous section. The code needs to be inserted in-between the window tags. The code to add is shown in red below:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="findfile-window"
    title="Find Files"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" class="dialog" value="Find" default="true"/>
  <button id="cancel-button" class="dialog" value="Cancel"/>

</window>

You'll notice that the Cancel button was added also. It should not be the default button so this attribute was left off.

[Image of find files with buttons] If you open the file in Mozilla, you should get something like the image shown here. Notice that the Find button has appeared in bold and an image has been added. The default attribute on the find button makes these features appear on the default button. Later, we'll talk about how you could override these additions, although it's best to leave them as is as this may be the desired effect on some platforms.

Adding an Image

You can add an image to the button by specifying a URL in the src attribute. This works just like the img tag in HTML. The image is loaded from the URL, which can be a relative or absolute URL, and then the image is displayed on the button.

There is another way to specify the image by using a style property on the button. This is designed to allow the 'skin' (in this case, the appearance of the image) to be changed without changing the XUL file.

The CSS style property list-style-image specifies the image to use. An example is shown below.

In this case, the image 'find.png' is displayed on the button. Since we didn't specify an orientation with the orient attribute, the image appears to the left of the label. The style attribute functions similar to its HTML counterpart. In general, it can be used on all XUL elements. Note that you really should put the style declarations in a separate style sheet.

The orient attribute can be used to change the image from appearing on the left of the text or on the top. To make an image appear on the right or bottom, use the CSS class right. For horizontally oriented buttons, the right class makes the image appear on the right side of the text. For vertically oriented buttons, the right class makes the image appear on the bottom side of the text.

The example below shows each image orientation (the image used is that used by the Navigator stop button.) :

(Next) In the next section, we will find out to add labels and images to a XUL window.

XUL Tutorial - Adding Buttons

Adding Buttons to a Window

Adding an Image