Para quienes están explorando las posibilidades de jQueryUI, que empezamos a explicar en el artículo sobre los primeros pasos en jQueryUI, les debe quedar claro que son unas librerías Javascript pensadas para la creación de componentes para interfaces de usuario en aplicaciones web enriquecidas del lado del cliente. En resumen, son una serie de componentes o widgets para hacer nuestros sitios más dinámicos y agradables de usar.

Sin embargo, hay una parte de este proyecto que nos llama la atención por ofrecer algo distinto. No son scripts para crear dinamismos o utilidades para la comunicación página-usuario, sino un paquete de estilos que nos pueden servir para decorar de una manera atractiva páginas web. Se trata de un framework CSS con estilos para definir el aspecto de interfaces de usuario en páginas web, que nos puede ayudar a aplicar un diseño más agradable a una página donde estemos usando jQuery UI.

Si bien es cierto que podemos utilizar los estilos CSS que jQueryUI nos ofrece para el diseño de cualquier elemento de un sitio web, están más pensandos para usarlos en la creación de widgets o componentes para páginas web basados en la arquitectura Javascript de jQueryUI.

Las clases defindas por jQueryUI y que forman el framework CSS del que estamos hablando están disponibles en cualquier descarga de jQuery UI y definidos por el tema concreto que hayamos seleccionado al hacer el download. Contienen estilos para definir muchas cosas diferentes, como esquinas redondeadas, elementos predeterminados, activos, desactivados, resaltados, con error, titulares, contenidos, distintos niveles de jerarquía, sombras, etc. Además, disponen de una pequeña biblioteca de 167 iconos, que quizás no parezcan muchos pero que tienen todos los motivos típicos que se podrían usar en interfaces de usuario.

Como los estilos CSS de jQuery UI cambian según el tema que hemos elegido en la descarga, este framework CSS es altamente configurable en aspecto, proporcionando temas gráficos de bastante calidad y muy diversos, que se adaptarán sin duda a cualquier tipo de proyecto. jQuery UI tiene una galería de hasta 24 temas distintos y además dispone de una utilidad genial, que ellos llaman ThemeRoller, para personalizar cualquier estilo y crear temas nuevos fácilmente.

Antes de pasar a explicar cómo usar estos temas gráficos queremos resaltar la ventaja principal de usar estos temas gráficos en Interfaces de usuario basadas en jQueryUI. Resulta que estas librerías Javascript están pensadas para que sean fácilmente extensibles por otros programadores, de modo que cualquier pueda crear nuevos widgets basados en las funcionalidades de jQueryUI. Pues bien, al utilizar los estilos CSS que jQueryUI propone, nos estaremos asegurando que los componentes que creemos puedan intercambiar los temas gráficos diversos que las librerías han creado. De este modo, podríamos crear un componente en un sitio con fondo oscuro, que luego utilizaríamos también en sitios con fondos claros, simplemente cambiando el theme por otro de los que proponen en jQueryUI. Asimismo, otros desarrolladores podrán utilizar tus componentes y aplicarles los estilos que estimen oportunos en sus páginas. De este modo, nuestros componentes serán mucho más reutilizables, no solo por sus funcionalidades Javascript, sino también porque se puedan adaptar sin ningún esfuerzo a cualquier interfaz gráfica que queramos.

Clases del framework CSS de jQuery UI

Para explicar las clases del framework CSS de jQueryUI queremos antes que nada dejaros un link a la descripción que nos ofrecen en la propia documentación de jQueryUI. Allí podremos encontrar el listado completo de clases y las situaciones en las que se deben utilizar cada una de ellas.

Están divididas en diversos paquetes:

Layout Helpers:

Con diversas clases que nos sirven para ayudarnos a posicionar y destacar elementos dentro de la plantilla de un sitio web. Podemos ocultar elementos de diversas formas, solucionar el problema de maquetacion con float, o problemas de superposición de elementos cuando se utilizan iframes.

Widget Containers:

Con algunas clases que nos sirven para crear contenedores versátiles donde situar los componentes de interfaces de usuario. Existe un contenedor principal, en el que anidaremos luego contenedores con aspecto de titulares o de cuerpo.

Interaction States:

Estados de interacción con el usuario, que simbolizan el estado de los elementos, como predeterminado, con el ratón encima, con el foco de la aplicación o activos.

Interaction Cues:

Otra serie de estados, pero que esta vez nos ofrecen señales indicadoras para definir visualmente de qué manera un visitante puede interactuar con los distintos elementos que componen un widget. Contiene clases CSS que podemos usar para simbolizar estados como resaltado, error, desactivado o de jerarquía.

Icons:

Interesante base de datos de iconos minimalistas, de 16x16, que podemos utilizar para cualquier cosa que se nos ocurra. Los iconos son bastante generalistas, como abrir, cerrar, recargar, redimensionar, play, stop, subir, bajar, carpeta abierta o cerrada, símbolos mas, menos, etc.

Misc Visuals:

Algunos efectos visuales adicionales, como bordes de esquinas redondeadas o sombras.

Utilizar las clases CSS en nuestros proyectos

Para completar esta introducción al framework CSS de jQuery UI, ya solo nos queda dar un ejemplo sobre cómo se pueden aplicar estos estilos en las páginas web. Para quien sepa un poquito de CSS la verdad es que no debería significar un gran problema usar este framework, puesto que simplemente se necesita reconocer la clase que se desea utilizar y aplicarla dentro del atributo class del tag del elemento al que queremos aplicar el estilo.

Por ejemplo, queremos aplicar bordes redondeados a un elemento. Pues simplemente utilizamos la clase ui-corner-all sobre dicho elemento. Que queremos crear un aspecto de elemento desactivado, pues aplicamos la clase ui-state-disabled sobre la etiqueta de tal elemento. Es así de simple.

