Skróty klawiaturowe

UWAGA: Tłumaczenie tej strony nie zostało zakończone.
Może być ona niekompletna lub wymagać korekty.
Chcesz pomóc? | Dokończ tłumaczenie | Sprawdź ortografię | Więcej takich stron+.

XUL umożliwia także użycie obsługi zdarzeń związanych z klawiaturą. Jednak byłoby to nudne w odniesieniu do każdego przycisku oraz każdej pozycji znajdującej się w menu.

Tworzenie skrótu klawiaturowego

XUL dostarcza metod, za pomocą których jesteśmy w stanie zdefiniować skróty klawiaturowe. Widzieliśmy już w artykule o menu, że jesteśmy w stanie zdefiniować atrybut zwany accesskey, który określa klawisz po wciśnięciu którego aktywowane będzie menu lub też któraś z jego pozycji. W poniższym przykładzie, menu Plik może zostać wybrane poprzez wciśnięcie Alt i F (lub innej kombinacji dla danej platformy). Kiedy otworzy się menu Plik, jesteśmy w stanie wybrać pozycję Zakończ za pomocą wciśnięcia klawisza Z.

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

<menubar id="sample-menubar">
  <menu id="file-menu" label="Plik" accesskey="p">
    <menupopup id="file-popup">
      <menuitem id="close-command" label="Zakończ" accesskey="z"/>
    </menupopup>
  </menu>
</menubar>

Można także zastosować atrybut accesskey dla przycisków. W tym przypadku kiedy klawisz zostanie wciśnięty, przycisk zostanie wybrany.

Możesz jednak zechcieć ustawić więcej skrótów klawiaturowych. Przykładowo, wciśnięcie Control+C, które spowoduje skopiowanie tekstu do schowka. Chociaż skróty takie jak ten mogą nie zawsze być poprawne, to zazwyczaj działają w dowolnej chwili, w której okno jest otwarte. Skrót klawiaturowy będzie dostępny przez większość czasu, w ciągu którego możemy sprawdzić czy w jakimś sensie wykorzystuje skrypt. Przykładowo, kopiowanie tekstu do schowka powinno działać tylko w chwili, w której tekst jest zaznaczony.

Element key

XUL dostarcza element key, który pozwala nam na zdefiniowanie skrótów klawiaturowych dla okna. Posiada atrybuty określające klawisz, który powinien zostać wciśnięty, wraz z którym klawiszem modyfikującym (takie jak - Shifth lub Control). Przykład poniżej:

<keyset>
  <key id="sample-key" modifiers="shift" key="R"/>
</keyset>

Ten przykład definiuje skrót klawiaturowy, który jest aktywowany w chwili, w której użytkownik wciśnie klawisze Shift i R. Atrybut key (warto zaznaczyć, że posiada taką samą nazwę jak sam element) może być użyty w celu wykrycia, który klawisz powinien zostać wciśnięty. W tym przypadku jest to R. Możemy także dla tego atrybutu dodać dowolny znak, który ma być wciśnięty. Klawisze modyfikujące, które należy wcisnąć określa natomiast atrybut modifiers (możesz podać kilka rozdzielając spacją). Poniżej lista klawiszy modyfikujących.

alt 
The user must press the Alt key. On the Macintosh, this is the Option key.
control 
The user must press the Control key.
meta 
The user must press the Meta key. This is the Command key on the Macintosh.
shift 
The user must press the Shift key.
accel 
The user must press the special accelerator key. The key used for keyboard shortcuts on the user's platform. Usually, this would be the value you would use.

Twoja klawiatura niekoniecznie musi posiadać wszystkie klawisze. W tym przypadku będą one dostosowane do klawiszy modyfikujących, które posiadamy.

Element key musi zostać umieszczony wewnątrz elementu keyset. Ten element został zaprojektowany z myślą o przechowywaniu zestawu elementów key i służy do do grupowania wszystkich definicji klawiszy w jednym miejscu (jednym pliku). Jakiekolwiek elementy key poza elementem keyset nie będą funkcjonować.

Każda platforma używa innych klawiszy dla skrótów klawiaturowych. Przykładowo Windows używa klawisza Control, natomiast Macintosh używa klawisza Command. Byłoby zapewne niewygodne definiować oddzielnie elementy key da każdej platformy. Na szczęście, istnieje rozwiązanie. Modyfikator accel, odnosi się do specjalnego i specyficznego dla danej platformy klawisza używanego dla skrótów. Działa jak każdy inny modyfikator, ale nie dla każdej platformy tak samo.

Poniżej kilka dodatkowych przykładów:

<keyset>
  <key id="copy-key" modifiers="control" key="C"/>
  <key id="explore-key" modifiers="control alt" key="E"/>
  <key id="paste-key" modifiers="accel" key="V"/>
</keyset>

Atrybut key jest używany w celu określenia klawisza, który powinien zostać wciśnięty. Jednak, istnieją przypadki w których chcemy się odwołać do klawiszy które nie mogą zostać określone za pomocą znaków (np: klawisze funkcyjne lub klawisz Enter). Atrybut key może zostać używa dla znaków dających się wyświetlić. Natomiast dla nie możliwych do wyświetlenia znaków służy nam atrybut keycode.

