diff options
Diffstat (limited to 'files/pl/dynamiczne_zmiany_interfejsu_użytkownika_bazującego_na_xul-u/index.html')
| -rw-r--r-- | files/pl/dynamiczne_zmiany_interfejsu_użytkownika_bazującego_na_xul-u/index.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/files/pl/dynamiczne_zmiany_interfejsu_użytkownika_bazującego_na_xul-u/index.html b/files/pl/dynamiczne_zmiany_interfejsu_użytkownika_bazującego_na_xul-u/index.html new file mode 100644 index 0000000000..1a97e80e84 --- /dev/null +++ b/files/pl/dynamiczne_zmiany_interfejsu_użytkownika_bazującego_na_xul-u/index.html @@ -0,0 +1,81 @@ +--- +title: Dynamiczne zmiany interfejsu użytkownika bazującego na XUL-u +slug: Dynamiczne_zmiany_interfejsu_użytkownika_bazującego_na_XUL-u +tags: + - DOM + - Dodatki + - Rozszerzenia + - Wszystkie_kategorie + - XUL +--- +<p> </p> +<p>Poniższy artykuł opisuje manipulacje interfejsami <a href="pl/XUL">XUL</a> używając <a href="pl/DOM">DOM</a> oraz innych API. Objaśnia koncepcję + <i> + dokumentów</i> + DOM, pokazuje kilka prostych przykładów manipulacji dokumentami DOM oraz objaśnia pracę z + <i> + anonimową treścią <a href="pl/XBL">XBL</a>-a</i> + używając metod Mozilli.</p> +<p>Jest on napisany dla programistów początkujących i średnio zaawansowanych. Założono również, że czytelnik posiada podstawową wiedzę na temat XUL-a oraz JavaScriptu. Można również przejrzeć dokumenty wprowadzające do DOM, jak np. artykuł <a href="pl/O_modelu_obiektowym_dokumentu">O modelu obiektowym dokumentu</a> lub <a href="pl/Dokumentacja_Gecko_DOM/Wprowadzenie">strona wprowadzenia</a> na stronie <a href="pl/Dokumentacja_Gecko_DOM">Dokumentacja Gecko DOM</a>.</p> +<h3 id="Wst.C4.99p" name="Wst.C4.99p">Wstęp</h3> +<p><a href="pl/XUL">XUL</a> jest językiem <a href="pl/XML">XML</a>-a używanym w różnych aplikacjach bazujących na Mozilli (tj. Firefox lub Thunderbird) do opisu interfejsu użytkownika.W aplikacjach XUL-a <a href="pl/JavaScript">JavaScript</a> definiuje zachowanie używając <a href="pl/Dokumentacja_Gecko_DOM">API DOM</a> w celu uzyskania dostępu do dokumentu XUL-a.</p> +<p>Czym są API DOM?</p> +<p>Są one interfejsami używanymi do interakcji pomiędzy skryptem a dokumentem. Jeśli już napisałeś skrypt współpracujący z dokumentem XUL-a (lub HTML-a) to użyłeś wywołań DOM-a. Najbardziej znaną metodą DOM jest prawdopodobnie <code><a href="pl/DOM/document.getElementById">document.getElementById()</a></code> zwracająca element na podstawie jego <code>id</code>. Mogłeś użyć również innych wywołań jak <code><a href="pl/DOM/element.setAttribute">element.setAttribute()</a></code> lub też jeśli pisałeś rozszerzenie <code><a href="pl/DOM/element.addEventListener">addEventListener()</a></code>. Wszystkie one są zdefiniowane w DOM-ie.</p> +<p>Istnieją też inne metody DOM, które tworzą, przenoszą lub usuwają elementy dokumentu. Zostaną one przedstawione w dalszych sekcjach. Teraz dowiedzmy się czym jest + <i> + dokument</i> + .</p> +<h3 id="Czym_jest_dokument.3F" name="Czym_jest_dokument.3F">Czym jest dokument?</h3> +<p>Dokument jest strukturą danych manipulowaną za pomocą API DOM. Strukturą logiczną jest drzewo, gdzie węzłami są elementy, atrybuty, instrukcje, komentarze itd. Użyj <a href="pl/Inspektor_DOM">Inspektor DOM</a> by zobaczyć reprezentacje dokumentu. <span class="comment">Todo: simple example of a XUL document and a tree</span></p> +<p>Możesz myśleć o dokumencie jako o reprezentacji wewnątrz pamięci poprawnego kodu HTML lub XML (włącznie z XUL-em).</p> +<p>Ważnym jest by pamiętać, że różne strony (lub nawet różne instancje wewnątrz tej samej strony) odpowiadają różnym dokumentom. Każde okno XUL-a posiada swój własny dokument, a nawet kilka różnych dokumentów w jednym oknie, gdyż są tam elementy jak <code><iframe></code>, <code><browser></code> lub <code><tabbrowser></code>. Musisz być pewny, że zawsze manipulujesz odpowiednim dokumentem (więcej możesz dowiedzieć się z <a href="pl/Working_with_windows_in_chrome_code">Working with windows in chrome code</a>). Jeśli twój skrypt jest załączany za pomocą znacznika <code><script></code>, wtedy własność <code>document</code> odnosi się do dokumentu DOM zawierającego tenże skrypt.</p> +<h3 id="Przyk.C5.82ady:_Zastosowanie_metod_j.C4.99zyka_DOM" name="Przyk.C5.82ady:_Zastosowanie_metod_j.C4.99zyka_DOM">Przykłady: Zastosowanie metod języka DOM</h3> +<p>Poniższa sekcja pokazuje użycie metod DOM: <code>appendChild()</code>, <code>createElement()</code>, <code>insertBefore()</code> oraz <code>removeChild()</code>.</p> +<h4 id="Usuwanie_wszystkich_potomk.C3.B3w_element.C3.B3w" name="Usuwanie_wszystkich_potomk.C3.B3w_element.C3.B3w">Usuwanie wszystkich potomków elementów</h4> +<p>Przykład usuwa wszystkich potomków elementu z aktualnego dokumentu posiadających id <code>"someElement"</code> przez wywołanie metody <code>removeChild()</code> w celu usunięcia pierwszego potomka, aż do momentu, gdy nie pozostanie więcej potomków.</p> +<p>Zauważ, że <code>hasChildNodes()</code> i <code>firstChild</code> są również częścią API DOM.</p> +<pre class="eval">var element = document.getElementById("someElement"); +while(element.hasChildNodes()) + element.removeChild(element.firstChild); +</pre> +<h4 id="Dodawanie_pozycji_menu" name="Dodawanie_pozycji_menu">Dodawanie pozycji menu</h4> +<p>Przykład dodaje dwa nowe elementy do <menupopup>: po jednym na początek oraz koniec. Używa metody <code>document.createElementNS()</code> do stworzenia elementów, a następnie <code>insertBefore()</code> oraz <code>appendChild()</code> do włączenia stworzonych elementów do dokumentu.</p> +<p>Uwaga:</p> +<ul> + <li><code>document.createElementNS()</code> tworzy element, ale nie umieszcza go nigdzie w dokumencie. Musisz użyć innych metod DOM, tj. <code>appendChild()</code>, do włączenia nowego elementu do dokumentu.</li> + <li><code>appendChild()</code> dołącza węzeł na końcu wszystkich węzłów, natomiast <code>insertBefore()</code> wkłada węzeł przed węzłem opisanym jego drugim parametrem.</li> +</ul> +<pre class="eval">function createMenuItem(aLabel) { + const XUL_NS = "<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"; + var item = document.createElementNS(XUL_NS, "menuitem"); // stwórz nowy element XUL menu + item.setAttribute("label", aLabel); + return item; +} +var popup = document.getElementById("myPopup"); // element <menupopup> +var first = createMenuItem("Pierwsza pozycja"); +var last = createMenuItem("Ostatnia pozycja"); +popup.insertBefore(first, popup.firstChild); +popup.appendChild(last); +</pre> +<p>Możesz użyć metod <code>appendChild()</code> i <code>insertBefore()</code> również do przesuwania istniejących elementów. Przykładowo możesz przenieść element nazwany "Pierwsza pozycja" na koniec menu poprzez dodanie poniższej linii na koniec kodu przedstawionego powyżej:</p> +<pre class="eval">popup.appendChild(first); +</pre> +<p>Komenda usunie węzeł z aktualnej pozycji i doda go na końcu menu.</p> +<h3 id="Anonimowa_tre.C5.9B.C4.87_.28XBL.29" name="Anonimowa_tre.C5.9B.C4.87_.28XBL.29">Anonimowa treść (XBL)</h3> +<p><a href="pl/XBL">XBL</a> jest językiem używanym przez Mozillę do definiowania nowych interfejsów. Nowe interfejsy zdefiniowane przez XBL mogą określić pewną treść, wbudowaną do ograniczonego elementu, w przypadku gdy wiązanie jest dołączone. W tym przypadku nazywa się to + <i> + treścią anonimową</i> + , która nie jest dostępna za pomocą normalnych metod DOM.</p> +<p>Należy wtedy używać metod interfejsu <code><a href="pl/NsIDOMDocumentXBL">nsIDOMDocumentXBL</a></code>. Przykładowo:</p> +<pre class="eval">// pobiera pierwszego potomka danego węzła +document.getAnonymousNodes(node)[0]; + +// zwraca NodeList elementów anonimowych, których atrybut anonid równa się el1 +document.getAnonymousElementByAttribute(node, "anonid", "el1"); +</pre> +<p>Patrz również <a href="pl/XBL/Dokumentacja_XBL_1.0/Interfejsy_DOM#getAnonymousNodes">getAnonymousNodes</a> oraz <a href="pl/XBL/Dokumentacja_XBL_1.0/Interfejsy_DOM#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a>.</p> +<p>Po otrzymaniu anonimowego węzła możesz używać normalnych metod DOM do nawigacji oraz manipulowania resztą węzłów tegoż wiązania.</p> +<h3 id="Zobacz_r.C3.B3wnie.C5.BC" name="Zobacz_r.C3.B3wnie.C5.BC">Zobacz również</h3> +<ul> + <li><a href="pl/Kurs_XUL/Modyfikowanie_interfejsu_XUL">Kurs XUL:Modyfikowanie interfejsu XUL</a></li> +</ul> |