Kurs XUL:Dodawanie etykiet i obrazków
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Artykuł przedstawia sposoby dodawania etykiet i obrazków do okna. Dodatkowo zobaczymy, jak się łączy elementy w grupy.
Spis treści |
[edytuj] 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.
[edytuj] Element label
Najprostszym sposobem umieszczenia tekstu w oknie jest użycie elementu label, w sposób przedstawiony poniżej:
<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.
[edytuj] 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.
<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.
[edytuj] 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.
<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.
[edytuj] 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("http://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.