Kurs XUL:Kontrolki wejścia

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

XUL posiada elementy, które są podobne do kontrolek formularza HTML.

Spis treści 1 Pola tekstowe 1.1 Element textbox 1.1.1 Wieloliniowy textbox 1.2 Przykład: Znajdź pliki 2 Pola wyboru i przyciski opcji 2.1 Element radiogroup 2.2 Atrybuty

[edytuj] Pola tekstowe

HTML zawiera element input, który może zostać użyty do wprowadzania tekstu. XUL posiada podobny element, textbox, używany do pól tekstowych. Bez żadnych argumentów textbox tworzy pole, w którym użytkownik może wprowadzać tekst. Pola tekstowe akceptują wiele parametrów takich samych, jakie w języku HTML posiadają kontrolki wejścia. Niektóre z nich:

id

Unikatowy identyfikator, przez który możesz się odwoływać do pola tekstowego.

class 

Klasa stylu pola tekstowego.

value 

Jeśli chcesz, aby pole tekstowe posiadało domyślny tekst, podaj go jako wartość tego atrybutu.

disabled 

Ustaw na true, aby wyłączyć możliwość wprowadzania tekstu.

type 

Możesz ustawić wartość tego atrybutu na specjalną wartość password, tak aby pole tekstowe nie pokazywało wpisywanego tekstu. Często używa się tej wartości w przypadku pól do podawania hasła.

maxlength 

Maksymalna liczba znaków, jaka może zostać wprowadzona do pola.

Podczas, gdy w HTML-u z elementu input mogą być tworzone różne rodzaje pól (nie tylko tekstowych), w XUL-u dla każdego typu są oddzielne elementy. Następujący przykład ilustruje użycie pól tekstowych:

[edytuj] Element textbox

Źródła Podgląd

<label control="some-text" value="Wpisz jakiś tekst"/>
<textbox id="some-text"/>
<label control="some-password" value="Wpisz hasło"/>
<textbox id="some-password" type="password" maxlength="8"/>

W przykładzie textbox tworzone są pola, do których można wprowadzić tylko jeden wiersz tekstu. HTML posiada również element textarea, który jest używany do tworzenia większych obszarów do wprowadzania tekstu. W XUL-u w tym celu możesz z powodzeniem użyć elementu textbox -- osobny element nie jest potrzebny. Jeśli ustawisz atrybut multiline na true, wówczas pole tekstowe wyświetlone zostanie z wieloma wierszami. Dla przykładu:

[edytuj] Wieloliniowy textbox

Źródła Podgląd

<textbox multiline="true"
           value="To jest tekst, który powinien zostać zawinięty do kilku linii."/>

Tak jak w języku HTML dla textarea, możesz użyć atrybutów rows i cols do ustawienia rozmiaru pola. Powinna być ustawiona liczba wierszy i kolumn znaków potrzebnych do wyświetlenia.

[edytuj] Pola wyboru i przyciski opcji

Dwa dodatkowe elementy stosowane są do tworzenia pól wyboru i przycisków opcji. Są one po prostu wariantami przycisków. Pola wyboru stosuje się do opcji, które mogą być włączone lub wyłączone. Przyciski opcji mogą być wykorzystane w podobnym celu, gdzie ze zbioru opcji może być zaznaczona tylko jedna pozycja.

Więcej podobnych atrybutów przycisków możemy stosować razem z polami wyboru i przyciskami opcji. Przykład poniżej pokazuje proste pole wyboru oraz przyciski opcji.

<checkbox id="case-sensitive" checked="true" label="Rozróżniaj wielkość liter"/>
<radio id="orange" label="Pomarańczowy"/>
<radio id="violet" selected="true" label="Fioletowy"/>
<radio id="yellow" label="Żółty"/>

Pierwsza instrukcja tworzy proste pole wyboru (checkbox). Kiedy użytkownik kliknie w pole wyboru, to pole będzie przełączone pomiędzy polem zaznaczonym i niezaznaczonym. Atrybut checked można zastosować do wskazania stanu domyślnego. Powinieneś ustawić wspomniany atrybut na true lub false. Do dołączenia etykiety obok pola wyboru zastosuj atrybut label. W przypadku przycisków radio powinieneś stosować atrybut selected zamiast atrybutu checked. Ustaw jego wartość na true, tak aby przycisk opcji był domyślnie zaznaczony lub pozostaw go bez zmian dla pozostałych przycisków opcji.

[edytuj] Element radiogroup

Aby połączyć kilka przycisków opcji w grupę, będziesz potrzebował użyć elementu radiogroup. Tylko jedna opcja z grupy może być w danej chwili zaznaczona. Zaznaczenie jednej pozycji będzie wyłączało wszystkie pozostałe opcje w tej samej grupie. Poniższy przykład demonstruje poruszane zagadnienie.

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

<radiogroup>
  <radio id="orange" label="Pomarańczowy"/>
  <radio id="violet" selected="true" label="Fioletowy"/>
  <radio id="yellow" label="Żółty"/>
</radiogroup>

[edytuj] Atrybuty

Podobnie jak przyciski, pola wyboru i przyciski opcji są zrobione z etykiety i obrazka, gdzie obrazek przełącza się pomiędzy zaznaczonym i niezaznaczonym, w momencie jego naciśnięcia. Pola wyboru posiadają wiele atrybutów takich samych jak przyciski:

label

Etykieta pola wyboru lub przycisku opcji.

disabled

Wyłącza lub włącza składnik, przy ustawieniu odpowiednio na true lub false.

accesskey 

Klawisz skrótu, który może być stosowany do zaznaczenia elementu. Użyta litera w etykiecie jest zwykle wyświetlona z podkreśleniem.

W następnym artykule poznamy elementy do tworzenia kontrolek numerycznych.