GWT - 事件处理

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

侦听器接口定义小部件调用以宣布事件的一个或多个方法。 GWT 提供了与各种可能事件相对应的接口列表。
希望接收特定类型事件的类会实现关联的处理程序接口，然后将对自身的引用传递给小部件以订阅一组事件。

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

事件处理程序接口

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

/**
 * 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() 来注册事件处理程序，如下所示 −

/**
* 创建按钮并附加点击处理程序
*/
Button button = new Button("Click Me!");
button.addClickHandler(new MyClickHandler());

每个支持事件类型的小部件都将具有 HandlerRegistration addFooHandler(FooEvent) 形式的方法，其中 Foo 是实际事件，如 Click、Error、KeyPress 等。

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

Sr.No.	事件接口	事件方法 &描述
1	Before Selection Handler<I>	void on Before Selection (Before Selection Event<I> event); 在 BeforeSelectionEvent 触发时调用。
2	BlurHandler	void on Blur(Blur Event event); 在 Blur Event 触发时调用。
3	ChangeHandler	void on Change(ChangeEvent event); 触发 change 事件时调用。
4	ClickHandler	void on Click(ClickEvent event); 触发本机 click 事件时调用。
5	CloseHandler<T>	void on Close(CloseEvent<T> event); 触发 CloseEvent 时调用。
6	Context Menu Handler	void on Context Menu(Context Menu Event event); 在触发本机上下文菜单事件时调用。
7	Double Click Handler	void on Double Click(Double Click Event event); 在触发双击事件时调用。
8	Error Handler	void on Error(Error Event event); 在触发错误事件时调用触发。
9	Focus Handler	void on Focus(Focus Event event); 触发焦点事件时调用。
10	Form Panel.Submit Complete Handler	void on Submit Complete(Form Panel.Submit Complete Event event); 表单成功提交时触发。
11	FormPanel.SubmitHandler	void on Submit(Form Panel.Submit Event event); 表单提交时触发。
12	Key Down Handler	void on Key Down(Key Down Event event); KeyDownEvent 触发时调用。
13	KeyPressHandler	void on KeyPress(KeyPressEvent event); KeyPressEvent 触发时调用触发。
14	KeyUpHandler	void on KeyUp(KeyUpEvent event); 触发 KeyUpEvent 时调用。
15	LoadHandler	void on Load(LoadEvent event); 触发 LoadEvent 时调用。
16	MouseDownHandler	void on MouseDown(MouseDownEvent event); 在触发 MouseDown 时调用。
17	MouseMoveHandler	void on MouseMove(MouseMoveEvent event); 在触发 MouseMoveEvent 时调用。
18	MouseOutHandler	void on MouseOut(MouseOutEvent event); 在触发 MouseOutEvent 时调用。
19	MouseOverHandler	void on MouseOver(MouseOverEvent event); 在触发 MouseOverEvent 时调用。
20	MouseUpHandler	void on MouseUp(MouseUpEvent event); 在触发 MouseUpEvent 时调用。
21	MouseWheelHandler	void on MouseWheel(MouseWheelEvent event); 在触发 MouseWheelEvent 时调用。
22	ResizeHandler	void on Resize(ResizeEvent event); 在调整小部件大小时触发。
23	ScrollHandler	void on Scroll(ScrollEvent event); 在 ScrollEvent 时调用触发。
24	SelectionHandler<I>	void on Selection(SelectionEvent<I>事件); 在 SelectionEvent 触发时调用。
25	ValueChangeHandler<I>	void on ValueChange(ValueChangeEvent<I> event); 在 ValueChangeEvent 触发时调用。
26	Window.ClosingHandler	void on WindowClosing(Window.ClosingEvent event); 在浏览器窗口关闭或导航到其他窗口之前触发站点。
27	Window.ScrollHandler	void on WindowScroll(Window.ScrollEvent event); 浏览器窗口滚动时触发。

事件方法

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

Sr.No.	方法和说明
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	在 com.tutorialspoint 包下创建一个名为 HelloWorld 的项目，如 GWT - 创建应用程序一章中所述。
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 教程

GWT 有用资源

GWT - 事件处理

事件处理程序接口

事件方法

示例

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！