JSR-296 デモ: Flickr イメージ検索

これは Swing Application Framework (JSR-296) サポートのデモです。 このデモの間、Flickr web サービスを使い、入力されたキーワードに基づき、画像を検索するアプリケーションを作成します。

注意: このデモにはインターネット接続が必要です!

準備

• NetBeans 6.0 M10 またはそれ以降 が必要です。
• 添付されている FlickrDemoMaterials プロジェクトを開き、それをビルドします。
• ルック & フィールサポートも表示しようとするのでしたら、 nimbus.jar をダウンロードして下さい。

ステップ

アプリケーションシェルの作成と実行

• ImageSearch と名付けた新規デスクトップアプリケーションを作成します。アプリケーションシェルとして 基本アプリケーション を選択します。
• プロジェクトをすぐに実行します - これが完全に動作するアプリケーションシであることを示します。メニューを展開し、About ウィンドウを起動します (それがどのように仕上げられるかは後に示します)。アプリケーションを終了します(アプリケーションフレームワークが永続的ないくつかのセッションデータ、例えばウィンドウのサイズや位置について考慮しているとも必要に応じて言えるだろうでしょう)。

アプリケーションプロパティに関して

• プロジェクトのプロジェクトプロパティダイアログを開き、アプリケーションパネルに移動します。Swing Application Framework にても使用され、実行時にリソースマップを使ってアクセス可能な一般的なアプリケーションのプロパティがあります。プロパティは Web Start でも使用可能です。
• プロパティの編集 - Image Search へタイトルを変更したり、ベンダーを Progressive Hacks Inc, に変えます(. または , の文字は禁じられいます - それらを含むデフォルトのベンダー文字列から取り除く事をしなかったら、 webstart は動作しないでしょう!)。
• プロジェクトプロパティを閉じ、About ボックス (ImageSearchAboutBox) を開いて下さい - アプリケーションプロパティの新しい値がここで表示されているのがわかるでしょう。タイトルラベルを選択し、その text プロパティのプロパティエディタを起動します。アプリケーションリソースを使い、特定のキー名 (Application.title) でどのように値を定義しているか、ここでわかるでしょう。値は resources サブパッケージ内の ImageSearchApp.properties ファイルに設定されています。その上、ここでタイトルを変更する事ができ、そしてそれはプロパティファイル内に反映されます。

内容の作成

• メインフォームの ImageSearchView へ戻り、レイアウトの作成を開始します。
• 横一列にラベル、テキストフィールド、ボタンを追加します。
• ラベルのテキストを 'Find Image:' に変更します。
• テキストフィールドのテキストを削除します。テキストフィールドの変数名を、例えば keywordField のように変更して下さい(後に必要になります)。
• その他のコンポーネントの下に画像を表示するためのラベルを追加し、フォームの残りの部分までそれをリサイズします。そのラベルのテキストを削除し、 horizontalAlignment プロパティを CENTER に設定します。変数名を imageLabel へ変更します。

アクションに関して

• ボタンのテキストを設定する代わりに、それを右クリックし、アクションを設定を選択します。
• "アクション" コンボボックスから "新規アクションの作成..." を選択します。
• "アクションのメソッド" フィールドへ searchImage と入力します(アクションを処理するメソッドの名前になります)。
• "テキスト" フィールドに "Search" と入力します(ボタンに表示されるテキストです)。
• 小さいアイコンをクリックすると、アイコン選択ダイアログが表示されます。"プロジェクトにインポート..." ボタンをクリックします。FlickrDemoMaterials プロジェクトを表示し、 icons パッケージの search.png イメージを選択します。完了を押し、プロジェクトへイメージを移し、了解を押してアイコン選択ダイアログを閉じます。
• 了解を押してアクションエディタを閉じ、新規アクションを作成、割り当てを行います。
• IDE を切り替え、新しい searchImage メソッドへコーディングします。@Action アノテーションでどのように注釈付けされているかがわかります - この方法はアプリケーションフレームワークがこのメソッドはアクションを表すという事を知ります。現在、ボタンがアクションやテキストを持っているかを確認するため、デザインへ素早く切り替え、そしてコードへ戻る事ができます。
• Flickr で検索を実行するにはいくらかのコードが必要です。開いている FlickrDemoMaterials プロジェクトへ移動し、 Flickr.java を選択、そしてそれを画像検索プロジェクトへコピーします(クラスパッケージが適切に更新されるよう、リファクタリングコピーオプションをしようして下さい)。
• 新しい searchImage メソッドへ戻り、下記コードを書いて下さい:

