diff options
Diffstat (limited to 'files/pl/web/css/na_początek/wiązania_xbl')
| -rw-r--r-- | files/pl/web/css/na_początek/wiązania_xbl/index.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/files/pl/web/css/na_początek/wiązania_xbl/index.html b/files/pl/web/css/na_początek/wiązania_xbl/index.html new file mode 100644 index 0000000000..9218b33797 --- /dev/null +++ b/files/pl/web/css/na_początek/wiązania_xbl/index.html @@ -0,0 +1,176 @@ +--- +title: Wiązania XBL +slug: Web/CSS/Na_początek/Wiązania_XBL +tags: + - 'CSS:Na_początek' +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +<p> +</p><p>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. +</p><p>Wykorzystasz te techniki w przykładowej demonstracji. +</p> +<h3 id="Informacja:_Wi.C4.85zania_XBL" name="Informacja:_Wi.C4.85zania_XBL"> Informacja: Wiązania XBL </h3> +<p>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. +</p><p>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 <i>przed</i> i <i>za</i> wybranym elementem. +</p><p>Mozilla dodaje mechanizm, który pozwala pokonać te ograniczenia: <i>XBL</i> (Język Wiązań XML). +Możesz używać XBL-a do wiązania wybranych elementów: +</p> +<ul><li>arkuszy stylów, +</li><li>zawartości, +</li><li>właściwości i metod, +</li><li>uchwytów zdarzeń. +</li></ul> +<p>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ć. +</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> +<caption>Więcej szczegółów +</caption><tbody><tr> +<td> Aby dowiedzieć się więcej o wiązaniach XBL, zajrzyj na stronę o <a href="pl/XBL">XBL</a> na tym wiki. +</td></tr></tbody></table> +<h3 id="Zadanie:_Demonstracja_XBL-a" name="Zadanie:_Demonstracja_XBL-a"> Zadanie: Demonstracja XBL-a </h3> +<p>Stwórz nowy dokument HTML, <code>doc6.html</code>. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre><!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> +</pre></div> +<p>Stwórz nowy plik CSS, <code>style6.css</code>. +Ten arkusz stylów zawiera style dokumentu. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** XBL demonstration ***/ +#square { + -moz-binding: url("square.xbl#square"); + } +</pre></div> +<p>Stwórz nowy plik tekstowy, <code>square.xbl</code>. +Ten plik zawiera wiązanie XBL. +Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały: +</p> +<div style="width: 48em; height: 12em; overflow: auto;"><pre><?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> +</pre></div> +<p>Stwórz nowy plik CSS, <code>bind6.css</code>. +Ten arkusz stylów zawiera style do wiązań. +Skopiuj i wklej do niego poniższy kod: +</p> +<div style="width: 48em;"><pre>/*** XBL demonstration ***/ +[anonid="square"] { + width: 20em; + height: 20em; + border: 2px inset gray; + } + +[anonid="button"] { + margin-top: 1em; + padding: .5em 2em;" + } +</pre></div> +<p>Otwórz dokument w swojej przeglądarce i naciśnij przycisk. +</p><p>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: +</p> +<table> +<tbody><tr> +<td style="padding-right: 2em;"> +<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> +<tbody><tr> +<td><p><b>XBL demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white; margin-right: 5em;"> +<div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td><td> +<table style="border: 2px outset #36b; padding: 0 4em .5em .5em;"> +<tbody><tr> +<td><p><b>XBL demonstration</b></p> +<div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #cf4; margin-left: 5em;"> +<div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> +</div></div></td></tr></tbody></table> +</td></tr></tbody></table> +<p>Uwagi dotyczące demonstracji: +</p> +<ul><li>Dokument HTML posiada odnośniki do arkusza stylów, ale także do pliku JavaScript. +</li><li>Dokument nie posiada żadnego przycisku. Posiada jedynie tekst, który pojawi się na nim. Przycisk jest dodawany przez wiązanie. +</li><li>Arkusz stylów dokumentu posiada odnośnik do wiązania. +</li><li>Wiązanie ma odnośnik do własnego arkusza stylów i własną treść oraz kod JavaScript. Wiązanie zawiera własną zawartość. +</li></ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> +<caption>Wyzwanie +</caption><tbody><tr> +<td> Zmień plik XBL tak, aby obiekt square poszerzał się dwukrotnie, zamiast przeskakiwania w prawo, kiedy zmienia kolor. +<p>Użyj Inspektora DOM, aby zbadać dokument, analizując dodaną zawartość. +</p> +</td></tr></tbody></table> +<h4 id="Co_dalej.3F" name="Co_dalej.3F"> Co dalej? </h4> +<p>Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie <a>Dyskusji</a>. +</p><p>W tej demonstracji obiekt square oraz przycisk tworzą kompletną <i>kontrolkę</i>, która działa wewnątrz dokumentu HTML. +</p><p>Mozilla posiada wyspecjalizowany język znaczników do tworzenia interfejsów użytkownika. +Demonstruje to następna strona: +<b><a href="pl/CSS/Na_pocz%c4%85tek/XUL-owe_interfejsy_u%c5%bcytkownika">XUL-owe interfejsy użytkownika</a></b> +</p>{{ languages( { "en": "en/CSS/Getting_Started/XBL_bindings", "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pt": "pt/CSS/Como_come\u00e7ar/XBL_bindings" } ) }} |