GWT - 標籤部件

簡介

標籤只能包含任意文字，不能解釋為 HTML。此部件使用 <div> 元素，使其以塊佈局顯示。

類宣告

以下是 com.google.gwt.user.client.ui.Label 類的宣告：

public class Label 
   extends Widget 
      implements HasHorizontalAlignment, HasText, HasWordWrap, 
         HasDirection, HasClickHandlers, SourcesClickEvents, 
            SourcesMouseEvents, HasAllMouseHandlers

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有標籤。您可以根據您的需求覆蓋它。

.gwt-Label { }

類建構函式

序號	建構函式 & 描述
1	Label() 建立一個空標籤。
2	protected Label(Element element) 子類可以使用此建構函式顯式地使用現有元素。
3	Label(java.lang.String text) 使用指定的文字建立一個標籤。
4	Label(java.lang.String text, boolean wordWrap) 使用指定的文字建立一個標籤。

類方法

序號	方法 & 描述
1	void addClickListener(ClickListener listener) 新增一個監聽器介面來接收點選事件。
2	void addMouseListener(MouseListener listener) 新增一個監聽器介面來接收滑鼠事件。
3	void addMouseWheelListener(MouseWheelListener listener) 獲取此部件的父面板。
4	HasDirection.Direction getDirection() 獲取部件的方向性。
5	HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment() 獲取水平對齊方式。
6	java.lang.String getText() 獲取此物件的文字。
7	boolean getWordWrap() 獲取是否啟用了自動換行。
8	void onBrowserEvent(Event event) 刪除先前新增的監聽器介面。
9	void removeClickListener(ClickListener listener) 此方法在部件將從瀏覽器的文件中分離之前立即呼叫。
10	void removeMouseListener(MouseListener listener) 刪除先前新增的監聽器介面。
11	void removeMouseWheelListener(MouseWheelListener listener) 刪除先前新增的監聽器介面。
12	void setDirection(HasDirection.Direction direction) 設定部件的方向性。
13	void setHorizontalAlignment(HasHorizontalAlignment. HorizontalAlignmentConstant align) 設定水平對齊方式。
14	void setText(java.lang.String text) 設定此物件的文字。
15	void setWordWrap(boolean wrap) 設定是否啟用自動換行。
16	static Label wrap(Element element) 建立一個 Label 部件，它包裝一個現有的 <div> 或 <span> 元素。

繼承的方法

此類繼承自以下類：

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget

標籤部件示例

此示例將引導您完成簡單的步驟，以顯示如何在 GWT 中使用標籤部件。按照以下步驟更新我們在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-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

.gwt-Green-Border{ 
   border:1px solid green;
}

.gwt-Blue-Border{ 
   border:1px solid blue;
}

以下是修改後的 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>
      <h1>Label Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

讓我們使用以下 Java 檔案 src/com.tutorialspoint/HelloWorld.java 的內容，它將演示標籤部件的使用。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      // create two Labels
      Label label1 = new Label("This is first GWT Label");
      Label label2 = new Label("This is second GWT Label");

      // use UIObject methods to set label properties.
      label1.setTitle("Title for first Lable");
      label1.addStyleName("gwt-Green-Border");
      label2.setTitle("Title for second Lable");
      label2.addStyleName("gwt-Blue-Border");

      // add labels to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(label1);
      panel.add(label2);

      RootPanel.get("gwtContainer").add(panel);
   }
}

完成所有更改後，讓我們像在GWT - 建立應用章節中一樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，則將產生以下結果：

gwt_basic_widgets.htm

列印頁面