GWTのGUIデザインをマウスで

GWT UI

Javaを使ってウェブアプリが作成できる Google Web Toolkit (GWT)で色々試し中。
GMailやGoogleドキュメントなどのウェブアプリで使われている技術らしい。
Eclipseで開発ができる。

開発言語はJavaで行うがウェブブラウザ上で実行する時はJavaアプレット等ではなく JavaScript で実行する。そのためクライアント側にJavaランタイムなどが不要となり軽くなる。
GWTには JavaからJavaScriptに変換するコンパイラがある。
サーバ側もJavaで記述する。
Java同士で通信できるためRPCでオブジェクトを使ってスマートなやり取りができる。Java以外を使う場合は手間が少し増える。

そもそもJavaScriptとJavaは似て非なるものだが これを使うと JavaをJavaScriptに変換して実行できてしまう。JavaScriptからサーブレットへ通信(RPC)ができる仕組みも当然入っている。

GWTを要約すると
・GMail や Google Docsなどので使われているアプリ開発技術を使える。
・クライアント・サーバどちらも Javaで記述できる。
・クライアント・サーバ間通信は完全に抽象化されていて通信している的なコードは無い。データはオブジェクトでやり取りできる。
・クライアントコードはJavaScriptなのでウェブブラウザ以外ソフト不要。
・複数のウェブブラウザでテストしなくても ほとんど問題なく動く。理想的なクロスプラットフォーム。
・サーバ側はtomcat等のサーブレット環境が必要。Google App Engineを使えばサーバも無料で用意できる。
・Javaの開発環境を使える

これらについては 某ブログに色々書かれているのでそちらを参照

ここから本題:
GWTのGUIデザインをマウスで できないだろうか?
マウスでクリックして ボタン や テキストボックスを配置する Visual Basic の様な開発方法。

Eclipse で 普通のJavaアプリは Visual Editor http://www.eclipse.org/vep/ を使うとマウスでGUIデザインができる。

探してみるとGWT Designer GUI Builder 8.0 を使うとできることが分かった。

http://code.google.com/intl/pt-BR/webtoolkit/tools/download-gwtdesigner.html
どうも 64bit版のEclipseでは動かないみたい。(Eclipesは 32bit版を入れて設定する。)

メニューの ヘルプから 新規ソフトウエアのインストールを選んで 以下のURLを入れてやる。
http://dl.google.com/eclipse/inst/d2gwt/latest/3.6
URL末尾の数字は Eclipseのバージョン番号
これは Eclipse 3.6 (Helios)の場合。
Eclipse 3.5 (Galileo)なら
http://dl.google.com/eclipse/inst/d2gwt/latest/3.5
となる。

インストールできたら
Eclipseのパッケージエクスプローラなどの Javaソース一覧の

public class クラス名 implements EntryPoint {
 public void onModuleLoad() {
 }
}

なJavaソースファイル右クリックして
「アプリケーションから開く」の中の「WindowBuilder Editor」を選ぶと
このページの最初の画像の様なGUI編集ができるウインドウが出てきます。
もちろん ボタンなどを配置するとJavaのソースコードが連動して変更されます。import com.google.gwt.user.client.ui.Button; などの必要な参照設定も自動で追加されます。

ちなみに GWTのEclipse開発プラグインはセットは
http://dl.google.com/eclipse/plugin/3.6
をダウンロードURLにする。
こちらも URL末尾の数字は Eclipseのバージョン番号

comments

コメントを残す