GWT - Estilo com CSS

Widgets GWT contam com folhas de estilo em cascata (CSS) para estilo visual. Por padrão, o nome da classe para cada componente égwt-<classname>.

Por exemplo, o widget de botão tem um estilo padrão de gwt-Button e de maneira semelhante a widgest de TextBox tem um estilo padrão de gwt-TextBox .

Para dar a todos os botões e caixas de texto uma fonte maior, você pode colocar a seguinte regra no arquivo CSS do seu aplicativo

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

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

Por padrão, nem o navegador nem o GWT cria padrões idatributos para widgets. Você deve criar explicitamente um id único para os elementos que você pode usar em CSS. Para fornecer um botão específico com idmy-button-id uma fonte maior, você pode colocar a seguinte regra no arquivo CSS do seu aplicativo -

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

Para definir o id para um widget GWT, recupere seu Elemento DOM e, em seguida, defina o atributo id da seguinte forma -

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

APIs de estilo CSS

Existem muitas APIs disponíveis para definir a configuração CSS de qualquer widget GWT. A seguir estão algumas APIs importantes que irão ajudá-lo em sua programação web do dia a dia usando GWT -

Sr. Não.	API e descrição
1	public void setStyleName(java.lang.String style) Este método irá limpar todos os estilos existentes e definir o estilo do widget para a nova classe CSS fornecida usando style .
2	public void addStyleName(java.lang.String style) Este método adicionará um nome de estilo secundário ou dependente ao widget. Um nome de estilo secundário é um nome de estilo adicional, portanto, se houver qualquer nome de estilo anterior aplicado, eles serão mantidos.
3	public void removeStyleName(java.lang.String style) Este método removerá determinado estilo do widget e deixará quaisquer outros associados ao widget.
4	public java.lang.String getStyleName() Este método obtém todos os nomes de estilo do objeto, como uma lista separada por espaços.
5	public void setStylePrimaryName(java.lang.String style) Este método define o nome do estilo principal do objeto e atualiza todos os nomes de estilo dependentes.

Por exemplo, vamos definir dois novos estilos que aplicaremos a um texto -

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

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

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

Agora você pode usar setStyleName (Style) para alterar a configuração padrão para a nova configuração. Depois de aplicar a regra abaixo, a fonte de um texto ficará grande

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

Podemos aplicar uma regra CSS secundária no mesmo widget para alterar sua cor da seguinte maneira -

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

Usando o método acima, você pode adicionar quantos estilos desejar para aplicar em um widget. Se você remover o primeiro estilo do widget de botão, o segundo estilo ainda permanecerá com o texto.

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

Estilos Primário e Secundário

Por padrão, o nome do estilo principal de um widget será o nome do estilo padrão para sua classe de widget, por exemplo gwt-Button para widgets de Botão. Quando adicionamos e removemos nomes de estilo usando o método AddStyleName (), esses estilos são chamados de estilos secundários.

A aparência final de um widget é determinada pela soma de todos os estilos secundários adicionados a ele, mais seu estilo principal. Você define o estilo principal de um widget com o método setStylePrimaryName (String) . Para ilustrar, digamos que temos um widget Label. Em nosso arquivo CSS, temos as seguintes regras definidas -

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

Vamos supor que desejamos que um determinado widget de rótulo sempre exiba texto em azul e, em alguns casos, use uma fonte maior e em negrito para dar mais ênfase.

Poderíamos fazer algo assim -

// 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");

Associando arquivos CSS

Existem várias abordagens para associar arquivos CSS ao seu módulo. Os aplicativos GWT modernos geralmente usam uma combinação de CssResource e UiBinder. Estamos usando apenas a primeira abordagem em nossos exemplos.

Usando uma tag <link> na página HTML do host.
Usando o elemento <stylesheet> no arquivo XML do módulo.
Usando um CssResource contido dentro de um ClientBundle.
Usando um elemento <ui: style> embutido em um UiBinder modelo.

Exemplo GWT CSS

Este exemplo irá guiá-lo através de etapas simples para aplicar diferentes regras CSS em seu widgest GWT. Vamos ter o Eclipse IDE em funcionamento junto com o plug-in GWT e seguir as etapas a seguir para criar um aplicativo GWT -

Degrau	Descrição
1	Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do 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 seguir está o conteúdo do arquivo de folha 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 seguir está o conteúdo do arquivo host HTML modificado war/HelloWorld.html para acomodar dois botões.

<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>

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java que cuidará da adição de dois botões em HTML e aplicará o 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);
   }
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar o aplicativo em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -

Agora tente clicar nos dois botões exibidos e observe "Hello, World!" texto que muda constantemente de fonte ao clicar nos dois botões.