GWT - 事件处理

上一页
下一页

GWT 提供了类似于 Java AWT 或 SWING 用户界面框架的事件处理模型。

  • 监听器接口定义了一个或多个方法，小部件调用这些方法来宣布事件。GWT 提供了一系列与各种可能的事件相对应的接口。

  • 希望接收特定类型事件的类实现相关的处理程序接口，然后将对自身的引用传递给小部件以订阅一组事件。

例如，Button 类发布点击事件，因此您必须编写一个类来实现ClickHandler 来处理点击事件。

事件处理程序接口

所有 GWT 事件处理程序都扩展自EventHandler 接口，并且每个处理程序只有一个带有单个参数的方法。此参数始终是相关事件类型的对象。每个事件对象都有许多方法来操作传递的事件对象。例如，对于点击事件，您必须按如下方式编写处理程序：

/**
 * create a custom click handler which will call 
 * onClick method when button is clicked.
 */
public class MyClickHandler implements ClickHandler {
   @Override
   public void onClick(ClickEvent event) {
      Window.alert("Hello World!");
   }
}

现在，任何希望接收点击事件的类都将调用addClickHandler() 来注册事件处理程序，如下所示：

/**
 * create button and attach click handler
 */
Button button = new Button("Click Me!");
button.addClickHandler(new MyClickHandler());

每个支持事件类型的组件都将使用方法 HandlerRegistration addFooHandler(FooEvent)，其中Foo 是实际事件，例如 Click、Error、KeyPress 等。

以下是重要的 GWT 事件处理程序、相关事件和处理程序注册方法的列表：

序号 事件接口 事件方法及描述
1 BeforeSelectionHandler<I>

void onBeforeSelection(BeforeSelectionEvent<I> event);

当触发 BeforeSelectionEvent 时调用。
2 BlurHandler

void onBlur(BlurEvent event);

当触发 Blur 事件时调用。
3 ChangeHandler

void onChange(ChangeEvent event);

当触发更改事件时调用。
4 ClickHandler

void onClick(ClickEvent event);

当触发原生点击事件时调用。
5 CloseHandler<T>

void onClose(CloseEvent<T> event);

当触发 CloseEvent 时调用。
6 ContextMenuHandler

void onContextMenu(ContextMenuEvent event);

当触发原生上下文菜单事件时调用。
7 DoubleClickHandler

void onDoubleClick(DoubleClickEvent event);

当触发双击事件时调用。
8 ErrorHandler

void onError(ErrorEvent event);

当触发 Error 事件时调用。
9 FocusHandler

void onFocus(FocusEvent event);

当触发 Focus 事件时调用。
10 FormPanel.SubmitCompleteHandler

void onSubmitComplete(FormPanel.SubmitCompleteEvent event);

表单成功提交后触发。
11 FormPanel.SubmitHandler

void onSubmit(FormPanel.SubmitEvent event);

提交表单时触发。
12 KeyDownHandler

void onKeyDown(KeyDownEvent event);

当触发 KeyDownEvent 时调用。
13 KeyPressHandler

void onKeyPress(KeyPressEvent event);

当触发 KeyPressEvent 时调用。
14 KeyUpHandler

void onKeyUp(KeyUpEvent event);

当触发 KeyUpEvent 时调用。
15 LoadHandler

void onLoad(LoadEvent event);

当触发 LoadEvent 时调用。
16 MouseDownHandler

void onMouseDown(MouseDownEvent event);

当触发 MouseDown 时调用。
17 MouseMoveHandler

void onMouseMove(MouseMoveEvent event);

当触发 MouseMoveEvent 时调用。
18 MouseOutHandler

void onMouseOut(MouseOutEvent event);

当触发 MouseOutEvent 时调用。
19 MouseOverHandler

void onMouseOver(MouseOverEvent event);

当触发 MouseOverEvent 时调用。
20 MouseUpHandler

void onMouseUp(MouseUpEvent event);

当触发 MouseUpEvent 时调用。
21 MouseWheelHandler

void onMouseWheel(MouseWheelEvent event);

当触发 MouseWheelEvent 时调用。
22 ResizeHandler

void onResize(ResizeEvent event);

组件大小调整时触发。
23 ScrollHandler

void onScroll(ScrollEvent event);

当触发 ScrollEvent 时调用。
24 SelectionHandler<I>

void onSelection(SelectionEvent<I> event);

当触发 SelectionEvent 时调用。
25 ValueChangeHandler<I>

void onValueChange(ValueChangeEvent<I> event);

当触发 ValueChangeEvent 时调用。
26 Window.ClosingHandler

void onWindowClosing(Window.ClosingEvent event);

浏览器窗口关闭或导航到其他站点之前触发。
27 Window.ScrollHandler

void onWindowScroll(Window.ScrollEvent event);

浏览器窗口滚动时触发。

事件方法

如前所述，每个处理程序都有一个带单个参数的方法，该参数保存事件对象，例如void onClick(ClickEvent event) 或void onKeyDown(KeyDownEvent event)。ClickEvent 和KeyDownEvent 等事件对象有一些常见方法，如下所示：

序号 方法及描述
1

protected void dispatch(ClickHandler handler) 此方法应仅由 HandlerManager 调用
2

DomEvent.Type <FooHandler> getAssociatedType() 此方法返回用于注册Foo 事件的类型。
3

static DomEvent.Type<FooHandler> getType() 此方法获取与Foo 事件关联的事件类型。
4

public java.lang.Object getSource() 此方法返回最后触发此事件的源。
5

protected final boolean isLive() 此方法返回事件是否处于活动状态。
6

protected void kill() 此方法终止事件

示例

此示例将引导您完成简单的步骤，以演示如何在 GWT 中使用Click 事件和KeyDown 事件处理。按照以下步骤更新我们在GWT - 创建应用章节中创建的 GWT 应用：

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

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

<?xml version = "1.0" encoding = "UTF-8"?>
<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.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

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

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Event Handling Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

让我们来看一下 Java 文件src/com.tutorialspoint/HelloWorld.java的内容，它将演示如何在 GWT 中使用事件处理。

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.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      /**
       * create textbox and attach key down handler
       */
      TextBox textBox = new TextBox(); 
      textBox.addKeyDownHandler(new MyKeyDownHandler());

      /*
       * create button and attach click handler
       */
      Button button = new Button("Click Me!");
      button.addClickHandler(new MyClickHandler());

      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      panel.setSize("300", "100");
      panel.add(textBox);
      panel.add(button);

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(panel);
      RootPanel.get("gwtContainer").add(decoratorPanel);
   }

   /** 
    * create a custom click handler which will call 
    * onClick method when button is clicked.
    */
   private class MyClickHandler implements ClickHandler {
      @Override
      public void onClick(ClickEvent event) {
         Window.alert("Hello World!");
      }
   }

   /**
    * create a custom key down handler which will call 
    * onKeyDown method when a key is down in textbox.
    */
   private class MyKeyDownHandler implements KeyDownHandler {
      @Override
      public void onKeyDown(KeyDownEvent event) {
         if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
            Window.alert(((TextBox)event.getSource()).getValue());
         }
      }
   }
}

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

GWT Event Handling
打印页面
上一页
下一页
广告