Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Wprowadzenie do XBL

UWAGA: Tłumaczenie tej strony nie zostało zakończone.
Może być ona niekompletna lub wymagać korekty.
Chcesz pomóc? | Dokończ tłumaczenie | Sprawdź ortografię | Więcej takich stron+.

Język XUL posiada siostrzany język, XBL (eXtensible Bindings Language). Ten język jest stosowany do określania zachowań kontrolek XUL.

Wiązania

Języka XUL można używać do definiowania układu (wyglądu) interfejsu przeznaczonego dla użytkownika. Oprawę graficzną elementów można zmieniać za pomocą stylów. Możesz również tworzyć nowe motywy poprzez zmianę stylów. Podstawowy wygląd wszystkich elementów, jak na przykład pasek przewijania i pole wyboru może być modyfikowane przez styl lub przez ustawienie atrybutów elementu.

Niemniej jednak, XUL nie dostarcza możliwości, dzięki której mógłbyś zmienić sposób pracy wszystkich elementów. Na przykład, chcesz koniecznie zmienić działanie poszczególnych części funkcji scroll bar (paska przewijania). Do tego potrzebujesz języka XBL.

XUL, XBL jest podobny do języka XML, więc ma podobną składnię. Następujący przykład pokazuje podstawowy szkielet pliku XBL:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- Zawartość, właściwość, metoda i zdarzenia opisujące są tutaj  -->
  </binding>
  <binding id="binding2">
    <!-- Zawartość, właściwość, metoda i zdarzenia opisujące są tutaj  -->
  </binding>
</bindings>

The bindings element is the root element of an XBL file and contains one or more binding elements. Each binding element declares a single binding. The id attribute can be used to identify the binding, as in the example above. The template has two bindings, one called binding1 and the other called binding2. One might be attached to a scroll bar and the other to a menu. A binding can be attached to any XUL element. If you use CSS classes, you can use as many different bindings as you need. 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'.

Wiązanie posiada pięć typów, które możemy zadeklarować:

  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.

Przykład wiązania

Element box jest generowany wystarczająco tak jak możesz użyć do utworzenia elementu graficznego (poprzez to możesz użyć jakikolwiek element, nawet jeden zrobiony dla siebie). Przydzielając do class tagu box, możesz łączyć oprawy tylko do tych do których należą te klasy. Następujący przykład demonstruje to.

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>

Ten przykład tworzy okno z pojedynczym pudełkiem. Pudełko zostało zadeklarowane dla class z okcancelbuttons. Arkusz stylów łączy nazwę pliku, którego pola z klasą okcancelbuttons ma specjalne łączenie, definiując w pliku XBL. Możesz użyć inne elementy w dodatku box, będący Twoim własnym znacznikiem:

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. W następnym artykule, zobaczymy jak utworzyć treść korzystając się z XBL.

Autorzy i etykiety dokumentu

 Autorzy tej strony: teoli, Ptak82, Mgjbot, gandalf
 Ostatnia aktualizacja: teoli,