📌  相关文章
📜  GWT-CSS样式

📅  最后修改于: 2020-10-25 04:38:45             🧑  作者: Mango

GWT小部件依靠级联样式表（CSS）进行视觉样式设计。默认情况下，每个组件的类名称是gwt- 。

例如，Button小部件的默认样式为gwt-Button ，类似的方式TextBox widgest具有默认样式为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，这些API可帮助您使用GWT进行日常Web编程-

Sr.No. API & Description
1

public void setStyleName(java.lang.String style)

This method will clear any existing styles and set the widget style to the new CSS class provided using style.
2

public void addStyleName(java.lang.String style)

This method will add a secondary or dependent style name to the widget. A secondary style name is an additional style name that is,so if there were any previous style names applied they are kept.
3

public void removeStyleName(java.lang.String style)

This method will remove given style from the widget and leaves any others associated with the widget.
4

public java.lang.String getStyleName()

This method gets all of the object’s style names, as a space-separated list.
5

public void setStylePrimaryName(java.lang.String style)

This method sets the object’s primary style name and updates all dependent style names.

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

.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用于Button小部件。当我们使用AddStyleName（）方法添加和删除样式名称时，这些样式称为辅助样式。

小部件的最终外观由添加到它的所有辅助样式的总和及其主要样式决定。您可以使用setStylePrimaryName（String）方法设置窗口小部件的主要样式。为了说明这一点，假设我们有一个标签小部件。在我们的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示例

本示例将引导您完成简单的步骤，以将不同的CSS规则应用于GWT widgest。让我们使用Eclipse IDE和GWT插件，并按照以下步骤创建GWT应用程序-

Step Description
1 Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT – Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

以下是修改后的模块描述符src / com.tutorialspoint / HelloWorld.gwt.xml的内容。

以下是修改后的样式表文件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的内容，以容纳两个按钮。

Hello World
      
      
   

   
      
Hello, World!

让我们获得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！”。单击两个按钮后会不断更改其字体的文本。