Kurs XUL:Dodawanie przycisków

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

W tym artykule zajmiemy się dodawaniem przycisków do okna.

[edytuj] Dodawanie przycisków do okna

Okno, które utworzyliśmy, jest puste, więc niezbyt ciekawe. W tym rozdziale dodamy dwa przyciski, Znajdź oraz Anuluj. Nauczymy się też w prosty sposób układać je w oknie.

Podobnie jak HTML, XUL posiada wiele znaczników, które mogą zostać użyte do tworzenia elementów interfejsu użytkownika. Najprostszym z nich jest znacznik button, który jest używany do tworzenia prostych przycisków.

Element button posiada dwie główne własności: label (etykietę) oraz image (obrazek). Możesz skorzystać z jednej lub z obu. Zatem przycisk może posiadać tylko etykietę, tylko obrazek lub obie własności jednocześnie. Przyciski najczęściej stosuje się do tworzenia przycisków OK i Anuluj wykorzystanych w oknach dialogowych.

[edytuj] Składnia przycisków

Znacznik button ma następującą składnię:

<button
    id="identifier"
    class="dialog"
    label="OK"
    image="images/image.jpg"
    disabled="true"
    accesskey="t"/>

Znaczenie poszczególnych atrybutów (wszystkie są opcjonalne):

id 

Unikatowy identyfikator, za pomocą którego można odwoływać się do przycisku. Ten atrybut posiadają wszystkie elementy. Będziemy z niego korzystać za każdym razem, gdy będziemy chcieli się odwołać do przycisku w arkuszu stylów lub w skrypcie. Powinno się go używać we wszystkich elementach., ale w tym kursie czasami został on pominięty dla zwiększenia czytelności.

class 

Klasa stylu przycisku. Działa na tej samej zasadzie jak w HTML-u. Atrybutu używa się do wskazania stylu, który będzie wyświetlony w przycisku. W tym przypadku nadano mu wartość dialog. W większości przypadków nie będziemy używali klasy dla przycisku.

label 

Etykieta, która pojawi się na przycisku, np. OK lub Anuluj. Jeśli atrybut zostanie pominięty, na przycisku nie pojawi się żaden tekst.

image 

URL obrazka pojawiającego się na przycisku. Jeśli atrybut zostanie pomięty, przycisk pozostanie bez obrazka. Obrazek również można przypisać w arkuszu stylów używając do tego własności list-style-image.

disabled 

Jeśli ten atrybut zostanie ustawiony na true, przycisk zostanie wyłączony. Objawia się to zwykle jego "wyszarzeniem". Jeśli jest wyłączony, nie może być wykonana powiązana z nim funkcja. Domyślnie przycisk jest włączony. Do zmiany stanu przycisku można użyć języka JavaScript.

accesskey 

Wartością tego atrybutu powinna być litera używana w skrócie klawiaturowym. Litera ta powinna występować w etykiecie przycisku, wówczas zostanie wyróżniona - zwykle poprzez podkreślenie. Kiedy użytkownik naciśnie ALT (lub analogiczny klawisz, w zależności od używanej platformy systemowej) i klawisz skrótu, wybrany przycisk zostanie wywołany z jakiegokolwiek miejsca w oknie.

Przycisk obsługuje więcej atrybutów poza tymi, które zostały wymienione powyżej. Zostaną one omówione w dalszej części kursu.

[edytuj] Kilka przykładów przycisków

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

<button label="Normaly"/>
<button label="Wyłączony" disabled="true"/>

W przykładzie przedstawionym powyżej pierwszy przycisk jest normalnym przyciskiem. Drugi natomiast jest wyłączony, co jest widoczne poprzez jego "wyszarzenie".

Rozpoczynamy od utworzenia zwykłego przycisku Znajdź, który znajdzie się w oknie narzędzia do szukania plików. Poniżej znajduje się kod, który dodamy do przykładu findfile.xul.

<button id="find-button" label="Znajdź"/>

[edytuj] Przykład findfile.xul

Dodajmy kod do pliku findfile.xul, który utworzyliśmy w poprzednim artykule. Kod musi być wstawiony pomiędzy znacznikami window. Fragment kodu zaznaczony na czerwono dodajmy do naszego przykładu:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
   id="findfile-window"
   title="Znajdź pliki"
   orient="horizontal"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

   <button id="find-button" label="Znajdź"/>
   <button id="cancel-button" label="Anuluj"/>

</window>

Dodany został również przycisk Anuluj. Ponieważ w oknie została określona orientacja pozioma, oba przyciski umieszczone są obok siebie. Jeśli otworzymy plik z przykładowym kodem w przeglądarce Mozilla, powinniśmy otrzymać podobne okno do obrazka z boku.

W następnym temacie nauczymy się umieszczać w oknie etykiety i obrazki.

Zobacz także Dodatkowe możliwości przycisku