Para mostrar un ejemplo de uso de este framework CSS hemos creado un ejemplo de uso de las clases más importantes que nos ofrece.

En este ejemplo aplicamos diversos estilos CSS sacados del framework por medio de sus clases. Veamos ahora algunos de los estilos aplicados.

<h1 class="ui-state-default">Probando el framework CSS de jQueryUI</h1>

Esto hace que el titular H1 tenga el estilo predeterminado para los elementos. Lo único es que debemos aplicarle un padding para que quede bonito, que podría colocarse en nuestra hoja de estilos general.

h1{
   padding: 10px;
}

Ese padding somos nosotros los que tenemos que definirlo, acorde con el aspecto de nuestro sitio, así como cualquier otro estilo personalizado que queramos aplicar a los elementos H1 para el sitio web que se está creando.

Podemos aplicar si lo deseamos varias clases CSS a un mismo elemento, lo que nos puede servir para aplicar dos o más estilos distintos.

<h2 class="ui-state-focus ui-state-disabled">Esto es un titulo H2 que tiene el foco y está desactivado</h2>

Este elemento H2 tendría el aspecto que tienen los elementos con el foco de la aplicación y además el estilo de estar desactivado.

<h2 class="ui-state-highlight ui-corner-all">Esto es un titulo H2 resaltado y con esquinas redondeadas</h2>

Este es otro ejemplo de estilo aplicado a través de dos clases, en el que decimos que un elemento tiene que aparecer resaltado y además con las esquinas redondeadas.

Los componentes que creemos pueden requerir el uso de más de una etiqueta, porque dispongan de varios contenedores a los que se aplica estilos de manera separada. En la creación de widgets tendremos una etiqueta general para el contenedor global del widget y luego dentro un contendor para el títular del widget y otro para el cuerpo.

<div class="ui-widget">
   <h3 class="ui-corner-top ui-widget-header">Cabecera de un Widget</h3>
   <div class="ui-corner-bottom ui-widget-content">Contenido del widget.</div>
</div>

Con ui-widget definimos el estilo del contenedor principal del componente y luego con ui-widget-header se define el estilo para su encabezado y con ui-widget-content el estilo para su cuerpo. Además, en este ejemplo se están aplicando bordes redondeados a algunas de las esquinas del componente, con ui-corner-top (esquinas redondeadas en la parte de arriba) y ui-corner-bottom (esquinas redondeadas abajo).

Otro caso interesante son los iconos, que tienen que crearse usando dos clases. La primera ui-icon que se utiliza para los estilos comunes a todos los iconos y la segunda que nos sirve para definir el tipo de icono concreto que se va a utilizar, como ui-icon-scissors, ui-icon-star, etc.

<span class="ui-icon ui-icon-star"></span>
<span class="ui-icon ui-icon-scissors"></span>
<span class="ui-icon ui-icon-folder-open"></span>

Eso son tres iconos distintos de entre los más de 160 disponibles. Consultar el ThemeRoller de jQueryUI para ver todos los iconos que nos permiten.

Si lo deseas, podrías meter el icono dentro de una caja con bordes redondeados, para dar un aspecto más de botón.

<div class="ui-state-default ui-corner-all cajaicono"><span class="ui-icon ui-icon-star"></span></div>

En este caso, aparte de las clases del framework he aplicado una clase creada por mi llamada "cajaicono" que me sirve para definir cosas como el tamaño de mi caja, márgenes, padding y cosas de ese estilo.

.cajaicono{
   width: 20px;
   padding: 4px 0 4px 4px;
   float: left;
   margin-right: 5px;
}

Ahora, si te fijas en el código del ejemplo, podrás ver que después de los botones colocados en cajas he colocado una capa vacía con la clase ui-helper-clearfix.

<div class="ui-helper-clearfix"></div>

Esto simplemente lo hago porque los botones en cajas están flotando a la derecha y los siguientes contenidos quiero que no sean afectados por esos elementos flotantes. Esta clase la verdad es que es un comodín muy interesante para solucionar ese problema y otros peores en los que el fondo de un contenedor no acompaña los elementos flotantes que pueda tener contenidos.

La belleza del intecambio de estilos CSS para sustituir la temática del diseño

Como comentaba al principio, los estilos del framework CSS de jQueryUI dependen del tema que se haya escogido. Por ello, utilizar todas estas clases tiene la ventaja de poder sustituir el "Theme" y con ello cambiar radicalmente el aspecto de nuestras interfaces de usuario.

Para ilustrar esta ventaja, en el ejemplo de uso de las clases CSS de jQuery UI, he creado un par de enlaces (abajo del todo) que sirven para intercambiar la hoja de estilo que se está utilizando. Con ello podremos ver de qué manera cambia el sitio web con solo pulsar el enlace.

Espero que con este pequeño detalle podamos entender lo fácil que es diseñar interfaces de usuario en jQueryUI y la ventaja de usar las clases del framework CSS, de modo que los widgets que creemos se adapten a cualquier temática visual que se pueda escoger en un sitio web.

Conclusión

Hemos visto que jQueryUI contiene un framework CSS bastante interesante. No es un framework CSS normal, porque no te sirve para maquetar con CSS una página, pero sí contiene muchas clases muy útiles, que pueden guiar al usuario de una manera más visual y estéticamente agradable entre las funcionalidades que hayamos implementado en una página.

Además, el lector habrá podido entender que los objetivos de las clases CSS que propone jQueryUI pasan también por ofrecer una estructura de diseño que se puede adaptar estéticamente a cualquier proyecto. A través de la descarga de temas gráficos del ThemeRoller, cualquier desarrollador puede seleccionar diversas declaraciones de estilos, de modo que los componentes se adapten fácilmente al aspecto de la página web que esté creando.