Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (III Avanzado)

MooTools: la librería más completa para trabajar fácilmente con javascript.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 20

Visitas el mes pasado: 29

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




MooTools3 (IX)

Eventos del teclado

imagen mootools

Introducción

Los eventos del teclado controlan el teclado en general, con javascript resulta complicado saber qué tecla se está pulsando en cada momento. En mootools esto resulta más sencillo, ya que podemos hacer que al pulsar una tecla determinada o una combinacion determinada de teclas, se active una función para realizar una determinada acción. Y todo ello simplemente instanciando un objeto de la clase Keyboard(), la cual veremos a continuación.


La clase Keyboard()

Con la clase Keyboard() podemos asociar cada tecla o combinación de teclas con diferentes funciones, de manera que convertimos las pulsaciones de teclas en eventos, que abren funciones que realizan distintas acciones.


Instanciar el objeto

Lo primero que debemos hacer es instanciar un objeto de la clase Keyboard()

miTeclado=new Keyboard({[opciones]});

Como argumento pasaremos una serie de opciones las cuales son las siguientes:


opciones

Para hacernos una idea veamoslo con un ejemplo:

teclado1=new Keyboard({
   defaultEventType: "keydown",
   active: true,
   events: {
      "k": fn1,
      "space": function(){alert("pulsada barra espaciadora")},
      "shift+k": fn2
      }
   });
function fn1(){alert("pulsada letra k")}
function fn2(){(alert ("pulsadas mayúsculas + k"))}

Hemos aplicado este código a la página, de manera que si pulsas la letra "k" o el "espacio", o "mayúsculas + k" puedes comprobar el funcionamiento de este script.

Veamos los rasgos importantes del código anterior:

Veamos ahora los dos elementos de las parejas "tecla":funcion,, y cómo debemos definirlos. Empecemos por las teclas.


Las teclas

Los nombres de las teclas los escribiremos siempre entre comillas. Las teclas de letras se escriben con el nombre de la letra entre comillas "a", (siempre letra minúscula). Las teclas de números se escriben también entre comillas "1", y el evento se produce tanto al pulsar la tecla en el teclado alfanumérico, como en el numérico.

Las teclas especiales tienen nombres más largos, casi siempre el nombre de la tecla en ingles. Estas son: "space" (barra spaciadora), "shift" (tecla de mayúsculas), "tab" (tabulador), "alt" (tecla alt), "enter" (tecla enter o intro), "backspace" (tecla de retroceso), "ctrl" (tecla ctrl o de control), "up" (flecha arriba), "down" (flecha abajo), "left" (flecha izquierda), "right" (flecha derecha). Algunas teclas como "shift" o "ctrl" no funcionan bien con todos los tipos de eventos (evento indicado en la opción defaultEventTipe). De todas formas todas las teclas funcionan bien con el evento "keydown".

Podemos usar también una combinación de teclas (pulsar dos o más teclas a la vez) para ello indicamos los nombres de las teclas con el signo + entre ellas ("x+m"). La combinación de teclas puede ser de dos o más teclas, y éstas pueden ser teclas normales o especiales. El orden en que se escriban los elementos es indiferente. Es lo mismo poner "s+shift" que "shift+s".


Las funciones

Tal como hemos visto en el ejemplo anterior, en el segundo elemento de los pares tecla:funcion de la opción events, podemos escribir el nombre de la función (la cual creamos más adelante), o poner directamente una función anónima que realice las acciones.

En ambos casos el resultado es el mismo, es decir se ejecuta la función indicada si los eventos están activados (opción active: true).


Métodos

Los principales métodos del objeto Keyboard() están relacionados con la activación o desactivación de los eventos de teclado. Estos son los siguientes:


deactivate()

Este método desactiva los eventos de teclado asociados al objeto. El método no tiene argumentos:

teclado1.deactivate()


activate()

Este método activa los eventos de teclado asociados al objeto. El método no tiene argumentos:

teclado1.activate()


toggleAcive()

Este método cambia el estado "activado/desactivado" de los eventos asociados al objeto. Si está activado lo desactiva y viceversa. El método no tiene argumentos

teclado1.toggleActive()


isActive()

Este método devuelve un booleano que nos indica cual es el estado de los eventos del objeto: si están en activo devuelve true, si no es así devuelve false.

estado=teclado1.isActive()

En este ejemplo la variable estado tomará los valores true o false dependiendo del estado de los eventos del objeto.


Ejemplo de métodos

Aplicaremos estos métodos al ejemplo dado anteriormente, para ello crearemos varios botones para activar o desactivar los eventos de teclado. Cada uno de ellos nos lleva a un método de los indicados anteriormente. La cosa nos queda así:

... ... ...

Estado : Activado


Al pulsar en los botones se nos indica en la linea inferior si los eventos de tablero están activos o inactivos. Podemos comprobar también su estado pulsando las teclas a las que les hemos asignado eventos y comprobar si funcionan (teclas "k", "espacio", o "shift+k").

Veamos el código que hemos empleado para este ejemplo. En HTML creamos los botones y la línea de comprobación:

<p><button onclick="activo()">Activar</button> ...
<button onclick="inactivo()">Desactivar</button> ...
<button onclick="alternar()">Alternar<button> ...
</p>
<p>Estado : <b><span id="miestado">Activado</span></b></p>

Después en el código javacript-mootools añadimos las funciones que ativan o desactivan el objeto Keyboard(). El código en este ejemplo es el siguiente:

function activo() {
     teclado1.activate();
     estado=teclado1.isActive();
     verEstado(estado b);
     }
function inactivo() {
     teclado1.deactivate();
     estado=teclado1.isActive();
     verEstado(estado);
     }
function alternar() {
     teclado1.toggleActive();
     estado=teclado1.isActive();
     verEstado(estado);
     }
function verEstado(estado){
     if (estado==true) {$("miestado").set("html","Activado")}
     else {$("miestado").set("html","Desactivado")}
     }

Observa cómo añadimos una cuarta función a la que llamamos desde las demás, y es la que indica en la línea inferior el estado del teclado, el cual lo sabemos al aplicar el método isActive().

Utilidades

El ejemplo que hemos puesto aquí es muy simple, sin embargo nos sirve para ver cómo funciona la clase Keyboard().

Con ejemplos más complejos, o llevando los eventos a funciones más complicadas, seguro que podemos encontrar a esta clase múltiples utilidades, como por ejemplo la creación de juegos en los que usemos las teclas para las diferentes acciones, o atajos para llegar a otras páginas, etc.





Hasta aquí llega nuestro manual de mootools. Es cierto que en mootools hay algunos temas que hemos dejado sin tratar, sin embargo creo que el manual está bastante completo si lo que se pretende es explotar al máximo el potencial de mootools y sus efectos en la página. Puedes ampliar tus conocimientos de mootools consultando su documentación en http://mootools.net/docs/more y sus diferentes secciones.

El sitio está en inglés, sin embargo con un buen traductor no creo que tengas dificultades para poder ampliar tus conocimientos.



Manual de Mootools (III Avanzado)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com