Этот раздел описывает добавление текстовых меток (или надписей) и картинок на окно приложения. И дополнительно мы рассмотрим группировку элементов.

Текстовые элементы

Вы не можете включить текст прямо в XUL файл без обрамления тегами и ожидать, что он будет показан. Вы можете использовать два XUL элемента для достижения этой цели.

Текстовая метка

Самый простой путь для включений текста в окно — использовать текстовые метки. Они могу быть использованы когда Вы хотите разместить простое описание без элемента управления, как кнопка. Пример показан далее:

Пример 1 :

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

Атрибут «value» может быть использован для некоторого текста, который Вы хотите показать. Текст не может быть с переносами и будет показан в одну строку. Синтаксис позволяет и более общие надписи. Если текст необходимо показать с переносами, Вы можете разместить текст между открывающим и закрывающим тегами, как во втором примере:

Пример 2 :

<label>
   This is some longer text that will wrap onto several lines.
</label>

Как и в HTML, переносы строк и пробелы, следующие более одного подряд, сворачиваются в один пробел. Позже, мы найдем как задать ширину элементов, и увидим, что перенос делается очень просто.

Атрибут «control»

Вы можете использовать атрибут «control» для установки элемента, с которым связанна текстовая метка. Если пользователь щелкнет по связанной текстовой метке, то элемент станет активным (будет в фокусе). Установите как значение атрибута «control» идентификатор элемента, который должен получить фокус.

Пример 3 :

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

В примере выше, щелчок по текстовой метке делает кнопку активной.

Элемент «Описание»

Для простого описания без необходимости связывания его с любым другим элементом, Вы можете использовать тег «description». Этот тег полезен, например,  для информационного текста вверху диалоговых окон или групп элементов управления. Как и с текстовыми метками, Вы можете использовать атрибут «value» для одно строчного текста или простого текста, или размещать XHTML между открытым и закрытым тегами «description» для больших блоков текста.

Пример 4 :

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

Вы можете установить текст из скрипта используя свойство textContent, как в следующем примере:

<description id="text" width="200"/>
document
    .getElementById('text')
    .textContent = "Some lengthy word wrapped text goes here.";

Внутри обоих элементов, как текстовой метке, так и в описании одни и те же элементы. Текстовая метка предназначена для надписей к элементам управления, как текстовое поле. Атрибут control поддерживается только текстовыми метками. Элемент описания предназначен прочих описаний, как информация вверху диалоговых окон.

Картинки

В XUL есть элемент для показа картинок внутри окна. Этот элемент соответствует именованной картинке. Заметим, что имя тега другое чем в HTML (image против img). Вы можете использовать атрибут src для задания URL к файлу картинки. Пример показан ниже:

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

Хотя  Вы можете использовать этот синтаксис, он может быть лучше в порядке поддержки разных тем использовать таблицы стилей для установки URL картинки. В следующем разделе будет описано как использовать таблицы стилей, но пример будет показан здесь для полноты картины.Вы может использовать свойство CSS list-style-image CSS для установки URL до картинки. Вот этот пример:

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

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

 #search {
   list-style-image: url("http://example.com/images/search.png");
 }

Эти картинки расположены внутри папки chrome, в темах для пакета findfile. Так как картинки меняются в теме, Вы обычно можете размещать их в папке темы.

В следующем разделе мы научимся как добавить элементы ввода к окну.