Los temas no son un concepto nuevo. Probablemente has desplegado unos cuantos utilizando estilos y clases de hojas de estilo en cascada (CSS) para dar formato a la apariencia de tus sitios web. El uso de un marco de trabajo estandariza el enfoque y reduce la cantidad de trabajo y el código que necesita ser escrito.

jQuery UI es ahora el estándar de la industria para la implementación de temas. Hay otras opciones, como Dojo (junto con Dijit) o Ext JS, pero jQuery UI combina los temas con el uso de widgets, que son los elementos con los que los usuarios interactúan los selectores de fechas o los botones. Al diseccionar el funcionamiento interno de los archivos que componen un tema de jQuery UI, lo que se encuentra no es más que CSS y JavaScript. Pero es el proceso de pensamiento y la estandarización que han entrado en este uso de CSS y JavaScript lo que hace de jQuery UI una plataforma tan excelente para construir el aspecto de un sitio web.

Temas de jQuery UI

La plataforma jQuery UI consta de dos sub-marcos: un marco de trabajo de widgets, que contiene la Fábrica de Widgets y un conjunto de widgets de uso común, y el marco de trabajo CSS. La Fábrica de widgets proporciona la base para todos los widgets de jQuery UI, incluyendo los widgets comunes incluidos en el conjunto de widgets. Cuando crees widgets, utiliza uno de los widgets comunes del conjunto como punto de partida o crea uno desde cero. Una vez que sepas dónde están los widgets comunes, abre cualquiera de ellos en tu editor favorito y mira el código. A partir de ahí, modifica este código y genera un widget personalizado (utilizando uno de los otros widgets como punto de partida) o crea uno con una estructura similar.

La estructura de carpetas de los temas de jQuery UI

Antes de continuar viendo los distintos archivos y su contenido, descargue uno de los temas de la plataforma jQuery UI (vea Temas relacionados para obtener un enlace). El archivo ZIP descargado contiene tres carpetas: css, js y development-bundle. La carpeta development-bundle contiene una carpeta llamada themes, que es donde se guardan los temas de jQuery UI en desarrollo. La carpeta themes contiene a su vez una carpeta con el nombre del tema seleccionado/descargado (como UI lightness) así como una carpeta llamada base. Esta carpeta contiene un punto de partida para sus propios temas. Siempre se descarga, independientemente del tema seleccionado.

La carpeta css contiene una carpeta con el nombre del tema descargado. Esta carpeta del tema contiene un archivo CSS que incorpora el marcado CSS para todos los componentes o widgets. La carpeta development-bundle, sin embargo, también contiene una carpeta themes/ (donde está el nombre real del tema elegido) que contiene los archivos CSS individuales para cada componente o widget. Esta estructura hace más fácil encontrar y modificar los cambios en tus propios temas. La figura 1 muestra la estructura de la carpeta de temas.

Figura 1. Estructura de la carpeta themes

Ver imagen a tamaño completo

No todos los archivos de la carpeta están listados en la Figura 1, pero los importantes están aquí. El archivo jquery.ui.all.css importa los archivos jquery.ui.base.css y jquery.ui.theme.css, lo que facilita la importación de los archivos utilizando sólo el archivo jquery.ui.all.css. El archivo jquery.ui.base.css importa el archivo jquery.ui.core.css y todos los demás archivos de componentes y widgets de la misma carpeta (no se muestra en la Figura 1.). El archivo jquery.ui.core.css contiene clases comunes compartidas por todos los archivos de widgets. Proporciona las clases CSS base para todos los widgets de jQuery UI (dentro del tema), así como la visibilidad y el posicionamiento comunes para los widgets. El último archivo importante es el archivo jquery.ui.theme.css, que proporciona la apariencia y el comportamiento comunes compartidos por todos los widgets del tema, así como el propio tema.

El archivo jquery.ui.theme.css tiene tres tipos diferentes de estilos:

