Adding Buttons

In this section, we will look at how to add some simple buttons to a window.

Adding Buttons to a Window

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 OK and Cancel buttons in a dialog, for example.

The button tag has the following syntax:

<button
    id="identifier"
    class="dialog"
    label="OK"
    image="images/image.jpg"
    disabled="true"
    accesskey="t"/>

The attributes are as follows, all of which are optional:

Note that a button supports more attributes than those listed above. Others will be discussed later. Some examples of buttons:

Example 2.2.1: Source View
<button label="Normal"/>
<button label="Disabled" disabled="true"/>

The examples above will generate the buttons in the image. The first button is a normal button. The second button is disabled so it appears greyed out.

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

<button id="find-button" label="Find"/>
If you are using Firefox 1.0, note that it doesn't allow you to open chrome windows from web pages, so the View links in the tutorial will open in normal browser windows. Due to this, the buttons will appear to stretch across the window. You can add align="start" to the window tag to prevent the stretching.

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"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <button id="find-button" label="Find"/>
  <button id="cancel-button" label="Cancel"/>

</window>

You'll notice that the Cancel button was added also. The window has been given a horizontal orientation so that the two buttons appear beside each other. If you open the file in Mozilla, you should get something like the image shown here.

Note that we shouldn't put text labels directly in the XUL file. We should use entities instead so that text can be easily translated.

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

Examples: 2.2.1

Find files example so far: Source View

Add a note User Contributed Notes
November 15, 2004, 2:40 am t_pradeepkumar at yahoo dot com
I also found that Firefox with Noia 2.0 theme, renders the button text outside the button. adding the align="start" attribute to the window element solves the problem.
October 25, 2004, 7:37 am mb at free dot fr
Note that depending on the used theme (for firefox or mozilla), the
results can be a lot different.
With Noia 2.0 for instance, text does not appear inside the button.
With the default theme, the button are pretty 'high'.
And so on...

Copyright © 1999 - 2005 XULPlanet.com