Dziedziczenie atrybutu XBL

W tym artykule zobaczymy jak atrybuty mogą być dziedziczone.

Dziedziczenie atrybutów

XBL pozwala nam na zbudowanie połączonych widgetów podczas ukrywania ich rzeczywistej implementacji. Jednakże z właściwościami wzmiankowanymi dotychczas, anonimowa zawartość jest zawsze tworzona w ten sam sposób. Byłoby to użyteczne do dodawania atrybutów do elementów granicznych które modyfikują wewnętrzne elementy. Na przykład:

XUL:

<searchbox/>

XBL:

<binding id="searchBinding">
  <content>
    <xul:textbox/>
    <xul:button label="Search"/>
  </content>
</binding>

W tym przykładzie, atrybut label umieszczono bezpośrednio w elemencie button. Problem z tym jest taki, że etykieta powinna być taka sama za każdym razem, kiedy stosujemy dowiązanie. W tym przypadku byłoby to bardziej pożądane gdyby atrybut mógł być określony w polu wyszukiwania. XBL dostarcza atrybutu inherits, który może być użyty do dziedziczenia atrybutów z elementu granicznego. Powinien być umieszczony w elemencie, który powinien dziedziczyć atrybut z zewnętrznego elementu, w tym przypadku przycisku. Ta wartość powinna być ustawiona jako lista oddzielona przecinkami atrybutów nazwy, których są dziedziczone.

<xul:textbox xbl:inherits="flex"/>
<xul:button xbl:inherits="label"/>

Kiedy zawartość jest generowana, textbox korzysta z atrybutu flex pola wyszukiwania a button korzysta z atrybutu label pola wyszukiwania. Pozwala to elastyczności pola tekstowego i etykiety przycisku być różnymi dla każdego zastosowania dowiązania. Dodatkowo, zmieniając wartość tego atrybutu w polu wyszukiwania skryptem zaktualizujemy również pole tekstowe i przycisk. Możesz dodać atrybut inherits do tylu elementów ile sobie życzysz, dziedzicząc kilka atrybutów.

Zauważ, że atrybut inherits jest umieszczony w przestrzeni nazw XBL, poprzez poprzedzenie go 'xbl:'. Przestrzeń nazw powinna być zadeklarowana gdzieś wcześniej, zazwyczaj w elemencie bindings. Demonstruje to kolejny przykład:

<bindings xmlns:xbl="https://www.mozilla.org/xbl"
          xmlns:xul="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<xbl:binding id="buttonBinding">
  <xbl:content>
    <xul:button label="OK" xbl:inherits="label"/>
  </xbl:content>
</xbl:binding>

W tym przykładzie, przycisk dziedziczy atrybut label, ale ten atrybut jest również podaną wartością bezpośrednio w XBL. Ta technika jest używana do ustawienia domyślnej wartości jeśli atrybuty nie jest obecny przycisk ten odziedziczy atrybut label z elementu zewnętrznego jednak, jeśli nie ma label, będzie podana domyślna wartość OK.

Może być to stosowane tam gdzie dwa wygenerowane elementy muszą dziedziczyć z atrybutu który ma taką samą nazwę. Na przykład, tworząc etykietowane pole tekstowe (pole tekstowe z tekstem opisującym obok niego) z elementami label i textbox, etykieta będzie musiała dziedziczyć tekst z atrybutu value a pole tekstowe również będzie dziedziczyło domyślną wartość z atrybutu value. Do rozwiązania tego będziemy musieli użyć innego atrybutu odwzorować go do tego samego. Poniżej to demonstruje:

XUL:

<box class="labeledtextbox" title="Enter some text:" value="OK"/>

CSS:

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

XBL: 

<binding id="labeledtextbox">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:textbox xbl:inherits="value"/>
  </content>
</binding>

textbox dziedziczy atrybut value bezpośrednio. Aby ustawić atrybut value w etykiecie, musimy użyć innej nazwy atrybutu i od wzorować go do tej wartości. Atrybut inherits w etykiecie wykorzystuje atrybut title z etykietowanego pola tekstowego i odwzorowuje go do atrybutu value elementu label. Składnia <inner attribute>=<outer attribute> jest używana do odwzorowania jednego atrybutu do innego. Tu mamy inny przykład:

XUL:

<box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png"/>

CSS:

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

XBL:

<binding id="okcancel">
  <content>
    <xul:button xbl:inherits="label=oktitle,image"/>
    <xul:button xbl:inherits="label=canceltitle"/>
  </content>
</binding>

Wartość atrybutu oktitle jest odwzorowana do atrybutu label pierwszego przycisku. Atrybut canceltitle jest odwzorowany do atrybutu label drugiego przycisku. Pierwszy przycisk również dziedziczy atrybut image a wynik jest następujący:

<box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png">
  <button label="OK" image="happy.png"/>
  <button label="Cancel"/>
</box>

Zauważ, że atrybuty są powielone z wewnętrznej (anonimowej) zawartości. Zmieniając atrybuty w polu z klasy okcancel będzie automatycznie zmieniana wartość w przycisku. Możesz również do notować, że możemy wymyślić swoje własne nazwy atrybutów. Jest to poprawne w XUL.

W następnym artykule, zobaczymy w jaki sposób dodamy do wiązania własności, metody i zdarzenia.