Step 2: アプリケーションの設計

GWT Tutorial

目次：Google Web Toolkit チュートリアル（目次） - webとかmacとかやってみようか
原文：http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/design.html

ここまでで、StockWatcherをコーディングするのに必要なスタブファイルを作成できてるよね。

このセクションでは、機能的要求の確認とユーザインターフェースの設計をするよ。

機能的要求の確認

最初に、StockWatcher アプリ は ６つのことができるように望んでいるね。

  • 株式を追加する機能を提供する。（不正な文字や存在していることの検証を与える）
  • それぞれの株式に次の情報を表示する。シンボル、価格、最終更新からの変化。
  • リストから株式を削除する機能
  • 株式価格の更新
  • 最終更新からの差分を 数値とパーセントで計算する
  • 最終更新のタイムスタンプの表示

UIデザイン要素の確定

http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/images/DesignStockWatcherFinal.png

StockWatcher の機能要求を検討してから、これらの UI要素が必要だと決めた。

  • テーブル： 株データを保持
  • 二つのボタン： 株式の追加と削除ボタン
  • 入力ボックス： 証券コードを入力
  • タイムスタンプ： 最終更新日時

デザインチームは次の追加項目を提案してくる。

  • ロゴ
  • ヘッダー
  • 差額がプラスかマイナスの表示する色
静的要素の取り込み

GWT は HTMLページのレイアウトに左右されない。GWT アプリケーションは、スタータアプリのようにブラウザウィンドウ全体にとることができるよ。または、このチュートリアルの Getting Start ページのように既存のページに埋め込むこともできるよ。

StockWatcherアプリは静的／動的要素の両方を含むよ。Google CodeロゴとヘッダーはHTML干すとページの静的要素だよ。他の全ての要素は GWTウィジェットとパネルを使って動的に作られているよ。

次は

ここまでで、StockWatcherアプリの仕様を検討したよ。StockerWatcherが何をするかはっきりしたね。実装に必要なUI要素と、それらをどう置くかわかったね。

これで GWTウィジェットとパネルを使ったユーザインターフェースを構築する準備が整ったよ。

Step 3: ユーザインターフェースの構築 - webとかmacとかやってみようか