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の入門チュートリアルの日本語訳(4-1)です。
今回は「4.クライアントのイベントの管理」の後半になります。
→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/manageevents.html
始まる前に、まず、お断りを…。
私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。
GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。
日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*…)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。
最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。
3.ユーザイベントにレスポンスする
この時点で、StockWatcherはユーザーの入力を受け付けることができます。マウスやキーボードイベントはユーザーが証券コードを入力した時のシグナルです。次に、StockWatcherがイベントを察知した時に行うべきレスポンス、"株を追加する"のためのコードを書き、イベントハンドラインターフェースが稼働しているかどうかをテストします。StockWatcherは何らかのリクエストをサーバーに送ること無く、HTMLページをリロードすることもなく、クライアントサイトで応答します。
株テーブルに株を追加する
StockWatcherでは、ユーザは同時にモニタリングしたい株式の証券コードを入力ボックスに入力します。ユーザがエンターを押すか、Addボタンをクリックした時、StockWatcherは下記のようにレスポンスしてほしい。
- 入力のチェック
- 重複のチェック
- 株を追加
- 株をリストから削除するためのボタンを追加する
イベントハンドラインターフェースが稼働しているかどうか確認するために、このセクションでは、あなたは最初のレスポンス"入力チェック"のコードを書きます。次のセクション「5.クライアント機能のコーディング」では、あなたは株式追加のためのコードの残りの部分を書きます。
この部分はaddStockメソッドの機能を実装することになります。
テキストボックスへの入力を検証します
入力された証券コードが妥当であるかどうかを検証したい。ユーザーは実在の証券コードにマッチングした入力を行ったかのチェックではなく、このチュートリアルの目標では、簡単な文字妥当性チェックを行います。
最初に、証券コードを抽出します。getTexeメソッドでTextBoxウィジェット内のテキストを取得します。
次に、入力された文字はあなたが指定した不正文字のセットに含まれているかどうかを確認します。ユーザ入力を標準的な形に変換した後、正規表現でその形式をチェックします。必ずJavaとJavascriptの両方に同じ意味を持つ正規表現を使うこと、覚えといて下さい。
入力の妥当性が検証されたら、ユーザが他の証券コードを入力できるように、テキストボックスをクリアします。
最終的に、もし入力は妥当では無かったら、ダイアログボックスでユーザーに警告を出します。
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.
}Eclipseは"Window"にエラーフラグを立ち、インポートの宣言を入れることを提案します。
2.インポート宣言を入れます。
import com.google.gwt.user.client.Window;4.イベントハンドリングをテストします
この時点では、あなたは入力ボックスに文字を入力することができます。もしあなたが不正文字を使ったら、ダイアログボックスは現れ、警告を表示します。試してみて、結果を見てみましょう。
1.開発モードでイベントハンドリングをテストします。
開いているブラウザをリフレッシュ(再読込)します。
2.両方のイベントハンドラインタフェースの稼働をテストします。
入力ボックスで証券コードを入れます。エンターキーを押す、Addボタンをクリック、両方の方法で試してみて下さい。
現時点では、株はテーブルに追加されません。但し、他の株を追加するため、入力ボックスその都度クリアされるはずです。
3.入力検証とエラーメッセージをテストします。
不正文字を含む入力ミスをやってみてください。
ヒント:"リフレッシュ"を押せば、あなたのJavaコードに加えた変更は即座にブラウザに反映されます。もし開発モードが既に実行されているのであれば、再度実行する必要がありません。ブラウザのリフレッシュボタンをクリックすれば、アップデートされたGWTコードはリロードされます。
StockWatcherはまだ完成していませんが、最終状態をテストしたいなら、Run StockWatcherを御覧下さい。
次回のチュートリアル
この時点では、あなたはユーザが証券を入力する時のマウスとキーボードイベントのためのイベントハンドラインターフェースを実装しました。Stockwatcherは入力を検証してレスポンスします。
これで、あなたはテーブルに株を追加し、削除のためのボタンを提供するためのクライアント側のコードを実装するための準備を整えました。同じく、株価とデータ、そして最終更新の時の時間を表示するためのタイムスタンプを表示します。