Adding Labels and Images

This section describes a way to add labels and images to a window. In addition, we look at how to include elements into groups.

Text Elements

You cannot embed text directly into a XUL file without tags around it and expect it to be displayed. The most basic way to include text in a window is to use the label element. An example is shown below:

<label value="This is some text"/>

The value attribute can be used to specify the text that you wish to have displayed. The text will not wrap, so the text will appear on only one line. This is suitable for short sections of text.

For longer text, you can place content inside opening and closing description tags. Unlike text specified with the label element and the value attribute, the child text will wrap onto multiple lines if necessary. Resize the window to see the wrapping. Like HTML, line breaks and extra whitespace are collapsed into a single space. Later we'll find out how to constrain the width of elements so that we can see the wrapping more easily.

<description>
  This longer section of text is displayed.
</description>

Internally, both the label element and the description element are the same, which means that labels can have wrapped text if you place the text inside the tag, and descriptions can have a value attribute. The label element is intended for labels of controls, such as text fields. The description element is intended for other descriptive text such as informative text at the top of a dialog box. By convention, you should follow this guideline.

You can use the control attribute to set which control the label is associated with. When the user clicks the label, that control will be focused. Set the value of the control attribute to the id of the element to be focused.

<label value="Click here:" control="open-button"/>
<button id="open-button" label="Open"/>

In the example above, clicking the label will cause the button to be focused.

Images

Like HTML, XUL has an element to display images within a window. This element is appropriately named image. Note that the tag name is different than HTML (image instead of img). You can use the src attribute to specify the URL of the image file. The example below shows this:

<image src="images/banner.jpg"/>

Although you can use this syntax, it would be better to use a style sheet to set the image URL. A later section will describe how to use style sheets, but an example will be shown here for completeness. You can use the list-style-image CSS property to set the URL for the image. Here are some examples:

XUL:
 <image id="image1"/>
 <image id="search"/>

Style Sheet:
 #image1 {
   list-style-image: url("chrome://findfile/skin/banner.jpg");
 }

 #search {
   list-style-image: url("chrome://findfile/skin/images/search.jpg");
 }

These images come from within the chrome directory, in the skin for the findfile package. Because images vary by skin, you would usually place images in the skin directory.

(Next) In the next section, we will learn how to add some input controls to a window.

Examples: 2.3.1 2.3.2 2.3.3