Raccourcis clavier

 

Pour réagir aux touches pressées, vous pouvez utiliser des gestionnaires d'événements clavier, mais il serait fastidieux de le faire pour chaque bouton ou chaque item de menu.

Création d'un raccourci clavier

XUL fournit des méthodes par lesquelles vous pouvez définir des raccourcis clavier. Nous avons déjà vu dans la section sur les menus que nous pouvions définir un attribut appelé accesskey qui spécifie la touche à presser par l'utilisateur pour activer le menu ou l'item de menu. Dans l'exemple ci-dessous, le menu Fichier peut être sélectionné en pressant Alt et F (ou une autre combinaison de touches spécifique à une plate-forme). Une fois le menu Fichier ouvert, l'item de menu Fermer peut être sélectionné en pressant F.

var el = env.locale; Exemple 1: Source Voir

<menubar id="sample-menubar">
   <menu id="file-menu" label="Fichier" accesskey="f">
     <menupopup id="file-popup">
       <menuitem id="close-command" label="Fermer" accesskey="f"/>
     </menupopup>
   </menu>
</menubar>

Vous pouvez aussi utiliser l'attribut accesskey sur les boutons. Dans ce cas, quand la touche est pressée, le bouton est sélectionné.

Cependant, vous pourriez vouloir mettre en place des raccourcis clavier plus généraux, comme par exemple, la combinaison Ctrl+C pour copier du texte dans le presse-papiers. Bien que de tels raccourcis puissent ne pas être toujours valides, ils fonctionneront habituellement dès qu'une fenêtre est ouverte. Normalement, un raccourci sera autorisé à n'importe quel moment et vous pourrez vérifier via un script s'il doit faire quelque chose. Par exemple, copier du texte dans le presse-papiers ne devrait fonctionner seulement quand du texte est sélectionné.

Élément key

XUL fournit un élément, key, qui vous permet de définir un raccourci clavier pour une fenêtre. Il comprend des attributs pour définir la touche qui doit être pressée et quels modificateurs de touches (tels que shift pour Maj ou control pour Ctrl) doivent l'accompagner. Un exemple :

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

Cet exemple définit un raccourci clavier qui s'active lorsque l'utilisateur presse les touches Maj et R. L'attribut key (notez qu'il a le même nom que l'élément lui-même) est utilisé pour indiquer quelle touche doit être pressée, dans ce cas R. Vous pouvez ajouter n'importe quels caractères à cet attribut selon les combinaisons de touches devant être pressées. Les modificateurs de touches devant être pressés sont indiqués par l'attribut modifiers. Il s'agit d'une liste de modificateurs séparée par des espaces, et ils sont décrits ci-dessous :

'alt' 
L'utilisateur doit presser la touche Alt. Sous Macintosh, il s'agit de la touche Option.
'control' 
L'utilisateur doit presser la touche Ctrl
'meta' 
L'utilisateur doit presser la touche Meta. Il s'agit de la touche Command sous Macintosh.
'shift' 
L'utilisateur doit presser la touche Shift (Maj)
'accel' 
L'utilisateur doit presser la touche spéciale d'accélérateur. L'utilisateur doit presser la touche de raccourci spécifique à sa plate-forme. Il s'agit de la valeur que vous utiliserez habituellement.

Votre clavier n'a pas forcément toutes ces touches, dans ce cas, elles seront actives par d'autres touches de modification que vous possédez.

L'élément key doit être placé à l'intérieur d'un élément keyset. Cet élément est destiné à contenir un ensemble d'éléments key servant à grouper toutes les définitions de raccourcis dans un seul emplacement du fichier. Tout élément key à l'extérieur d'un élément keyset ne sera pas pris en compte.

Généralement, chaque plate-forme utilise une touche différente pour les raccourcis clavier. Par exemple, Windows utilise la touche Ctrl tandis que Macintosh utilise la touche Command. Il serait peu commode de définir un élément key propre à chaque plate-forme. Heureusement, il y a une solution, le modificateur de touches 'accel' se réfère à la touche de raccourci spécifique à la plate-forme. Il fonctionne exactement comme les autres modificateurs de touches excepté qu'il change selon la plate-forme.

Voici quelques exemples supplémentaires :

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

Attribut keycode

L'attribut key est utilisé pour spécifier quelles touches doivent être pressées. Toutefois, il y aura aussi des cas où vous voudrez spécifier des touches qui ne peuvent être décrites par un simple caractère (telle que la touche Enter ou les touches de fonctions). L'attribut key peut seulement être utilisé pour des caractères imprimables. Un autre attribut, keycode peut être utilisé pour les caractères non imprimables.

