極客書

GWT - Style with CSS

GWT小部件依賴於層疊樣式表（CSS）進行視覺樣式設置。默認情況下，每個組件的類名都是gwt-<class name>。

例如，Button小部件的默認樣式爲gwt Button，TextBox widgest的默認樣式爲gwt TextBox。

爲了給所有按鈕和文本框一個更大的字體，您可以在應用程式的CSS文件中放置以下規則

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

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

默認情況下，瀏覽器和GWT都不會爲小部件創建默認的id屬性。必須顯式地爲可以在CSS中使用的元素創建唯一id。爲了給一個idmy button idb>的按鈕一個更大的字體，您可以在應用程式的CSS文件中放置以下規則−

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

要設置GWT小部件的id，請檢索其DOM元素，然後按以下方式設置id屬性−

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

CSS Styling APIs

對於任何GWT小部件，都有許多api可用於hangle CSS設置。以下是一些重要的api，它們可以幫助您使用GWT−進行日常的web編程;

Sr.No. API & Description
1

public void setStyleName（java.lang.String樣式）

此方法將清除任何現有樣式，並將窗口小部件樣式設置爲使用樣式提供的新CSS類。
2

public void addStyleName（java.lang.String樣式）

此方法將向小部件添加輔助樣式名或從屬樣式名。輔助樣式名是一個附加樣式名，即，如果應用了任何以前的樣式名，則保留這些名稱。
3

public void removeStyleName（java.lang.String樣式）

此方法將從小部件中移除給定的樣式，並保留與小部件關聯的任何其他樣式。
4

公共java.lang.String getStyleName（）

此方法以空格分隔的列表形式獲取對象的所有樣式名。
5

public void 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");

Primary & Secondary Styles

默認情況下，小部件的primary style名稱將是其小部件類的默認樣式名稱，例如按鈕小部件的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");

Associating CSS Files

將CSS文件與模塊關聯有多種方法。現代GWT應用程式通常使用CssResource和UiBinder的組合。在我們的例子中，我們只使用第一種方法。

  • 在宿主HTML頁中使用「連結」標記。

  • 使用模塊XML文件中的<樣式表>元素。

  • 使用aClientBundle中包含的aCssResource。

  • 使用aui活頁夾模板中的內聯<ui:style>元素。

GWT CSS Example

這個例子將引導您通過簡單的步驟在GWT widgest上應用不同的CSS規則。讓我們使用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.

下面是修改後的模塊描述符的內容。

<?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宿主文件的內容，可以容納兩個按鈕。

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


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

現在試著點擊顯示的兩個按鈕並觀察「你好，世界！」在點擊兩個按鈕時不斷改變字體的文本。