--- 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>