GWT - 錨小部件

引言

Anchor 小部件表示一個簡單的 <a> 元素。

類宣告

以下是用於 com.google.gwt.user.client.ui.Anchor 類的宣告 -

public class Anchor
   extends FocusWidget
      implements HasHorizontalAlignment, HasName,
	     HasHTML, HasWordWrap, HasDirection

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有 Image 小部件。您可以根據要求對其進行覆蓋。

.gwt-Anchor { }

類建構函式

序號。	建構函式和說明
1	Anchor() 建立一個空錨。
2	protected Anchor(Element element) 子類可以使用此建構函式顯式使用現有的元素。
3	Anchor(java.lang.String text) 為指令碼建立一個錨。
4	Anchor(java.lang.String text, boolean asHtml) 為指令碼建立一個錨。
5	Anchor(java.lang.String text, boolean asHTML, java.lang.String href) 使用指定的文字和 href（目標 URL）建立一個錨。
6	Anchor(java.lang.String text, boolean asHtml, java.lang.String href, java.lang.String target) 建立一個源錨（連結到 URI）。
7	Anchor(java.lang.String text, java.lang.String href) 使用指定的文字和 href（目標 URL）建立一個錨。
8	Anchor(java.lang.String text, java.lang.String href, java.lang.String target) 使用框架目標建立一個源錨。

類方法

序號。	函式名稱和說明
1	HasDirection.Direction getDirection() 獲取小部件的方向性。
2	HasHorizontalAlignment.HorizontalAlignmentConstant getHorizontalAlignment() 獲取水平對齊方式。
3	java.lang.String getHref() 獲取錨的 href（它連結到的 URL）。
4	java.lang.String getHTML() 獲取此物件的 HTML 內容。
5	java.lang.String getName() 獲取小部件的名稱。
6	int getTabIndex() 獲取小部件在標籤索引中的位置。
7	java.lang.String getTarget() 獲取錨的目標框架（選擇連結後導航將在其中發生）。
8	java.lang.String getText() 獲取此物件的文字。
9	boolean getWordWrap() 獲取是否啟用換行。
10	void setAccessKey(char key) 設定小部件的“訪問鍵”。
11	void setFocus(boolean focused) 顯式聚焦/失去焦點這個小部件。
12	void setHorizontalAlignment(HasHorizontalAlignment. HorizontalAlignmentConstant align) 設定水平對齊方式。
13	void setHref(java.lang.String href) 設定錨的 href（它連結到的 URL）。
14	void setHTML(java.lang.String html) 透過 HTML 設定此物件的內容。
15	void setName(java.lang.String name) 設定小部件的名稱。
16	void setTabIndex(int index) 設定小部件在標籤索引中的位置。
17	void setText(java.lang.String text) 設定此物件的文字。
18	void setWordWrap(boolean wrap) 設定是否啟用換行。
19	static Anchor wrap(Element element) 建立一個 Anchor 小部件，用於包裝現有的 <a> 元素。

繼承的方法

此類從以下類繼承方法 -

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

Anchor 視窗小部件示例

本示例將引導您完成簡單的步驟，以展示如何在 GWT 中使用 Anchor 視窗小部件。按照以下步驟更新我們在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 nam e=' 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;
}

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

讓我們擁有 Java 檔案 src/com.tutorialspoint/HelloWorld.java 的以下內容，它將演示如何使用 Anchor 視窗小部件。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Anchor;
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 a Anchor widget, 
      // pass text as TutorialsPoint  
      // set asHtml as false, 
      // href as www.tutorialspoint.com, 
      // target as _blank
      Anchor anchor = new Anchor("TutorialsPoint",
                                 false,
                                 "https://tutorialspoint.tw",
                                 "_blank");
      // Add anchor to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(anchor);

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

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

gwt_basic_widgets.htm

列印頁面