Kontrolki list

XUL posiada kilka typów elementów do tworzenia pól list.

Pola listy

Pola listy stosuje się do wyświetlania kilku pozycji w liście. Użytkownik ma możliwość wybierania dowolnych pozycji z takiej listy.

XUL udostępnia dwa typy elementów do tworzenia list, element listbox do tworzenia list wielowierszowych oraz element menulist do list rozwijanych. Działają w podobny sposób do elementu select znanego z HTML-a, który wykonuje obie funkcje, ale elementy XUL posiadają więcej dodatkowych cech.

Najprostsze pole listy stosuje element listbox dla określenia swojego pola oraz element listitem dla każdej pozycji. Na przykład: pole listy będzie zawierało cztery wiersze, jeden dla każdej pozycji.

var el = env.locale; Przykład 1 : Źródła Podgląd

<listbox>
  <listitem label="Butter Pecan"/>
  <listitem label="Chocolate Chip"/>
  <listitem label="Raspberry Ripple"/>
  <listitem label="Squash Swirl"/>
</listbox>

Podobnie jak w przypadku elementu option z HTML-a możliwe jest powiązanie wartości każdej pozycji poprzez użycie atrybutu value. Następnie możemy stosować wartości w skryptach. Pole listy domyślnie przyjmuje odpowiedni rozmiar, ale możemy go kontrolować atrybutem rows. Ustaw go na odpowiednią liczbę wierszy (rows), aby wyświetlić je w polu listy. Pasek przewijania użytkownik zastosuje, jeśli będą do wyświetlenia dodatkowe wiersze.

Poniższy przykład prezentuje te dodatkowe cechy:

var el = env.locale; Przykład 2 : Źródła Podgląd

<listbox rows="3">
  <listitem label="Butter Pecan" value="bpecan"/>
  <listitem label="Chocolate Chip" value="chocchip"/>
  <listitem label="Raspberry Ripple" value="raspripple"/>
  <listitem label="Squash Swirl" value="squash"/>
</listbox>

Przykład został przystosowany do wyświetlania tylko trzech wierszy na raz. Do każdej pozycji listy zostały też dodane wartości. Pola list posiadają kilka dodatkowych cech, które opiszemy później.

Wielokolumnowe pola listy

Pole listy obsługuje również wiele kolumn. Każda komórka może posiadać dowolną zawartość, chociaż najczęściej jest stosowany tekst. Kiedy użytkownik wybiera pozycję na liście, zaznaczany zostaje cały wiersz. Nie ma możliwości wybrania pojedynczej komórki.

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ć jeden element listcol.

Dla każdej komórki w wierszu możemy stosować element listcell. Jeśli chcesz mieć trzy kolumny, będziesz musiał dodać trzy elementy listcell wewnątrz każdego listitem. Do określenia tekstu zawartego w komórce umieść atrybut label w listcell. W prostym przypadku, gdy jest tylko jedna kolumna, atrybut label możemy kierować bezpośrednio do elementu listitem i w ogóle nie korzystać z elementu listcell, jak to widzieliśmy we wcześniejszym przykładzie.

Następujący przykład jest polem listy z dwoma kolumnami i trzema wierszami:

var el = env.locale; Example 3 : Źródła Podgląd

<listbox>
  <listcols>
    <listcol/>
    <listcol/>
  </listcols>
  <listitem>
    <listcell label="Grzegorz"/>
    <listcell label="Malarz"/>
  </listitem>
  <listitem>
    <listcell label="Maria"/>
    <listcell label="Producent świeczek"/>
  </listitem>
  <listitem>
    <listcell label="Robert"/>
    <listcell label="Spawacz"/>
  </listitem>
</listbox>

Wiersz nagłówka

Pola listy pozwalają również na zastosowanie specjalnego wiersza nagłówka. Pod wieloma względami jest zwyczajnym wierszem z tym wyjątkiem, że wyświetla się go w odmienny sposób. Zastosujemy go do utworzenia nagłówka kolumn. Zastosujemy dwa nowe składniki.

Element listhead stosuje się w wierszach nagłówka, tak samo jak element listitem w tradycyjnych wierszach. Jednakże nagłówek wiersza nie jest kiedykolwiek normalnym wierszem, więc stosujemy skrypt, aby pobrać pierwszy wiersz w polu listy, będzie pomijał wiersz nagłówka.

Element listheader stosujemy dla każdej komórki wiersza nagłówka. Stosując atrybut label do ustawienia etykiety dla wszystkich komórek nagłówka.

