GWT - HTMLPanel 元件

簡介

HTMLPanel 元件表示一個包含 HTML 的面板，可以將子元件附加到該 HTML 內的已識別元素。

類宣告

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

public class HTMLPanel
   extends ComplexPanel

類建構函式

序號	建構函式及描述
1	HTMLPanel(SafeHtml safeHtml) 根據給定的 SafeHtml 物件初始化面板的 HTML。
2	HTMLPanel(java.lang.String html) 建立一個 HTML 面板，其內容包含在 DIV 元素中。
3	HTMLPanel(java.lang.String tag, java.lang.String html) 建立一個 HTML 面板，其根元素具有給定的標籤，並具有指定的 HTML 內容。

序號

建構函式及描述

HTMLPanel(SafeHtml safeHtml)

根據給定的 SafeHtml 物件初始化面板的 HTML。

HTMLPanel(java.lang.String html)

建立一個 HTML 面板，其內容包含在 DIV 元素中。

HTMLPanel(java.lang.String tag, java.lang.String html)

建立一個 HTML 面板，其根元素具有給定的標籤，並具有指定的 HTML 內容。

類方法

序號	函式名稱及描述
1	void add(Widget widget, Element elem) 將子元件新增到面板中，包含在 HTML 元素內。
2	void add(Widget widget, java.lang.String id) 將子元件新增到面板中，包含在由給定 ID 指定的 HTML 元素內。
3	void addAndReplaceElement(Widget widget, Element toReplace) 將子元件新增到面板中，替換 HTML 元素。
4	void addAndReplaceElement(Widget widget, java.lang.String id) 將子元件新增到面板中，替換由給定 ID 指定的 HTML 元素。
5	static java.lang.String createUniqueId() 一個用於為動態生成的 HTML 中的元素建立唯一 ID 的輔助方法。
6	Element getElementById(java.lang.String id) 按其 ID 在此面板中查詢元素。

繼承的方法

此類繼承自以下類的方法：

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Panel
com.google.gwt.user.client.ui.ComplexPanel
java.lang.Object

HTMLPanel 元件示例

此示例將引導您完成簡單的步驟，以演示如何在 GWT 中使用 HTMLPanel 元件。按照以下步驟更新我們在GWT - 建立應用章節中建立的 GWT 應用程式：

步驟	描述
1	建立一個名為HelloWorld的專案，位於com.tutorialspoint包下，如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;
}

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

讓我們看看Java檔案src/com.tutorialspoint/HelloWorld.java的內容，它將演示HTMLPanel元件的使用。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      String htmlString = "This is a <b>HTMLPanel</b> containing"
         +" html contents. "
         +" <i>By putting some fairly large contents in the middle"
         +" and setting its size explicitly, it becomes a scrollable area"
         +" within the page, but without requiring the use of an IFRAME.</i>"
         +" <u>Here's quite a bit more meaningless text that will serve"
         +" to make this thing scroll off the bottom of its visible area."
         +" Otherwise, you might have to make it really, really"
         +" small in order to see the nifty scroll bars!</u>";

      HTMLPanel htmlPanel = new HTMLPanel(htmlString);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(htmlPanel);

      // Add the widgets to the root panel.
      RootPanel.get().add(panel);
   }
}

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

gwt_layout_panels.htm

列印頁面