Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト
Google Web Toolkit(GWT) 2.0の入門チュートリアル：スタート ガイド
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：2.アプリケーションの設計
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：6.GWT アプリケーションのデバッグ
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-4
Google Web Toolkit(GWT) 2.0の入門チュートリアル：8.GWTアプリケーションのコンパイル
ここ最近ほぼ毎日Google App Engine for Java(GAE/J)と
GWT(Google Web Toolkit)を遊んでいます。
色々触って少しずつ分かってきましたが、改めて思ったのは、
「GWTの部分はちょっと引っ掛かりやすい…」ことですね。
一応グーグル様が用意したGWTのチュートリアル(英語)は一通り適当にやりましたが、
改めて内容を再確認しようじゃないか〜っと思いました。
それならば、ついでに勉強のメモを残そう…っと思ったワケですね。
GWTのチュートリアルは非常によく出来ていますが、
残念ながら現在は公式の日本語訳がありません。
それならば。GWTのチュートリアルを勉強しつつ、
内容確認のため、日本語訳もやっていこうかな〜っと思いました。
始まる前に、ちょっといくつか断っときます。
私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。
GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。
日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*…)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。
最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。
GWTを始まる前に、まず環境を整える必要があります。
幸い、GWTの導入については日本語訳されていますので、そちらを参照してください。
→スタート ガイド – クイック スタート -Google Web Toolkit
Java SDKやJava IDEは自分でどうにかしてください…。
というわけで、今日は第一弾、
「Getting Started(スタート ガイド)」から行きます。
→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/gettingstarted.html
スタート ガイド
はじめに
このチュートリアルでは、あなたは簡単なAJAXアプリケーション、「StockWatcher(株式ウォッチャー)」を書きます。
まずStockWatcherを使ってみて下さい。いくつか証券コード(Symbol)を追加(Add)し、挙動を確認してみてください。
StockWatcherを構築していくプロセスの中で、あなたは、GWTが提供したツールを使って、以下のことを実現するための方法を学びます。
- お好みのJavaのIDE(統合開発環境)でウェブブラウザアプリケーションを書く
- GWTの開発モードでJavaをデバッグする
- あなたのJavaコードを高度な最適なされたJavascriptにクロスコンパイルする。
- 一種類のコード(Java)だけを保守しながら、複数ブラウザ向きの実装(Javascript)を実現する
GWTを利用したAJAXアプリケーションの開発プロセス
このスタートガイドチュートリアルは典型的なアプリケーション開発サイクルに沿って、８つのセクションに分けられている。何れのセクションも、その前のセクションの成果を基づいています。
(*順番通りでやらないと行けないので、飛ばさないでくださいってことです。)
ここ(スタートガイド)のStockWaterの基本的な実装では、すべての機能はクライアントサイドのものです。サーバーサイトのコーティングやクライアントサーバー間の通信については、他のチュートリアルに含まれています。
各セクションの内容は以下の通り。
- やること
- 学習のコンセプト
- 利用するGWTのツールとAPI
- 1.GWT プロジェクトの作成
- 始めるためのファイルやディレクトリの生成
- Eclipse用のGoogleプラグイン、コマンドラインのGWTツール、webAppCreator(*多分訳しません)、開発モード
- 2.アプリケーションの設計
- 機能要件の定義、制約と実装の戦略
- 言語の制約
- 3.ユーザー インターフェースの構築
- ビジュアルデザインとユーザインタフェースコンポネントのレイアウト
- GWT widgets(ウィジェット)とパネル、ルートパネル
- 4.クライアントのイベントの管理
- マウスとキーボードのハンドリング
- ClickHandler(クリックハンドラー)とKeyPressHandler(キープレスハンドラー)インターフェース
- 5.クライアント機能のコーディング
- 一種類のコードだけを保守しながら、複数ブラウザ向きの実装を実現する。リファクタリングやコード生成のJava IDEの機能を利用。
- いくつかのGWTメソッド
- 6.GWT アプリケーションのデバッグ
- JavaScriptにコンパイルする前にJavaコードをデバッグする。アプリケーションを開発モードで実行しながら、Java IDEのデバッグツールを利用する
- 開発モード
- 7.スタイルの適用
- アプリケーションに視覚スタイルを追加する。CSS(スタイルシート)の中に視覚スタイルを定義する。プログラムでHTML要素にクラス属性を設定する。スタイルをダイナミックに変える。これらはイメージファイルのような静的要素も含む。
- GWTモジュール、GWTテーマ、アプリケーションのスタイルシート、GWTメソッド:addStyleName,addStyleDependentName,setStyleName、リソースの自動追加
- 8.GWT アプリケーションのコンパイル
- あなたのクライアントサイドのJavaコードをJavaScriptにコンパイルする。製品モードでテストする。遅延バインディングのメリットを学習する。
- GWTコンパイラ
次回のチュートリアル
もしあなたは開発環境（Java SDK,EclipseなどのJava IDE、最新版のGoogle Web Toolkit）を揃ってないのであれば、まずはそれを整えましょう。
次はGWTのプロジェクトの作成です。