Dodawanie etykiet i obrazków

Artykuł przedstawia sposoby dodawania etykiet i obrazków do okna. Dodatkowo zobaczymy, jak się łączy elementy w grupy.

Elementy tekstowe

Nie można umieścić tekstu bezpośrednio w pliku XUL bez wcześniejszego otoczenia go znacznikami, gdyż nie zostanie on wyświetlony.

Element label

Najprostszym sposobem umieszczenia tekstu w oknie jest użycie elementu label, w sposób przedstawiony poniżej:

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

<label value="To jest jakiś tekst"/>

Atrybut value służy do określania tekstu, który miałby zostać wyświetlony w oknie. Tekst ten nie jest zawijany, więc zostanie wyświetlony w tylko jednej linii. Przedstawiony element jest przydatny w przypadku krótkich fragmentów tekstu.

Element description

Dłuższy tekst można umieścić pomiędzy otwierającym a zamykającym znacznikiem description. W przeciwieństwie do tekstu zadeklarowanego za pomocą elementu label i atrybutu value, potomek tekstu będzie łamany na wiele linii w momencie, gdy zajdzie taka potrzeba. Zmień rozmiar okna, aby zobaczyć, jak tekst zostanie zawinięty. Podobnie jak w języku HTML, nowe linie i dodatkowe białe znaki są zamieniane w pojedynczy znak odstępu. W kolejnych artykułach zobaczymy, w jaki sposób można ograniczyć długość elementu, więc zawijanie wierszy stanie się lepiej widoczne.

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

<description>
  Dłuższa sekcja tekstu jest wyświetlona.
</description>

Wewnątrz oba elementy label oraz description są tym samym, co znaczy, że tekst w etykietach może być zawijany, jeśli umieścisz go wewnątrz znacznika tak, że w elemencie opisu możesz korzystać z atrybutu value. Element label jest przeznaczony dla etykiety kontrolek, takich jak pola tekstowe. Element description przeznaczony jest dla pozostałych tekstów opisujących, takich jak tekst informacyjny u góry okna dialogowego (dialog). W zasadzie powinniśmy się trzymać takiego przeznaczenia.

Atrybut control

Możemy stosować atrybut control do ustawienia, z którą kontrolką jest powiązana etykieta. Kiedy użytkownik kliknie w etykietę, ta kontrolka zostanie wywołana. Ustaw wartość atrybutu control na wartość id elementu przycisku, który ma być wywołany.

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

<label value="Kliknij tu:" control="open-button"/>
<button id="open-button" label="Otwórz"/>

W powyższym przykładzie kliknięcie na etykietę spowoduje wywołanie przycisku.

Obrazki

Podobnie jak HTML XUL posiada element do wyświetlania obrazków wewnątrz okna, który odpowiednio nazwano image. Zwróć uwagę, że nazwa znacznika jest inna niż w języku HTML (image zamiast img). Atrybut src określa adresu URL do pliku z obrazkiem. Przykład poniżej ilustruje jego użycie:

<image src="images/banner.jpg"/>

Mimo że możesz skorzystać z podanej składni, lepszym rozwiązaniem jest używanie arkuszy stylów do określania adresu URL obrazka. W dalszej części kursu znajdziesz, jak stosować arkusze stylów lub często będzie pokazany przykład dla pełności opisu. Do ustawienia adresu URL obrazka możemy zastosować własności CSS list-style-image. Przykłady:

XUL:
 <image id="image1"/>
 <image id="search"/>

Arkusz stylu:
 #image1 {
   list-style-image: url("chrome://findfile/skin/banner.jpg");
 }

 #search {
   list-style-image: url("https://example.com/images/search.png");
 }

Obrazki pochodzą z katalogu chrome i należą do motywu z pakietu findfile. Ponieważ obrazki różnią się w zależności od używanego motywu, dlatego powinieneś je umieszczać w katalogu używanego motywu.

W następnym artykule nauczymy się, jak dodać kilka kontrolek wejścia do naszego okna.