Modyfikowanie interfejsu XUL

DOM dostarcza wielu funkcji umożliwiających modyfikowanie dokumentu.

Tworzenie nowych elementów

Nowy element można utworzyć funkcją dokumentu createElement(). Pobiera ona jeden argument - nazwę nowego znacznika. Następnie przy pomocy funkcji setAttribute() można ustawić atrybuty elementu, a funkcją appendChild() dołączyć go do dokumentu XUL. Poniższy kod doda przycisk do okna XUL:

Przykład 1 : Źródła Podgląd

<script>
function addButton(){
  var aBox = document.getElementById("aBox");
  var button = document.createElement("button");
  button.setAttribute("label","Nowy przycisk");
  aBox.appendChild(button);
}
</script>

<box id="aBox" width="200">
  <button label="Dodaj" oncommand="addButton();"/>
</box>

• Skrypt ten najpierw pobiera referencję do pola z getElementById(), które jest kontenerem na nowy przycisk.
• Funkcja createElement() tworzy nowy przycisk.
• Przydzielamy etykietę Nowy przycisk do przycisku stosując funkcję setAttribute().
• Funkcja appendChild() pudełka jest wywołana by dodać przycisk do siebie.

Funkcja createElement() tworzy domyślny typ elementu dla dokumentu. W przypadku dokumentów XUL znaczy to, że będą tworzone elementy języka XUL. Dla dokumentów HTML - tworzone będą elementy HTML, więc będą miały cechy i funkcje elementów HTML. Funkcja createElementNS() może zostać zastosowana by tworzyć elementy w innej przestrzeni nazw.

Funkcja appendChild() jest stosowana by dodać element potomny kolejnego elementu. Trzema podobnymi funkcjami są funkcje insertBefore(), replaceChild() i removeChild. Składnia tych funkcji jest następująca:

parent.appendChild(child);
parent.insertBefore(child, referenceChild);
parent.replaceChild(newChild, oldChild);
parent.removeChild(child);

Poniższe funkcje pozwalają na operacje na węzłach potomnych: * appendChild(child) - dodaje element ''child'' jako węzeł potomny do innego elementu. * insertBefore(child, referenceChild) - wstawia element ''child'' przed elementem ''referenceChild''. * replaceChild(newChild, oldChild) - na miejsce elementu ''oldChild'' wstawia element ''newChild''. * removeChild(child) - usuwa element ''child''.

Powinno to być dość proste bo z nazw funkcji wiadomo co one robią.

• Funkcja insertBefore() stawia nowy element potomny przed jeden z istniejących elementów. Jest to stosowane do wstawiania do środka ustawienia dziecka zamiast na końcu, jak to robi appendChild().
• Funkcja replaceChild() usuwa istniejącego potomka i dodaje nowego w jego miejsce i na tą samą pozycję.
• Ostatecznie funkcja removeChild() usuwa węzeł.

* Funkcja <code>insertBefore()</code> wstawia nowy element potomny przed element ''referenceChild''; w celu dodania elementu pod koniec zestawu należy użyć funkcji <code>appendChild()</code>. * Funkcja <code>replaceChild()</code> usuwa istniejący element ''oldChild'', a następnie na jego miejsce wstawia nowy ''newChild''. * Funkcja <code>removeChild()</code> usuwa element. Dla powyższych funkcji element, do którego się odwołujemy powinien istnieć, w przeciwnym wypadku powstanie błąd. Note that for all these functions, the reference child or child to remove must already exist or an error occurs.

Częstym przypadkiem jest potrzeba usunięcia elementu, a następnie dodania go w innym miejscu. W tym przypadku wystarczy dodać element bez jego usuwania. Ponieważ węzeł może być tylko w jednym miejscu, użycie funkcji wstawiającej zawsze najpierw usunie węzeł z poprzedniej pozycji, dlatego jest to wygodny sposób na przemieszczanie węzłów w dokumencie.

Kopiowanie węzłów

Aby kopiować węzły, możemy wywołać funkcję cloneNode(). Funkcja ta zrobi kopię istniejącego węzła, tak więc można go dodać gdziekolwiek indziej. Oryginalny węzeł zostanie w miejscu gdzie się znajduje. Pobiera jeden argument logiczny, który sygnalizuje czy skopiowane mają być wszystkie dzieci węzła/węzłów czy nie. Jeśli argument jest fałszywy to tylko węzeł jest kopiowany, tak że kopia nie zawiera jakichkolwiek dzieci. Jeśli argument jest prawdziwy, to wszystkie dzieci zostaną skopiowane. Dzieje się to rekurencyjnie, więc dla struktury dużego drzewa upewnij się wcześniej, czy na pewno chcemy zaznaczyć atrybut true dla funkcji cloneNode(). Przykład znajduje się poniżej:

Przykład 2 : Źródła Podgląd

<hbox height="400">
  <button label="Kopiuj"
          oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/>

  <vbox>
    <button label="Pierwszy"/>
    <button label="Drugi"/>
  </vbox>
</hbox>

Po naciśnięciu przycisku <tt>Kopiuj</tt>, pobierany zostaje następny węzeł rodzeństwa (w naszym przykładzie jest to element ''vbox''). Funkcją cloneNode tworzona jest kopia tego elementu, która następnie dodana zostaje do rodzica.