• Contenedor – Este estilo define el tema contenedor, como ui-widget, ui-widget-content, o ui-widget-header.
• Estados – Este tipo de estilo es utilizado por los widgets de jQuery UI para definir el aspecto del widget cuando el usuario interactúa con él. Las clases incluyen ui-state-default, ui-state-hover, y ui-state-active.
• Cues – Cuando algo sucede en la aplicación (no por la acción del usuario), estas clases cambian el aspecto del widget. Las clases incluyen ui-state-highlight, ui-state-error, y ui-state-disabled.

Widgets comunes

En esta sección se ve un código de ejemplo que utiliza algunos widgets comunes para construir una aplicación de ejemplo. Este ejemplo contiene un widget deslizador, un botón que abre un cuadro de diálogo y un cuadro de diálogo que muestra el valor actual del deslizador cada vez que se abre. La figura 2 muestra una instantánea de la aplicación.

Figura 2. Una aplicación de ejemplo que utiliza widgets comunes

Ver imagen a tamaño completo

El listado 1 proporciona el archivo índice HTML.

Listado 1. Aplicación de ejemplo que utiliza widgets comunes

El listado 2 muestra el archivo JavaScript asociado (index.js).

Listado 2. El archivo JavaScript asociado para la aplicación de ejemplo

La configuración inicial tiene lugar en la cabecera con el siguiente código:

Después de enlazar en el CSS, se incluyen los archivos JavaScript.

Los tres widgets de esta aplicación se definen utilizando declaraciones <div> en su mayor parte (excepto el botón, que ya tiene una etiqueta en HTML). Estos widgets se definen en el siguiente código:

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Por último, retrase la construcción real de los widgets en el código JavaScript hasta que la página haya sido cargada completamente por el navegador, como se muestra en el Listado 3.

Listado 3. Construcción de los widgets

Cada uno de los widgets ya mencionados se construye con este código. Tanto el cuadro de diálogo como el botón tienen asignadas funciones a eventos específicos. Por ejemplo, al evento de clic del botón se le indica que debe abrir el cuadro de diálogo al ser pulsado. En cuanto al cuadro de diálogo, se le indica que cambie su texto para indicar el valor actual del deslizador, lo que hace cada vez que se abre.

Hay dos formas de cambiar la apariencia de un widget. Puede pasar valores al constructor, junto con cualquier parámetro del constructor requerido para el widget. Por ejemplo:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

O puede llamar a los métodos en el widget después de que se ha creado, de la siguiente manera.

$("#dlg_popup").dialog({ draggable: false });

La mayoría de los widgets comunes tienen muchas opciones asociadas que se pueden establecer. Además, si decides ignorar estas opciones, los widgets las establecen con valores por defecto, permitiéndote establecer y cambiar lo que sea necesario.

Eventos de los widgets

Debido a que los widgets son fundamentalmente objetos de JavaScript, se pueden configurar con eventos que se disparan durante el tiempo de vida de la aplicación web. A medida que estos eventos se disparan, son capturados por el código JavaScript proporcionado por su sitio web o manejados dentro de los widgets (el valor predeterminado).

La implementación del comportamiento por defecto de los widgets está bien documentada por el equipo de jQuery UI para cada widget común. Sin embargo, puedes inyectar tu propio código para manejar uno o más de los eventos de un widget elegido. Aquí hay un ejemplo de código para configurar la recepción de un evento:

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Este ejemplo en particular se engancha al evento drag, que se activa cuando se arrastra el cuadro de diálogo. La elipsis (…) que se muestra en el ejemplo es donde se puede colocar el código individual para manejar e implementar el código del evento.

Métodos del widget

Los métodos (como en cualquier lenguaje familiar) están asociados al widget y permiten la ejecución de funcionalidad preescrita en un widget concreto para que realice una acción específica. Este es un ejemplo de llamada a un método de un widget:

$("#dlg_popup").dialog("moveToTop");

