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.

En DesarrolloWeb.com desde hace meses venimos explicando con detalle todo lo que los desarrolladores debe saber para utilizar jQuery y así realizar páginas enriquecidas en el cliente. Todo lo tenemos en el Manual de jQuery y además recientemente hemos publicado un Taller de jQuery con ejemplos prácticos sobre la realización de plugins con este framework y la utilización de componentes de terceros. Entre los scripts jQuery listos para usar que existen en Internet debemos de comenzar por los proporcionados en jQuery UI, ya que es la distribución oficial de componentes para la creación de interfaces de usuario avanzadas.

Así que comenzaremos publicando una serie de pasos iniciales necesarios para comenzar a usar jQuery UI en nuestras páginas web. Más tarde comenzaremos a implementar funcionalidades y componentes avanzados que nos proporcionan estas librerías. Esta guía está basada en las propias explicaciones que se encuentran en el sitio de jQuery UI.

Revisar los demos de jQuery UI

Podemos empezar por observar la cantidad de funcionalidades listas para usar, así como componentes (widgets) para implementar interfaces de usuario. Todo esto lo encontramos en la página de demos de jQuery UI.

Quizás lo más interesante en la página de demos son los denominados widgets, donde podremos encontrar ejemplos de uso de estas librerías para crear los típicos menús "acordeón", calendarios para seleccionar fechas, ventanas de diálogo, interfaces de pestañas, etc.

Escoger los componentes en la página de descarga

Para comenzar realmente a usar jQuery UI necesitamos descargar las librerías, pero cabe decir que este sistema es bastante amplio, por lo que igual nos interesa descargar sólo una parte, para que no resulte demasiado pesado para las personas que visiten nuestro sitio web. Lo bueno es que la página de descargas de jQuery UI tiene un sistema para poder seleccionar sólo aquellos componentes que deseamos utilizar en nuestro sitio, con lo que la descarga se puede optimizar para únicamente contener aquellas cosas que realmente van a ser necesarias en nuestro sitio.

Podemos acceder a la página de descargas en: http://jqueryui.com/download

Componentes:

Aquí podemos seleccionar/deseleccionar los checkbox de cada uno de los componentes que forman parte de jQuery UI. Algunos tienen dependencias con otros, por lo que observaremos que, al seleccionar algunos componentes, automáticamente se seleccionan sus dependencias.

Aparte de los componentes a descargar, tenemos un par de cosas adicionales que marcar antes de la descarga.

Temas (Themes):

Por una parte tenemos que seleccionar el tema o aspecto que van a tener las interfaces de usuario de jQuery UI. Tenemos decenas de temas ya creados por el propio equipo de las librerías, con aspectos que varían bastante, sobretodo cromáticamente. Además, existe un generador de temas, que podemos utilizar para personalizar aun más el aspecto de las interfaces de usuario. El objetivo es que los menús y demás de este sistema tengan un aspecto que se integre bien con el diseño de nuestra página web.

Versión:

También tendremos que escoger la versión de jQueryUI que queremos utilizar, sabiendo que cada versión está preparada para funcionar con una versión del framework. En el momento de escribir este artículo existen dos versiones de jQuery UI que podemos seleccionar. La versión más moderna es la 1.8.1, que funciona sobre jQuery 1.4+ y la versión 1.7.3, más antigua, que funciona sobre jQuery 1.3.2.

Por último podemos apretar el botón de download para descargar un zip con todo lo que necesitaremos para usar jQueryUI.

Contenido de la descarga de jQueryUI

Una vez descargado nuestro paquete de jQuery UI obtendremos un archivo comprimido con diversos directorios y archivos, que tiene las siguientes carpetas principales:

Carpeta "css":

En esta carpeta se encuentra el CSS y las imágenes para generar el tema o los temas escogidos. Realmente no tenemos por qué tocar esta carpeta en principio para nada, pero contiene cosas que serán fundamentales para que todo se muestre como deseamos.

Carpeta "development-bundle":

Esta carpeta contiene una serie de materiales útiles para los desarrolladores que van a utilizar estas librerías. Veremos aquí páginas de documentación, ejemplos de uso y otras cosas interesantes. Nada de lo que hay aquí es necesario en principio para hacer funcionar los componentes jQuery UI, pero son materiales que podrán venirnos bien para aprender.

Carpeta "js":

