Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト
スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル
前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(3-3)です。
今回は「4.クライアントのイベントの管理」の前半になります。
→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/manageevents.html
始まる前に、まず、お断りを…。
私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。
GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。
日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*…)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。
最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。
ステップ４：クライアントのイベントの管理
この時点では、あなたはインターフェースのすべての要素を作成した。多くのユーザインタフェースのフレームワークと同様、GWTはイベントベースです。つまり、何らかのイベントが発生する時に、レスポンスとしてコードが実行されます。多くの場合、イベントはマウスやキーボードを使ってアプリケーションインターフェースと相互作用するユーザに触発されます。
このセクションでは、あなたはマウスとキーボードイベントに応答・ハンドリングが出来るようにウィジェットを作り上げます。
1.イベントハンドリングの要件を検討します。
StockWatcherの要件を検討し、どのようなイベントが発生するかを検討します。
タスク：
ユーザーが証券コードを入力します。
ユーザインタフェースイベント（トリガーメカニズム）
Addボタンをクリックするか、入力ボックスでエンターを押す
レスポンス：
・入力を検証する
・株が既に存在しているかをチェックする
・新しい行を追加する
・削除用のボタンを生成する
タスク：
ユーザがテーブルから株を削除する
ユーザインタフェースイベント（トリガーメカニズム）
Removeボタンをクリックする
レスポンス：
・テーブルから一行を削除する
GWTは何種類かの異なるイベントハンドラインターフェースを提供していています。AddとRemoveボタンのクリックイベントをハンドリングするために、あなたはClickHandlerインターフェースを利用します。入力ボックスのキーボードイベントをハンドリングするために、あなたはKeyPressHandlerインターフェースを利用します。
GWT1.6からClickListenerとKeyBoardListerインターフェースは推奨されず、これらはClickHandler、KeyDownHandler、KeyPressHandlerとKeyUpHandlerインタフェースに代りました。
2.イベントをリスニングします。
イベントハンドラインターフェース
GWTのイベントは他のユーザインタフェースと同じく、イベントハンドラインターフェースモデルを採用しています。イベントを登録するために、あなたはイベントハンドラのインタフェースを適切なウィジェットにパスします。イベントハンドラインターフェースは一つかそれ以上のメソッドを定義し、これらはイベントが発生した時にコールされます。
マウスイベントをハンドリングする
マウスを使ってAddボタンをクリックするのはStockWatcherのユーザが証券コードを入力するための方法の一つです。
Addボタンのクリックイベントをハンドリングするために、それ(*イベント)をClickHandlerインターフェースを実装(implements)したオブジェクトにパスします。このケースでは、あなたは匿名の内部クラスを使ってClickHandlerを実装します。ClickHandlerインターフェースは「onClick」というメソッドを持っています。これはユーザーがウィジェットをクリックする時に発火(fire)します。
ユーザーがAddボタンをクリックしたとき、StockWatcherはレスポンスとして株式のテーブルにその株を追加するべきです。従って、このクリックイベントをハンドリングするために、addStockメソッドをコールします。あなたはまだaddStockメソッドを書いていませんので、ここではまずそれの土台を作り、次のセクションで実際にそれのコーディングを行います。
- Addボタンにイベントハンドラを追加し、クリックイベントを受け付けれるようにします。StockWatcher.javaの中、onModuleLoadメソッドに、下の強調された「// Listen for mouse events on the Add button」の部分のコードを貼り付けます。EclipseはClickHandlerにエラーフラグを立ち、インポートの宣言を行うことを提案します。
- ClickHandlerとClickEventのためのインポート宣言を付け加えます。EclipseはaddStockにエラーフラグを立ちます。
- StockWatcher.javaにaddStockメソッドの土台を作成します。EclipseでaddStock()メソッドを追加します。あるは下の強調されたコードを貼り付けます。
注意:Eclipseの設定により、addStockメソッドを作成する時、それはprotectedのアクセス属性が付与されるかもしれません。StockWatcherのサブクラスを作成する予定がありませんので、後でaddStockメソッドを実装する時、アクセス制限をprivateに変更します。
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
}
}実装する時の注意：StockWatcherのような小さなアプリケーションでは、比較的に少ないイベントをハンドリングしますので、匿名インナークラスを使ったほうが、コーディングの労力を少なくできます。ただし、イベントを記述するためのイベントハンドラーの数が多い場合、大量の分断されたイベントハンドラーオブジェクトを生成しなければならないので、このアプローチは非効率になる可能性があります。そのようなケースでは、イベントハンドラインターフェースを実装したクラスを作成し、複数のイベント発生源からくる様々なイベントをハンドリングしたほうが良いでしょう。getSource()メソッドをコールすることで、イベントの発生源を見分けることができます。これはメモリーの利用効率を上げますが、わずかに多くのコードを要求します。コード例を知りたければ、開発者ガイドのEvent Handlers(*英語)を御覧下さい。
キーボードイベントをハンドリングする
Addボタンの利用だけではなく、StockWatcherのユーザは証券コードを入力した後、その手をキーボードから離さずに、入力ボックスでエンターを押すだけで処理できます。
キーボードイベントを記述するために、あなたは(KeyPressHandlerのための)addKeyPressHandlerメソッドをコールすれば、イベントをKeyPressHanlderにパスできます。
1.入力ボックス＝newSymbolTextBoxのために、キープレスイベントハンドラを追加します。
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
}
}EclipseはKeyPressHandlerにエラーフラグを立ち、インポート宣言を付け加えることを提案します。
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;
長くなりましたので、今回も分割します。
次回は「3.ユーザイベントにレスポンスする」に続きます。