Introducción a jQuery UI.

Introducción a jQuery UI.

0. índice de contenidos.

• 1. Introducción.
• 2. Entorno.
• 3. Instalación.
• 4. Componentes de interacción.
• 5. Efectos visuales.
• 6. Widgets.
• 7. ThemeRoller.
• 8. Referencias.
• 9. Conclusiones.

1. Introducción

jQuery UI es una librería de componentes para el framework jQuery
que provee un conjunto de plugins, efectos visuales y widgets.

Ya hemos hecho una introducción
a jQuery y hemos visto cómo crear plugins para jQuery, ahora se trata de
seguir ampliando conocimientos, haciendo uso de una librería que se basa en la misma y que nos aporta:

• Componentes de interacción: drag & drop, sorting, resizing…
• Efectos: show, hide, toggle, color animation, class
  manipulation…
• Widgets: accordion, date picker, dialog, slider y tabs. 

Como vengo haciendo en los distintos tutoriales de jQuery,
comparándolo con prototypejs,
se trataría de toda aquella funcionalidad que tendríamos con la librería script.aculo.us
en el entorno de prototypejs, salvo que en esta no existe el concepto de widget.

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
• Sistema Operativo: Mac OS X Snow Leopard 10.6.1
• jQuery 1.3.2.
• jQuery UI 1.7.2.

3. 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, que veremos más adelante.

Podemos descargarnos la última versión de la siguiente
url: http://jqueryui.com/download.

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.

4. 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 podéis encontrar una combinación de dos efectos:
dragable y sortable.

5. 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.

Podeis examinarlos todos en la siguiente demo

6. Widgets.

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.

El código para poder hacer uso del widget es el siguiente:

$("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']));

7. ThemeRoller.

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, haciendose compatibles con los temas que
nosotros definamos.

8. Referencias.

• http://jqueryui.com/demos/
• http://jqueryui.com/demos/datepicker/
• http://jqueryui.com/docs/Theming

9. Conclusiones.

Es el script.aculo.us de jQuery, pero más simple, potente y con el concepto de widget,
que aunque no son muchos los que provee, siempre es plugable con lo que podríamos usar plugins de terceros o los nuestros propios.

Si estáis interesados en el contenido de nuestros tutoriales y tenéis una necesidad formativa al respecto no dudeis en poneros en contacto con nosotros.
En Autentia nos dedicamos, además de a la
consultoría, desarrollo y soporte a desarrollo, a impartir cursos de formación de las tecnologías con las que trabajamos.

Un saludo.

Jose

jmsanchez@autentia.com