Conociendo el Yahoo! UI Library (YUI)

En este pequeño artículo vamos a ver que se puede hacer de interesante con el Yahoo UI Library (YUI). Para aquellos que no pueden esperar, aquí tienen la url de donde pueden bajarlo.

Básicamente, estas librerías consisten en una serie de utilidades Javascript para poder realzar nuestras aplicaciones web con componentes visuales tales como animaciones, cuadros de mensajes a medida, ventanas emergentes sin necesidad de abrir otra instancia de navegador, posibilidad de crear cuadros de autocompletar, calendarios, menús y muchas cosas más, entre las cuales, la que más debo destacar es la utilización de la tecnología AJAX.
En mi experiencia personal, he aplicado estos controles en proyectos de bastante complejidad, y debo decir, que para iniciarse en el desarrollo, no harán falta más de 30 minutos de lectura de tutoriales. De verdad son muy fáciles de usar, sin embargo, deberemos tener mucho cuidado al usar la tecnología AJAX, ya que deberemos crear una arquitectura robusta y escalable (quizá este sea el próximo tema).
No es la intención de este artículo analizar uno por uno los componentes de YUI, vamos a ver 2 de los más importantes y cómo utilizarlos en una aplicación web Java.
La aplicación que pueden ver en la imagen, es la presentación principal de nuestra página.


Ahora, veamos que sucede cuando hacemos click en el link:

La ventana que aparece a continuación es un componente "container" de YUI. Antes de pasar al código, un listado de lo que necesitaremos en la página:

• Un campo
  vacío para alojar el formulario y resultado de la ventana emergente.
• Un campo
  vacío para alojar el listado de personas que se irán añadiendo.
• Un poco de paciencia para renegar con Javascript.
  

Veamos un poco el código para crearla:

<script language="javascript">

YAHOO.namespace("j2ee.panel");
YAHOO.j2ee.panel.panels = [];
var sUrl = '<%="http://localhost:8080/JavaBlogJ2EE/IndexAjax?a=buscar"%>';

function init() {
YAHOO.j2ee.panel.panel = new YAHOO.widget.Panel("win", { width:"25em",
height:"15em",
fixedcenter: true,
constraintoviewport: true,
underlay:"shadow",
close:true,
visible:false,
draggable:true, modal:false } );
YAHOO.j2ee.panel.panel.render();

YAHOO.j2ee.panel.panels["win"] = YAHOO.j2ee.panel.panel;
showForm();
}

function showForm(){
var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}

YAHOO.util.Event.addListener(window, "load", init);


Describo ahora un poco las líneas de código:

Por supuesto que deberemos tener en el index.jsp/php/asp/aspx/html los correspondientes enlaces a los archivos js de la biblioteca.
Ahora bien, con estas librerías podemos definir referencias al mejor estilo C#, utilizando la palabra "namespace". Es muy útil definirlo para poder utilizar el enlace con mayor facilidad más adelante. En el método init() es donde la ventana emergente se crea por primera vez. Si se fijan con cuidado, es aquí mismo donde podemos definirle es aspecto general.
En el método showForm() utilizamos el componente AJAX de YUI YAHOO.util.Connect. Este objeto nos permite realizar llamadas GET o POST, y obtener el resultado (resultado correcto o un error). para ello, deberemos utilizar un objeto del tipo "callback". Para los que no se sientan familiarizados con este término, una explicación rápida es compararlo con el patrón Observer y el modelo de eventos de Swing.

Ahora, podemos buscar personas por nombre utilizando un componente de conexión AJAX de la misma librería y agregarlos a un listado, todo sin necesidad de recargar la página, vean:

El ejemplo anterior, lo pueden bajar de la siguiente dirección. En próximos artículos, deambularemos por el código.

Como conclusión de este artículo puedo decirles que si bien estas librerías no serán ni contendrán todo lo que necesitamos, les aseguro que nos ahorrarán un poco de trabajo al obtener de forma rápida, resultados más dinámicos y en poco tiempo. Recomiendo leer la documentación oficial, que contiene muchísimos mas ejemplos de otros componentes.

Saludos