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

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

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

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

一、审视事件处理需求

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

TaskUI 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. 测试验证和错误信息
    输入一些非法值

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

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

相关推荐