Skróty klawiaturowe

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.

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.

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).

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:

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

<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.

<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>

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.