Dodawanie przycisków

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

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 <tt>OK</tt> i <tt>Anuluj</tt> wykorzystanych w oknach dialogowych.

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. <tt>OK</tt> lub <tt>Anuluj</tt>. 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.

Kilka przykładów przycisków

var el = env.locale; 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 <tt>Znajdź</tt>, który znajdzie się w oknie narzędzia do szukania plików. Poniżej znajduje się kod, który dodamy do przykładu <tt>findfile.xul</tt>.

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

Przykład <tt>findfile.xul</tt>

Dodajmy kod do pliku <tt>findfile.xul</tt>, 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="https://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 <tt>Anuluj</tt>. 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