自由で気ままな日々

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-2)です。


今回は「5.クライアント機能のコーディング」の前半になります。

→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/codeclient.html

始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

ステップ５：クライアント機能のコーディング

この時点では、あなたはGWTウィジェットとパネルでユーザインタフェースを作成し、それらにイベントハンドラーを付け加えた。StockWatcherは入力を受け付けますが、現在はテーブルへの株の追加や株式情報の更新を行いません。

このセクションでは、あなたはStockWatcherのすべてのクライアント側の機能実装を完成します。特に下記のコードを書くことになります。

1. 株テーブルに株式を追加・削除する
2. テーブルの中の株式の株価及び変化率を更新する
3. 最終更新日時のタイムスタンプを表示させる

StockWatcherの初期実装は十分にシンプルなので、それの機能をすべてクライアント側だけのコードで実現可能です。将来的に、株価データを取得するために、サーバーをコールを行うことになります。


株テーブルに株式を追加・削除する

あなたの最初の仕事は、証券コードと削除ボタンを株式テーブルに追加することです。FlexTableはデータを所持するために自動的にサイズを変更しますので、あなたはサイズ変更の処理を行うためのコードを書く必要が無いことを覚えといて下さい。

1. データ構造を作成する
2. 株式テーブルに列を追加する
3. 株式テーブルから株を削除するためのボタンを追加する
4. 開発モードでテストする

1.データ構造を作成する

ユーザが入力した証券コードのリストを格納するためのデータ構造が必要です。標準的なJavaのArrayListを使います。

1.データ構造を作成する
StockWatcher.javaのStockWatcherクラスに、JavaのArrayListの新しいインスタンスを作成します。

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();
private ArrayList<String> stocks = new ArrayList<String>();

2.EclipseはArrayListにエラーフラグを立ち、インポート宣言の追加を提案します。
3.インポート制限を追加します。

import java.util.ArrayList;

2.株式テーブルに列を追加する

ユーザが証券コードを入力した後、最初にそれは重複ではないことを確認します。もしその証券コードは既存ではないのであれば、FlexTableに新しい列を追加し、最初のセルにユーザが入力した証券コードを入れます。FlexTableのセルに文字を入れるため、setTextメソッドを使います。

1.株を確認し、既存であるかどうかを見て、既に存在しているのであれば、再度追加しないようにしましょう。
addStockメソッドのTODOコメントをこんなコードで置き換えて下さい。

// Don't add the stock if it's already in the table.
if (stocks.contains(symbol))
return;

2.もし株は既存ではないなら、それを追加する
addStockメソッドのTODOコメントをこんなコードで置き換えましょう。

// Add the stock to the table.
int row = stocksFlexTable.getRowCount();
stocks.add(symbol);
stocksFlexTable.setText(row, 0, symbol);

setTextメソッドをコールすれば、FlexTableは必要に応じて自動的に新しい
セルを追加します、従って、あなたはテーブルをリサイズする必要がありません。

3.株式テーブルから株を削除するためのボタンを追加する

リストから特定の株を削除出来るようにするために、テーブルの列の最後のセルに削除ボタンを挿入します。FlexTableにウィジェットを追加するために、setWidgetメソッドを利用します。addClickHandlerメソッドでクリックイベントを記述します。削除ボタンがクリックイベントを発行したら、FlexTableとArrayListから株を削除します。

1.リストから株を削除するためのボタンを追加します。
addStockメソッドの中に、TODOコメントをこのコードで置き換えて下さい。

// Add a button to remove this stock from the table.
Button removeStockButton = new Button("x");
removeStockButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int removedIndex = stocks.indexOf(symbol);
stocks.remove(removedIndex);
stocksFlexTable.removeRow(removedIndex + 1);
}
});
stocksFlexTable.setWidget(row, 3, removeStockButton);

4.開発モードでテストする

もう一つコーディングしなければならないTODOが残っています：株価の取得です。但し、まずは手早く開発モードで株式追加と株式削除の機能が予想とおりに稼働しているかどうかを確認します。

この時点で証券コードを入力したら、StockWatcherはそれを株式テーブルに追加します。それを試してみましょう。

1.StockWatcherを開発モードで実行します。
既存のブラウザのリフレッシュ(*再読み込み、リロード)を押します。

2.株式を追加する
入力ボックスで証券コードを入力します。
StockWatcherはその株をテーブルに追加するハズです。テーブルは新しいデータを格納するためにリサイズされます。しかし、価格と変動率の欄は相変わらず空っぽです。小文字の証券コードを入力したら、それは大文字にコンバートされます。

3.テーブルに重複の株を追加できないことを確認します。
テーブルに既に存在している証券コードを入力します。
StockWatcherは入力ボックスをクリアしますが、その同じコードを再度追加しません。

4.株の削除
削除ボタンをクリックします。
その株式はテーブルから削除され、テーブルはリサイズされます。


次に、あなたは最後のTODO、株価取得を片付けます。



次はかなり長いので、今回も分割します。



次回は「2.テーブルの中の株式の株価及び変化率を更新する」に続きます。