1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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>
|
