This section describes a way to add labels and images to a window. In addition, we look at how to include elements into groups.
You cannot embed text directly into a XUL file without tags around it and expect it to be displayed. You can use two XUL elements for this purpose.
The most basic way to include text in a window is to use the
label element. It should be used when you want to place a descriptive label beside a control, such as a button. An example is shown below:
<label value="This is some text"/>
attribute can be used to specify the text that you wish to have displayed. The text will not wrap, so the text will all be displayed on a single line. This syntax is the most common of labels.
If the text needs to wrap, you can place the text content inside opening and closing tags as in the following example:
Example 2 :
<label>This is some longer text that will wrap onto several lines.</label>
As with 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.
You can use the
attribute to set which control the label is associated with. When the user clicks on an associated label, that control will be focused. This association is also important for accessibility, so that screen readers read aloud the label for the control as the user tabs to it. Set the value of the
control attribute to the
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.
For descriptive text not associated with any particular control, you can use the
description tag. This element is useful for informative text at the top of a dialog or a group of controls for example. As with the
label element, you can either use the
value attribute for a single line of text or place text or XHTML content inside opening and closing description tags for longer blocks of text. It is more common to use the attribute syntax for labels, and the text content syntax for descriptions.
<description> This longer section of text is displayed. </description>
You can set the text via script using the textContent property, as in the following example:
<description id="text" width="200"/> document.getElementById('text').textContent = "Some lengthy word wrapped text goes here.";
Internally, both the
element and the
elements are the same. The
element is intended for labels of controls, such as text fields. The
controlattribute is only supported for labels. The
element is intended for other descriptive text such as informative text at the top of a
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
attribute to specify the URL of the image file. The example below shows this:
| || |
Although you can use this syntax, it would be better in order to support different themes to use a style sheet to set the image URL. A later section will describe how touse 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:
| || |
| || |
| || |
These images come from within the chrome directory, in the skin for the findfile package. Because images vary by theme, you would usually place images in the skin directory.