GWT 自定义组件

GWT 自定义组件 介绍

GWT 提供了三种创建自定义用户界面元素的方法。遵循三种一般策略 :

  • 通过扩展复合类创建小部件: 这是创建自定义小部件的最常见和最简单的方法。在这里,您可以使用现有的小部件来创建具有自定义属性的复合视图。

  • 在 JAVA 中使用 GWT DOM API 创建小部件: GWT 基本小部件以这种方式创建。它仍然是创建自定义小部件的一种非常复杂的方法,应谨慎使用。

  • 使用 JavaScript 并使用 JSNI 将其包装在小部件中: 这通常只能作为最后的手段。考虑到本机方法的跨浏览器影响,它变得非常复杂,也变得更加难以调试。

GWT 自定义组件 示例

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>Custom 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.*;
import com.google.gwt.user.client.Window;
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();
        private boolean enabled = true;

        public boolean isEnabled() {
            return enabled;
        }

        public void setEnabled(boolean enabled) {
            this.enabled = enabled;
        }

        /**
         * Style this widget using .optionalTextWidget CSS class.<br/>
         * Style textbox using .optionalTextBox CSS class.<br/>
         * Style checkbox using .optionalCheckBox CSS class.<br/>
         * 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.
            HorizontalPanel panel = new HorizontalPanel();
            // panel.setBorderWidth(1);
            panel.setSpacing(10);
            panel.add(checkBox);
            panel.add(textBox);

            // all composites must call initWidget() in their constructors.
            initWidget(panel);

            //set style name for entire widget
            setStyleName("optionalTextWidget");

            //set style name for text box
            textBox.setStyleName("optionalTextBox");

            //set style name for check box
            checkBox.setStyleName("optionalCheckBox");
            textBox.setWidth("200");

            // Set the check box's caption, and check it by default.
            checkBox.setText(caption);
            checkBox.setValue(enabled);
            checkBox.addClickHandler(this);
            enableTextBox(enabled,checkBox.getValue());
        }

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

        private void enableTextBox(boolean enable,boolean isChecked){
            enable = (enable && isChecked) || (!enable && !isChecked);
            textBox.setStyleDependentName("disabled", !enable);
            textBox.setEnabled(enable);
        }
    }

    public void onModuleLoad() {
        // Create an optional text box and add it to the root panel.
        OptionalTextBox otb = new OptionalTextBox(
                "Want to explain the solution?");
        otb.setEnabled(true);
        RootPanel.get().add(otb);
    }
}

运行应用程序,显示结果如下:

热门文章

优秀文章