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

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


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

　CSSによる外観設定

　ウィジェットとパネルでUIの外観を構築するJavaコーディングはこれで一通り終了です。意外なほどシンプルなコーディングといえるのではないでしょうか？ その理由としては、背景色、境界線、文字色、文字サイズをはじめとする外観に関する設定が、Javaコードから一切行われていないという点が挙げられます。

　GWTウィジェットは視覚なスタイリングをカスケード・スタイル・シートCSS（CSS）に依存しています。GWTウィジェットには、詳細なスタイル属性を設定するメソッドはありませんが、代わって重要な役割を持つのが、setStyleName、addStyleName、removeStyleNameといったCSSスタイル名を操作するためのメソッドです。

　また、各ウィジェットにはデフォルトのスタイル名、例えばボタンの場合“gwt-Button”、ラベルの場合“gwt-Label”といったデフォルトの名前が設定されています。アプリケーション中のボタンやラベルをすべて同様に変更するのであれば、以下のようにCSSファイルに記述することで対応可能です。

.gwt-Button {
font-size: x-small;
font-weight: bold;
color:navy;
padding-left:4px;
padding-right:4px;
}

.gwt-Label {
font-size: x-small;
color:#666699;
padding-left:4px;
}"

　また、以下のようにCSSファイルに独自のスタイルクラスを定義し、

.dock {
background-color:#cccccc;
}
.grid {
border:solid 1px #808080;
width:300px;
}
.scroll {
border:solid 1px #c0c0c0;
background-color:white;
}
.frame {
border:none;
background-color:white;
}

　Javaコード中で、そのスタイルを指定することも可能です。

  //スタイル名の設定
  dockPanel.addStyleName("dock");
  resultGrid.addStyleName("grid");
  resultGridScroll.addStyleName("scroll");
  frame.addStyleName("frame");

　動的なスタイルの変更は、setStyleName()で基本的なスタイルを設定し、addStyleName()でスタイルを変化させ 、removeStyleName()で元に戻すといった使用方法が典型的といえます。

　ホストページの編集

　GWTで作成されたコードを含めたHTMLページをホストページと呼びます。前述［GWTプロジェクトの作成］で、デフォルトのホストページ（src.jp.littlesoft.gwttest1.public.ImageSearchClient.html）が自動的に作成されているはずですので、これを編集して、スタイルシート（ImageSearchClient.css）への参照追加、不要なHTMLコードの掃除を行ってください。

　当アプリケーションで必要なホストページの内容は、以下のとおりとなります。

<html>
 <head>
  <title>画像検索</title>
   <link rel='stylesheet' href='./ImageSearchClient.css' type="text/css">
  <meta name='gwt:module' content='jp.littlesoft.gwttest1.ImageSearchClient'>
 </head>
<body>
 <script language="javascript" src="gwt.js" type="text/javascript"></script>
</body>
</html>

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

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

　この機能を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));
}

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



　Ajax関連記事

Ajaxフレームワーク「Spry」で作る「リンク集2.0」
特集：AdobeのAjaxフレームワーク「Spry」を使ってみよう　アドビのAjaxフレームワーク「Spry」。さっそく簡単なリンク集のサンプルを作成しながら、その機能を探ってみよう
「リッチクライアント ＆ 帳票」フォーラム 2006/6/21

古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2


HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT