Ptaszor i jego blog! Lol…

Przyszła kolej na kontrolki list; Do obsługi list w XUL służą dwa elementy:

1. listbox – do tworzenia list wielowierszowych
2. menulist – element do list rozwijanych (tą kontrolką listy, zajmę się w kolejnym poście)

Element listbox stosujemy dla określenia swojego pola oraz element listitem dla każdej pozycji. W przykładzie pole listy będzie zawierało cztery wiersze, po jednym dla każdej pozycji. Kod:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="przyklad-okno" title="Przykład listbox"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<listbox>
  <listitem label="Element 1"/>
  <listitem label="Element 2"/>
  <listitem label="Element 3"/>
  <listitem label="Element 4"/>
</listbox>

</window>

Wyświetli:

listbox_element.xul – W przykładzie widać trochę inną zawartość, lecz jest to pokazany powyżej kod.

Możliwe jest powiązanie wartości każdej pozycji stosując atrybutu value. Wartość będzie nam przydatna w momencie definiowania w dokumencie skryptów i poprzez ta wartość poszczególne elementy będą mogłby być zdefiniowane.

Dodam także atrybut row w celu określenia liczby pozycji w mojej listście. Przykład:

<listbox rows="3">
  <listitem label="element 1" value="pierwszy"/>
  <listitem label="element 2" value="drugi"/>
  <listitem label="element 3" value="trzeci"/>
</listbox>

Wyświetli:

listbox_rows.xul

Wielokolumnowe listy

Listy mogą zawierać po kilka kolumn, w każdej z kolumn można umieścić po kilka komórek. Najczęściej umieszcza się w nich tekst. Dwa znaczniki służą do określania kolumn w polu listy. Element listcols przechowuje informację o kolumnach, z których każda określona jest przy pomocy elementu listcol. Dla każdej kolumny należy stosować jednego elementu listcol.

Dla każdej komórki w wierszu możemy stosować element listcell. Jeśli chcemy mieć trzy kolumny, będziemy dodawać element listcell wewnątrz każdego elementu listitem. Do określenia tekstu zawartego w komórce, umieszczamy atrybut label w listcell.

Zobaczmy to na przykładzie:

<listbox>
  <listcols>
    <listcol/>
    <listcol/>
  </listcols>
  <listitem>
    <listcell label="Elem. 1 w 1 kolumnie"/>
    <listcell label="Elem. 1 w 2 kolumnie"/>
  </listitem>
  <listitem>
    <listcell label="Elem. 2 w 1 kolumnie"/>
    <listcell label="Elem. 2 w 2 kolumnie"/>
  </listitem>
  <listitem>
    <listcell label="Elem. 3 w 1 kolumnie"/>
    <listcell label="Elem. 3 w 2 kolumnie"/>
  </listitem>
</listbox>

Co wyświetli nam:

przyklad_listcol.xul

OK, aby za długo nie przynudzać podzieliłem temat kontrolek list na dwie części. W kolejnej części dodam jeszcze jeden przykład dot. elementu listbox oraz zajmę się drugim elementem menulist.

Zobacz także:

1. Kurs XUL
2. Poprzednie posty na moim blogu