GWT-Extを使ってみる

GWT-Extは、GWTWidgetとしてExt.JSのUIを使えるようにしてくれるライブラリです。素のGWTだと見た目がちょっとショボめですが、GWT-Extを使うと簡単にきれいなUIが作れます。GWT-Extを使えるようにするまでの手順は前に↓に書いたEclipseプラグインを使ってGWTのプロジェクトができているとして、
http://d.hatena.ne.jp/w650/20080322/p1
以下の様になります。ほとんどUsing Eclips- GWT-Extのまんまですが。。

  1. GWT-Extをダウンロードして"gwtext.jar"をビルドパスに追加します。
  2. Ext.JSをダウンロードして、プロジェクトのpublicパッケージに"js/ext"というフォルダを作り、その中に以下のファイルおよびフォルダをコピーします。
    • ext-all.js
    • ext-all-debug.js
    • ext-core.js
    • ext-core-debug.js
    • \adapter
    • \resources
  3. モジュールを定義するXMLファイル(*.gwt.xml)に以下の記述を追加します。
<inherits name="com.gwtext.GwtExt"/>
 〜(略)〜
<stylesheet src="js/ext/resources/css/ext-all.css" />
<script src="js/ext/adapter/ext/ext-base.js" />
<script src="js/ext/ext-all.js" />

思ったより簡単に使えました。
あとは、JavadocShowcase Demosを見ながらいろいろ使ってみるのみです。Showcase Demosは、デモ画面上でサンプルのソースコードを見られるのでかなり参考になりますよ。