GWT - Estilo con CSS

Los widgets de GWT se basan en hojas de estilo en cascada (CSS) para el estilo visual. De forma predeterminada, el nombre de clase para cada componente esgwt-<classname>.

Por ejemplo, el widget Button tiene un estilo predeterminado de gwt-Button y de manera similar , el widget TextBox tiene un estilo predeterminado de gwt-TextBox .

Para dar a todos los botones y cuadros de texto una fuente más grande, puede poner la siguiente regla en el archivo CSS de su aplicación

.gwt-Button  { font-size: 150%; }

.gwt-TextBox { font-size: 150%; }

De forma predeterminada, ni el navegador ni GWT crean idatributos para widgets. Debe crear explícitamente una identificación única para los elementos que puede usar en CSS. Para dar un botón en particular con idmy-button-id una fuente más grande, puede poner la siguiente regla en el archivo CSS de su aplicación:

#my-button-id { font-size: 150%; }

Para establecer la identificación de un widget GWT, recupere su elemento DOM y luego configure el atributo de identificación de la siguiente manera:

Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

API de estilo CSS

Hay muchas API disponibles para colgar la configuración de CSS de cualquier widget de GWT. A continuación se presentan algunas API importantes que lo ayudarán en su programación web diaria usando GWT:

No Señor.	API y descripción
1	public void setStyleName(java.lang.String style) Este método borrará cualquier estilo existente y establecerá el estilo del widget en la nueva clase CSS proporcionada usando style .
2	public void addStyleName(java.lang.String style) Este método agregará un nombre de estilo secundario o dependiente al widget. Un nombre de estilo secundario es un nombre de estilo adicional, es decir, si se aplicaron nombres de estilo anteriores, se mantienen.
3	public void removeStyleName(java.lang.String style) Este método eliminará el estilo dado del widget y dejará todos los demás asociados con el widget.
4	public java.lang.String getStyleName() Este método obtiene todos los nombres de estilo del objeto, como una lista separada por espacios.
5	public void setStylePrimaryName(java.lang.String style) Este método establece el nombre de estilo principal del objeto y actualiza todos los nombres de estilo dependientes.

Por ejemplo, definamos dos nuevos estilos que aplicaremos a un texto:

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

.gwt-Red-Text { 
   color:red;
}

Ahora puede usar setStyleName (Style) para cambiar la configuración predeterminada a una nueva configuración. Después de aplicar la siguiente regla, la fuente de un texto se volverá grande

txtWidget.setStyleName("gwt-Big-Text");

Podemos aplicar una regla CSS secundaria en el mismo widget para cambiar su color de la siguiente manera:

txtWidget.addStyleName("gwt-Red-Text");

Con el método anterior, puede agregar tantos estilos como desee para aplicar en un widget. Si elimina el primer estilo del widget de botón, el segundo estilo permanecerá con el texto.

txtWidget.removeStyleName("gwt-Big-Text");

Estilos primarios y secundarios

De forma predeterminada, el nombre de estilo principal de un widget será el nombre de estilo predeterminado para su clase de widget, por ejemplo, gwt-Button para los widgets de botón. Cuando agregamos y eliminamos nombres de estilo usando el método AddStyleName (), esos estilos se denominan estilos secundarios.

La apariencia final de un widget está determinada por la suma de todos los estilos secundarios que se le agregan, más su estilo principal. Establece el estilo principal de un widget con el método setStylePrimaryName (String) . Para ilustrarlo, digamos que tenemos un widget de etiqueta. En nuestro archivo CSS, tenemos las siguientes reglas definidas:

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

Supongamos que queremos que un widget de etiqueta en particular muestre siempre texto azul y, en algunos casos, use una fuente más grande y en negrita para dar mayor énfasis.

Podríamos hacer algo como esto:

// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...

// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...

// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");

Asociación de archivos CSS

Existen varios enfoques para asociar archivos CSS con su módulo. Las aplicaciones modernas de GWT suelen utilizar una combinación de CssResource y UiBinder. Estamos usando solo el primer enfoque en nuestros ejemplos.

Usando una etiqueta <link> en la página HTML del host.
Usando el elemento <stylesheet> en el archivo XML del módulo.
Usando un CssResource contenido dentro de un ClientBundle.
Usando un elemento <ui: style> en línea en un UiBinder modelo.

Ejemplo de CSS de GWT

Este ejemplo lo llevará a través de sencillos pasos para aplicar diferentes reglas CSS en su widgest GWT. Tengamos Eclipse IDE funcionando junto con el complemento GWT en su lugar y sigamos los siguientes pasos para crear una aplicación GWT:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

A continuación se muestra el contenido del archivo de hoja de estilo modificado war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-Button { 
   font-size: 150%; 
   font-weight: bold;
   width:100px;
   height:100px;
}

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

A continuación se muestra el contenido del archivo de host HTML modificado war/HelloWorld.html para acomodar dos botones.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <div id = "mytext"><h1>Hello, World!</h1></div>
      <div id = "gwtGreenButton"></div>
      <div id = "gwtRedButton"></div>
   </body>
</html>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que se encargará de agregar dos botones en HTML y aplicará estilo CSS personalizado.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
     
   // add button to change font to big when clicked.
   Button Btn1 = new Button("Big Text");
   Btn1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Big-Text");
      }
   });

   // add button to change font to small when clicked.
   Button Btn2 = new Button("Small Text");
   Btn2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Small-Text");
      }
   });

   RootPanel.get("gwtGreenButton").add(Btn1);
   RootPanel.get("gwtRedButton").add(Btn2);
   }
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

Ahora intente hacer clic en los dos botones que se muestran y observe "¡Hola, mundo!" texto que sigue cambiando su fuente al hacer clic en los dos botones.

↰ Previous page Next page ↱