GWT - Custom Widgets

GWT Custom Widgets - 从基本概念到高级概念，从简单简单的步骤学习Google Web Toolkit（GWT）编程，其中包括概述，环境设置，Web应用程序创建，部署和调试应用程序，CSS样式，组件模型，基本，表单和复杂小部件，布局面板，事件处理，自定义小部件，UIBinder，RPC通信，JUnit集成，国际化，历史类，书签支持，日志框架。

GWT提供了三种创建自定义用户界面元素的方法.有三种一般策略可以跟随 : 去;

通过扩展Composite Class : 创建一个小部件;这是创建自定义窗口小部件最常用，最简单的方法.在这里，您可以使用现有小部件来创建具有自定义属性的复合视图.
使用JAVA中的GWT DOM API创建小部件 : GWT基本小部件以这种方式创建.仍然是创建自定义窗口小部件的一种非常复杂的方法，应谨慎使用.
使用JavaScript并使用JSNI将其包装在窗口小部件中 : 这通常只应作为最后的手段.考虑到本机方法的跨浏览器含义，它变得非常复杂并且也变得更难调试.

创建自定义小部件复合类

此示例将指导您完成在GWT中创建自定义窗口小部件的简单步骤.按照以下步骤更新我们在 GWT - Basic Widgets 章节中创建的GWT应用程序;

这里我们将通过扩展Composite类来创建自定义小部件，这是构建自定义小部件的最简单方法.

Step	描述
1	在 GWT - 创建应用程序章节中解释，在包 com.it1352下创建名为 HelloWorld 的项目.
2	修改 HelloWorld.gwt .xml ， HelloWorld.css ， HelloWorld.html 和 HelloWorld.java ，如下所述.保持其余文件不变.
3	编译并运行应用程序以验证实现的逻辑的结果.

以下是修改后的模块描述符的内容 src/com.it1352/HelloWorld.gwt.xml.

以下是修改后的样式表文件的内容 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 .

         Hello World                              Custom Widget Demonstration

让我们有以下Java文件 src/com.it1352/HelloWorld.java 的内容，它将演示创建自定义小部件.

package com.it1352.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.CheckBox;import com.google.gwt.user.client.ui.Composite;import com.google.gwt.user.client.ui.HorizontalPanel;import com.google.gwt.user.client.ui.RootPanel;import com.google.gwt.user.client.ui.TextBox;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.
       * Style textbox using .optionalTextBox CSS class.
       * Style checkbox using .optionalCheckBox CSS class.
       * 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);   }    }

完成所有更改后，让我们在开发模式下编译并运行应用程序在 GWT - 创建应用程序章节中做了.如果您的应用程序一切正常，这将产生以下结果 :

GWT Custom Widget

您可以注意到以下几点

通过扩展创建自定义小工具复合小部件非常简单.
我们使用GWT内置小部件，TextBox和CheckBox创建了一个小部件，因此使用了可重用性的概念.
根据复选框的状态，TextBox被禁用/启用.我们提供了一个API来启用/禁用控件.
我们通过记录的CSS样式公开了内部窗口小部件样式.