La valeur de l'attribut keycode doit être un code spécial qui représente la touche souhaitée. Une liste de touches est disponible ci-dessous. Toutes les touches ne sont pas disponibles sur toutes les plate-formes.

VK_CANCEL VK_BACK VK_TAB VK_CLEAR
VK_RETURN VK_ENTER VK_SHIFT VK_CONTROL
VK_ALT VK_PAUSE VK_CAPS_LOCK VK_ESCAPE
VK_SPACE VK_PAGE_UP VK_PAGE_DOWN VK_END
VK_HOME VK_LEFT VK_UP VK_RIGHT
VK_DOWN VK_PRINTSCREEN VK_INSERT VK_DELETE
VK_0 VK_1 VK_2 VK_3
VK_4 VK_5 VK_6 VK_7
VK_8 VK_9 VK_SEMICOLON VK_EQUALS
VK_A VK_B VK_C VK_D
VK_E VK_F VK_G VK_H
VK_I VK_J VK_K VK_L
VK_M VK_N VK_O VK_P
VK_Q VK_R VK_S VK_T
VK_U VK_V VK_W VK_X
VK_Y VK_Z VK_NUMPAD0 VK_NUMPAD1
VK_NUMPAD2 VK_NUMPAD3 VK_NUMPAD4 VK_NUMPAD5
VK_NUMPAD6 VK_NUMPAD7 VK_NUMPAD8 VK_NUMPAD9
VK_MULTIPLY VK_ADD VK_SEPARATOR VK_SUBTRACT
VK_DECIMAL VK_DIVIDE VK_F1 VK_F2
VK_F3 VK_F4 VK_F5 VK_F6
VK_F7 VK_F8 VK_F9 VK_F10
VK_F11 VK_F12 VK_F13 VK_F14
VK_F15 VK_F16 VK_F17 VK_F18
VK_F19 VK_F20 VK_F21 VK_F22
VK_F23 VK_F24 VK_NUM_LOCK VK_SCROLL_LOCK
VK_COMMA VK_PERIOD VK_SLASH VK_BACK_QUOTE
VK_OPEN_BRACKET VK_BACK_SLASH VK_CLOSE_BRACKET VK_QUOTE
VK_HELP      

Par exemple, pour créer un raccourci qui est activé quand l'utilisateur presse les touches Alt et F5, faites ainsi :

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

L'exemple ci-dessous montre quelques raccourcis clavier supplémentaires :

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

Le premier raccourci est déclenché lorsque l'utilisateur presse la touche de raccourci spécifique à sa plate-forme et C. Le deuxième est invoqué quand l'utilisateur presse F3. Le troisième se déclenche sur une pression des touches Ctrl, Alt et 1. Si vous voulez distinguer les touches de la partie centrale du clavier et les touches du pavé numérique, utilisez les touches VK_NUMPAD (telles que 'VK_NUMPAD1').

Consultez la page anglaise Mozilla Keyboard Planning FAQ and Cross Reference pour de plus amples informations sur les raccourcis clavier dans les applications.

Utilisation des raccourcis clavier

Maintenant que nous savons comment définir les raccourcis clavier, nous allons découvrir comment les utiliser. Il y a deux manières. La première est la plus simple et requiert seulement que vous utilisiez le gestionnaire d'événements clavier sur l'élément key. Quand l'utilisateur presse la (ou les) touche(s), le script est invoqué. Voici un exemple :

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

La fonction DoCopy sera appelée quand l'utilisateur pressera les touches spécifiées par l'élément key qui sont, dans cet exemple, les touches pour copier vers le presse-papiers (telles que Ctrl+C). Ceci fonctionnera tant que la fenêtre sera ouverte. La fonction DoCopy devrait vérifier si du texte est sélectionné et le copier dans le presse-papiers si tel est le cas. Notez que les champs de saisie intègrent déjà des raccourcis pour utiliser le presse-papiers, de sorte que vous n'avez pas besoin de les implémenter vous-même.

Assignation d'un raccourci clavier à un menu

Si vous assignez un raccourci clavier à une commande qui existe déjà dans un menu, vous pouvez associer directement l'élément key avec la commande du menu. Pour cela, ajoutez un attribut key à l'élément menuitem. Donnez lui comme valeur l'id du raccourci que vous voulez lui associer. L'exemple ci-dessous explique cette méthode.

var el = env.locale; Exemple 2: Source Voir