Atrybut keycode powinien być ustawiony zgodnie ze specjalnym kodem, który reprezentuje klawisz jaki chcesz wykorzystać. Poniżej przedstawiamy tablicę klawiszy. Nie wszystkie z wymienionych klawiszy są dostępne dla każdej klawiatury.

VK_CANCELVK_BACKVK_TABVK_CLEAR
VK_RETURNVK_ENTERVK_SHIFTVK_CONTROL
VK_ALTVK_PAUSEVK_CAPS_LOCKVK_ESCAPE
VK_SPACEVK_PAGE_UPVK_PAGE_DOWNVK_END
VK_HOMEVK_LEFTVK_UPVK_RIGHT
VK_DOWNVK_PRINTSCREENVK_INSERTVK_DELETE
VK_0VK_1VK_2VK_3
VK_4VK_5VK_6VK_7
VK_8VK_9VK_SEMICOLONVK_EQUALS
VK_AVK_BVK_CVK_D
VK_EVK_FVK_GVK_H
VK_IVK_JVK_KVK_L
VK_MVK_NVK_OVK_P
VK_QVK_RVK_SVK_T
VK_UVK_VVK_WVK_X
VK_YVK_ZVK_NUMPAD0VK_NUMPAD1
VK_NUMPAD2VK_NUMPAD3VK_NUMPAD4VK_NUMPAD5
VK_NUMPAD6VK_NUMPAD7VK_NUMPAD8VK_NUMPAD9
VK_MULTIPLYVK_ADDVK_SEPARATORVK_SUBTRACT
VK_DECIMALVK_DIVIDEVK_F1VK_F2
VK_F3VK_F4VK_F5VK_F6
VK_F7VK_F8VK_F9VK_F10
VK_F11VK_F12VK_F13VK_F14
VK_F15VK_F16VK_F17VK_F18
VK_F19VK_F20VK_F21VK_F22
VK_F23VK_F24VK_NUM_LOCKVK_SCROLL_LOCK
VK_COMMAVK_PERIODVK_SLASHVK_BACK_QUOTE
VK_OPEN_BRACKETVK_BACK_SLASHVK_CLOSE_BRACKETVK_QUOTE
VK_HELP

Na przykład, aby stworzyć skrót, który jest aktywowany w chwili, w której użytkownik naciśnie Alt i F5, należy użyć poniższego kodu:

<keyset>
  <key id="test-key" modifiers="alt" keycode="VK_F5"/>
</keyset>

Poniższy przykład demonstruje więcej skrótów klawiaturowych:

<keyset>
  <key id="copy-key" modifiers="accel" key="C"/>
  <key id="find-key" keycode="VK_F3"/>
  <key id="switch-key" modifiers="control alt" key="1"/>
</keyset>

Pierwszy klawisz został wywołany w chwili, w której użytkownik wcisnął określony dla swojej platformy klawisz skrótu i C. Drugi został wywołany poprzez wciśnięcie F3. Trzeci jest wywołany poprzez wciśnięcie klawisza Control, klawisza Alt i 1. Jeśli chcesz oddzielić klawiszze głównej części klawiatury i klawisze numeryczne, zastosuj klawisze VK_NUMPAD (takie jak VK_NUMPAD1).

Po więcej informacji na temat skrótów klawiaturowych zajrzyj do Mozilla Keyboard Planning FAQ and Cross Reference.

Zastosowanie skrótów klawiaturowych

Kiedy już wiemy jak zdefiniować skróty klawiaturowe, nauczymy się jak ich używać. Istanieją dwa sposoby. Pierwszy, najprostrzy, wymaga skorzystania z obsługi zdarzenia keypress dla elementu key. Kiedy użytkownik wciśnie klawisz, skrypt zostanie wywołany. Przykład poniżej:

<keyset>
  <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/>
</keyset>

Funkcja DoCopy będzie wywołana w chwili w której użytkownik wciśnie klawisz wyspecyfikowany przez element key. W tym przypadku są to klawisze przewidziane do operacji kopiowania do schowka (takie jak Control i C). Będzie to działać jeśli tylko okno jest otwarte. Funkcja DoCopy powinna sprawdzać czy text jest zaznaczony, a następnie kopiować go do schowka. Zauważmy, że pola tekstowe posiadają wbudowane skróty klawiaturowe, więc nie musimy ich sami implementować.

Przypisanie skrótu w menu

Jeśli przypisujemy skróty klawiaturowe, które wykonują komendy, które także znajdują się w menu, jesteśmy w stanie powiązać element key bezpośrednio z menu command. Aby to zrobić, dodajemy atrybut key dla pozycji w menuitem. Przypiszmy jej wartość id klawisza, którego chcemy użyć. Poniżej przykład:

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

grafika:keyshort1.png
<keyset>
  <key id="paste-key" modifiers="accel" key="V"
          oncommand="alert('Paste invoked')"/>
</keyset>

