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 程式設計時：

序號	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) 此方法設定物件的 primary 樣式名稱並更新所有依賴樣式名稱。

例如，讓我們定義兩個我們將應用於文字的新樣式：

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

Primary 和 Secondary 樣式

預設情況下，部件的 primary 樣式名稱將是其部件類的預設樣式名稱，例如 Button 部件的 gwt-Button。當我們使用 AddStyleName() 方法新增和刪除樣式名稱時，這些樣式稱為 secondary 樣式。

部件的最終外觀由新增到它的所有 secondary 樣式以及其 primary 樣式的總和決定。您可以使用 setStylePrimaryName(String) 方法設定部件的 primary 樣式。為了說明這一點，假設我們有一個 Label 部件。在我們的 CSS 檔案中，我們定義了以下規則：

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

假設我們希望特定的 label 部件始終顯示藍色文字，並且在某些情況下，使用更大、更粗的字型以增強強調。

我們可以這樣做：

// 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	在 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() {
     
   // 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!”文字，該文字在點選兩個按鈕時會不斷更改其字型。

列印頁面