GWT教程
 GWT TabPanel组件 GWT SimplePanel组件 

GWT Composite组件

GWT Composite组件 介绍

Composite组件是一种类型的窗口小部件可以包装另一小窗口，隐藏包裹小部件的方法。当添加到面板时，组合的行为就像添加了它包装的小部件一样。组合对于从单个面板中包含的多个其他小部件的聚合中创建单个小部件很有用。

GWT Composite组件 声明

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

public abstract class Composite
   extends Widget

GWT Composite组件 构造方法

构造方法 描述
Composite() 构建一个新的 Composite。

GWT Composite组件 方法

方法 描述
protected Widget getWidget() 提供对定义此组合的最顶层小部件的子类访问。
protected void initWidget(Widget widget) 设置要由复合包装的小部件。
boolean isAttached() 确定这个小部件当前是否附加到浏览器的文档（即，在这个小部件和底层浏览器文档之间有一个不间断的小部件链）。
protected void onAttach() 当小部件附加到浏览器的文档时，将调用此方法。
void onBrowserEvent(Event event) 每当接收到浏览器事件时触发。
protected void onDetach() 当小部件从浏览器的文档中分离时调用此方法。
protected void setWidget(Widget widget) 已弃用。改用 initWidget(Widget)

GWT Composite组件 示例

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>Composite 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 {
    /**
     * A composite of a TextBox and a CheckBox that optionally enables it.
     */
    private static class OptionalTextBox extends Composite implements
            ClickHandler {

        private TextBox textBox = new TextBox();
        private CheckBox checkBox = new CheckBox();

        /**
         * Constructs an OptionalTextBox with the given caption
         * on the check.
         * @param caption the caption to be displayed with the check box
         */
        public OptionalTextBox(String caption) {
            // Place the check above the text box using a vertical panel.
            VerticalPanel panel = new VerticalPanel();
            // panel.setBorderWidth(1);
            panel.setSpacing(10);
            panel.add(checkBox);
            panel.add(textBox);

            textBox.setWidth("200");
            // Set the check box's caption, and check it by default.
            checkBox.setText(caption);
            checkBox.setValue(true);
            checkBox.addClickHandler(this);

            DecoratorPanel decoratorPanel = new DecoratorPanel();

            decoratorPanel.add(panel);
            // All composites must call initWidget() in their constructors.
            initWidget(decoratorPanel);
        }

        public void onClick(ClickEvent event) {
            if (event.getSource() == checkBox) {
                // When the check box is clicked,
                //update the text box's enabled state.
                textBox.setEnabled(checkBox.getValue());
            }
        }
    }

    public void onModuleLoad() {
        // Create an optional text box and add it to the root panel.
        OptionalTextBox otb = new OptionalTextBox("Check this to enable me");
        RootPanel.get().add(otb);
    }
}

运行应用程序，显示结果如下：

 GWT TabPanel组件 GWT SimplePanel组件 

热门文章

优秀文章

全部教程