<menubar id="sample-menubar">
  <menu id="edit-menu" label="Edit" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem id="paste-command" 
         accesskey="p" key="paste-key" 
         label="Paste" oncommand="alert('Paste invoked')"/>
    </menupopup>
  </menu>
</menubar>

Atrybut key przypisany do pozycji w menu, który w tym przypadku jest klawiszem odpowiadającym z opcję wklejenia, jest równy id zdefiniowanego klawisza. Możemy go użyć dla dodatkowych klawiszy, jak i dla zdefiniowania skrótów klawiaturowych dowolnej liczby pozycji znajdujących się w menu.

Warto także zauważyć na obrazku, że tekst został umieszczony zaraz przy polecanie Paste (znajdującym się w menu), w celu wykrycia czy klawisze Control i V zostały wciśnięte, aby wywołać polecenie menu. Skróty klawiaturowe dodane do menu będą działać nawet jeśli menu nie jest otwarte.

Kolejną dodaktową cechą definicji klawiszy jest prosta możliwość ich dezaktywacji. Aby to zrobić wystarczy dodać atrybut disabled do elementu key i ustawić jego wartość na true. Wyłącza to skrót klawiaturowy, pozbawiając go możliwości wywołania. Wygodnie jest zmieniać wartość atrybutu disabled poprzez użycie skryptów.

Nasz przykład: <tt>Znajdź pliki</tt>

Dodajmy skróty klawiaturowe do naszego przykładu okna dialogowego <tt>Znajdź pliki</tt>. Dodamy ich cztery, po jednym dla poleceń <tt>Wytnij</tt>, <tt>Kopiuj</tt>, <tt>Wklej</tt> i <tt>Zamknij</tt> (kiedy użytkownik wciśnie Escape).

<keyset>
  <key id="cut_cmd" modifiers="accel" key="X"/>
  <key id="copy_cmd" modifiers="accel" key="C"/>
  <key id="paste_cmd" modifiers="accel" key="V"/>
  <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>
</keyset>

<vbox flex="1">
 <toolbox>
  <menubar id="findfiles-menubar">
   <menu id="file-menu" label="Plik" accesskey="f">
     <menupopup id="file-popup">
       <menuitem label="Otwórz szukanie..." accesskey="o"/>
       <menuitem label="Zapisz szukanie..." accesskey="s"/>
       <menuseparator/>
       <menuitem label="Zakończ" accesskey="c" key="close_cmd"
         oncommand="window.close();"/>
     </menupopup>
   </menu>
   <menu id="edit-menu" label="Edycja" accesskey="e">
     <menupopup id="edit-popup">
       <menuitem label="Wytnij" accesskey="t" key="cut_cmd"/>
       <menuitem label="Kopiuj" accesskey="c" key="copy_cmd"/>
       <menuitem label="Wklej" accesskey="p" key="paste_cmd" disabled="true"/>
     </menupopup>
   </menu>

Teraz możemy użyć tych skrótów klawiaturowych w celu aktywacji komend. Oczywiście, komendy schowka, nie robią na razie nic, ponieważ nie napisaliśmy na razie żadnych skryptów.

Zdarzenia klawiszy

Istnieją trzy zdarzenia związane z klawiaturą, które mogą zostać użyte w przypadku, w którym cechy klawiszy opisane wyżej nie są odpowiednie. Tymi zdarzeniami są:

keypress 
Wywoływany gdy klawisz został wciśnięty i puszczony na aktywnym elemencie. Można wykorzystać do weryfikacji dozwolonych znaków w polu.
keydown 
Wywoływany gdy klawisz został wciśnięty na aktywnym elemencie. Zwróć uwagę, że zostanie wywołany jak tylko przycisk zostanie wciśnięty, nawet jeśli nie został puszczony.
keyup 
Wywoływany gdy klawisz został puszczony na aktywnym elemencie.

Zdarzenia klawiszy będą wysyłane tylko do tych elementów na których skupiona jest uwaga (focus). Typowo, będą to textboxy, przyciski, checkboy itp. Jeśli uwaga nie jest skupiona na żadnym z elementów to zdarzenie klawisza, będzie się odnosiło w stosunku do dokumentu XUL. W tym przypadku, można dodać nasłuch zdarzenia do znacznika window . Jeśli jednak chcesz odpowiadać na działanie klawiszy globalnie, będziesz zmuszony do wykorzystania skrótów klawiaturowych, zgodnie z powyższymi wskazówkami.

Obiekt zdarzenia klawisza posiada dwie własności, które przechowują klawisz, który został wciśnięty. Własność keyCode przetrzymuje kod klawisza i może posłużyć do porównania z jedną ze stałych wymienionych w tabelce powyżej. Natomiast charCode, jest używana dla możliwych do wyświetlenia znaków i przechowuje kod znaku wciśniętego klawisza.

Następnie dowiemy się jak podtrzymać zaznaczenie i aktywację elementu.


Autorzy i etykiety dokumentu

Autorzy tej strony: Ptak82, Sadek, Bedi, Peyn, Mgjbot
Ostatnia aktualizacja: Ptak82,