- En esta tarea construiremos un script para listar los eventos onkeydown y onkeypress. Después de cada evento, mostraremos qué tecla se presionó con su código de clave y cadena de tecla.
- Todos los archivos obligatorios, documentos y demostraciones están disponibles en Site de MochiKit,
Como Lo Haremos?
- Paso 1: Nosotros para este artículo necesitaremos descargar toda la librería MochiKit y guardarla en nuestra carpeta js:
- Nos dirigimos a la sección "Release Version" ó "Version de Prueba" y haciendo click en el link que ahí aparece procedemos a la descarga de los archivos que hacen posible la ejecución de esta biblioteca!
- Realizada la descarga procedemos a descompactar el archivo MochiKit-1.4.2.zip en una carpeta en la que proximamente podamos encontrarla:
- Para este Artículo he creído interezante usar el IDE Eclipse (Descargue IDE Eclipse) con el cual las cosas se tornan mucho más fáciles, al principio pues como todos sabemos tenemos que crear un nuevo proyecto:
- Luego pues le colocamos un nombre a nuestro proyecto, paar nuestro caso he creído interezante colocarle "php-ajax-mochikit":
- Bueno ahora procedemos a crear una carpeta llamada "js" dentro de nuestro proyecto para incorporar ahí nuestros archivos con formato .js,
- Primero hacemos click derecho encima del nombre de nuestro proyecto en el Eclipse y pues nos dirigimos a new->folder:
- Ahora nos aparecerá una ventana que nos ofrece la opción de decidir en que proyecto queremos cerar esa carpeta, señalamos "php-ajax-mochikit" para luego colocar en la parte inferior el nombre de esa carpeta "js", veamos:
- Bien, ahora haciendo click en Finish ejecutamos la creación de la nueva carpeta en nuestro proyecto!
- Ahora lo que haremos será crear un archivo dentro de esta carpeta, el cual se llamará "Mochikit.js",
- Primero hacemos click derecho sobre la carpeta js que hemos creado y luego en new->File
- Nos aparecerá inmediatamente una nueva ventana que nos solicitará el ingreso del nombre del archivo, pues le colocaremos "mochikit.js", veamos:
- Haciendo click en Finish habremos creado nuestro "mochikit.js" en el cual copiaremos el código incluído en el archivo del mismo nombre "mochikit.js" de nuestra carpeta mochikit-1.4.2 que descargamos y descompactamos al início:
- Esta carpeta la encontramos en la siguiente ruta:
- MochiKit-1.4.2\packed\MochiKit.
- Pero si deseas descargarlo hazlo aquí!
- Bueno entonces abrimos este archivo con algun editor y copiamos el código contenido en él que serían las funciones involucradas con la ejecución de MochiKit, para pegarla en nuestro archivo creado en nuestro IDE Eclipse!
- Quedando nuestro archivo de la siguiente manera:
- Bueno esto es simple de hacer y el código no lo explicaremos ya que será un archivo contenido en la biblioteca MochiKit!
- Paso 2: Creando Archivo actions.php de nuestro proyecto:
- Este archivo será incluido dentro de la carpeta "ajax" de nuestro proyecto:
- Realizamos el mismo método para crear una nueva carpeta llamada "ajax" y dentro de ella crearemos un archivo llamado "actions.php"
- Una vez creado este archivo podemos codificar lo siguiente en él para que ejecute la acción de llamar a la función "action" y a la función "key" que nos proporciona mochikit.js, veamos:
<?php
if($_GET["action"] && $_GET["key"])
{ // nuestra lógica para procesar datos ingresados!
}
else
{
echo "No se proporcionó ningun parámetro!";
}
?>
- En este archivo realizamos el llamado mediante el metodo HTTP GET a 2 eventos "action" y "key", que son los requeridos para esta aplicación, que serían la lógica para procesar datos ingresados!, todo utilizando las condicionales if y luego else.
- Paso 3: Creando el archivo index.html,
- Para esto hemos creado un archivo en la raíz principal de nuestro proyecto llamado index.php, que es un archivo simple que contiene el elemento <script> que va a hacer referencia al archivo mochikit.js en su cabecera,
<script type="text/javascript" src="js/MochiKit.js"></script>
miguel
- Luego tendrá un código simple del elemento HTML <table> que estará dentro del <body> de nuestro archivo html, que nos mostrará en pantalla una simple tabla donde se ejecutarán los eventos del MochiKit
<table>
<tr>
<th>Event</th>
<th>Key Code</th>
<th>Key String</th>
</tr>
<tr>
<td>onkeydown</td>
<td id="onkeydown_code">-</td>
<td id="onkeydown_string">-</td>
</tr>
<tr>
<td>onkeypress</td>
<td id="onkeypress_code">-</td>
<td id="onkeypress_string">-</td>
</tr>
</table>
</table>
- Quedando nuestro código de la siguiente manera!
- Luego pues colocaremos un código JavaScript que llamará a las funciones JavaScript del archivo mochikit.js,
- el código que colocaremos a continuación serã antes de cerrar el elemento <body>, osea antes de </body>
<script>
connect(document, 'onkeydown',
function(e) {
var key = e.key();
replaceChildNodes('onkeydown_code', key.code);
replaceChildNodes('onkeydown_string', key.string);
doSimpleXMLHttpRequest("ajax/actions.php",
{ action: "keydown", key: key.code});
});
connect(document, 'onkeypress',
function(e) {
var key = e.key();
replaceChildNodes('onkeypress_code', key.code);
replaceChildNodes('onkeypress_string', key.string);
doSimpleXMLHttpRequest("ajax/actions.php",
{ action: "keypress", key: key.code}); });
</script>
- Con lo cual nuestro archivo quedará de la siguiente manera, veamos:
- Ahora grabamos el archivo y veamos que pasa con nuestro proyecto, será que va a funcionar?
- Veamos!
- Hagamos correr nuestro aplicativo!
- Entremos en http://localhost/php-ajax-mochikit/, que es la url con la que trabajamos en WampServer y hemos alojado nuestro proyecto en una carpeta llamada "php-ajax-mochikit",
- Podemos notar que presionando cualquier tecla de nuestro teclado nos ofrece un Key Code (código de tecla), osea que al presionar alt + este código generado obtendremos la entidad que tecleamos!
- Hagan sus preguntas y claro tambien no dejen de hacer sus críticas por favor!
Déjenos su Comentário:
0 commentários: