GWT教程

GWT CSS 样式

GWT 小部件依赖于级联样式表 (CSS) 来实现视觉样式。默认情况下,每个组件的类名是 gwt-
例如,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 进行日常网络编程-
public void setStyleName(java.lang.String style)
此方法将清除所有现有样式并将小部件样式设置为使用提供的新 CSS 类 风格
public void addStyleName(java.lang.String style)
此方法将向小部件添加辅助或依赖样式名称。辅助样式名称是附加样式名称,因此如果应用了任何以前的样式名称,它们将被保留。
public void removeStyleName(java.lang.String style)
此方法将从小部件中删除给定的样式,并保留与小部件关联的任何其他样式。
public java.lang.String getStyleName()
此方法获取对象的所有样式名称,以空格分隔的列表形式。
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) 方法设置小部件的主要样式。为了说明,假设我们有一个 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 页面中使用 标记。 使用模块 XML 文件中的 元素。 使用 ClientBundle 中包含的 CssResource UiBinder 模板中使用内联 元素。

GWT CSS 示例

此示例将引导您通过简单的步骤在 GWT 小部件上应用不同的 CSS 规则。让我们使用 Eclipse IDE 和 GWT 插件,然后按照以下步骤创建 GWT 应用程序-
步骤
com.tutorialspoint 包下创建一个名为HelloWorld 的项目,如GWT-创建应用程序 章节所述。
HelloWorld.gwt.xmlHelloWorld.cssHelloWorld.htmlHelloWorld.java修改为下面解释。保持其余文件不变。
编译并运行应用程序以验证实现逻辑的结果。
以下是修改后的模块描述符 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-创建应用程序一章中所做的那样,在开发模式下编译和运行应用程序。如果您的应用程序一切正常,这将产生以下结果-
GWT CSS 应用结果
现在尝试单击显示的两个按钮并观察"Hello, World!"单击两个按钮时不断改变其字体的文本。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4