下一篇 → ← 上一篇

GWT 自定义 Widget

17 Mar 2025 | 4 分钟阅读

Google Web Toolkit 提供了多种创建自定义 widget 的方法。最简单的方法是创建组合 widget，方法是将现有的基本 widget 分组并向其添加一些交互逻辑。

要创建自定义 Widget，需要实现以下三个通用概念：

构建组合 Widget。
为新 widget 创建 Java 代码。
使用 JSNI 方法包装 JavaScript。

构建组合 Widget

要创建组合 widget，它应该扩展 Composite 类。组合是一个可以包含另一个组件的专用 widget。它的行为就像它是包含的 widget。在创建组合 widget 时，我们可以将现有的 widget 组组合成一个组合，该组合本身就是一个可重用的 widget。

为新 widget 创建 Java 代码

Widget 是使用 java 语言在包 com.google.gwt.user.client.ui 下编写的。源代码位于 gwt-user.jar 中。这是使用此方法创建基本 widget 的复杂方法。许多基本 widget 都是以这种方式编写的，例如 Button 和 TextBox。

使用 JSNI 方法包装 JavaScript

在实现直接派生自 Widget 基类的自定义 widget 时，我们使用 JavaScript 编写 widget 的一些方法。这种方法最后实现，因为它变得更难以调试。

GWT 自定义 Widget 示例

//colorpicker.java

import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.*;
import com.google.gwt.user.client.ui.*;

public class GwtColorPicker extends Composite
                            implements ClickHandler {

    // The currently selected color name to give client-side 
    // feedback to the user.
    protected Label currentcolor = new Label();

    public GwtColorPicker() {
        // Create a 4x4 grid of buttons with names for 16 colors
        final Grid grid = new Grid(4, 4);
        final String[] colors = new String[] { "aqua", "black",
                "blue", "fuchsia", "gray", "green", "lime",
                "maroon", "navy", "olive", "purple", "red",
                "silver", "teal", "white", "yellow" };
        int colornum = 0;
        for (int i = 0; i < 4; i++) {
            for (int j = 0; j < 4; j++, colornum++) {
                // Create a button for each color
                Button button = new Button(colors[colornum]);
                button.addClickHandler(this);

                // Put the button in the Grid layout
                grid.setWidget(i, j, button);

                // Set the button background colors.
                DOM.setStyleAttribute(button.getElement(),
                                      "background",
                                      colors[colornum]);

                // For dark colors, the button label must be
                // in white.
                if ("black navy maroon blue purple"
                        .indexOf(colors[colornum]) != -1) {
                    DOM.setStyleAttribute(button.getElement(),
                                          "color", "white");
                }
            }
        }

        // Create a panel with the color grid and currently
        // selected color indicator.
        final HorizontalPanel panel = new HorizontalPanel();
        panel.add(grid);
        panel.add(currentcolor);

        // Set the class of the color selection feedback box 
        // to allow CSS styling. We need to obtain the DOM
        // element for the current color label. This assumes 
        // that the <td> element of the HorizontalPanel is
        // the parent of the label element. Notice that the 
        // element has no parent before the widget has been
        // added to the horizontal panel.
        final Element panelcell =
            DOM.getParent(currentcolor.getElement());
        DOM.setElementProperty(panelcell, "className",
                               "colorpicker-currentcolorbox");

        // Set initial color. This will be overridden with the
        // value read from server.
        setColor("white");

        // Composite GWT widgets must call initWidget().
        initWidget(panel);
    }

    /** Handles click on a color button. */
    @Override
    public void onClick(ClickEvent event) {
        // Use the button label as the color name to set
        setColor(((Button) event.getSource()).getText());
    }

    /** Sets the currently selected color. */
    public void setColor(String newcolor) {
        // Give client-side feedback by changing the color
        // name in the label.
        currentcolor.setText(newcolor);

        // Obtain the DOM elements. This assumes that the <td>
        // element of the HorizontalPanel is the parent of the
        // caption element.
        final Element caption = currentcolor.getElement();
        final Element cell = DOM.getParent(caption);

        // Give feedback by changing the background color
        DOM.setStyleAttribute(cell, "background", newcolor);
        DOM.setStyleAttribute(caption, "background", newcolor);
        if ("black navy maroon blue purple"
                .indexOf(newcolor) != -1)
            DOM.setStyleAttribute(caption, "color", "white");
        else
            DOM.setStyleAttribute(caption, "color", "black");
    }
}

//colorpicker.css

/* Set style for the color picker table.
 * This assumes that the Grid layout is rendered
 * as a HTML <table>. */
table.example-colorpicker {
    border-collapse: collapse;
    border: 0px;
}

/* Set color picker button style.
 * This does not make assumptions about the HTML
 * element tree as it only uses the class attributes
 * of the elements. */
.example-colorpicker .gwt-Button {
    height: 60px;
    width: 60px;
    border: none;
    padding: 0px;
}

/* Set style for the right-hand box that shows the
 * currently selected color.  While this may work for
 * other implementations of the HorizontalPanel as well,
 * it somewhat assumes that the layout is rendered
 * as a table where cells are <td> elements. */
.colorpicker-currentcolorbox {
    width: 240px;
    text-align: center;
    /* Must be !important to override GWT styling: */
    vertical-align: middle !important;
}

输出

GWT Custom WIdget

下一主题GWT JSNI

← 上一篇下一篇 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。