Tutorial de XUL:Atajos de teclado

De MDC

Puedes usar manejadores de evento de teclado para responder al teclado. Sin embargo, sería tedioso hacer eso para cada botón y elemento de menú.

[editar] Creación de un atajo de teclado

XUL provee métodos en los cuales puede definir atajos de teclado. Ya vimos en la sección de menúes que podemos definir un atributo llamado accesskey que específica la tecla que un usuario debe presionar para activar el menú o un elemento del mismo. En el ejemplo que está debajo, el menú Archivo puede ser seleccionado presionando 'Alt' y 'F' (o cualquier otra combinación de teclas para una plataforma específica). Una vez que el menú Archivo está abierto, el menú Cerrar puede ser seleccionado presionando la tecla C.

Ejemplo 1: Código Ver en funcionamiento

<menubar id="sample-menubar">
  <menu id="file-menu" label="Archivo" accesskey="f">
    <menupopup id="file-popup">
      <menuitem id="close-command" label="Cerrar" accesskey="c"/>
    </menupopup>
  </menu>
</menubar>

Tambié puede usar el atributo accesskey en botones. Cuando la tecla es presionada en este caso, el botón es seleccionado.

Quizás quiera configurar atajos de teclado más generales. Por ejemplo, presionar Control+C para copiar texto al porta papeles. Aunque a veces atajos como estos no siempre son válidos, usualmente funcionarán cada vez que la ventana esté abierta. Usualmente, un atajo del teclado estará permitido en cualquier momento y puede ver ver si deberí estar haciendo algo con algún programa. Por ejemplo, copiar texto al portapapeles sólo debería funcionar cuando hay algún texto seleccionado.

[editar] El elemento 'tecla'

XUL provee de un elemento, tecla, el cual le permite definir un atajo de teclado para una ventana. Tiene atributos para especificar la tecla que debería ser presionada y qué teclas modificadoras (tales como Shift o Control) necesitan ser presionadas. Un ejemplo es mostrado a continuación:

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

Este ejemplo define un atajo de teclado que es activado cuando el usuario presiona la tecla 'Shift' y 'R'. El atributo key (tiene el mismo nombre que el elemento mismo) puede usarse para indicar que tecla debe apretarse, en este caso la 'R'. Se puede añadir cualquier carácter a este atributo para requerir que se aprete una tecla en particular. Los modificadores que deben apretarse se indican con el atributo modifiers. Es una lista separada con espacios de teclas de modificadores, que se listan a continuación:

alt 

El usuario debe pulsar la tecla Alt. En Macintosh, es la tecla Option.

control 

El usuario debe pulsar la tecla Control.

meta 

El usuario debe pulsar la tecla Meta. En Macintosh, es la tecla Command.

shift 

El usuario debe pulsar la tecla Mayúsculas.

accel 

El usuario debe pulsar la tecla especial acelerador. La tecla usada por los atajos de teclado en la plataforma del usuario. Habitualmente, éste debería ser el valor que utilizases.

Tu teclado no tendrá necesariamente todas las teclas, en cuyo caso serán mapeadas a las teclas modificadoras que tengas.

El elemento key debe colocarse dentro de un elemento keyset, caso contrario no funcionará. This element is designed for holding a set of key elements, which serves to group all of the key definitions in one place in a file.

Cada plataforma generalmente utiliza una tecla diferente para los atajos de teclado. Por ejemplo, Windows usa la tecla Control y Macintosh usa la tecla Command. Sería conveniente definir elementos key por separado para cada plataforma. Afortunadamente, hay una solución. El modificador accel hace referencia a la tecla usada para atajos de teclado específica de cada plataforma. Funciona igual que otros modificadores, pero no será la misma en todas las plataformas.

Algunos ejemplos adicionales:

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

[editar] El atributo código de tecla (keycode)

El atributo key se utiliza para especificar la tecla que debe ser pulsada. Sin embargo, habrá casos en los que quieras referirte a teclas que no pueden ser especificadas con un caracter (como la tecla Enter o las teclas de función F1..F12). El atributo key sólo puede ser utilizado para caracteres imprimibles. Otro atributo, keycode puede ser utilizado para caracteres no imprimibles.

El atributo keycode debería ser establecido a un código especial que represente la tecla que quieres. A continuación hay una lista de teclas. No todas las teclas están disponibles en todos los teclados.

Por ejemplo, para crear un atajo con las teclas 'Alt y F5':

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

El siguiente ejemplo muestra algunos atajos de teclado más:

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

