Crear temas personalizados para tus aplicaciones jQuery Mobile

Quizás algunos de vosotros ya esteis pensando que todas las aplicaciones jQuery Mobile disponen de muy pocos temas de personalización visual para los widgets. Esto lo podría pensar alguien con experiencia en otras herramientas del equipo de jQuery, que recordará la gran variedad de temas que nos brindaba jQuery UI.

Sin embargo, a lo largo del Manual de jQuery Mobile, hemos repetido en numerosas ocasiones que este framework para desarrollo de aplicaciones para móviles sólo contaba con cinco temas predefinidos.

La ventaja con jQuery Mobile es que los cinco temas vienen inmersos dentro de un mismo archivo CSS, una misma hoja de estilos que incluimos una única vez al insertar el framework en el HEAD de la página. Sin embargo, se recordará que en jQuery UI cada tema era un archivo CSS diferente.

No obstante, podemos afirmar que cinco look&feels en el archivo CSS básico de jQuery Mobile no cubren toda la necesidad que desarrolladores y diseñadores mas exigentes puedan tener. Tal vez, a vosotros no os guste tanto el color azul como a mi, prefirais el verde o el rojo, pero ninguno de estos dos colores están presentes en los temas que vienen prediseñados en el framework.

Para quienes estén pensando que para crear temas personalizados para nuestras aplicaciones jQuery Mobile, necesitamos grandes conocimientos en CCS3, quiero decirles que se equivocan. No se requiere hacer nada de código y todo es mas fácil de lo que parece.

Además, como veremos a continuación, a golpe de ratón obtenemos unos excelentes resultados, a los que nos tiene muy acostumbrados el framework. Es decir, siempre se trata de crear grandes cosas con mucha facilidad, o más bien, con extraordinaria simplicidad.
 

Creando el nuevo tema en jQuery Mobile

Como decía anteriormente, no necesitamos grandes conocimientos en CSS3 para crear nuestros propios temas para aplicaciones jQuery Mobile. Para eso, en la misma página oficial del framework, disponemos de una herramienta online, llamada ThemeRoller. Con esta herramienta tenemos a la mano una forma fácil de crear nuestros propios temas.

Se encuentra disponible en la siguiente dirección web: jquerymobile.com/themeroller

Inicialmente ThemeRoller nos da la bienvenida a través de un mensaje de dialogo. Ponen a nuestra disposición una barra lateral, donde podemos ver cada una de las propiedades globales del nuevo tema, además de ver las modificaciones que podemos hacer a temas por separados, dependiendo de su valor en letras.

Para arrancar, tenemos tres temas que van de la A a la C, pero podemos ir agregando más según nuestras necesidades. Así que si quieres crear una aplicación muy variada en colores, puedes hacer temas hasta llegar a letra Z.

En las opciones que tenemos para las configuraciones globales podemos hacer cambios como:

• Cambiar el tipo de la fuente
• Cambiar el radio de los bordes
• Modificar el color de los iconos y muchas otras cosas...

Ya solo es cuestión de qué necedades tengas o la forma en que quieras que se vean tus aplicaciones. Después, puedes ir modificando uno a uno los temas, dentro de los cuales ya encontramos configuraciones más particulares.

En el centro de la página contamos con un visualizador de cada uno de los temas, donde podemos ver en tiempo real los cambios que estamos creando en nuestro tema actual. Ésto nos ayuda a orientarnos sobre los resultados finales que obtendremos, mostrándonos diferentes widgets que maneja el framework, como listas, botones, barras entre otros.
 

Creando nuestro tema personalizado

Como comentaba anteriormente, en el framework no vienen incluidos widgets de color rojo ni verdes, así que vamos a darles esos colores con el fin de obtener una variedad de temas más amplios. Para tal motivo vamos a trabajar partiendo como base de los temas que vienen incluidos dentro de jQuery Mobile.

Si ya ha visitado la aplicación ThemeRoller, te darás cuenta de que inicialmente no nos ofrece los temas incorporados en el framework, así que lo primero que hay que hacer es incorporar dichos temas. Logramos eso dando clic en la opción "import", donde obtendremos un diálogo en el cual podemos escoger la opción "import default theme". De forma automática aparece en el textarea todo el código CSS que incorpora jQuery Mobile, por último, al dar clic en "import" del dialogo, visualizaremos cada uno de los temas presentes en el framework.

En mi caso particular, lo que hice fue modificar los temas D y C que vienen en el framework, cada tema de forma individual tiene las siguientes secciones para ser modificadas:

• Header/ Foteer Bar
• Content/ Body
• Button: Normal
• Button: Hover
• Button: Pressed

Como veis, las secciones son muy ilustrativas y no se requieren grandes configuraciones, pues todo está servido para hacerlo de manera gráfica, manejando los colores a través de paletas donde podemos seleccionarlos y muchas otras cosas que convierten a ThemeRoller en una herramienta muy útil.

Para solucionar el problema antes planteado de la ausencia de colores como el rojo o el verde, debemos simplemente crear un tema personalizadom donde incluimos esos colores, además de agregar un sexto tema.
 

Agregando el nuevo tema a mis aplicaciones

Una vez hemos hecho las modificaciones y temas que necesitamos para nuestras nuevas aplicaciones, procedemos a descargar el tema que estamos creando con ThemeRoller, haciendo clic Download Theme. En el diálogo te dice la forma en que debes incluir tu estilo creado, además de darle un nombre.

Puedes copiar el código que aparece en el diálogo de descarga, para incluir tu tema. Claro, que también debes cambiar el nombre que aparece allí (my-custom-theme.css), por el nombre que tú le has asignado.

Al descomprimir el archivo .zip del tema que creamos con ThemeRoller, podemos ver que viene incluido un ejemplo, donde ya se está trabajando con nuestro tema. Podemos observar que parte de la cabecera de ese documento HTML está compuesto de la siguiente forma.

<link rel="stylesheet" href="themes/tema-personalizado.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

En este caso, estamos usando para el tema modificado el nombre "tema-personalizado", en su versión comprimida, pues en la carpeta de themes dentro del .zip encontramos dos archivos CSS para el mismo tema.

Otro caso particular es que no se usa el archivo "jquery.mobile-1.0.min.css", sino uno con un nombre "jquery.mobile.structure-1.0.min.css". Este archivo es muy importante, pues al no incluirlo no funcionará el ejemplo. Ese archivo también se descarga junto con el .zip que obtenemos al descargar jQuery Mobile, así que puedes también ponerlo a trabajar de forma local, sin necesidad de usar el CDN.

Para terminar nos gustaría deciros que un buen diseño con ThemeRoller depende del empeño, por eso te invitamos a trabajar con él, para obtener aplicaciones jQuery Mobile más personalizadas.