Skip to main content

Visit Mozilla.org

CSS:Na początek:Wiązania XBL

z Mozilla Developer Center, polskiego centrum programistów Mozilli.


Ta strona opisuje jak możesz używać CSS-u w Mozilli, aby poprawić strukturę złożonych aplikacji, sprawiając, że kod i zasoby stają się wygodniejsze do zarządzania i ponownego użycia.

Wykorzystasz te techniki w przykładowej demonstracji.

[edytuj] Informacja: Wiązania XBL

Struktura dostarczana przez język znaczników i CSS nie jest idealna dla złożonych aplikacji, gdzie fragmentu muszą być kompletne i umożliwiać ponowne wykorzystanie. Możesz umieścić arkusze stylów w osobnych plikach, możesz umieścić skrypty w osobnych plikach. Ale musisz dodawać odnośniki do tych plików z dokumentu.

Inne ograniczenie strukturalne dotyczy zawartości. Możesz użyć CSS, aby dodać zawartość do wybranych elementów, ale ta zawartość jest ograniczona do tekstu i obrazków, a ich pozycjonowanie jest ograniczone do przed i za wybranym elementem.

Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: XBL (Język Wiązań XML). Możesz używać XBL-a do wiązania wybranych elementów:

  • arkuszy stylów,
  • zawartości,
  • właściwości i metod,
  • uchwytów zdarzeń.

Ponieważ unikasz umieszczania odnośników do tego wszystkiego w dokumencie, możesz stworzyć elementy kompletne, którymi łatwo można zarządzać i które można wielokrotnie wykorzystywać.

Więcej szczegółów
Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o XBL na tym wiki.

[edytuj] Zadanie: Demonstracja XBL-a

Stwórz nowy dokument HTML, doc6.html. Skopiuj i wklej do niego poniższy kod: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE>
<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
</HEAD>

<BODY>
<H1>XBL demonstration</H1>
<DIV id="square">Click Me</DIV>
</BODY>

</HTML>

Stwórz nowy plik CSS, style6.css. Ten arkusz stylów zawiera style dokumentu. Skopiuj i wklej do niego poniższy kod: 

/*** XBL demonstration ***/
#square {
  -moz-binding: url("square.xbl#square");
  }

Stwórz nowy plik tekstowy, square.xbl. Ten plik zawiera wiązanie XBL. Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: 

<?xml version="1.0"?>
<!DOCTYPE bindings>
<bindings xmlns="http://www.mozilla.org/xbl">

<binding id="square">

  <resources>
    <stylesheet src="bind6.css"/>
    </resources>

  <content xmlns="http://www.w3.org/1999/xhtml">
    <div anonid="square"/>
    <button anonid="button" type="button">
      <xbl:children/>
      </button>
    </content>

  <implementation>

    <field name="square"><![CDATA[
      document.getAnonymousElementByAttribute(this, "anonid", "square")
      ]]></field>

    <field name="button"><![CDATA[
      document.getAnonymousElementByAttribute(this, "anonid", "button")
      ]]></field>

    <method name="doDemo">
      <body><![CDATA[
        this.square.style.backgroundColor = "#cf4"
        this.square.style.marginLeft = "20em"
        this.button.setAttribute("disabled", "true")
        setTimeout(this.clearDemo, 2000, this)
        ]]></body>
      </method>

    <method name="clearDemo">
      <parameter name="me"/>
      <body><![CDATA[
        me.square.style.backgroundColor = "transparent"
        me.square.style.marginLeft = "0"
        me.button.removeAttribute("disabled")
        ]]></body>
      </method>

    </implementation>

  <handlers>
    <handler event="click" button="0"><![CDATA[
     if (event.originalTarget == this.button) this.doDemo()
     ]]></handler>
    </handlers>

  </binding>

</bindings>

Stwórz nowy plik CSS, bind6.css. Ten arkusz stylów zawiera style do wiązań. Skopiuj i wklej do niego poniższy kod: 

/*** XBL demonstration ***/
[anonid="square"] {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  }

[anonid="button"] {
  margin-top: 1em;
  padding: .5em 2em;"
  }

Otwórz dokument w swojej przeglądarce i naciśnij przycisk.

To wiki nie obsługuje JavaScript-u na stronach, więc nie jest możliwe pokazanie demonstracji. Wygląda to mniej więcej tak jak poniżej, przed i po naciśnięciu przycisku:

XBL demonstration

XBL demonstration

Uwagi dotyczące demonstracji:

  • Dokument HTML posiada odnośniki do arkusza stylów, ale także do pliku JavaScript.
  • Dokument nie posiada żadnego przycisku. Posiada jedynie tekst, który pojawi się na nim. Przycisk jest dodawany przez wiązanie.
  • Arkusz stylów dokumentu posiada odnośnik do wiązania.
  • Wiązanie ma odnośnik do własnego arkusza stylów i własną treść oraz kod JavaScript. Wiązanie zawiera własną zawartość.
Wyzwanie
Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor.

Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość.

[edytuj] Co dalej?

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

W tej demonstracji obiekt square oraz przycisk tworzą kompletną kontrolkę, która działa wewnątrz dokumentu HTML.

Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika. Demonstruje to następna strona: XUL-owe interfejsy użytkownika

Źródło: "http://developer.mozilla.org/pl/docs/CSS:Na_pocz%C4%85tek:Wi%C4%85zania_XBL"