Image:xultu_keyshort1.jpg
<keyset>
  <key id="paste-key" modifiers="accel" key="V"
          oncommand="alert('invoque Coller')"/>
</keyset>

<menubar id="sample-menubar">
  <menu id="edit-menu" label="Editer" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem id="paste-command" 
         accesskey="c" key="paste-key" 
         label="Coller" oncommand="alert('invoque Coller')"/>
    </menupopup>
  </menu>
</menubar>

L'attribut key de l'item du menu, qui est ici 'paste-key', est égal à l'id du raccourci défini. Vous pouvez utilisez cette méthode pour définir des raccourcis supplémentaires à plusieurs items de menu.

Vous noterez également dans cette image que du texte a été placé à côté de la commande 'Coller' du menu pour indiquer le raccourci Ctrl+V pouvant être pressé pour invoquer la commande du menu. Cette indication est ajoutée automatiquement pour vous sur la base des touches de modification de l'élément key. Les raccourcis associés aux menus fonctionneront même si le menu n'est pas ouvert.

Une fonctionnalité supplémentaire des définitions de raccourcis est que vous pouvez les désactivez facilement. Il vous suffit d'ajouter un attribut disabled à l'élément key et lui affecter la valeur 'true'. Cet attribut désactive le raccourci clavier de façon à ce qu'il ne puisse pas être invoqué. Il est facile de modifier l'attribut disabled par le biais d'un script.

Notre exemple de recherche de fichiers

Ajoutons des raccourcis clavier à la boîte de dialogue de recherche de fichiers. Nous en ajouterons quatre, un pour chacune des commandes Couper, Copier et Coller, et aussi un pour la commande Fermer quand l'utilisateur presse Esc

Source Voir

<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="Fichier" accesskey="f">
     <menupopup id="file-popup">
       <menuitem label="Ouvrir une recherche..." accesskey="o"/>
       <menuitem label="Sauver une recherche..." accesskey="s"/>
       <menuseparator/>
       <menuitem label="Fermer" accesskey="c" key="close_cmd"
         oncommand="window.close();"/>
     </menupopup>
   </menu>
   <menu id="edit-menu" label="Editer" accesskey="e">
     <menupopup id="edit-popup">
       <menuitem label="Couper" accesskey="e" key="cut_cmd"/>
       <menuitem label="Copier" accesskey="p" key="copy_cmd"/>
       <menuitem label="Coller" accesskey="l" key="paste_cmd" disabled="true"/>
     </menupopup>
   </menu>
Maintenant nous pouvons utiliser ces raccourcis pour activer les commandes. Évidemment les commandes du presse-papiers restent inactives puisque nous n'avons pas encore écrit leurs scripts.

Événements Clavier

Il y a trois types d'événements clavier qui peuvent être utilisés si les dispositifs principaux décrits ci-dessus ne sont pas appropriés.

keypress 
Appelé quand une touche est pressée puis relachée avec l'élement qui a le focus (élément actif). Vous pouvez l'utiliser pour controller les caractères saisis dans un champ.
keydown 
Appelé quand une touche est pressée avec l'élément qui a le focus (élément actif). Remarquez que l'évènement sera appelé aussitôt la touche enfoncée, même si elle n'a pas été encore relachée.
keyup 
Appelé quand une touche est relachée avec l'élément qui a le focus (élément actif).

Les évènements clavier sont envoyés seulement à l'élément qui a le focus. Typiquement, ils incluent les champs de saisie, les boutons, les cases à cocher, et d'autres encore. Si aucun des éléments n'est actif, l'événement sera dirigé vers le document XUL lui-même. Dans ce cas, vous pouvez associer un scrutateur d'événements à la balise window. Cependant, si vous voulez réagir aux événements de manière globale, vous devriez utiliser un raccourci clavier comme décrit plus haut.

L'objet event a deux propriétés qui contiennent la touche pressée. La propriété keyCode contient le code de la touche qui peut être comparé à une des constantes de la table des codes de touche vue plus tôt dans cette section. La propriété charCode est utilisée pour les caractères imprimables et contient le caractère de la touche pressée.

<hr>

Dans la prochaine section, nous allons découvrir comment gérer le focus et la sélection.

Interwiki

Pièces jointes

Fichier Taille Date Joint par
xultu_keyshort1.jpg
1859 octets 2007-08-14 07:55:19 Fredchat
grids2.jpg
5154 octets 2006-05-13 09:42:28 Morishoji

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : E.cg, Chbok
Dernière mise à jour par : E.cg,