GoogleからJava開発者へのサプライズ！な贈り物、Google Web Toolkit[2]
GWTとYahoo!のAPIを使って画像検索アプリ！
リトルソフト株式会社 長尾寿宏
2006/7/12
 |
作成の手順 |
アプリケーション作成は以下のステップで進めます。2と3は次回の連載で解説していきます。
1. クライアント側のユーザーインターフェイス作成→今回の記事で紹介します
クライアント側のユーザーインターフェイスの外観をGWTウィジェットとパネルを使って実装します。また、CSSを利用したスタイル設定、ウィジェット自動リサイズ機能の実装を行います。
2. RPCインターフェイスの定義とサービスメソッドの実装（参照：JavaScript×HTMLとJavaのシームレスな開発環境を体験してみよう）
GWTのRPCを利用する際、必要となるクラスとインターフェイスを定義します。サービスメソッドにYahoo!画像検索Webサービスへの問い合わせを行い、検索結果XMLをSAXParserで解析する処理を実装します。
3. クライアント側の機能詳細の実装（参照：JavaScript×HTMLとJavaのシームレスな開発環境を体験してみよう）
クライアント側の詳細機能を実装し、アプリケーションを完成させます。
- 一覧で選択されている項目の背景色が変化する
- 一覧スクロールに伴い、検索結果の追加取得と読み込みが非同期に行われる
|
開発環境としてGWT、Eclipse、JDKを準備しよう |
アプリケーションの開発を始めるに当たり、必要な環境をそろえましょう。GWTはVersion 1.0.21 Windows版、EclipseはVersion 3.1.2、そしてJDKは5.0を利用します。
|
YahooアプリケーションIDの取得 |
Yahoo!画像検索Webサービスを利用するには、Yahoo!デベロッパーネットワークでアプリケーションIDを登録し、そのアプリケーションIDをリクエストURLのパラメータに含める必要があります。
Yahoo!画像検索WebサービスへのサンプルリクエストURLでは、“appid=YahooDemo”がアプリケーションIDです。
|
GWTプロジェクトの作成 |
さて、次にGWTプロジェクトを作成しましょう。今回作成するプロジェクト名およびアプリケーションクラス名は以下のとおりとします。
・プロジェクト名 ： GWTTest1 |
GWTにはprojectCreator、applicationCreatorというコマンドラインツールが含まれていますので、これらを使用してプロジェクト初期ディレクトリやファイルのセットアップを行います。
これらの詳細な手順はJavaをAjaxに変換するグーグルのGWTを使ってみようの「マイプロジェクトの作成」をご覧ください。
作成が完了したらEclipseへインポートしておいてください。
|
標準パッケージレイアウト |
なお、GWTには標準パッケージレイアウトが定められています。今回作成する“jp.littlesoft.gwttest1”というパッケージを例にすると、プロジェクト全体としては、以下のようなパッケージを作成し、各種ソースファイルをレイアウトすることになります。
| jp/littlesoft/gwttest1/ プロジェクトのルートパッケージ。このルートには"モジュールxml"と呼ばれるGWT構成情報ファイルを配置します。 jp/littlesoft/gwttest1/client 当パッケージあるいは当パッケージのサブパッケージに、クライアント側Javaソース、クラスファイルを配置します。 jp/littlesoft/gwttest1/server 当パッケージあるいは当パッケージのサブパッケージに、サーバ側Javaソース、クラスファイルを配置します。 jp/littlesoft/gwttest1/public |
プロジェクト全体で使用される静的リソース（HTML、CSS、画像etc.）を配置します。Webモードへコンパイルすると、このパッケージに置かれたリソースは出力先にコピーされます。
|
クライアント側のユーザーインターフェイス作成 |
準備作業が完了したところで、クライアント側のユーザーインターフェイス作成に着手します。
GWTにおけるユーザーインターフェイス構築の重要ポイントをチェックしながら作業を進めていきたいと思います。
|
ウィジェットとパネル |
GWTのユーザーインターフェイス構成要素はウィジェットとパネルに大別されます。ウィジェットとはテキストボックス、ボタン、リスト、メニュー、あるいはツリーといったGUIコンポーネントです。パネルは、ウィジェットを見栄えよくレイアウトする機能を持ったコンテナであり、Dockパネル、水平パネル、垂直パネルといったバリエーションが存在します。
GWTアプリケーションは、いくつかのパネルを組み合わせ、さらにその中にウィジェットをレイアウトすることでユーザーインターフェイス全体を構成します。
このような構成は Swingや SWTといったユーザーインターフェイスフレームワークに非常に類似したものですが、GWTは、それ自体がGUIをグラフィックスとして描画するのではなく、DOMツリーの中で、動的にHTMLを作成することで描画されるという点が大きく異なります。GWTのウィジェットやパネルはDOM要素をラップしているクラスであり、また、これらの階層関係はDOMツリーそのものであるのです。
DOM インターフェイスを使用し、それを直接操作することも可能ですが、GWTが提供するウィジェットやパネルの階層構造からJavaクラスのメソッドを利用して操作する方が、クロスブラウザに起因する厄介な部分が解決済みなので、より簡単で安心な方法といえるでしょう。
 |
2/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 |
|
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
