GoogleからJava開発者へのサプライズ！な贈り物、Google Web Toolkit[2]

GWTとYahoo!のAPIを使って画像検索アプリ！

リトルソフト株式会社　長尾寿宏
2006/7/12

ウィジェットの自動リサイズ機能の実装

　内部ウィジェット（左側スクロールパネル、右側内部フレーム）のサイズは、ブラウザ全体のサイズ変更に伴い、自動調整されます。

　この機能をGWTのイベントハンドラーを利用して実現しましょう。まず、ImageSearchClientクラスにWindowResizeListenerを実装します。

public class ImageSearchClient implements EntryPoint , WindowResizeListener { （中略） public void onModuleLoad() { （中略）  Window.addWindowResizeListener(this);  }  public void onWindowResized(int width, int height) { } }

　Windowクラスはブラウザ自体のプロパティ、メソッド、イベントにアクセスするためのクラスです。このクラスに対し、ImageSearchClient自体をWindowResizeListenerとして登録します。

　これにより、ブラウザのサイズが変化する都度、onWindowResizedメソッドが呼ばれるようになります。このメソッドに、両者の幅が4:6程度に設定され、高さはヘッダーフッター領域を除いた残りが設定される処理を実装します。

※左側スクロールパネルはresultGridScroll、右側内部フレームはframeです。

public void onWindowResized(int width, int height) {  resultGridScroll.setPixelSize((int)(width*0.4)-2, (height-66));  frame.setPixelSize((int)(width*0.6)-2, (height-66)); }

ホステッドモードで実行してみる

　ここまで完了したところで、一度ホステッドモードで実行してみましょう。EclipseのパッケージエクスプローラからImageSearchClient-shell.cmdを選択し、ダブルクリックしてください。

　以下のようにホステッドブラウザが起動し、いま作成したばかりのユーザーインターフェイスが表示されるはずです。

画面2 左側スクロールパネルと右側内部フレームのサイズが自動調整できる

　ホステッドブラウザのウィンドウサイズを変更してみてください。左側スクロールパネルと右側内部フレームのサイズが自動調整されます。これは、onWindowResizedメソッドに実装したコードによる動作です。

Swing、AWT、SWTプログラマになじみやすい

　今回は、画像検索アプリケーションのユーザーインターフェイスアウトラインを作成しました。

　この中で、GWTのユーザーインターフェイス構築する作業は、ウィジェットやパネルを組み合わせるシンプルなJavaプログラミングが中心であることを理解していただけたかと思います。これらは、Swing、AWT、SWTを理解しているプログラマにとっては非常になじみやすく、また、Javaにあまり深い知識がないプログラマでも容易に習得できるレベルといえます。

　JavaEEが提供するAPIやフレームワークの複雑さに拒否反応があった開発者の皆さんも、シンプルなGWTであれば、Java言語でのアプリケーション開発になじんでいただけるのではないかと思います。

　さらに、これを切り口とし、Ajaxという新しい可能性を持った領域で、多くのチャンスを得ることができるでしょう。

　今回、解説範囲となったアプリケーションのソースファイル一式はZIP形式でこちらにありますので、よろしければご活用ください。

　次回は、いよいよ「RPCインターフェイスの定義とサービスメソッドの実装」をご紹介します。

---

5/5

JavaScript×HTMLとJavaのシームレスな開発環境を体験してみようへ

INDEX
GWTとYahoo!のAPIを使って画像検索アプリ！
	Page1＜Yahoo!Web検索サービスとGWTを使ってみよう／画像検索アプリケーション／アプリケーションの構成＞
	Page2＜開発環境としてGWT、Eclipse、JDKを準備しよう／YahooアプリケーションIDの取得／／GWTプロジェクトの作成／標準パッケージレイアウト／クライアント側のユーザーインターフェイス作成／ウィジェットとパネル＞
	Page3＜レイアウトの概要・構造（1） RootPanel（2） DockPanel（3） HorizontalPanel（4） Label、 TextBox、 Button（5） ScrollPanel（6） Grid（7） Frame＞
	Page4＜CSSによる外観設定／ホストページの編集＞
	Page5＜ウィジェットの自動リサイズ機能の実装／ホステッドモードで実行してみる／Swing、AWT、SWTプログラマになじみやすい＞

Ajax関連記事