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
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.
value
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
oraz label
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 description
. Element value
jest przeznaczony dla etykiety kontrolek, takich jak pola tekstowe. Element label
description
przeznaczony jest dla pozostałych tekstów opisujących, takich jak tekst informacyjny u góry okna dialogowego (
). W zasadzie powinniśmy się trzymać takiego przeznaczenia.
dialog
Atrybut control
Możemy stosować atrybut
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
control
na wartość
elementu przycisku, który ma być wywołany. id
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
określa adresu URL do pliku z obrazkiem. Przykład poniżej ilustruje jego użycie:
src
<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.