📜  GWT-自定义小部件

📅  最后修改于: 2020-10-25 04:42:29             🧑  作者: Mango


GWT提供了三种创建自定义用户界面元素的方法。有以下三种通用策略-

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

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

  • 使用JavaScript并使用JSNI将其包装在小部件中-通常仅应在不得已时使用。考虑到本机方法的跨浏览器含义,它变得非常复杂,并且调试起来也更加困难。

使用复合类创建自定义窗口小部件

本示例将带您完成简单的步骤,以展示在GWT中创建自定义小部件的过程。请按照以下步骤更新我们在GWT-基本小部件一章中创建的GWT应用程序-

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

Step Description
1 Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT – Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

以下是修改后的模块描述符src / com.tutorialspoint / 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.tutorialspoint / HelloWorld.java的内容,它将演示如何创建自定义小部件。

package com.tutorialspoint.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自定义小部件

您会注意到以下几点

  • 通过扩展Composite小部件来创建Custom Widget非常简单。

  • 我们使用GWT内置的小部件TextBox和CheckBox创建了一个小部件,因此使用了可重用性的概念。

  • 根据复选框的状态禁用/启用TextBox。我们提供了一个API来启用/禁用控件。

  • 我们通过记录的CSS样式公开了内部小部件样式。