icono_twiter
Jose Manuel Sánchez Suárez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/J2EE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2010-01-18

Tutorial visitado 32.958 veces Descargar en PDF
Introducción a jQuery UI.

Introducción a jQuery UI.


0. índice de contenidos.


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:

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.

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.

Fecha desde:

Fecha hasta:  

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

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.


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.


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

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2011-11-01-16:32:56

Autor: jarcho

Es bueno..

pero se pueden hacer muchas cosas mas...
me gustaria saber como funciona los eventos en los tabs a la hora de cambiar de una a otra...
como cerrar una tab desde un boton $("#complementarios").click(function(){...})
ayudame con estos dos items..

Muchas gracias..

Att:
Jair
jairmg910@gmail.com