Symfoware

Symfowareについての考察blog

Google Web Toolkit 2.1 チュートリアル4 クライアントのイベント制御

Google Web Toolkit 2.1のEclipseプラグインをインストールし、
チュートリアルを試しているところです。
Google Web Toolkit 2.1のEclipseプラグインをインストールする
Google Web Toolkit 2.1 チュートリアル1 GWTプロジェクトの作成
Google Web Toolkit 2.1 チュートリアル2 アプリケーションの設計
Google Web Toolkit 2.1 チュートリアル3 ユーザーインターフェースの作成

引き続き、チュートリアルを試します。

Step 4: Manage Events on the Client
こちらを参考に進めていきます。




1. Reviewing the requirements for event handling



イベント処理の実装を行う前に、必要なイベント処理の内容を
考えて見ましょう。

■ユーザーの株式銘柄追加処理


イベント:
  追加ボタンを押すか、テキストボックスでエンターキー押下

処理:
  入力の妥当性チェック
  入力された銘柄の重複チェック
  (※上記検証を通過したら)
  テーブルに一行追加
  行に削除ボタンを追加




■ユーザーの株式銘柄削除処理


イベント:
  行にある削除ボタンが押される

処理:
  テーブルから一行削除






ボタンクリックには「ClickHandler
テキストボックスのキー入力は「KeyPressHandler
を使用して取得することができます。






2. Listening for events



【Handling Mouse Events】

ボタンが押された・テキストボックスでキーが押されたという
イベントを取得するには、それぞれのオブジェクトに
「リスナー」を設定します。

※JavaでGUIアプリケーションを作成した経験のある方なら
理解が早いと思います。


まず、株式銘柄の追加ボタンが押されたイベントを取得するため
「addStockButton」の「addClickHandler」にClickHandlerを設定します。

ソースはこんな感じになります。



package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
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;

// === ClickHandler,ClickEventのimportを追加 ===
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;

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("追加");
    private Label lastUpdatedLabel = new Label();

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // テーブルの作成
        stocksFlexTable.setText(0, 0, "銘柄");
        stocksFlexTable.setText(0, 1, "価格");
        stocksFlexTable.setText(0, 2, "変動");
        stocksFlexTable.setText(0, 3, "削除");
        
        // 部品が横に並ぶパネルに、銘柄入力テキストとボタンを追加
        addPanel.add(newSymbolTextBox);
        addPanel.add(addStockButton);
        
        // 部品が縦に並ぶパネルに、テーブルと上記パネル、最終更新日ラベルを追加
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
        
        // StockWatcher.htmlのid=stockListのdivを
        // ルートパネルとして取得し、mainPanelを設定する。
        RootPanel.get("stockList").add(mainPanel);
        
        // 起動時、銘柄入力のテキストボックスにフォーカスを設定する
        newSymbolTextBox.setFocus(true);
        
        // ===今回追加した処理== //
        addStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                addStock();
            }
        });
    }
    
    // ===今回追加したメソッド== //
    private void addStock() {
        // TODO 株式銘柄の追加処理を記載
    }
}






【Handling Keyboard Events】

続けて、テキストボックスでキーが押されたイベントを
取得するため、newSymbolTextBoxにリスナーを設定します。

追加するリスナーは「addKeyPressHandler」

ソースはこうなります。



package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
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;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;

//=== KeyCodes,KeyPressEvent,KeyPressHandlerのimportを追加 ===
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyPressEvent;
import com.google.gwt.event.dom.client.KeyPressHandler;

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("追加");
    private Label lastUpdatedLabel = new Label();

    /**
     * Entry point method.
     */
    public void onModuleLoad() {
        // テーブルの作成
        stocksFlexTable.setText(0, 0, "銘柄");
        stocksFlexTable.setText(0, 1, "価格");
        stocksFlexTable.setText(0, 2, "変動");
        stocksFlexTable.setText(0, 3, "削除");
        
        // 部品が横に並ぶパネルに、銘柄入力テキストとボタンを追加
        addPanel.add(newSymbolTextBox);
        addPanel.add(addStockButton);
        
        // 部品が縦に並ぶパネルに、テーブルと上記パネル、最終更新日ラベルを追加
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
        
        // StockWatcher.htmlのid=stockListのdivを
        // ルートパネルとして取得し、mainPanelを設定する。
        RootPanel.get("stockList").add(mainPanel);
        
        // 起動時、銘柄入力のテキストボックスにフォーカスを設定する
        newSymbolTextBox.setFocus(true);
        
        // 追加ボタンにイベントリスナーを設定
        addStockButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                addStock();
            }
        });
        
        // ===今回追加した処理== //
        newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {
            public void onKeyPress(KeyPressEvent event) {
                // 入力されたキーが「Enter」だったら、追加処理を実行する
                if (event.getCharCode() == KeyCodes.KEY_ENTER) {
                    addStock();
                }
            }
        });
    }
    
    // 株式銘柄の追加処理
    private void addStock() {
        // TODO 株式銘柄の追加処理を記載
    }
}











3. Responding to user events



証券コードの追加処理「addStock」の抜粋です。

テキストボックスに入力された値を取得し、大文字に変換。
証券コードとして妥当であるかチェック。
(1文字以上10文字以下。数字・アルファベット・ドット(.)のみ)

妥当な証券コードではない場合、エラーメッセージを表示し、
処理を終了します。

妥当な証券コードだった場合は、テキストボックスをクリアします。


ソースコードはこんな感じ。



    // 株式銘柄の追加処理
    private void addStock() {
        // テキストボックスから入力された文字列を取得
        final String symbol = newSymbolTextBox.getText().toUpperCase().trim();
        newSymbolTextBox.setFocus(true);

        // 証券コードは、1文字以上10文字以下
        // 使える文字は数字・アルファベット・ドット(.)のみ
        if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {
            // 入力された文字が証券コードではない場合は、エラーメッセージ表示
            Window.alert("'" + symbol + "' は不正な証券コードです。");
            newSymbolTextBox.selectAll();
            return;
        }

        newSymbolTextBox.setText("");

        // TODO 証券コードの重複チェック
        // TODO テーブルへ入力されたコードを一行追加
        // TODO 追加した行に削除ボタンを配置
        // TODO 証券の金額を取得
    }









4. Testing event handling



ここまでの動きを確認してみます。
修正したソースコードを保存し、サーバーを起動。


テキストボックスに「A」と入力して追加を押すと、
テキストボックスがクリアされます。


「A!」と入力して追加を押すと・・・

05_001_20101103172419.png


ちゃんと狙い通りの動作です。



関連記事



Google Web Toolkit 2.1 チュートリアル5 クライアントでの処理実行
Google Web Toolkit に関する記事の一覧








関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/11/03(水) 17:24:51|
  2. Google Web Toolkit
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Google Web Toolkit 2.1 チュートリアル5 クライアントでの処理実行 | ホーム | Google Web Toolkit 2.1 チュートリアル3 ユーザーインターフェースの作成>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
https://symfoware.blog.fc2.com/tb.php/633-5aa42b02
この記事にトラックバックする(FC2ブログユーザー)