Aplicando Estilos - Parte I

Ubicación de los archivos de estilos (CSS)

En el artículo anterior, Composite Widgets, Composite Widgets, se describió paso a paso la construcción de un widget propio utilizando los widgets provistos por GWT. El resultado fue un widget básico en el que no se utilizaron estilos propios para darle otra apariencia al widget sino que se utilizó uno estándar proporcionado por GWT. Generalmente un proyecto GWT utiliza un archivo estándar de estilos definido en el descriptor del proyecto (proyecto.gwt.xml). Este archivo de estilos no es más que un archivo CSS (Cascading Style Sheets) de los cuatro temas estándar que GWT 2.4 provee: Clean, Standard, Chrome y Dark.

Ya es hora de darle un estilo o una apariencia propia a su proyecto para que adquiera una personalidad bien definida dentro del mundo de las aplicaciones web.

Para entender un poco mejor como GWT selecciona el estilo para su proyecto, entre a Eclipse, abra el proyecto Login que desarrollamos en Composite Widgets y abra el archivo Login.gwt.xml dentro del paquete com.example.login:

<?xml version="1.0" encoding="UTF-8"?> <module rename-to='login'>   <!-- Inherit the core Web Toolkit stuff.                        -->   <inherits name='com.google.gwt.user.User'/>   <!-- Inherit the default GWT style sheet.  You can change       -->   <!-- the theme of your GWT application by uncommenting          -->   <!-- any one of the following lines.                            -->   <inherits name='com.google.gwt.user.theme.clean.Clean'/>   <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->   <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>     -->   <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>                -->   <!-- Other module inherits                                               -->   <!-- Specify the app entry point class.                            -->   <entry-point class='com.example.login.client.Login'/>   <!-- Specify the paths for translatable code                    -->   <source path='client'/>   <source path='shared'/> </module>

Preste especial atención a la sección Inherit the default GWT style sheet:

<inherits name='com.google.gwt.user.theme.clean.Clean'/>   <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->   <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>     -->   <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>                -->

Este es un archivo XML y por lo tanto sigue las especificaciones para crear archivos de este tipo. Recuerde que dentro de un archivo XML los comentarios se definen entre los símbolos <!— y -->.

Como podrá observar, el único tema de estilos habilitado para este proyecto es el definido como com.google.gwt.user.theme.clean.Clean. Los demás temas están encerrados entre los símbolos de definición de comentarios, es decir, están deshabilitados.

Revise la definición de este archivo:

Desde Eclipse y dentro del proyecto CompositeLogin, abra la carpeta war, luego la carpeta login y por último la carpeta clean. Allí encontrará el archivo clean.css. Abra este archivo y observe las definiciones de estilos estándar que GWT ofrece.

No es necesario que sea un experto en CSS, sin embargo, algunas definiciones requerirán de algún análisis de su parte.

Es importante que no haga modificaciones sobre estos archivos estándar de GWT, aunque no hay ninguna restricción, la mejor alternativa, si es que ninguno de los otros temas es de su preferencia, es crear su propio archivo de estilos CSS e incluirlo en el proyecto. Recuerde que en el momento de crear el proyecto, GWT genera un archivo básico CSS, cuyo nombre es dado por el nombre del proyecto y la extensión css. Este archivo puede ser editado y cambiado de acuerdo con sus preferencias de estilos. Por ejemplo, en el proyecto CompositeLogin, GWT creó el archivo Login.css.

La siguiente figura muestra la ubicación de los archivos de estilos dentro de su proyecto:

Ahora se estará preguntando, ¿Qué pasa si deseo incluir un nuevo archivo de estilos? o ¿Cómo se remplaza un archivo CSS existente? Estas preguntas pueden surgir porque usted ya tiene definidos sus propios estilos utilizados en proyectos anteriores o que consiguió a través de terceros y por lo tanto no desea invertir tiempo en la composición de estilos nuevos.

Bien, el archivo Login.css es asociado a su proyecto en la página host HTML, en este caso, Login.html.

Abra la página host Login.html:

<!doctype html> <!-- The DOCTYPE declaration above will set the     --> <!-- browser's rendering engine into                --> <!-- "Standards Mode". Replacing this declaration   --> <!-- with a "Quirks Mode" doctype is not supported. --> <html>   <head>     <meta http-equiv="content-type" content="text/html; charset=UTF-8">     <!--                                                                                          -->     <!-- Consider inlining CSS to reduce the number of requested files-->     <!--                                                                                          -->     <link type="text/css" rel="stylesheet" href="Login.css">     <!--                                           -->     <!-- Any title is fine                    -->     <!--                                           -->     <title>Login Composite</title>         <!--                                                                -->     <!-- This script loads your compiled module.      -->     <!-- If you add any GWT meta tags, they must   -->     <!-- be added before this line.                           -->     <!--                                                                 -->     <script type="text/javascript" language="javascript" src="login/login.nocache.js"></script>   </head>   <!--                                                                -->   <!-- The body can have arbitrary html, or           -->   <!-- you can leave the body empty if you want   -->   <!-- to create a completely dynamic UI.            -->   <!--                                                                -->   <body>

Observe la línea resaltada. Incluya la definición de los otros archivos de estilos que tenga a disposición para que sean utilizados en el proyecto. Salve el archivo y no olvide copiar los archivos de sus propios estilos dentro de la estructura de carpetas o directorios del proyecto.

Tip: Si incluye un nuevo archivo de estilos en su proyecto y los aplica a los widgets de las interfaces en el código fuente Java, es conveniente refrescar la página web en ejecución así haya reiniciado la ejecución del proyecto. De esta manera se asegura que la página HTML y el descriptor GWT están utilizando el nuevo archivo de estilos.

Probando Otros Estilos Estándar de GWT

Si el tema estándar de estilos Clean no es de su preferencia, pase a probar los otros temas estándar de GWT. Por ejemplo, pruebe la aplicación utilizando el tema Standard. Abra el archivo descriptor Login.gwt.xml y cambie los símbolos de comentarios de la siguiente manera:

<!--   <inherits name='com.google.gwt.user.theme.clean.Clean'/> --> <inherits name='com.google.gwt.user.theme.standard.Standard'/>

De este modo, Clean se ha deshabilitado para dar paso al tema Standard. Salve al archivo. Pruebe de nuevo la aplicación y observe las diferencias.

Utilizando el tema Clean:

Utilizando el tema Standard:

Si ya hizo el cambio y aun sigue viendo la interface de usuario con el mismo tema Clean, entonces quiere decir que no leyó el tip de este artículo.

Si usted es curioso, probará los restantes temas estándar Chrome y Dark ofrecidos por GWT.

En el siguiente artículo veremos cómo crear estilos propios y como aplicarlos a los widgets de nuestros proyectos.