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
列印頁面
上一頁
下一頁
廣告