La primera tecla es invocada cuando el usuario pulsa su atajo específico de la plataforma y C. El segundo es invocado cuando el usuario pulsa F3. El tercero es invocado al pulsar las teclas Control, Alt y 1 a la vez. Si quieres distinguir entre teclas de la parte principal del teclado y el teclado numérico, utiliza las teclas VK_NUMPAD (como VK_NUMPAD1).

[editar] Usando los atajos de teclado

Ahora que sabemos cómo definir atajos de teclado, veremos cómo podemos usarlos. Hay dos formas. La primera es la más simple y sólo requiere que utilices el manejador de evento keypress en el elemento key. Cuando el usuario pulsa la tecla, el script será invocado. A continuación se muestra un ejemplo:

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

La función DoCopy será llamada cuando el usuario presione las teclas especificadas en el elemento key, que en este ejemplo, son las teclas para copiar al portapapeles (como Control+C). Esto funcionará mientras la ventana esté abierta. La función DoCopy debería comprobar si hay texto seleccionado y en ese caso copiarlo al portapapeles. Nota que las cajas de texto tienen los atajos del portapapeles ya incluidos, por lo que no tienes que implementarlos por ti mismo.

[editar] Asignación de un atajo de teclado a un menú

Si estás asignando un atajo de teclado que ejecuta a un comando que ya existe en un menú, puedes asociar el elemento key directamente con el comando del menú. Para hacer esto, añade un atributo key al menuitem. Establece su valor al id de la tecla que quieras usar. El siguiente ejemplo muestra esto.

Ejemplo 2: Código Ver en funcionamiento

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

El atributo key del elemento menuitem, cuyo valor aquí es paste-key es igual al valor del atributo id de la tecla definida. Puedes usar esto para teclas adicionales así como para definir atajos de teclado para cualquier número de elementos.

También verás que se ha añadido un texto junto a la opción "Paste" para indicar que el comando de menú puede ser invocado mediante Control + V. Esto se realiza automáticamente basándose en los modificadores del elemento key. Los atajos de teclado asociados a los menús funcionarán aunque el menú no esté abierto.

Una característica adicional de las definiciones de teclas es que las puedes desactivar fácilmente. Par hacer esto, añade un atributo disabled al elemento <code>key y establece su valor a true. Esto desactiva el atajo de teclado para que no pueda ser invocado. Es útil cambiar el atributo disabled utilizando un script.

 <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="File" accesskey="f">
     <menupopup id="file-popup">
       <menuitem label="Open Search..." accesskey="o"/>
       <menuitem label="Save Search..." accesskey="s"/>
       <menuseparator/>
       <menuitem label="Close" accesskey="c" key="close_cmd"
         oncommand="window.close();"/>
     </menupopup>
   </menu>
   <menu id="edit-menu" label="Edit" accesskey="e">
     <menupopup id="edit-popup">
       <menuitem label="Cut" accesskey="t" key="cut_cmd"/>
       <menuitem label="Copy" accesskey="c" key="copy_cmd"/>
       <menuitem label="Paste" accesskey="p" key="paste_cmd" disabled="true"/>
     </menupopup>
   </menu>
  </menubar>
 </toolbox>
</vbox>

[editar] Los eventos de tecla

Hay tres eventos de teclado que pueden ser utilizados si las funcionalidades descritas antes no estuvieran disponibles. Estos eventos son:

keypress 

Llamado cuando una tecla es pulsada y despulsada mientras un elemento tiene el foco. Puedes usar esta tecla para comprobar los caracteres permitidos en un campo.

keydown 

Llamado cuando una tecla es pulsada (aunque todavía no se haya despulsado) mientras un elemento tiene el foco.

keyup 

Llamado cuando una tecla es despulsada mientras un elemento tiene el foco.

Los eventos de tecla son sólo enviados al elemento que tiene el foco. Típicamente, esto incluye cajas de texto, botones, checkboxes y elementos así. Si no hay ningún elemento focalizado, el evento de la tecla será dirigido al propio documento XUL. En este caso, puedes añadir un escuchador de eventos (event listener) a la etiqueta window. Aunque normalmente, si quieres responder a teclas globalmente, utilizarás un atajo de teclado como se ha descrito antes.

El objeto evento de tecla tiene dos propiedades que registran la tecla que ha sido pulsada. La propiedad keyCode registra el código de la tecla y puede ser comparada con una de las constantes de la anterior tabla de esta sección. La propiedad charCode es utilizada para caracteres imprimibles y registrará el código de caracter de la tecla que fue pulsada.

Seguimos con poner un gestor de foco y selección.