Введение в XBL

У XUL есть родственный язык XBL (eXtensible Bindings Language, расширяемый язык привязок). Его используют для описания внешнего вида и поведения элементов XUL.

Привязки

Вы можете использовать XUL для создания пользовательского интерфейса. Применив стили, можно настроить внешний вид элементов или создать новый скин. Основной вид всех элементов, таких как полоса прокрутки и чекбоксы можно изменить, добавив стили или атрибуты. Однако, в XUL нет средств для изменения сути работы элемента. Например, вы захотите поменять поведение полосы прокрутки. Как раз для этого нужен XBL.

Файл XBL содержит привязки. Привязка описывает поведение элементов. К примеру, привязку можно связать с полосой прокрутки. Поведение описывается свойствами и методами полосы прокрутки дополнительно к существующему описанию на XUL.

XUL, так же как и XBL, основан на семействе языков XML. В примере приводится основа файла XBL:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- Здесь находится содержимое, свойства, методы и описание событий -->
  </binding>
  <binding id="binding2">
    <!-- Здесь находится содержимое, свойства, методы и описание событий -->
  </binding>
</bindings>

Тэг bindings — главный элемент файла XBL содержит один или более элементов binding. Каждый тэг binding задает одну привязку. Атрибут id используется для обозначения привязки, как в примере выше. Этот шаблон содежит две привязки: binding1 и binding2. Первая может определять полосу прокрутки, а вторая меню. Привязку можно связывать с любым элементом XUL. Если вы используете CSS классы, можно сколько угодно применять к ним различные привязки. Note the namespace on the bindings element in the template above. This declares that we are using XBL syntax.

You assign a binding to an element by setting the CSS property -moz-binding to the URL of the bindings file. For example:

scrollbar {
    -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
}

The URL points to the binding with the id 'binding1' in the file 'chrome://findfile/content/findfile.xml'. The '#binding1' syntax is used to point to a specific binding, much like how you would point to an anchor in an HTML file. You will usually put all of your bindings in a single file. The result in this example, is that all scrollbar elements will have their behavior described by the binding 'binding1'.

A binding has five types of things that it declares:

  1. Content: child elements that are added to the element that the binding is bound to.
  2. Properties: properties added to the element. They can be accessed through a script.
  3. Methods: methods added to the element. They can be called from a script.
  4. Events: events, such as mouse clicks and keypresses that the element will respond to. The binding can add scripts to provide default handling. In addition new events can be defined.
  5. Style: custom style properties that the XBL defined element has.

Binding Example

The box is generic enough that you can use it to create custom widgets (although you can use any element, even one you make up yourself). By assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class. The following example demonstrates this.

XUL (example.xul):

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?>

<window
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only..xul">
  <box class="okcancelbuttons"/>
</window>

CSS (example.css):

box.okcancelbuttons {
    -moz-binding: url('chrome://example/skin/example.xml#okcancel');
}

XBL (example.xml):

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
         xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="okcancel">
    <content>
      <xul:button label="OK"/>
      <xul:button label="Cancel"/>
    </content>
  </binding>
</bindings>

This example creates a window with a single box. The box has been declared to have a class of okcancelbuttons. The style sheet associated with the file says that boxes with the class okcancelbuttons have a specialized binding, defined in the XBL file. You may use other elements besides the box, even your own custom tags.

We'll look more at the details of the XBL part in the next section. However, to summarize, it causes two buttons to be added automatically inside the box, one an OK button and the other a Cancel button.

In the next section, we will look at creating content with XBL.

Метки документа и участники

Метки: 
 Внесли вклад в эту страницу: chrisdavidmills, Lusever
 Обновлялась последний раз: chrisdavidmills,