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

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

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

レイアウトの概要・構造

　さて、今回作成するユーザーインターフェイスですが、以下の図のようにウィジェットとパネルで構成することにしました。

図2 ウィジェットとパネルの構成

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

　 前記［GWTプロジェクトの作成］で、すでにjp.littlesoft.gwttest1.client.ImageSearchClientクラスのスケルトンコードが、applicationCreatorによって生成されていますので、これを編集して、目的とするユーザーインターフェイスを完成させていきましょう。

　まず、各ウィジェットのインスタンスを生成し、次にそれぞれの階層関係をメソッドで登録していきます。

※なお、日本語を使用するためには、JavaソースファイルをUTF-8形式で書き出す必要があります。作業を開始する前に、EclipseのJavaソースファイル出力エンコーディングをUTF-8に設定しておいてください。

（中略） public class ImageSearchClient implements EntryPoint {  DockPanel dockPanel = new DockPanel();  HorizontalPanel header = new HorizontalPanel();  HorizontalPanel footer = new HorizontalPanel();  TextBox keyword = new TextBox();  Button searchButton = new Button("検索");  Label label1 = new Label("画像を検索するキーワード ：");  Label label2 = new Label("");  Label label3 = new Label("LittleSoft Corporation");  Grid resultGrid = new Grid(0,4);  ScrollPanel resultGridScroll = new ScrollPanel(resultGrid);  Frame frame = new Frame(); （以下略）

（1） RootPanel

　GWTウィジェットを埋め込む対象となるパネルです。これはアプリケーション内で任意に作成できるオブジェクトではなく、RootPanel.get()という静的メソッドで取り出します。このメソッドで引数を指定しない場合、返されるのはbody要素に対応したオブジェクトとなります。ほとんどのアプリケーションは、そのonModuleLoadメソッドの中で、RootPanelにアクセスし、GWTウィジェットの登録を行います。

　当アプリケーションでは、以下のコードで、RootPanelへDockPanelのインスタンスを登録しています。

public void onModuleLoad() { （中略）   RootPanel.get().add(dockPanel); （中略） }

（2） DockPanel

　RootPanel上に登録されたDockPanelは幅、高さともに“100％”の大きさが指定されます。下記setSizeメソッドの引数が文字列である点に注意してください。GWTウィジェットはsetWidth()、 setHeight()、そしてsetSize() を使用することで、サイズを明示的に設定することが可能ですが、これらのメソッドへの引数は整数ではなく文字列のため、画素（128px）や、センチメートル（3cm）や、割合（100％）など、CSSで有効なあらゆる大きさ指定を設定することができます。

dockPanel.setSize("100%","100%");

　DockPanelは、中央とその周囲の東西南北を指定し、パネルやウィジェットをレイアウトすることができます。当アプリケーションでは中央に検索したページを表示するFrameを置き、北にヘッダーを構成するHorizontalPanel、南にフッターを構成するHorizontalPanel、西に検索結果一覧を表示するScrollPanelを配置しています。

　以下のコードでは、東、西、南、北、そして中央の区画を指定して、dockPanelへ子ウィジェットを登録しています。同時に、各区画の中での子ウィジェットの水平位置、垂直位置が指定されています。

public void onModuleLoad() { （中略）   dockPanel.add(header, DockPanel.NORTH );   dockPanel.setCellHeight(header,"32px");   dockPanel.setCellHorizontalAlignment(header, DockPanel.ALIGN_LEFT);   dockPanel.setCellVerticalAlignment(header, DockPanel.ALIGN_MIDDLE); （中略）   dockPanel.add(footer, DockPanel.SOUTH );   dockPanel.setCellHeight(footer,"32px");   dockPanel.setCellHorizontalAlignment(footer, DockPanel.ALIGN_CENTER);   dockPanel.setCellVerticalAlignment(footer, DockPanel.ALIGN_MIDDLE); （中略）   dockPanel.add(resultGridScroll, DockPanel.WEST );   dockPanel.add(frame, DockPanel.CENTER ); （中略） }

（3） HorizontalPanel

　HorizontalPanelは子ウィジェットを水平に並べて配置することができます。当アプリケーションではヘッダーやフッターの構造を定義するため、DockPanelの北と南に配置されています。ヘッダーには2つのラベル、テキストボックス、ボタンといった子ウィジェットが追加され、水平に自動レイアウトされています。

header.add(label1);   header.add(keyword);   header.add(searchButton);   header.add(label2);

　また、HorizontalPanelの中での子ウィジェットの水平位置は以下のように設定します。

header.setCellVerticalAlignment(label1, HorizontalPanel.ALIGN_MIDDLE);   header.setCellVerticalAlignment(keyword, HorizontalPanel.ALIGN_MIDDLE);   header.setCellVerticalAlignment(searchButton, HorizontalPanel.ALIGN_MIDDLE);   header.setCellVerticalAlignment(label2, HorizontalPanel.ALIGN_MIDDLE);

（4） Label、 TextBox、 Button

　Labelは文字列を表示するウィジェットで、実際には<div>で囲まれたHTMLテキストとなります。TextBox、ButtonはおなじみのHTML入力コンポーネントです。各ウィジェットには個別に大きさ指定をすることも可能です。

keyword.setWidth("240px");

（5） ScrollPanel

　ScrollPanelは、名前のとおり、スクロール付きのパネルで、内部に設定したウィジェットをスクロールさせることができます。当アプリケーションのスクロールする対象はGridです。これは以下のように指定されています。

（中略）   Grid resultGrid = new Grid(0,4);   ScrollPanel resultGridScroll = new ScrollPanel(resultGrid); （中略）   dockPanel.add(resultGridScroll, DockPanel.WEST ); （中略）

（6） Grid

　Girdは<table>を利用したシンプルなレイアウトを提供します。当アプリケーションでは、画像検索結果（通し番号、サムネール画像、要約文）を一覧表示します。ここではいまだ、実際に表示する内容は設定せず、tableタグに関連するプロパティ設定と初期状態を非表示にする設定のみ行っておきます。

（中略） resultGrid.setCellSpacing(0); resultGrid.setCellPadding(0); resultGrid.setVisible(false); （中略）

（7） Frame

　Frameは<iframe>に対応するウィジェットです。当アプリケーションでは、画像検索結果一覧で選択された画像を参照しているHTMLコンテンツを表示させる領域として使用します。

3/5

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プログラマになじみやすい＞