Dynamická změna uživatelského rozhraní v XUL

 

Tento článek pojednává o ovládání XUL rozhraní pomocí DOM a dalších API. Vysvětluje koncept DOM - dokumentů, a demonstruje několik jednoduchých příkladů používajících DOM volání k předvedení základů ovládání dokumentu, a pak k demonstraci práce s anonymním XBL obsahem pomocí metod specifických pro Mozillu.

Článek byl napsán pro začátečníky až pro středně pokročilé XUL vývojáře. Předpokládáme, že čtenář má základní znalosti XUL a JavaScriptu. Také si můžete přečíst nějaké úvodní dokumenty o DOM, jako článek o Stručném úvodu do DOM nebo úvodní stranu Referenční příručky DOMu v Gecku.

Úvod

XUL je XML jazyk používán různými aplikacemi postavenými na Mozille k popisu uživatelského rozhraní, například Firefox či Thunderbird. V XUL aplikacích definuje JavaScript chování, DOM API slouží k přístupu ke XUL dokumentu.

Takže co je to DOM API?

Existují rozhraní, které jsou používány ke komunikaci mezi skriptem a dokumentem. Pokud jste napsali jakýkoliv skript, který pracoval společně s XUL nebo HTML dokumentem, tak jste již použili volání DOM. Nejznámější DOM metodou je nepochybně document.getElementById(), který vrátí element určený pomocí id. Můžete použít také další volání, například element.setAttribute(), nebo pokud jste napsali rozšíření, tak metodu addEventListener(). Všechny jsou definované v DOM.

Existují také DOM metody, které vytvoří, přesunou nebo odstraní elementy z dokumentu. Budou představeny v pozdější části. Právě teď, se naučíme, co je to dokument.

Co je to dokument?

Dokument je struktura dat, která může být ovládána přes DOM API. Logická struktura každého dokumentu je strom s uzly tvořící elementy, atributy, zpracovávací instrukce, komentáře, atd. K prohlížení stromové prezentace dokumentu použijte DOM Inspektor.

O dokumentu můžete uvažovat jako o paměťové reprezentaci korektního HTML nebo správně formulovaného XML (včetně XUL).

Je důležité si zapamatovat, že různé webové stránky (a dokonce různé instance stejné webové stránky) odpovídají různým dokumentům. Každé XUL okno má vlastní charakteristický dokument, a dokonce může existovat několik různých dokumentů v jednom okně, když existují v elementech <iframe>, <browser> nebo <tabbrowser>. Je třeba se ujistit, že vždy používáte ten správný dokument (více na en:Working with windows in chrome code). Pokud je váš skript vložen pomocí tagu <script>, vlastnost document odkazuje na DOM dokument, do kterého je tento skript vložen.

Příklady: Použití DOM metod

Tato sekce ukazuje použití DOM metod appendChild(), createElement(), insertBefore() a removeChild().

Odstranění všech potomků prvku

Tento příklad odstraní všechny potomky prvku s id "nejakyPrvek" z nynějšího dokumentu zavoláním metody removeChild() k odstranění prvního potomka, než nebude existovat žádný zbývající potomek.

Všimněte si, že hasChildNodes() a firstChild jsou také součástí DOM API.

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

Vložení položek nabídky do nabídky

Tento příklad přidá dvě nové položky menu do <menupopup>: na jeho začátek a konec. Je použita metoda document.createElementNS() k vytvoření položek a insertBefore() spolu s appendChild() k vložení vytvořených prvků v dokumentu.

Poznámka:

  • document.createElementNS() vytvoří element, ale nevloží ho nikam v dokumentu. Je třeba použít ostatní metody DOM, například appendChild() k vložení nově vytvořeného prvku v dokumentu.
  • appendChild() přidá uzel za všechny ostatní uzly, zatímco insertBefore() vloží uzel za uvedený uzel ve druhém parametru.
function vytvoritPolozkuNabidky(nazevPolozky) {
  const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  var polozka = document.createElementNS(XUL_NS, "menuitem"); // Vytvoří nový XUL element menuitem
  polozka.setAttribute("label", nazevPolozky);
  return polozka;
}

var nabidka = document.getElementById("mojeNabidka"); // Element <menupopup>
var prvni = vytvoritPolozkuNabidky("První položka");
var posledni = vytvoritPoluzkuNabidky("Poslední položka");
nabidka.insertBefore(prvni, nabidka.firstChild);
nabidka.appendChild(posledni);

Také můžete použít appendChild() a insertBefore() k přesunu existujících prvků. Například, kdyby jste chtěli přesunout položku označenou "První položka" na konec nabídky, tak stačí tento příkaz níže přidat na poslední řádek:

nabidka.appendChild(prvni);

Tento příkaz by měl odstranit uzel z jeho aktuální pozice v dokumentu a znovu ho vložit na konec nabídky.

Anonymní obsah (XBL)

XBL je jazyk používaný v Mozille k definování widgetů. Widgety definované v XBL mohou vybrat k určení nějaký obsah, který je vložen k přiřazenému prvku, když spojení je připojeno. Tento obsah, nazývaný anonymní obsah, není přístupný pomocí normálních DOM metod.

Potřebujete použít metody rozhraní en:nsIDOMDocumentXBL jako náhradu. Například:

// Získání prvního anonymního potomka předaného pomocí uzlu
document.getAnonymousNodes(node)[0];

// vrací NodeList anonymních elementů s atributem anonid rovným "el1"
document.getAnonymousElementByAttribute(node, "anonid", "el1");

Podívejte se na getAnonymousNodes a getAnonymousElementByAttribute v referenční příručce XBL

Jakmile máte anonymní uzel, tak můžete použít normální DOM metody k řízení a manipulování ostatních uzlů, které jsou spojené.

Dodatečné zdroje

Document Tags and Contributors

Contributors to this page: teoli, fscholz, Jsf, JasnaPaka, Juhyx, DJ.Maca, Pawell
Last updated by: teoli,