Kiedy przycisk Kopiuj jest naciśnięty...

• odbierzemy nextSibling z button, które będzie elementem vbox.
• kopia tego elementu jest robiona przy użyciu funkcji cloneNode()
• i kopia jest dołączona stosując appendChild().

Zauważyć można, że niektóre elementy, takie jak listbox i menulist posiadają specjalne funkcje modyfikujące, których powinno się użyć w miarę możliwości. Są one opisane w następnym artykule.

Manipulowanie podstawowymi elementami

Podstawowe elementy XUL, takie jak przyciski, pola wyboru czy przyciski opcji mogą być modyfikowane przy pomocy skryptowych własności. Ponieważ elementy posiadają różne własności, należy sprawdzić w dokumentacji elementów każdy z nich. Wspólne własności to label, value, checked i disabled. Jeśli zachodzi taka potrzeba, ustawiają one lub czyszczą odpowiadające im atrybuty.

Główne elementy XUL takie jak przyciski, pola wyboru i przyciski opcji mogą być modyfikowane przy pomocy skryptowych własności. be manipulated using a number of script properties. The properties available are listed in the dokumentacji elementów as those available are different for each element. Common properties that you will manipulate include the <code>label</code>, <code>value</code>, <code>checked</code> and <code>disabled</code> properties. They set or clear the corresponding attribute as necessary.

Przykłady własności etykiety i wartości

Poniżej znajduje się prosty przykład zmieniający etykietę przycisku:

Przykład 3 : Źródła Podgląd

<button label="Hello" oncommand="this.label = 'Goodbye';"/>

Po naciśnięciu przycisku, element label zostaje zmieniony. Ten sam efekt można uzyskać dla różnych elementów posiadających etykietę. Polu tekstowemu można zmienić value:

Przykład 4 : Źródła Podgląd

<button label="Add" oncommand="this.nextSibling.value += '1';"/>
<textbox/>

Ten przykład dodaje '1' do pola tekstowego za każdym razem, kiedy przycisk zostanie naciśnięty. Właściwość nextSibling przemieszcza się z aktualnego elementu (przycisku) na następny (pole tekstowe). Operator += dodaje znaki do zawartości pola tekstowego, w naszym wypadku jest to zawsze '1'. Oczywiście użytkownik może również edytować pole tekstowe. Istnieje również możliwość pobrania etykiety lub wartości elementu, jak w następującym przykładzie:

Przykład 5 : Źródła Podgląd

<button label="Hello" oncommand="alert(this.label);"/>

Przerzutnik przycisku wyboru

Element typu checkbox ma własność checked, przy pomocy, której można zaznaczać lub odznaczać dany element. W poniższym przykładzie stan pola wyboru jest zmieniany po każdym użyciu przycisku. Zauważ, że własność label i value, są typu string (łańcuch znaków), podczas gdy własność checked to typ booleanowski, który może być ustawiony jako true lub false:

Przykład 6 : Źródła Podgląd

<button label="Zmień" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/>
<checkbox label="Check for messages"/>

'''Radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked. You don't have to do this manually of course. The radiogroup's <code>selectedIndex</code> property may be used to do this. The <code>selectedIndex</code> property may be used to retrieve the ''index'' of the selected radio button in the group and well as change it.'''

Przyciski opcji mogą zostać zaznaczone przy pomocy własności, ale ponieważ nie może być zaznaczony więcej niż jeden z grupy, pozostałe w tym czasie muszą być odznaczone. Oczywiście nie trzeba tego robić ręcznie, można w tym celu użyć własności selectedIndex elementu przycisku opcji. Ta sama własność może również pobrać numer aktualnie zaznaczonego elementu przycisku opcji.

Changing a element disabled or enabled

Często elementy, które nie powinny być dostępne dla użytkownika w danej chwili, są blokowane. Na przykład w oknie dialogowym użytkownik może mieć do wyboru kilka możliwości, a jedna z nich wprowadza dodatkowe opcje. Poniżej przykład:

Przykład 7 : Źródła Podgląd

<script>
function updateState(){
  var name = document.getElementById("name");
  var sindex = document.getElementById("group").selectedIndex;
  name.disabled = sindex == 0;
}
</script>

<radiogroup id="group" onselect="updateState();">
  <radio label="Random name" selected="true"/>
  <hbox>
    <radio label="Specify a name:"/>
    <textbox id="name" value="Jim" disabled="true"/>
  </hbox>
</radiogroup>

W tym przykładzie funkcja updateState() jest wywołana, kiedy zdarzenie select zostanie uruchomione w grupie elementów radio. Ma to miejsce kiedy przycisk opcji zostanie zaznaczony. Funkcja ta, przy pomocy własności selectedIndex, pobiera indeks aktualnie zaznaczonego elementu. Zauważ, iż mimo że jeden z elementów radio jest wewnątrz pola hbox, dalej stanowi część grupy radiogroup. Jeśli pierwszy element jest zaznaczony (indeks równy 0), pole tekstowe zostaje zablokowane. Jeśli drugi element - można edytować pole tekstowe.

Następny artykuł dostarczy nam więcej szczegółowych informacji o manipulacji grupami przycisków opcji tak samo jak manipulacji listami.