Dynamiczne zmiany interfejsu użytkownika bazującego na XUL-u

Wystąpiły błędy skryptów na tej stronie. Mimo, że są one kierowane do redaktorów serwisu, można je częściowo przeglądać poniżej.

Poniższy artykuł opisuje manipulacje interfejsami XUL używając DOM oraz innych API. Objaśnia koncepcję dokumentów DOM, pokazuje kilka prostych przykładów manipulacji dokumentami DOM oraz objaśnia pracę z anonimową treścią XBL-a używając metod Mozilli.

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ł O modelu obiektowym dokumentu lub strona wprowadzenia na stronie Dokumentacja Gecko DOM.

Wstęp

XUL jest językiem XML-a używanym w różnych aplikacjach bazujących na Mozilli (tj. Firefox lub Thunderbird) do opisu interfejsu użytkownika.W aplikacjach XUL-a JavaScript definiuje zachowanie używając API DOM w celu uzyskania dostępu do dokumentu XUL-a.

Czym są API DOM?

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 document.getElementById() zwracająca element na podstawie jego id. Mogłeś użyć również innych wywołań jak element.setAttribute() lub też jeśli pisałeś rozszerzenie addEventListener(). Wszystkie one są zdefiniowane w DOM-ie.

Istnieją też inne metody DOM, które tworzą, przenoszą lub usuwają elementy dokumentu. Zostaną one przedstawione w dalszych sekcjach. Teraz dowiedzmy się czym jest dokument.

Czym jest dokument?

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 Inspektor DOM by zobaczyć reprezentacje dokumentu. Todo: simple example of a XUL document and a tree

Możesz myśleć o dokumencie jako o reprezentacji wewnątrz pamięci poprawnego kodu HTML lub XML (włącznie z XUL-em).

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 <iframe>, <browser> lub <tabbrowser>. Musisz być pewny, że zawsze manipulujesz odpowiednim dokumentem (więcej możesz dowiedzieć się z Working with windows in chrome code). Jeśli twój skrypt jest załączany za pomocą znacznika <script>, wtedy własność document odnosi się do dokumentu DOM zawierającego tenże skrypt.

Przykłady: Zastosowanie metod języka DOM

Poniższa sekcja pokazuje użycie metod DOM: appendChild(), createElement(), insertBefore() oraz removeChild().

Usuwanie wszystkich potomków elementów

Przykład usuwa wszystkich potomków elementu z aktualnego dokumentu posiadających id "someElement" przez wywołanie metody removeChild() w celu usunięcia pierwszego potomka, aż do momentu, gdy nie pozostanie więcej potomków.

Zauważ, że hasChildNodes() i firstChild są również częścią API DOM.

var element = document.getElementById("someElement");
while(element.hasChildNodes())
  element.removeChild(element.firstChild);

Dodawanie pozycji menu

Przykład dodaje dwa nowe elementy do <menupopup>: po jednym na początek oraz koniec. Używa metody document.createElementNS() do stworzenia elementów, a następnie insertBefore() oraz appendChild() do włączenia stworzonych elementów do dokumentu.

Uwaga:

  • document.createElementNS() tworzy element, ale nie umieszcza go nigdzie w dokumencie. Musisz użyć innych metod DOM, tj. appendChild(), do włączenia nowego elementu do dokumentu.
  • appendChild() dołącza węzeł na końcu wszystkich węzłów, natomiast insertBefore() wkłada węzeł przed węzłem opisanym jego drugim parametrem.
function createMenuItem(aLabel) {
  const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  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);

Możesz użyć metod appendChild() i insertBefore() 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:

popup.appendChild(first);

Komenda usunie węzeł z aktualnej pozycji i doda go na końcu menu.

Anonimowa treść (XBL)

XBL 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 treścią anonimową, która nie jest dostępna za pomocą normalnych metod DOM.

Należy wtedy używać metod interfejsu nsIDOMDocumentXBL. Przykładowo:

// 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");

Patrz również getAnonymousNodes oraz getAnonymousElementByAttribute.

Po otrzymaniu anonimowego węzła możesz używać normalnych metod DOM do nawigacji oraz manipulowania resztą węzłów tegoż wiązania.

Zobacz również

{{ languages( { "en": "en/Dynamically_modifying_XUL-based_user_interface", "fr": "fr/Modification_dynamique_d\'interfaces_utilisateur_en_XUL", "ja": "ja/Dynamically_modifying_XUL-based_user_interface", "ru": "ru/\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438_\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0439_\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439_\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441_\u043d\u0430_XUL" } ) }}

Autorzy i etykiety dokumentu

Autorzy tej strony: Ptak82, Bedi, Mgjbot
Ostatnia aktualizacja: Mgjbot,