7.3 Raccourcis clavier

Vous pourriez utiliser les gestionnaires d'évènement clavier pour réagir aux touches pressées. Cependant, ce serait ennuyeux de le faire pour chaque bouton et item de menu.

Créer 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 pouvons définir un attribut appelé accesskey qui spécifie quelle touche un utilisateur peut presser 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 quelqu'autre combinaison de touches spécifique à une plateforme). Une fois le menu Fichier ouvert, l'item de menu Fermer peut être sélectionné en pressant F.

Exemple 7.3.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é, le bouton est sélectionné.

Cependant, vous pourriez vouloir mettre en place des raccourcis clavier plus généraux. Par exemple, presser Ctrl+C pour copier du texte dans le presse-papier. Bien que de tels raccourcis puissent n'être pas toujours valide, ils vont usuellement fonctionner dès lors que la 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-papier devrait marcher seulement quand du texte est sélectionné.

XUL fournit un élément, key, qui vous permet de définir un raccourci clavier pour une fenêtre. Il a des attributs pour spécifier la touche qui doit être pressée et quelles touches de modification (comme Maj ou Ctrl) doivent l'accompagner. Un exemple :

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

Cette exemple définit un raccourci clavier qui est activé 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) peut être utilisé pour indiquer quelle touche doit être pressée, dans ce cas R. Vous pouvez ajouter n'importe quelle caractère dans cet attribut pour rajouter ce caractère aux touches requérant d'être pressées. Les touches de modification qui doivent être pressées sont indiquées par l'attribut modifiers. C'est une liste de touches de modification séparées par des espaces, ces touches de modification se trouvant dans la liste ci-dessous :

alt

L'utilisateur doit presser la touche Alt

control

L'utilisateur doit presser la touche Ctrl

meta

L'utilisateur doit presser la touche Meta. C'est la touche Command sous Macintosh.

shift

L'utilisateur doit presser la touche Shift (Maj)

accel

L'utilisateur doit presser la touche de raccourci spécifique à sa plateforme.

Votre clavier n'aura pas forcément toutes ces touches, auquel cas elles seront transférés sur les 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 qui sert à grouper toutes les définitions de raccourcis dans un seul emplacement du fichier. Un élément key à l'extérieur d'un élément keyset ne sera pas pris en compte.

Généralement, chaque plateforme 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 séparé pour chaque plateforme. Heureusement, il y a une solution, la touche de modification accel se réfère à la touche de raccourci spécifique à la plateforme. Il marche exactement comme les autres touches de modification excepté qu'il change selon la plateforme.

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>

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 que vous voulez. Une liste des touches est disponible ci-dessous. Toutes les touches ne sont pas disponibles sous toutes les plateformes.

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 de plus :

<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 plateforme et C. Le second 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, utiliser les touches VK_NUMPAD (telles que VK_NUMPAD1).

Utiliser les raccourcis clavier

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

<keyset>
  <key id="copy-key" modifiers="accel" key="C" onkeypress="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 dans le presse-papier (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-papier si tel est le cas. Notez que les boîtes de textes intègrent déjà les raccourcis pour utiliser le presse-papier, de sorte que vous n'avez pas besoin de les implémenter vous-même.

Vous pouvez aussi utiliser les gestionnaires d'évènements keyup et keydown.

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

Exemple 7.3.2 : Source Voir

<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 ceci aussi bien pour définir des raccourcis supplémentaires que pour affecter des raccourcis clavier à n'importe quel nombre d'item de menu.

Vous noterez aussi dans cette image que du texte a été placé à côté de la commande Coller du menu pour indiquer que le raccourci Ctrl+V peut être pressé pour invoquer la commande du menu. Ceci est ajouté 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. Pour faire cela ajoutez un attribut disabled à l'élément key et affectez lui la valeur true. Ceci désactive le raccourci clavier de façon à ce qu'il ne puisse être invoqué. Il est utile de modifier l'attribut disabled par le biais d'un script.

Exemples de raccourcis

<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="t" key="cut_cmd"/>
       <menuitem label="Copier" accesskey="c" key="copy_cmd"/>
       <menuitem label="Coller" accesskey="p" key="paste_cmd" disabled="true"/>
     </menupopup>
   </menu>

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