Aquí veremos los scripts Javascript de jQuery y jQuery UI necesarios para que todos los componentes funcionen. Esta carpeta contiene el archivo Javascript con el código de los componentes que habíamos seleccionado al hacer la descarga, además del archivo Javascript con el código de la versión del framework que funciona bien con las librerías.

Con el zip de descarga podremos ya comenzar a implementar alguno de los componentes de jQueryUI.

Ahora pasaremos a la práctica, mostrando cómo hacer una página web que utilice uno de los componentes disponibles en jQuery UI, que es el Datepicker o seleccionador de fecha por medio de un calendario.

Empezar a usar jQuery UI en una página web

Ahora que ya tenemos todo lo que nos hace falta para hacer nuestro primer ejemplo con jQuery UI, vamos a ponernos manos a la obra. En este paso vamos a crear un archivo de ejemplo en el que usaremos las funcionalidades del calendario para seleccionar una fecha.

Todos los materiales de la descarga los debemos copiar en el directorio de nuestro sitio web. Así que tendremos que tener en cuenta el lugar donde hemos dejado las carpetas que descargamos, principalmente las que son necesarias para que todo funcione "css" y "js".

El ejemplo que voy a realizar lo he colocado en una carpeta donde tengo los subdirectorios descargados de jQuery UI "css" y "js". Si en vuestro caso la estructura de carpetas es diferente, deberéis tener en cuenta la ruta desde este archivo de ejemplo hacia el archivo donde se encuentran las librerías jQuery UI y la hoja de estilos necesaria para definir el aspecto de los componentes, según el tema que hayamos seleccionado.

Como primer paso incluiremos el código siguiente:

<link type="text/css" href="css/le-frog/jquery-ui-1.8.1.custom.css" rel="Stylesheet" />      
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>

La primera línea corresponde a un link con la hoja de estilos que queremos utilizar para el look & feel de las interfaces de usuario. En mi caso estoy utilizando el tema que se llama "le-frog", que tiene un bonito color verde. La segunda línea corresponde con la inclusión del código Javascript del framework jQuery. Por último, la tercera es el código de los componentes descargados de jQuery UI.

Invocar los métodos para generar las interfaces de usuario

Ahora que ya tenemos incluidos los archivos para poder usar jQuery UI ya sólo nos queda crear el Javascript necesario para que los componentes se generen en la página, así como configurarlos para que se comporten como nosotros necesitemos. De momento vamos a ver un ejemplo sencillo, en el que realizaremos un campo de texto para escribir una fecha. Al pulsar el campo de texto se mostrará un calendario para poder seleccionar la fecha que queramos. Este comportamiento está implementado por el componente llamado "Datepicker".

Para conseguir esto necesitamos crear un campo de texto, con la correspondiente etiqueta INPUT, colocada en el lugar donde deseemos que ese campo aparezca.

<input type="text" name="fecha" id="campofecha">

Fijémonos en el atributo "id" de este campo, que necesitaremos utilizar ahora al hacer el código Javascript necesario para convertirlo en un campo "Datepicker", que es el siguiente:

$("#campofecha").datepicker();

Esto es una llamada al método datepicker() sobre el objeto jQuery seleccionado por el identificador campofecha. Con eso hacemos que ese campo de texto se convierta en un seleccionador de fechas. Eso es todo!! con esa línea de código conseguimos toda la funcionalidad buscada!!

Quizás pueda sorprender lo sencillo y cómodo de usar de jQuery UI, pero claro que además los componentes tendrán varias maneras de configurarse para adaptarse a las necesidades más particulares, pero eso es algo que veremos en próximos artículos.

De momento, antes de acabar, colocamos aquí el código de una página completa donde estamos usando el componente Datepicker de jQuery UI:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Seleccionar fecha con jQuery UI</title>
   <link type="text/css" href="css/le-frog/jquery-ui-1.8.1.custom.css" rel="Stylesheet" />   
   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script>
$(document).ready(function(){
   $("#campofecha").datepicker();
})
</script>
</head>
<body>

<form>
   Fecha: <input type="text" name="fecha" id="campofecha">
</form>
   
</body>
</html>

Para los interesados, dejamos el link para que puedan ver el ejemplo en funcionamiento.

En el próximo artículo vamos a explicar cómo configurar este componente para alterar un poco su modo de funcionamiento y hacer que los meses, así como el formato de fecha, estén en español.