GWT教程
 GWT DockPanel组件 GWT TabPanel组件 

GWT HTMLPanel组件

GWT HTMLPanel组件 介绍

FlexTable组件表示包含HTML面板，并且可以将子部件到HTML中标识的元素。

GWT HTMLPanel组件 声明

以下是com.google.gwt.user.client.ui.HTMLPanel类的声明

public class HTMLPanel
   extends ComplexPanel

GWT HTMLPanel组件 构造方法

构造方法 描述
HTMLPanel(SafeHtml safeHtml) 从给定的 SafeHtml 对象初始化面板的 HTML。
HTMLPanel(java.lang.String html) 在 DIV 元素中创建具有指定 HTML 内容的 HTML 面板。
HTMLPanel(java.lang.String tag, java.lang.String html) 创建一个 HTML 面板，其根元素具有给定的标签，并具有指定的 HTML 内容。

GWT HTMLPanel组件 方法

方法 描述
void add(Widget widget, Element elem) 将子小部件添加到面板，包含在 HTML 元素中。
void add(Widget widget, java.lang.String id) 将子小部件添加到面板，包含在由给定 id 指定的 HTML 元素中。
void addAndReplaceElement(Widget widget, Element toReplace) 向面板添加一个子小部件，替换 HTML 元素。
void addAndReplaceElement(Widget widget, java.lang.String id) 向面板添加一个子小部件，替换由给定 id 指定的 HTML 元素。
static java.lang.String createUniqueId() 为动态生成的 HTML 中的元素创建唯一 ID 的辅助方法。
Element getElementById(java.lang.String id) 通过其 id 在此面板中查找元素。

GWT HTMLPanel组件 示例

1）修改HelloWorld.gwt.xml

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN"
        "http://gwtproject.org/doctype/2.8.0/gwt-module.dtd">
<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.yiidian.helloWorld.client.HelloWorld'/>


    <!-- Specify the app servlets.                   -->
    <servlet path='/HelloWorldService' class='com.yiidian.helloWorld.server.HelloWorldServiceImpl'/>

    <source path = 'client'/>
    <source path = 'shared'/>
</module>

2）修改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;
}

3）修改HelloWorld.html

<html>
<head>
    <title>yiidian.com-GWT Hello World</title>
    <link type="text/css" rel="stylesheet" href="HelloWorld.css">
    <script type="text/javascript" language="javascript" src="HelloWorld/HelloWorld.nocache.js"></script>
</head>
<body>
<h1>HTMLPanel Widget Demonstration</h1>
<div id = "gwtContainer"></div>
</body>
</html>

4）HelloWorld.java

package com.yiidian.helloWorld.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.*;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
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 DockPanel组件 GWT TabPanel组件 

热门文章

优秀文章

全部教程