【译】GWT入门：管理客户端事件

【译自：https://developers.google.com/web-toolkit/doc/latest/tutorial/manageevents?hl=zh-CN】

 

到此，我们已经创建了所有需要的UI控件。和许多其他的用户界面框架一样，GWT也是基于事件驱动的，也就是说代码会在响应某此发生的事件时被执行。经常，这些事件是由用户触发的，例如使用键盘或鼠标。

 

这一节，我们要给我们的控件添加鼠标和键盘响应事件。

 

一、审视事件处理需求

首先我们检查一下StockWatcher中哪些事件需要处理是：

 

Task	UI Event (Trigger mechanism)	Response
用户输入股票代码	点击Add按钮或在文本框中按回车	验证输入 检查是否存在 增加新行 创建删除按钮
用户删除股票	按下Remove按钮	从表格中删除当前行

 

GWT提供了一系列的事件处理接口。为了处理Add和Remove按钮事件，我们需要使用ClickHandler 接口；为了处理键盘事件，我们需要使用KeyPressHandler接口。

 

注：从GWT1.6开始， ClickHandler，KeyDownHandler，KeyPressHandler和KeyUpHandler接口已经替换了旧的ClickListener和KeyBoardListener接口了。

 

二、监听事件

Event Handler 接口

GWT中的事件接口和其他事件框架类似。要监听某一事件，需要传递一个特定的事件接口对象到相应的控件上。一个事件接口定义了一个或多个方法，可以被控件调用来处理某一事件。

 

处理Mouse Events

StockWatcher中，用户添加股票的方法之一就是用鼠标点击Add按钮。

 

通过传递一个实现了ClickHandler接口的对象，用户可以处理Add 按钮的点击事件。可能使用一个匿名内部类去实现ClickHandler接口。ClickHandler接口有一个onClick方法，当用户点击了控件时会触发它。

 

当用户点击了Add按钮，作为响应，StockWatcher就应该添加一条股票代码到股票表格里。因此，调用addStock方法去响应事件。不过我们还不需要实现addStock方法，先给一个架子，在下一节里我们会给出实现。

 

1. 添加Add按钮的事件处理来接收事件
   在Stockwatcher.java的onModuleLoad方法，剪切和复杂以"Listen for mouse events on the Add button."注释的代码部分，也就是下面的高亮部分。
   Eclipse在ClickHandler会提示一个标记建议你导入所需的声明。
2. 导入ClickHandler 和 ClickEvent.
3. 在StockWatcher.java里，创建addStock方法的框架。

package com.google.gwt.sample.stockwatcher.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.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
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 StockWatcher implements EntryPoint {

  private VerticalPanel mainPanel = new VerticalPanel();
  private FlexTable stocksFlexTable = new FlexTable();
  private HorizontalPanel addPanel = new HorizontalPanel();
  private TextBox newSymbolTextBox = new TextBox();
  private Button addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // Create table for stock data.
    stocksFlexTable.setText(0, 0, "Symbol");
    stocksFlexTable.setText(0, 1, "Price");
    stocksFlexTable.setText(0, 2, "Change");
    stocksFlexTable.setText(0, 3, "Remove");

    // Assemble Add Stock panel.
    addPanel.add(newSymbolTextBox);
    addPanel.add(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);

    // Associate the Main panel with the HTML host page.
    RootPanel.get("stockList").add(mainPanel);

    // Move cursor focus to the input box.
    newSymbolTextBox.setFocus(true);

    // Listen for mouse events on the Add button.
    addStockButton.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        addStock();
      }
    });

  }

  /**
   * Add stock to FlexTable. Executed when the user clicks the addStockButton or
   * presses enter in the newSymbolTextBox.
   */
  private void addStock() {
    // TODO Auto-generated method stub

  }

}

 

处理键盘事件

除了Add按钮，StockWatcher用户也可以通过按回车键添加一个股票代码，而不需要把手从键盘上移走。

为了订制一个键盘事件，我们需要调用addKeyPressHander(KeyPressHandler)方法，传入一个KeyPresshandler对象。

 

1. 对输入框newSymbolTextBox添加keypress事件
   在onModuleLoad方法，复制和粘贴以"Listen for keyboard events in the input box."注释部分的代码。
   

       // Listen for mouse events on the Add button.
       addStockButton.addClickHandler(new ClickHandler() {
         public void onClick(ClickEvent event) {
           addStock();
         }
       });
   
       // Listen for keyboard events in the input box.
       newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {
         public void onKeyPress(KeyPressEvent event) {
           if (event.getCharCode() == KeyCodes.KEY_ENTER) {
             addStock();
           }
         }
       });
   
     }
   
     /**
      * Add stock to FlexTable. Executed when the user clicks the addStockButton or
      * presses enter in the newSymbolTextBox.
      */
     private void addStock() {
       // TODO Auto-generated method stub
   
     }
   
   }

2. 添加导入声明
   

   import com.google.gwt.event.dom.client.KeyCodes;
   import com.google.gwt.event.dom.client.KeyPressEvent;
   import com.google.gwt.event.dom.client.KeyPressHandler;

 

声事件处理已经添加完成，下一步就是完成addStock()方法

 

 

三、响应用户事件

到此，StockWatcher已经监听了用户输入。一个鼠标或键盘事件标明用户输入了一个股票代码。接下来就是通过响应事件来测试这些事件处理接口：添加股票代码。

StockWatcher不需要发送请求到服务器端或重新加载页面来响应请求。

 

添加股票到列表中

在StockWatcher中，用户输入它想监控的股票代码到输入框中。当它按下回车键或点击了Add按钮时，我们需要：

1. 验证输入
2. 检查重复
3. 添加代码
4. 添加删除按钮

这一节，我们先实现第一步：验证输入，用于检测事件处理接口是不是工作，下一节 Coding Functionality on the Client，会完成剩下的部分。

在addStock方法里实现这些功能。

验证输入

这里我们只验证输入是不是有效，而不验证它是不是一个存在的股票id。因此我们只做一个简单的字母检测。

1. 首先提取股票代码
   通过TextBox的getText()方法取得输入值
2. 确保字母串中不包含非法字符
   取得输入值后，使用一个正则表达式去检查是不是一个合法的输入。正则表达式在java和javascript中有相同的意义。
3. 最后，如果输入无效，提示一个对话框

 

1. 验证
   在StockWatcher.java中，以以下代码替换addStock方法：

     private void addStock() {
       final String symbol = newSymbolTextBox.getText().toUpperCase().trim();
       newSymbolTextBox.setFocus(true);
   
       // Stock code must be between 1 and 10 chars that are numbers, letters, or dots.
       if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
         Window.alert("'" + symbol + "' is not a valid symbol.");
         newSymbolTextBox.selectAll();
         return;
       }
   
       newSymbolTextBox.setText("");
   
       // TODO Don't add the stock if it's already in the table.
   
       // TODO Add the stock to the table.
   
       // TODO Add a button to remove this stock from the table.
   
       // TODO Get the stock price.
   
     }

2. 添加导入

   import com.google.gwt.user.client.Window;

四、测试事件处理

到此，我们已经能够在输入框中输入，如果使用了非法字符，则会有一个提示框出现：

1. 在Development模式下测试
   在已经打开的浏览器里刷新
2. 测试两种事件处理都工作
   输入股票代码，测试回车键和鼠标点击Add按钮。
   现在股票还不会添加到列表中，但是输入框会清除，用户可以重新输入
3. 测试验证和错误信息
   输入一些非法值

Tip: 在Development模式下，你们代码修改会立即生效，只需要在浏览器上刷新即可。你不需要重新启动应用