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

打印页面