Los widgets de GWT confian su estilo visual a hojas de estilo en cascada. Cada widget tiene un nombre de estilo asociado que lo enlaza a una regla CSS. Un nombre de estilo de widget es asignado usando el método setStyleName(). Por ejemplo, Button tiene como nombre de estilo por defecto gwt-Button. En ese orden de ideas, si tu desearas por ejemplo asignar un tamaño específico a la letra (fuente) de todos los botones de tu aplicación, podrías usar la siguiente regla en tu archivo CSS:
.gwt-Button { font-size: 150%; }
Estilos complejos
Algunos widgets tienen asociados tipos de estilos más complejos. MenuBar, por ejemplo, tiene los siguientes estilos:
.gwt-MenuBar { the menu bar itself }
.gwt-MenuBar .gwt-MenuItem { menu items }
.gwt-MenuBar .gwt-MenuItem-selected { selected menu items }
En este ejemplo, se tienen dos reglas que aplican a los items de los menús. El primero aplica a todos los items de los menús, mientras el segundo (con el sufijo -selected) aplica solo para el item de menú que esté seleccionado. Un nombre de estilo de ítem de menú seleccionado será asignado a “gwt-MenuItem gwt-MenuItem-selected”, especificando que ambas reglas de estilo serán aplicadas. La manera más común de hacer esto es usar setStyleName para asignar el estilo de nombre base, luego addStyleName() y removeStyleName() para añadir y remover el segundo nombre de estilo.
Archivos CSS
Generalmente, las hojas de estilo son situados en paquetes que son parte del módulo public path. Entonces simplemente incluye una referencia a la hoja de estilo en tu página HTML, así:
<link rel="stylesheet" href="mystyles.css" type="text/css">
2 comentarios:
Hola buenas haciendo un peqño menu me encontrado un problema con el css, si le añado el estilo .submenu me lo coge bien, pero si pongo .submenu:hover no me coge ese estilo. Sabes como puedo solucionarlo? por q se me acaban las ideas ya :(
soy gilipollas lo siento ya vi las propiedades de MenuItem.
Publicar un comentario en la entrada