自由で気ままな日々

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の完成画面はこちら)

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のプロジェクトの作成です。

→1.GWT プロジェクトの作成


　　キーワード：　 Eclipse(18) 入門(18) Google App Engine(25) GAE/J(25) GWT(22) Google Web Toolkit(20) チュートリアル(18) 日本語訳(18)
　　KCGブログ内：　 Eclipse(20) 入門(18) Google App Engine(25) GAE/J(25) GWT(22) Google Web Toolkit(20) チュートリアル(18) 日本語訳(18)