Oto wcześniejszy przykład z wierszem nagłówka:

var el = env.locale; Przykład 4 : Źródła Podgląd

<listbox>

  <listhead>
    <listheader label="Imię"/>
    <listheader label="Zawód"/>
  </listhead>

  <listcols>
    <listcol/>
    <listcol flex="1"/>
  </listcols>

  <listitem>
    <listcell label="Grzegorz"/>
    <listcell label="Malarz"/>
  </listitem>
  <listitem>
    <listcell label="Maria"/>
    <listcell label="Producent świeczek"/>
  </listitem>
  <listitem>
    <listcell label="Robert"/>
    <listcell label="Spawacz"/>
  </listitem>

</listbox>

W tym przykładzie atrybut flex zastosowano do utworzenia elastycznej kolumny. Atrybut ten będzie opisany w dalszych artykułach, lecz w tym artykule pozwala kolumnie zająć całą dostępną wolną przestrzeń w poziomie. Możemy zmieniać rozmiar okna, aby zobaczyć, że obszary kolumny rozciągają się razem z oknem. Jeśli zmniejszymy okno w poziomie, etykieta znajdująca się w komórce zostanie automatycznie skrócona i zakończona wielokropkiem. Możemy także zastosować atrybut crop do komórek lub pozycji ustawiając je na wartość none, aby wyłączyć użycie wielokropka.

Listy rozwijane

W HTML-u listy rozwijane tworzymy za pomocą elementu select. Użytkownik widzi pojedyncze pole tekstowe wyboru i może kliknąć strzałkę lub podobny przycisk obok tego pola tekstowego, aby zaznaczyć inną pozycję. Pozostałe możliwości będą dostępne w wyskakującym oknie. XUL posiada element menulist, który ma tą własność. Utworzony jest on z pola tekstowego z przyciskiem obok. Taka nazwa została wybrana, ponieważ okienka wyskakują z menu listy rozwijanej, dającej możliwość wyboru.

Do zdefiniowania listy rozwijanej potrzebne są trzy elementy. Pierwszym jest element menulist, który tworzy pole tekstowe z przyciskiem przy nim. Drugi element menupopup tworzy okienko pojawiające się po kliknięciu przycisku. Trzecim jest element menuitem tworzący poszczególne pozycje.

Składna poniżej najlepiej przedstawia przykład listy rozwijanej:

var el = env.locale; Przykład 5 : Źródła Podgląd

<menulist label="Autobus">
  <menupopup>
    <menuitem label="Auto"/>
    <menuitem label="Taxi"/>
    <menuitem label="Autobus" selected="true"/>
    <menuitem label="Pociąg"/>
  </menupopup>
</menulist>

W tym przypadku lista rozwijana składa się z czterech pozycji do wyboru, jeden dla każdego elementu menuitem. Aby wyświetlić pozycje listy, kliknij w przycisk strzałki na liście. Kiedy jedna pozycja jest zaznaczona, to pojawiająca się pozycja jest wybrana z listy. Atrybut selected stosuje się do wskazania wartości, która jest zaznaczona domyślnie.

Lista menu do edycji

Domyślnie możemy tylko zaznaczyć pozycję do wybrania z listy. Nie możemy wprowadzić własnego tekstu. Wariant pozwalający na edycję tekstu w polach listy rozwijanej. Na przykład, pole adresu URL w przeglądarce posiada rozwijaną listę do wybierania wcześniej wpisywanych adresów URL, ale pozwala także na wpisywanie własnych.

Aby utworzyć edytowaną listę rozwijaną, dodaj atrybut editable w sposób pokazany poniżej:

var el = env.locale; Przykład 6 : Źródła Podgląd

<menulist editable="true">
  <menupopup>
    <menuitem label="www.mozilla.org"/>
    <menuitem label="www.xulplanet.com"/>
    <menuitem label="www.dmoz.org"/>
  </menupopup>
</menulist>

Utworzone pole adresu URL w powyższym przykładzie posiada trzy predefiniowane pola wyboru, które użytkownik może zaznaczyć lub może wpisać w jedną pozycję własną zawartość pola. Tekst wpisywany przez użytkownika nie zostanie dodany jako nowe pole wyboru listy. Ponieważ atrybut label nie został zastosowany w przykładzie, jego domyślna wartość pozostanie pusta.

W następnym artykule dowiemy się jak tworzyć paski postępu.