Cada vez que pienso en desarrollar una aplicación RIA lo primero que se me viene a la mente es Flex. Pero siempre existen los casos en los cuales el cliente no desea que su aplicación dependa de si sus usuarios tengan o no instalado alguna versión determinada del "Flash Player" en sus navegadores. Para estos casos, mi segunda opción es ZK, pero nuevamente existe el problema de que a algunos cliente nos les gusta aventurarse en frameworks no muy conocidos (no muy conocidos por el) y prefieren más bien que sus sistema sea desarrollado utilizando algún otro framework o estándar mas conocido por la industria.
Es en estos escenarios donde recurro a mi querido (y también odiado) JSF. Hace ya bastante tiempo que no volvía a meter las manos con JSF, pero gracias a dios, hoy en día todo es mucho más fácil, si es que utilizamos “Facelets” y todo el poder que nos entrega “Spring Faces”.
Hasta el momento todo está bien, pero en este último caso, me vuelvo a encontrar con el mismo problema de siempre. El cliente quiere un sistema de ensueños!!!. Que todo sea “Drag-and-Drop”, full Ajax, mucho efecto visual, etc…..
Claro, si hablamos de JSF, podría utilizar RichFaces, IceFaces, MyFaces o alguna otra batería de componentes. Pero que pasa en los casos en que necesito alguna funcionalidad especial que no esté implementada dentro de este conjunto de componentes?.
Buscando una opción, recordé haber leído que hoy en día, muchos consideran a JQuery como una de las mejores librerías Javascript del momento. Así que decidí ver que tanta maravilla es esta tan bullada librería, y aunque no me considero un fanático de Javascritp (muy por el contrario), la única palabra que se me ocurre para expresar el sentimiento que me produjo es GUUUUAAAAAUUUUUUU!!!!!!!.
Mi objetivo es compartir algunos conceptos básicos que he podido desarrollar gracias al libro “Learning Jquery - Better Interaction Design And Web Development With Simple Javascript Techniques”.
Si alguien está interesado en aprender Javascript, le recomiendo el libro gratuito de Javier Eguíluz Pérez que pueden descargar desde aquí.
JQuery es una librería JavaScript rápida y concisa, que simplifica la tediosa tarea de recorrer documentos HTML (DOM), manejar eventos, ejecutar animaciones y agregar interacciones con Ajax.
Para utilizar JQuery, solo necesitamos descargar la librería y en cada página que necesitemos utilizarla, simplemente definir:
Claro, si hablamos de JSF, podría utilizar RichFaces, IceFaces, MyFaces o alguna otra batería de componentes. Pero que pasa en los casos en que necesito alguna funcionalidad especial que no esté implementada dentro de este conjunto de componentes?.
Buscando una opción, recordé haber leído que hoy en día, muchos consideran a JQuery como una de las mejores librerías Javascript del momento. Así que decidí ver que tanta maravilla es esta tan bullada librería, y aunque no me considero un fanático de Javascritp (muy por el contrario), la única palabra que se me ocurre para expresar el sentimiento que me produjo es GUUUUAAAAAUUUUUUU!!!!!!!.
Mi objetivo es compartir algunos conceptos básicos que he podido desarrollar gracias al libro “Learning Jquery - Better Interaction Design And Web Development With Simple Javascript Techniques”.
Si alguien está interesado en aprender Javascript, le recomiendo el libro gratuito de Javier Eguíluz Pérez que pueden descargar desde aquí.
JQuery es una librería JavaScript rápida y concisa, que simplifica la tediosa tarea de recorrer documentos HTML (DOM), manejar eventos, ejecutar animaciones y agregar interacciones con Ajax.
Para utilizar JQuery, solo necesitamos descargar la librería y en cada página que necesitemos utilizarla, simplemente definir:
Una de las principales ventajas, además de ahorrarnos la escritura de bastante código (principalmente útil para los que no somos muy expertos en Javascript), es que nos permite manipular la página apenas se haya construido el árbol DOM de esta, en comparación con las funciones de Javascript, las cuales esperan a que se carguen todos los elementos de la página (incluyendo todas las imágenes).
Algunas de las principales ventajas que nos aporta esta librería son:
- Nos ahorra muchas líneas de código.
- Nos hace transparente el soporte de nuestra aplicación para los principales navegadores web.
- Nos provee de un mecanismo para la captura de eventos.
- Provee un conjunto de funciones para animar el contenido de la página en forma muy sencilla.
- Integra funcionalidades para trabajar con AJAX.
El primer paso será descargarnos la última versión de JQuery desde aquí y dejarla dentro de nuestro proyecto.
Para los siguientes ejemplos he renombrado el archivo a “jquery.js” y lo he dejado guardado dentro de la carpeta “js” de mi aplicación web.
Para entender mejor como nos puede ayudar JQuery a ahorrar muchas líneas de código, nada mejor que un ejemplo comparativo “Sin JQuery” y “Con Jquery”.
Para los siguientes ejemplos he renombrado el archivo a “jquery.js” y lo he dejado guardado dentro de la carpeta “js” de mi aplicación web.
Para entender mejor como nos puede ayudar JQuery a ahorrar muchas líneas de código, nada mejor que un ejemplo comparativo “Sin JQuery” y “Con Jquery”.
Ya a simple vista podemos ver que a diferencia de la forma tradicional, con JQuery nos basto simplemente un par d líneas de código para lograr la misma funcionalidad. Pero, como trabaja JQuery?.
La función principal de esta librería se llama “$”, a la cual le podemos pasar distintos valores, y la que a su vez retorna un objeto del tipo JQuery .
Si vemos el código del archivo “ejemploBasicoJQuery.js”, podremos observa que el primer método que estamos llamando es a “ready”:
La función principal de esta librería se llama “$”, a la cual le podemos pasar distintos valores, y la que a su vez retorna un objeto del tipo JQuery .
Si vemos el código del archivo “ejemploBasicoJQuery.js”, podremos observa que el primer método que estamos llamando es a “ready”:
Este método recibe como parámetro el nombre de una función, la que se ejecutara cuando todos los elementos de la página estén cargados.
Dentro de la función “inicializarEventos”, nuevamente utilizamos la función “$” para crea un objeto de la clase JQuery asociada a un botón de la pagina HTML. Para lograr esto, a la función “$” le pasamos el “id” del botón al cual la queremos asociar precediéndolo por el caracter "#".
Por último, llamamos al método click, pasándole como parámetro el nombre de la función que se ejecutará al presionar ese botón.
En el caso de que queramos asociar algún elemento de una página HTML a la función “$”, simplemente seguimos la sintaxis:
Dentro de la función “inicializarEventos”, nuevamente utilizamos la función “$” para crea un objeto de la clase JQuery asociada a un botón de la pagina HTML. Para lograr esto, a la función “$” le pasamos el “id” del botón al cual la queremos asociar precediéndolo por el caracter "#".
Por último, llamamos al método click, pasándole como parámetro el nombre de la función que se ejecutará al presionar ese botón.
En el caso de que queramos asociar algún elemento de una página HTML a la función “$”, simplemente seguimos la sintaxis:
$(“nombre_elemento_HTML”)
El único problema con este tipo de función, es que estaremos referenciando a los de este tipo contenidos en nuestra página HTML. Entonces, como podemos discriminar sobre que elemento de la pagina se efectuó alguna acción?. Simplemente llamando a la función "$(this)".
Otra característica muy importante de JQuery, es que nos permite tener acceso a los selectores CSS de los elementos contenidos dentro del árbol DOM.
Veamos un ejemplo que muestre todos los tópicos mencionados hasta el momento:
Otra característica muy importante de JQuery, es que nos permite tener acceso a los selectores CSS de los elementos contenidos dentro del árbol DOM.
Veamos un ejemplo que muestre todos los tópicos mencionados hasta el momento:
Además de tener acceso a los selectores CSS, también podemos tener acceso a las clases que tengamos definidas dentro de nuestra página CSSHTML simplemente llamando a la función:
$(“.nombre_clase_css”)
Si queremos obtener el texto de un elemento, simplemente llamamos al método "text()". Por ejemplo, si tenemos el párrafo:
Para obtener el texto llamaremos a la función "text()" del elemento “p”:
En cambio, si queremos modificar el texto contenido dentro del elemento, llamaremos nuevamente al método "text()", pasándole como parámetro el nuevo texto:
Otros métodos importantes dentro de JQuery, son aquellos que nos permiten manipular los atributos de los elementos de nuestra página HTML. Estos son:
Por ejemplo:
- attr(nombre_atributo)
- attr(nombre_ atributo, valor)
- removeAttr(nombre_ atributo)
Por ejemplo:
Eventos
Algunos de los eventos más importantes dentro de JQuery son:
mouseover/mouseout: Estos eventos son equivalentes a los eventos onmouseover y onmouseout de Javascript. El primero de estos se ejecuta cuando ponemos la flecha del mouse sobre un elemento HTML y el segundo cuando sacamos la flecha del elemento.
hover: Como los eventos mouseover y mouseout son comúnmente usados, existe el evento hover que recibe dos parámetros:
hover: Como los eventos mouseover y mouseout son comúnmente usados, existe el evento hover que recibe dos parámetros:
$(elemento).hover([función de ingreso del mouse],[función de salida del mouse])
La primera función se ejecuta cuando ponemos la flecha del mouse sobre un elemento HTML y el segundo cuando sacamos la flecha del elemento.
mousemove: Este evento se ejecuta cuando se mueve la flecha del mouse dentro del elemento HTML respectivo.
mousedown/mouseup: El primer evento se ejecuta cuando presionamos alguno de los botones del mouse y el segundo cuando dejamos de presionar el botón.
dblclick: Este evento se ejecuta cuando se presiona dos veces seguidas el botón izquierdo del mouse sobre un elemento HTML.
focus: Este evento ejecuta cuando se activa el control. Podemos capturar el evento focus de un control de tipo text, textarea, button, checkbox, fileupload, password, radio, reset y submit.
blur: Este evento se ejecuta cuando se pierde el foco el control. Podemos capturar el evento blur de un control de tipo text, textarea, button, checkbox, fileupload, password, radio, reset y submit.
Efectos
Otro concepto importante son los efectos, entre los que destacan:
show/hide: Permiten ocultar y mostrar elementos HTML, asociándoles una pequeña animación (que se oculte o muestre lentamente).
fadeIn/fadeOut: El primer efecto hace aparecer los elementos HTML con opacidad y el segundo lo decolora hasta hacerlo desaparecer (reduce la opacidad del elemento en forma progresiva).
fadeTo: Permite modificar la opacidad de un elemento, llevando la opacidad actual hasta el valor que le pasamos como parámetro. Tambien se le puede la velocidad de la transición (en milisegundos).
toggle: Permite cambiar de estado la visibilidad del elemento HTML; es decir si está visible pasa a oculto y si se encuentra oculto pasa a visible.
Si quieren ver todas las funcionalidades de JQuery, les recomiendo visitar esta página.
Además, como toda buena librería, esta ya cuenta con un conjunto de plugins que extienden y facilitan aun más el uso de JQuery. En esta página encontraran un listado de los 10 plugins más populares, entre los que destaca JQuery UI.
Después de todo lo visto, creo que me quedare con “RichFaces” en el en mundo JSF, debido a que se integra fácilmente con JQuery.
Entradas
3 comentarios:
Muy interesante el artículo, que opinión tienes de DojoToolKit dentro de los framework JavaScript ?.
JSA
Hola, como estas, queria felicitarte por tu pagina, esta muy buena, si queres pasa por mi pagina y dejame un comentario, estan entrando mucho en mi sitio, si te interesa podemos hacer un intercambio de links, banners, cualquier cosa avisame, te dejo mi email tvinternet08@gmail.com, te mando un abrazo.
Hola , queria felicitarte, pues tu pagina es excelente .
te mando un abrazo .
Publicar un comentario