Conceptualmente, las opciones y los métodos son diferentes. Sin embargo, ten en cuenta que el valor de una opción puede cambiarse o recuperarse utilizando una implementación similar a la de un método, como se muestra en el siguiente ejemplo.

$("#dlg_popup").dialog("option", "autoOpen", false);

Cambio de temas

Se puede incluir código en los archivos HTML y JavaScript que dan la posibilidad de cambiar de tema sobre la marcha utilizando un menú desplegable. El listado 4 muestra los cambios en el código fuente HTML para realizar dicho cambio.

Listado 4. Cambio de temas sobre la marcha

El listado 5 muestra el código fuente de JavaScript.

Listado 5. Código fuente de JavaScript para el cambio de temas sobre la marcha

$(document).ready(function(){ $('#switcher').themeswitcher();...});

La figura 3 muestra la aplicación de ejemplo después de estos cambios.

Figura 3. La aplicación de ejemplo después de las modificaciones de código

Ver imagen a tamaño completo

Ejecute de nuevo la página HTML en su navegador y vea los resultados. Ahora puede hacer clic en la lista desplegable para cambiar el tema. El tema seleccionado se descarga en segundo plano según sea necesario.

Aunque el uso de la herramienta de cambio de tema está bien para los sitios que no son de producción (para probar y ver los resultados), no es una buena idea para los sitios de producción. La herramienta depende de un servidor de terceros para alojar los temas, y no estará seguro de los resultados que ve el usuario.

Otra forma de probar los temas de jQuery UI es utilizar la herramienta ThemeRoller, que sólo está disponible para Mozilla Firefox (ver Temas relacionados para un enlace). Tras instalar la herramienta (como un bookmarklet en Firefox), abre la galería y selecciona los temas para verlos. Elige un tema y haz clic en el enlace de descarga. Una vez descargado, extrae la carpeta del tema, colócala en tu carpeta de jQuery UI y apunta tus archivos HTML a ella.

Sin embargo, esta herramienta es mucho más útil que para simplemente cambiar de tema. También te permite construir temas personalizados más fácilmente que si tuvieras que desplegarlos a mano.

Creación de temas únicos

Usando el sitio web ThemeRoller (que se ejecuta en la mayoría de los navegadores populares; ver Temas relacionados para un enlace), se pueden hacer cambios a un tema jQuery existente (como punto de partida) para crear un tema único. Esto elimina la necesidad de crear el tema desde cero. También significa que no se requiere experiencia en CSS, y la herramienta permite ver los cambios en los temas y widgets existentes sobre la marcha. La figura 4 muestra el sitio de ThemeRoller (no debe confundirse con el bookmarklet ThemeRoller, que se ejecuta en Firefox).

Figura 4. El sitio ThemeRoller

Ver imagen a tamaño completo

Pulsando sobre la Galería se puede seleccionar cualquiera de los temas existentes. Al hacerlo se cambian los estilos CSS y las imágenes que utilizan los widgets de muestra para reflejar el cambio. Al hacer clic en el botón Editar asociado a un tema, se accede a la pestaña «Hazlo tú mismo», donde puedes realizar cambios en los estilos CSS asociados al tema. Si no eliges un tema para editar y empiezas en la pestaña «Roll Your Own» sin ningún tema seleccionado, simplemente estás construyendo un tema desde cero.

Por último, al hacer clic en Descargar tema se descarga el tema seleccionado como un tema personalizado que contiene todas sus modificaciones de tema. Tenga en cuenta que jQuery UI y sus temas soportan muchas características de CSS3, lo que significa que todos los principales navegadores son compatibles (excepto las versiones anteriores de Windows Internet Explorer).

La pestaña «Roll Your Own» de ThemeRoller está muy bien organizada para que puedas encontrar y modificar rápidamente lo que buscas. La pestaña contiene las siguientes secciones importantes (entre otras):