String keyword = keywordField.getText();
Icon result = Flickr.getInstance().search(keyword);
imageLabel.setIcon(result);

• デザインへ戻り、テキストフィールドを選択、その action プロパティ(その他プロパティの中にあります)へ移り、新しい searchImage アクションをコンボボックスから選択します。これはテキストフィールド内でエンターキーを押した際に、ボタンを押した時と同様のアクションが起動する事を可能にします。
• アプリケーションを実行、いくつかのキーワードを入力してボタンを押して下さい。しばらくして、見つかった画像が表示されるでしょう。検索するために異なるキーワードを試す事にかなりの時間を使う事もあるでしょう。何が表示されるかはわかりません。人々はある理由のためにそのように見えます...

タスクに関して

• 検索している間は UI はブロックされ、再描画されず、検索が終わるのを待ちます。バックグランドで実行するよう検索を書き換えます (EDT を無効にします)。アプリケーションフレームワークはこれをすごく簡単にします。
• ウィンドウ | その他 | アプリケーションアクションと移動します。(デモ目的のため、このビューは前もって準備されており、開いたときは下部に最小化されています。注意: 初めて開いた際にアクションが表示されない場合、フォームをクリックして戻って下さい。それはバグです)。
• searchImage アクションをリストから選択し、 "アクションを編集" を押します。
• "バックグランドタスク" チェックボックスをチェックし、了解を押します。
• アクションリストの "ソースを表示" ボタンを押します( searchImage アクションが選択されている状態にて)。コードに切り替わります。searchImage メソッドが Task を返すようになり、タスクを実装する生成された新たなクラスがあります。このタスクは3ステージにて扱います (セットアップ、実行フェーズ、結果表示)。初めにすべてのコードはコンストラクタにコピーされます - コードを適切に分割するかはユーザー次第です。
• ソースコードを編集します:
  • String keyword を private final フィールドとして定義し、 SearchImageTask のコンストラクタでセットされるようにします。
  • SearchImageTask クラスの型パラメータを <Object, Void> から <Icon, Void> へ変更します。
  • doInBackground メソッドによって返される型を Icon へ変更します。ここの flickr サービスを起動するコードをコピーし、見つかったアイコンを返します :

return Flickr.getInstance().search(keyword);

• • succeeded メソッドのパラメーターの型を Icon へ変更します。イメージラベルに結果を設定するコードをコピーします。

imageLabel.setIcon(result);

• 再度、アプリケーションを実行し、検索を行います。これで検索はバックグラウンドにて実行されます。プログレスバーやアイコンアニメーションが自動的に表示される事に気付くでしょう。UI は常に反応します。

ブロッキング UI (オプション)

• 任意でバックグラウンドタスクが実行時に様々な方法で UI をどのようにブロックするかを示す事ができます。例えば、キャンセルボタンのあるモーダルダイアログを表示します:
  • アプリケーションアクションウィンドウ、またはアクションプロパティエディタのいずれかによって、 searchImage アクションの編集を行います。
  • "詳細" タブへ切り替え、 "ブロック化タイプ" をAPPLICATION に設定します。
  • タイトルとして何かのテキストを入力します。例: Searching...
  • ダイアログメッセージとして何かのテキストを入力します。例: Searching the image, please wait...
  • アクションエディタを閉じ、アプリケーションを実行、それを示すために検索を行います。

ルック & フィール (これは JDK 6 で実行している場合にのみ動作します)

• 説明するその他に潜在的なものとしては簡単なルック & フィールのセットアップです:
  • プロジェクトプロパティに遷移し、アプリケーション -> デスクトップアプリケーションと選択します。
  • ルック & フィールコンボボックスを開くとシステム、または Java のデフォルトルック & フィールを簡単に選択できることがわかります。
  • "参照..." ボタンを押し、 nimbus.jar ファイルを参照します。JAR がプロジェクトクラスパスに追加されていれば、ルック & フィールクラスは自動的に検索され、設定します。
  • プロジェクトを実行すると新しいルック & フィールで動作するそれが表示されます。
  • ImageSearchApp.properties ファイルの1つのプロパティとしてルック & フィール名が表示される事に注意して下さい。

Web Start

• 説明する最後の事柄は Web Start の統合です。プロジェクトプロパティに遷移し、アプリケーション -> Web Start カテゴリと選択します。
• "Web Start を有効" と "自己署名" のチェックボックスをチェックします。
• アプリケーションを実行し、Web Start としてどのように動作するか確認します。

• 日本語訳 : Junji Takakura
• 英文 (翻訳したバージョン: 40)