Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:スタートガイド

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のサンプル画像

まずStockWatcherを使ってみて下さい。いくつか証券コード(Symbol)を追加(Add)し、挙動を確認してみてください。

(*操作可能なStockWatcherの完成画面はこちら)

StockWatcherを構築していくプロセスの中で、あなたは、GWTが提供したツールを使って、以下のことを実現するための方法を学びます。

  • お好みのJavaのIDE(統合開発環境)でウェブブラウザアプリケーションを書く
  • GWTの開発モードでJavaをデバッグする
  • あなたのJavaコードを高度な最適なされたJavascriptにクロスコンパイルする。
  • 一種類のコード(Java)だけを保守しながら、複数ブラウザ向きの実装(Javascript)を実現する

GWTを利用したAJAXアプリケーションの開発プロセス

このスタートガイドチュートリアルは典型的なアプリケーション開発サイクルに沿って、8つのセクションに分けられている。何れのセクションも、その前のセクションの成果を基づいています。
(*順番通りでやらないと行けないので、飛ばさないでくださいってことです。)

ここ(スタートガイド)の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 プロジェクトの作成

comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

* Copy This Password *

* Type Or Paste Password Here *

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">