---
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>&lt;iframe&gt;</code>, <code>&lt;browser&gt;</code> lub <code>&lt;tabbrowser&gt;</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>&lt;script&gt;</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 &lt;menupopup&gt;: 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 &lt;menupopup&gt;
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>