Primeros Pasos Con JQuery UI

Table of contents

Introducción

jQuery UI es un complemento que permite implementar componentes diversos para generar interfaces de usuario en páginas web, además de otras funcionalidades básicas para crear aplicaciones web enriquecidas. Como su propio nombre indica, está basado en el popular framework Javascript y podemos encontrar links, explicaciones, así como demos y descargas a partir del sitio web oficial de jQuery.

Ejemplos de jQuery UI

Antes de empezar puedes echar un vistazo a los diferentes ejemplos con funcionalidades listas para usar, así como componentes (widgets) para implementar interfaces de usuario. Los puedes ver desde la pagina de demos de jQuery UI. Algo que es muy interesante de estos ejemplos son los denominados widgets, donde hay ejemplos de estas librerías para crear los típicos menús “acordeón”, calendarios para seleccionar fechas, ventanas de dialogo, interfaces de pestañas, etc.

Instalación

La descarga de jQuery UI permite seleccionar qué componentes vamos a necesitar de la librería, de modo que si sólo queremos hacer uso de un widget, no tenemos por qué arrastrar el código del resto de funcionalidad en el script de descarga. De este modo podemos seleccionar únicamente aquello que vamos a usar. El script completo son 299 kb.

Además podemos elegir un tema css para la descarga, de entre uno de los predefinidos o crear uno “ad hoc” con la herramienta ThemeRoller.

Podemos descargarnos la última versión desde su pagina oficial.

En el fichero comprimido de la descarga podemos encontrar:

La librería jQueryUI, con el código de las opciones seleccionadas, y la librería jQuery de la que depende, una distribución para desarrolladores (development-bundle), con:

la documentación del framework
páginas de demo con ejemplos de uso de cada funcionalidad, y
librerías js con cada una de las funcionalidades concretas y dentro de development-bundle/ui/i18n/ librerías para la internacionalización de los componentes que contienen literales

El tema CSS elegido

Para hacer uso de la misma, en nuestras páginas html, no hay más que incluir una referencia a ella, justo después de la referencia a la librería jQuery, en sendas etiquetas script, en la cabecera:

Además, incluiremos una referencia al css que incluye el tema elegido para los componentes visuales.

Código fuente del tutorial

Si quieres puedes descargar todo el código de este tutorial en este link.

Componentes de interacción

Con la invocación a los siguientes métodos de la función $(”) podemos añadir comportamientos a los nodos obtenidos o creados:

$.draggable();: añade al elemento la propiedad de poderse arrastrar.
$.droppable();: asigna la propiedad a un elemento para que pueda recibir objetos soltados tras el arrastre.
$.resizable();: asigna al elemento la propiedad de poder redimensionarse.
$.selectable();: asigna la propiedad seleccionable a un elemento o a todos sus hijos.
$.sortable();: asigna la propiedad ordenable a un elemento o a todos sus hijos.

El fundamento es el mismo en todas las interacciones, por ejemplo, para la redimensión de una capa, el código sería el siguiente:

// una nota redimensionable  
$("#postIt").resizable();

Es así de simple, de modo que el drag & drop, no es más que asignar a una capa la propiedad “arrastable” e indicar a otra que puede recibir objetos arrastrados.

// una nota  
$("#postIt").draggable();  
  
// el contenedor de notas sobre el que se pueden arrastrar las notas  
$("#contenedor-postIts").droppable({accept: '#postIt'});

En la siguiente demo puedes encontrar una combinación de dos efectos: dragable y sortable.

Efectos visuales

La función $.animate(properties, duration, callback); añade las siguientes propiedades a las que acepta la función homónima de jQuery:

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor

Además acepta una duración en su aplicación, a modo de transición entre estados, y la posibilidad de invocar a un método de callback después de la transición (la duración y el método de callback son comunes a todos los efectos).

Además tenemos los siguientes efectos:

$.hide(effect) | $.show(effect); aceptan los efectos avanzados de jQuery UI: ‘blind’, ‘clip’, ‘drop’, ‘explode’, ‘fold’, ‘puff’, ‘slide’, ‘scale’, ‘size’, ‘pulsate’
$.addClass(class) | $.removeClass(class);: añade o elimina un selector css
$.switchClass(remove, add);: sustituye un selector css por otro
$.toogleClass(class);: añade el selector css si no existe y lo elimina si existe

Puedes ver todos los demos en el siguiente enlace.

Un widget es un componente reutilizable de la interfaz de usuario. jQuery UI provee una serie de componentes predefinidos, aunque no son muchos; nosotros vamos a mostrar una selección de fecha en calendario, es decir, el widget date picker.

$("input .calendar").datepicker({showOn: 'button', buttonImage: 'jQueryUI/calendar.gif', buttonImageOnly: true, firstDay:1, dateFormat: 'mm/dd/yy'});

Lo primero es obtener el objeto del árbol al que añadir la funcionalidad, si lo hacemos por selector css, podemos hacer que los campos de entrada con el estilo “calendar” se vean afectados por dicha funcionalidad. Desde otro punto de vista, lo que estamos haciendo es inyectar comportamiento a componentes identificables de nuestro html.

Para que el calendario se muestre internacionalizado, además es necesario incluir la librería con los literales en el idioma adecuado que podemos encontrar en la distribución de jQuery UI, bajo el directorio development-bundle/ui/i18n/.

El componente mostrará los literales de la librería incluida, aunque también podemos incluir todos los literales de los idiomas soportados e internacionalizar “seteando” el locale.

$.datepicker.setDefaults($.extend($.datepicker.regional['es']));

Temas personalizados

Por último, vamos a comentar la herramienta ThemeRoller; se trata de motor de generación de temas online, una herramienta que permite seleccionar el valor de las propiedades css del tema de descarga de jQuery UI, para personalizar los componentes visuales. Lo más interesante es que contiene una demo de todos los widgets que provee jQuery UI, para mostrar el resultado de las parametrizaciones, de modo que cuando lo estimes oportuno, procedas a la descarga del css, con tus modificaciones.

No menos interesante es que ya hay muchos plugins de jQuery que se basan en esos estilos, haciéndose compatibles con los temas que nosotros definamos.

Conclusión

Como puedes ver, el utilizar jQuery UI es simple pero potente y nos ofrece una variedad de widget muy interesantes, podemos utilizar plugins de terceros o los nuestros propios.