• Configuración de la fuente – Permite realizar cambios generales en la fuente utilizada en todo un tema.
• Radio de las esquinas – Controla el redondeo (o la falta) de las esquinas de varios widgets.
• Encabezado/Barra de herramientas – Proporciona el aspecto de los encabezados utilizados en los distintos widgets.
• Contenido – Proporciona ajustes para controlar el cuerpo principal de los widgets.
• Pinchable – Controla varios estados que utilizan los widgets.

Al hacer clic a través de las opciones, te darás cuenta de algunas cosas interesantes sobre la construcción de estos temas. Por ejemplo, los temas de jQuery UI aprovechan las texturas. Para verlos en uso, haga clic en Header/Toolbar en ThemeRoller. Luego haga clic en el botón de color en el centro. Se revela una paleta desplegable que contiene patrones entre los que elegir. La textura seleccionada se combina con su elección de color de fondo para producir el patrón que utilizan los encabezados y las barras de herramientas. Este es sólo un uso de las texturas. Hay otros en los temas de jQuery UI. Por ejemplo, modificar la textura en el «Clickable: estado por defecto» para ver cómo el cambio afecta a los botones en el tema seleccionado.

Una característica interesante de los temas de jQuery UI es el uso de resaltados y errores (también conocidos como señales visuales). ThemeRoller proporciona un control completo sobre cómo se muestran estas señales visuales a los usuarios. La textura, el color de fondo, las esquinas del contorno, el color del texto e incluso el color del icono pueden cambiarse (si se muestra un icono en la señal). Los nombres de estos estilos se muestran en ThemeRoller, así que simplemente utilice estos nombres en sus propios sitios web para que estos estilos se apliquen según sea necesario al texto que se muestra a los usuarios.

Los cambios en las distintas configuraciones producen cambios en la URL de su navegador. El listado 6 proporciona una URL como ejemplo.

Listado 6. Ejemplo de URL de ThemeRoller

Guarde y restaure más tarde esta URL para volver y hacer más cambios en la configuración. Por ejemplo, copie la URL después de hacer las modificaciones y péguela en algún lugar para guardarla. Ahora, cierre su navegador (o la pestaña del navegador que contiene el sitio ThemeRoller) y vuelva a abrirlo utilizando la URL copiada. Como puede ver, todas sus modificaciones están de vuelta, listas para otras modificaciones.

Conclusión

Se puede decir mucho más sobre los aspectos internos de jQuery UI, pero deberías tener los fundamentos necesarios para empezar a experimentar con los temas de jQuery UI. Has visto la estructura de las carpetas y archivos que te permitirán modificar un tema. Puedes ver o utilizar estos archivos como punto de partida para crear tus propios temas cuando estés preparado.

Este artículo también cubrió ThemeRoller y las páginas web asociadas que apoyan la modificación de los temas existentes, así como la creación de nuevos temas desde cero. Por último, exploró el proceso de guardar y restaurar las modificaciones de los temas en el sitio web de ThemeRoller.

Recursos descargables

• PDF de este contenido

• Plataforma jQuery UI: Descarga jQuery UI para probar y seguir con este artículo y los ejemplos que proporciona.
• ThemeRoller: Echa un vistazo al sitio web ThemeRoller, que te permite probar los temas existentes de la plataforma jQuery UI, personalizar los temas existentes o crear temas personalizados.
• developerWorks Zona de desarrollo web: Encuentre artículos que cubren varias soluciones basadas en la web. Consulte la biblioteca técnica de desarrollo web para obtener una amplia gama de artículos y consejos técnicos, tutoriales, normas y Redbooks de IBM.
• Versiones de evaluación de productos de IBM: Descargue y obtenga las herramientas de desarrollo de aplicaciones y los productos de middleware de DB2, Lotus, Rational, Tivoli y WebSphere.
• developerWorks en Twitter: Únase hoy para seguir los tweets de developerWorks.