SmartGwt Skinning / Theming

febrero 25, 2010


SmartClient y por ende SmartGwt tienen un mecanismo de personalizacion por defecto llamado “Skinning o Theming”. Puedes consultar la guía aquí.
A pesar de la documentación y el foro de smartGwt, no pude encontrar un documento que explicara fácilmente como podía personalizar mi aplicación.
En este artículo trataré de explicar una forma fácil de crear tu propio skin para modificar el “look & feel” por defecto.

Supongamos que tenemos una aplicación llamada “net.coffe.cup”. Pues lo primero que tenemos que hacer es crear un paquete y llamarlo net.coffe.cup.theme (puedes llamarlo como quieras). Dentro de este paquete crea un nuevo modulo y nombralo como quieras, ej. “BlackStone”.
Edita el archivo BlackStone.gwt.xml y copia el siguiente texto:
<script src=”sc/skins/BlackStone/load_skin.js”/>
Esto agregará esa línea en la página contenedora de tu modulo cuando compiles y causará que se cargue el tema BlackStone que vamos a crear a continuación.
Para crear tu propio tema, crea las carpetas “public/sc/skins/” dentro del paquete “theme” que creamos previamente. Descomprime un tema existente del archivo smartgwt-skins.jar (lo abres con cualquier programa que maneje archivos comprimidos) en la carpeta “public/sc/skins/” recién creada – Por ejemplo yo extraje el tema BlackOps. Renombra la carpeta con el nombre de tu nuevo tema – ej. BlackStone – y edita el archivo “load_skin.js” cambiando la línea que dice:
isc.Page.setSkinDir(“[ISOMORPHIC]/skins/BlackOps/”)
por
isc.Page.setSkinDir(“[ISOMORPHIC]/skins/BlackStone/”)
Asegurate que en el archivo de configuracion de tu modulo de la aplicacion – ej. “Net_coffe_cup.gwt.xml” – tengas las siguientes líneas
<inherits name=”com.smartgwt.SmartGwtNoTheme”/>
<inherits name=”net.coffe.cup.themes.BlackStone”/>

Listo! Finalmente solo queda MODIFICAR el archivo “skin_styles.css” para personalizar el tema a nuestro gusto. Para ello te recomiendo consultar la guía.

Anuncios

7 comentarios to “SmartGwt Skinning / Theming”

  1. g0th4ck Says:

    gracias hermano… que buena guia… estare por aqui de nuevo

  2. Amilcar Rojas Says:

    Hola Vladimir, tengo ésta situación:
    Necesito utilizar el tema SilverCherry de gwt-ext (http://extjs.org.cn/node/295) en smartgwt, cómo hago para integrarlo? Me puedes colaborar en ello?, gracias..!

    • cirovladimir Says:

      No creo que se pueda utilizar directamente. Estos frameworks no utilizan el mismo mecanismo de ‘skinning’. Lo que te recomendaría es utilizar el tema de SmartGwt -como se explica en el artículo- que más se parezca al que buscas y luego irlo modificando hasta lograr la apariencia que buscas 🙂

      • Amilcar Rojas Says:

        Gracias, me voy a poner en esas… Como dijo Chapulín colorado, “lo sospeché desde un principio”!!! 🙂

  3. Miguel Says:

    Hola, tengo un problema. Cuando compilo la aplicación, se generan tanto el tema Enterprise, como el que creé por mi cuenta. ¿Sabes a que se debe esto?
    Mi xml se encuentra así:

    • cirovladimir Says:

      Asegurate de haber modificador el archivo load_skin.js con la ruta correcta y haberlo agregado al archivo gwt.xml de tu tema. Finalmente verifica haber agregado en el archivo gwt.xml de tu aplicación el módulo SmartGwtNoTheme (de lo contrario cargará un skin por default) y el módulo de tu tema.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: