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の入門チュートリアルの日本語訳(2)」でした。
今回は「3.ユーザー インターフェースの構築」の一回目です。
→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/buildui.html
始まる前に、まず、お断りを…。
私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。
GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。
日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*…)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。
最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。
この時点では、あなたはStockWatcherプロジェクトのコンポーネントを作成し、その機能要件を検討し、およびユーザインタフェースを設計した。このセクションでは、あなたはGWTのウィジェットやパネルを使ってユーザーインターフェイスを構築します。
GWTはあなたを頻発するブラウザ間の非互換性への危惧から守ってくれます。GWTウィジェットとGWTの素材を使ってインターフェイスを構築すれば、あなたのアプリケーションは問題なくChrome、Firefox、Internet Explorer、Opera、Safariの最新バージョンで動作します。ただし、DHTMLユーザーインターフェイスはまだ目立つ互換性の問題が残されています。従いまして、あなたはすべてのブラウザ上でアプリケーションをテストするべきでしょう。
1. ユーザインタフェース要素を実装するためのGWTのウィジェットを選択する
最初に、ウィジェットギャラリーを見て、それぞれのユーザインタフェース要素のためのGWTのウィジェットを選択します。
ウィジェットギャラリーでは、各ウィジェットはデフォルトのスタイルで表示されていますので、それははStockWatcherの最終実装と必ずしも同じように見えるわけではありません。従いまして、現時点では外観について心配しないでください。まず、ウィジェットを動かすところを集中しましょう。後で、あなたはCSSを使ってそれらの外観を変更することになります。これは、チュートリアルの「7.スタイルの適用」のセクションで説明されます。
株式データテーブル
GWTはFlexTableという特殊なテーブルウィジェットを提供しています。 FlexTableウィジェットはリクエストに応じてセルを生成します。これはまさに株式データを入れるためのテーブルに適しています、なぜなら、ユーザは株式銘柄をいくつ追加するかについて、事前に知ることができません。FlexTableを使って実装したテーブルはユーザの株式銘柄追加や削除に応じて、テーブルを引き伸ばしたり、折り畳んたりします。
ボタン
可能な限り、GWTはブラウザのネイティブのユーザーインターフェイス要素を使います。例を挙げると、ボタンウィジェットは例えばdiv要素を使って合成したボタンのように見えるウィジェットではなく、本物のHTML<button>要素になります。つまり、GWTのボタンは異なるブラウザ、そして異なるクライアント側のオペレーティングシステム上で、適切にレンダリングされます。ブラウザのネイティブコントロールを使用する利点は、高速、馴染みやすい、そしてそれはユーザーには最も慣れたものです。また、これらはCSSでスタイルを設定できます。
入力ボックス
GWTは下記のようなユーザー入力が出来るウィジェットを提供します：
- TextBoxウィジェットを、一行のテキストボックス
- PassWordTextBoxウィジェット、入力した文字列が見えないようなテキストボックス
- TextAreaのウィジェットは、複数行のテキストボックス
- SuggestBox、設定済みの文字列を提案してくれるテキストボックス
StockWatcherのユーザは証券コードを一行のテキストボックスで入力しますので、ここはTextBoxのウィジェットで実装します。
ラベル
Buttonウィジェットとは対照的で、LabelウィジェットをHTML形式の<label>要素に変換しません。代わりにそれは標準なHTMLに解釈されない、任意の文字が含む<div>要素に変換されます。<div>要素なのでこれはインライン要素ではなく、ブロック要素になります。
<div class="gwt-Label">最終更新日：2008年10月1日午後1時31分48秒</div>もしあなたはStockWatcherインターフェイスを構築する際に利用するGWTウィジェットのAPIリファレンスを見たいのであれば、下のリンクをクリックしてください(*英語です)。
さらに深く：もしあなたは自分のアプリケーションの機能要件を満たすウィジェットを見つからなかったら、あなたは自分専用のものを作成することができます。複合ウィジェット(composite widgets)やJavaやJavascriptで記述するウィジェットを作成する時、開発者ガイドを見てください。Creating Custom Widgets.(*英語です。)
2.ユーザインタフェース要素をレイアウトするためのGWTパネルを選択する
どのウィジェットを利用するかを知った後、GWTパネルを使ってどのように配置するかを決めましょう。GWTはレイアウトを管理するための数種類のパネルを提供しています。パネルの中に他のパネルをネストすることもできます。これはdiv要素やテーブルを重ねてネストしてウェブページをレイアウトすることと似ています。 StockWatcherでは、垂直方向のパネル内に水平方向のパネルを配置して使用します。
↓StockWatcherの完成イメージ(グーグルのチュートリアルより引用)
↑StockWatcherのデザインイメージ(グーグルのチュートリアルより引用)
Horizontal Panel（水平方向のパネル）
株式銘柄を追加するための二つの要素、つまり証券コードを入れるための入力ボックスと「追加」ボタンは、機能的に密接していますので、これらを視覚的に近い場所に配置したい。これらを隣接に配置するために、TextBoxウィジェットとButtonウィジェットをHorizontalパネルに配置します。 Javaコードでは、addPanelというHorizontalPanelの新しいインスタンスを作成します。
Vertical Panel（垂直方向のパネル）
残りの以下の要素を垂直に配置したい。
- 在庫テーブルのためのFlexTableウィジェット
- 入力ボックスと追加ボタンが含まれるAdd Stockパネル
- タイムスタンプのためのLabelウィジェット
あなたはこれを垂直パネルで処理します。 Javaコードでは、mainPanelというVerticalPanelの新しいインスタンスを作成します。
Root Panel（ルートパネル）
ユーザーインターフェイスに表示されないもう一つのパネルが必要です、Root Panelのことです。Root Panelはあなたのアプリケーションの中の動的要素を収納するためのコンテナです。これはすべてのGWTユーザインタフェースの階層のトップに位置づけられています。Root Panelを利用するためには二つの方法があります、ページのbody全体で生成する方法と、bodyに埋め込まれている特定の要素で生成する方法です。
Root panelはHTMLホストページの中の要素を包む(ラッピング)することで作動します。デフォルト（つまり、もしあなたはホストページにプレースホルダーを追加しなかった場合）、Root panelはbody要素をラッピングします。無論、もしあなたは何らかの要素を命名・追加し、Root panelをコールする時にその要素名をパラメータとして渡せば、それをラッピングすることも可能です。次の二つのセクションにあなたがStockWatcherのためにこれらを行う時、それらがどう動作するかを確認できます。
RootPanel.get() // デフォルトHTMLのbody要素をラッピングする
RootPanel.get("stockList") // "stockList"というidのHTML要素をラッピングする一枚のホストページに複数のRoot Panelを含むことができます。例えば、もしあなたはホストページに複数のGWTウィジェットやパネルを埋め込むのであれば、その何れを他のものから独立して実装し、その何れを専用のRoot Panelにラッピングします。
長くなりましたので、今回も分割します。
次回は「3.アプリケーションをホストページに埋め込む」に続く。