This section describes a way to add labels and images to a window. In addition, we look at how to include elements into groups.
XUL provides an element, text which can be used to put labels into a window. 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, is to use the text element. It supports some of the same features as buttons. An example is shown below:
Example 2.3.1
<text value="This is a label"/> |
This is much like the button element. 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 means that the text element is suitable for short sections of text.
You can use the align attribute to left-align or right-align the text with-in its container.
Like the HTML label element, you can use the for attribute to set the focus on an element when the label is selected. Set the value of the for attribute to the id of the element to be focused.
The html tag can be used to add wrapping text to a window. The tag is so named because it draws text much like HTML does. That is, it wraps text and ignores extra whitespace. It is more suitable for large blocks of text. Later we'll find out how to constrain the width of elements so we can see the wrapping.
Example 2.3.2
<html> Hello there </html> |
Like HTML, XUL has an element to display images with-in 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. We saw how to use the list-style-image CSS property on buttons in the previous section. It can be used here also. Here are some examples:
XUL:
<image id="image1"/>
<image id="search"/>
Style Sheet:
#image1 {
list-style-image="chrome://findfile/skin/banner.jpg";
}
#search {
list-style-image="chrome://findfile/skin/search.gif";
}
|
The images come from with-in the chrome directory, here in the skin of the findfile package. This is normally how you would refer to images. Images are normally placed in the skin directory.
(Next) In the next section, we will learn how to add some input controls to a window.