HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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 编程 −

Sr.No. API &描述
1

public void setStyleName(java.lang.String style)

此方法将清除所有现有样式，并使用 style 将小部件样式设置为提供的新 CSS 类。
2

public void addStyleName(java.lang.String style)

此方法将向小部件添加次要或依赖的样式名称。次要样式名称是附加样式名称，因此如果之前已应用任何样式名称，则将保留这些样式名称。
3

public void removeStyleName(java.lang.String style)

此方法将从小部件中删除给定样式，并保留与小部件关联的任何其他样式。
4

public java.lang.String getStyleName()

此方法获取对象的所有样式名称，以空格分隔的列表形式显示。
5

public void setStylePrimaryName(java.lang.String style)

此方法设置对象的主要样式名称并更新所有依赖样式名称。

例如，让我们定义两个将应用于文本的新样式 −

.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)方法设置小部件的主要样式。为了说明，假设我们有一个标签小部件。在我们的 CSS 文件中，我们定义了以下规则 −

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

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

我们可以这样做 −

// 设置主要样式
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...

// 稍后，真正吸引用户的注意力
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...

// 危机结束后
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 在 com.tutorialspoint 包下创建一个名为 HelloWorld 的项目，如 GWT - 创建应用程序 一章中所述。
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() {
     
   // 添加按钮，单击时字体变大。
   Button Btn1 = new Button("Big Text");
   Btn1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Big-Text");
      }
   });

   // 添加按钮，单击时字体变小。
   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 - 创建应用程序 一章中一样，在开发模式下编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果 −

GWT CSS 应用程序结果

现在尝试单击显示的两个按钮，并观察"Hello, World!"文本，单击这两个按钮时，文本的字体不断变化。

❮ 上一节 下一节 ❯