GWT - 使用 CSS 的样式

GWT 小部件依赖级联样式表 (CSS) 来实现视觉样式。默认情况下，每个组件的类名称是gwt-<classname>。

例如， Button 小部件的默认样式为gwt-Button，类似地， TextBox 小部件的默认样式为gwt-TextBox。

为了给所有按钮和文本框提供更大的字体，您可以将以下规则放入应用程序的 CSS 文件中

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

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

默认情况下，浏览器和 GWT 都不会为小部件创建默认的id属性。您必须为可以在 CSS 中使用的元素显式创建一个唯一的 id。为了给 id my-button-id 的特定按钮提供更大的字体，您可以将以下规则放入应用程序的 CSS 文件中 -

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

要设置 GWT 小部件的 id，请检索其 DOM 元素，然后设置 id 属性，如下所示 -

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

CSS 样式 API

有许多 API 可用于为任何 GWT 小部件挂起 CSS 设置。以下是一些重要的 API，它们将帮助您使用 GWT 进行日常 Web 编程 -

先生。	接口及说明
1	公共无效setStyleName（java.lang.String样式）此方法将清除任何现有样式并将小部件样式设置为使用style提供的新 CSS 类。
2	公共无效addStyleName（java.lang.String样式）此方法将向小部件添加辅助或从属样式名称。辅助样式名称是附加样式名称，因此，如果应用了任何先前的样式名称，它们将被保留。
3	公共无效removeStyleName（java.lang.String样式）此方法将从小部件中删除给定的样式，并保留与小部件关联的任何其他样式。
4	公共 java.lang.String getStyleName() 此方法获取对象的所有样式名称，作为空格分隔的列表。
5	公共无效setStylePrimaryName（java.lang.String样式）此方法设置对象的主要样式名称并更新所有从属样式名称。

例如，让我们定义两种新样式，将其应用于文本 -

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

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

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

现在您可以使用setStyleName(Style)将默认设置更改为新设置。应用以下规则后，文本的字体将变大

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

我们可以在同一个小部件上应用辅助 CSS 规则来更改其颜色，如下所示 -

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

使用上述方法，您可以添加任意数量的样式以应用于小部件。如果您从按钮小部件中删除第一个样式，则第二个样式仍将保留在文本中。

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

主要和次要风格

默认情况下，小部件的主要样式名称将是其小部件类的默认样式名称，例如按钮小部件的gwt-Button。当我们使用 AddStyleName() 方法添加和删除样式名称时，这些样式称为辅助样式。

小部件的最终外观由添加到其中的所有辅助样式及其主要样式的总和决定。您可以使用setStylePrimaryName(String)方法设置小部件的主要样式。为了说明这一点，假设我们有一个 Label 小部件。在我们的 CSS 文件中，我们定义了以下规则 -

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

假设我们希望特定的标签小部件始终显示蓝色文本，并且在某些情况下，使用更大的粗体字体来增加强调。

我们可以做这样的事情 -

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

关联 CSS 文件

有多种方法可以将 CSS 文件与模块关联起来。现代 GWT 应用程序通常使用 CssResource 和 UiBinder 的组合。我们在示例中仅使用第一种方法。

在宿主 HTML 页面中使用 <link> 标记。
使用模块 XML 文件中的 <stylesheet> 元素。
使用ClientBundle中包含的CssResource。
在UiBinder模板中使用内联 <ui:style> 元素。

GWT CSS 示例

此示例将引导您完成在 GWT 小部件上应用不同 CSS 规则的简单步骤。让我们将可用的 Eclipse IDE 和 GWT 插件安装到位，并按照以下步骤创建 GWT 应用程序 -

步	描述
1	按照GWT - 创建应用程序章节中的说明，在com.tutorialspoint包下创建一个名为HelloWorld的项目。
2	如下所述修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java 。保持其余文件不变。
3	编译并运行应用程序以验证实现逻辑的结果。

以下是修改后的模块描述符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>

以下是修改后的样式表文件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%;
}

以下是修改后的 HTML 主机文件war/HelloWorld.html的内容，以容纳两个按钮。

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

让我们拥有 Java 文件src/com.tutorialspoint/HelloWorld.java的以下内容，它将负责在 HTML 中添加两个按钮并应用自定义 CSS 样式。

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);
   }
}

准备好完成所有更改后，让我们在开发模式下编译并运行应用程序，就像我们在GWT - 创建应用程序章节中所做的那样。如果您的应用程序一切正常，这将产生以下结果 -

现在尝试单击显示的两个按钮并观察“Hello, World!” 单击两个按钮后不断更改字体的文本。