corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

>> Visual Web Pack のほかのドキュメント

AJAX 格付けコンポーネントの使用

執筆: Visual Web Pack チュートリアルチーム
2007 年 5 月 [Revision number: V5.5.1-1]    

このチュートリアルでは、格付け (Rating) コンポーネントを使用して、ユーザーが品目の格付けを割り当てられるようにします。このチュートリアルでは、品目に対するユーザーの格付け、投票数、および格付けの平均値を保存する、RatingData クラスの実装を説明します。デフォルトでは、格付けコンポーネントは星 5 つの列で表示されますが、チュートリアルに示されるように、コンポーネントの外観およびテキストはカスタマイズできます。

このチュートリアルで構築するアプリケーションは、品目の格付けができる実際のアプリケーションをシミュレートします。アプリケーションの最初のページには、ユーザーが閲覧して格付けする対象となる本を表示します。2 ページ目には、最初のページで選択した本の詳細を表示します。

目次

 
-  RatingData クラスのプロジェクトへの追加
-  Session Bean へのプロパティーの追加
-  ホームページの作成
-  格付けコンポーネントの操作
-  アプリケーションのテスト
-  その他の可能な操作: 格付けする 2 つ目の品目の追加
-  その他の可能な操作: 格付けの平均値とユーザー格付けの分離
  このページの情報は NetBeans 5.5 および 5.5.1 の Visual Web Pack が対象です。

このチュートリアルで使用しているファイル
» RatingData.java
» fieldguide.png
» corejsfbook.png


このチュートリアルでは、次のテクノロジとリソースを使用します。

JavaServer Faces コンポーネント /
Java EE プラットフォーム		 動作可能Java EE 5* の場合、1.2
動作可能J2EE 1.4 の場合、1.1
Travel データベース 任意任意
BluePrints AJAX コンポーネントライブラリ 必須必須

* このチュートリアルの公開時点で Java EE 5 をサポートしていたのは Sun Java System Application Server だけです。

このチュートリアルは、Sun Java System Application Server PE 9.0 Update Release 1 と Tomcat 5.5.17 を使用することを想定しています。別のサーバーを使用している場合は、「リリースノート」と「FAQ」(または「日本語 FAQ」) で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

RatingData クラスのプロジェクトへの追加

このチュートリアルでは、まず RatingData クラスの実装をプロジェクトに追加します。このクラスには、格付けコンポーネントのテキストに関連するプロパティーを変更する、ロジックが含まれます。このチュートリアルを終えたあと、RatingData クラスファイルを独自のアプリケーションで使用するためにカスタマイズできます。
  1. RatingData.java をファイルシステムにダウンロードします。
  2. AJAX コンポーネントをダウンロードしてインポートします (まだ行なっていない場合)。
  3. 新しい Visual Web アプリケーションプロジェクトを「RatingExample」という名前で作成します。

  4. 「プロジェクト」ウィンドウで、「RatingExample」>「コンポーネントライブラリ」ノードを右クリックし、ポップアップメニューから「コンポーネントライブラリを追加」を選択します。「BluePrints AJAX コンポーネント」を選択し、「コンポーネントライブラリを追加」をクリックします。

    IDE は指定されたコンポーネントライブラリをプロジェクトにコピーし、「パレット」にそのコンポーネントおよびサポートする Bean を追加します。

  5. メインメニューから「ファイル」>「既存項目を追加」>「Java ソース」を選択します。「既存項目を追加」ダイアログで、RatingData.java に移動して選択し、「追加」をクリックします。

    IDE により、RatingData クラスが ratingexample パッケージに追加されます。
  6. メインメニューから「構築」>「主プロジェクトを構築」を選択して、RatingData クラスをコンパイルします。

  7. デザイン時に RatingData を有効にするために、RatingExample プロジェクトを一度閉じて、再度開きます。

    この手順を行わないと、このチュートリアルの最後の節で、格付けコンポーネントのプロパティーを currentRatingData にバインドするときにエラーが発生します。
  8. 主プロジェクトになっていない場合は、「プロジェクト」ウィンドウで RatingExample を右クリックして「主プロジェクトとして設定」を選択します。

Session Bean へのプロパティーの追加

次に Session Bean に 4 つのプロパティーを追加します。これらのプロパティーは、アプリケーションの各品目の格付けデータおよびその他のデータを格納します。アプリケーションには格付け対象の品目が複数あるので、マップオブジェクトを使用してデータを保持します。

  1. 開いていない場合は、ビジュアルデザイナーで Page1 を開きます。
  2. 「アウトライン」ウィンドウで「SessionBean1」ノードを右クリックして、「追加」>「プロパティー」を選択します。

  3. ｢新規プロパティーパターン｣ダイアログで、｢名前｣フィールドに｢ratingMap｣を入力し、｢型｣フィールドに ｢HashMap｣と入力します。モードを「読み取り専用」に設定し、「了解」をクリックします。

    ratingMap プロパティーは各品目の格付けデータを格納します。
  4. 「アウトライン」ウィンドウで、「SessionBean1」ノードをダブルクリックして Java エディタで SessionBean1.java を開きます。エディタ内にカーソルを置き、Alt-Shift-F キーを押して自動的に次のインポート文を追加し、HashMap をエラーのない状態に修正します。 
    import java.util.HashMap;

  5. ビジュアルデザイナーの Page 1 に戻って、「アウトライン」ウィンドウが表示されるようにします。Session Bean に 2 つ目のプロパティーを追加します。｢新規プロパティーパターン｣ダイアログで、名前に「currentRatingData」、型に「RatingData」と入力します。デフォルトモードの「読み取り/書き込み」は変更しないでください。「了解」をクリックします。

    このプロパティーは、現在の品目の格付けデータを格納します。このアプリケーションは 2 ページ構成のアプリケーションで、「現在の」とは、2 ページ目に表示される品目を意味します。

  6. Session Bean に 3 つ目のプロパティーを作成します。｢新規プロパティーパターン｣ダイアログで、名前に「itemMap」、型に「HashMap」と入力します。モードを「読み取り専用」に設定し、「了解」をクリックします。

    「itemMap」プロパティーは、各品目の格付けには関連しないデータ、ここでは、画像の URL および品目の説明を格納します。

  7. Session Bean に 4 つ目のプロパティーを追加します。｢新規プロパティーパターン｣ダイアログで、名前を「currentItemData」にし、String 配列 (String[]) にして、モードをデフォルト値「読み取り/書き込み」のままにします。「了解」をクリックします。

    String 配列のプロパティーは、現在の品目の画像 URL および説明を保持します。
  8. 「SessionBean1.java」を開き、「 SessionBean1.init」メソッドに次の太字で表示されたコードを追加します。

    コード例 1:SessionBean1 の init メソッド 
         public void init() {
             // Perform initializations inherited from our superclass
             super.init();
             // Perform application initialization that must complete
             // *before* managed components are initialized
             // TODO - add your own initialiation code here

         ratingMap = new HashMap();
        itemMap = new HashMap();
        String[] itemIds = {"fieldGuide", "coreFaces"};
        String[] hoverTexts = {"I hate it", "I dislike it", "It's OK",
            "I like it", "I love it"};
        for (int i = 0; i < itemIds.length; i++) {
            RatingData ratingData = new RatingData(hoverTexts);
            ratingMap.put(itemIds[i], ratingData);
            if (i == 0) {
                currentRatingData = ratingData;
            }
        }
        currentItemData = new String[]{"/resources/fieldguide.png",
           "The definitive guide to NetBeans IDE."};
        itemMap.put(itemIds[0], currentItemData);
        itemMap.put(itemIds[1], new String[] {"/resources/corejsfbook.png",
            "この時間節約テクノロジーを習得したい人には必要な 1 冊。"});
         }

    このコードは、Session Bean プロパティーを生成します。まず、コードは ratingMap および itemMap を初期化します。そのあと、for ループそ使用して、RatingData インスタンスを作成し、最初の RatingData インスタンスを「現在の」格付けデータとして設定して、それらを ratingMap に配置します。

    RatingData インスタンスはコンポーネントの星にマウスを置いたときに表示される hoverTexts で構築されています。for ループのあと、品目データ (画像 URL および説明) を保持するために String 配列を作成し、最初の String 配列を現在の品目データ (currentItemData) として設定します。

ホームページの作成

ここでは、次の図に示すように、ホームページを作成して、格付けコンポーネントおよびその他の基本的なコンポーネントを追加します。このページから、ユーザーは本の格付けをして、そのあと、その本の格付けの平均値とともにユーザーによる格付けを表示することができます。

図 1: 格付けコンポーネントのページデザイン 図 1: 格付けコンポーネントのページデザイン
  1. ファイルシステムに fieldguide.png をダウンロードします (まだ行なっていない場合)。
  2. 「Page1」タブをクリックしてビジュアルデザイナーに戻ります。
  3. 「パレット」の「基本」セクションから、「ラベル」コンポーネントをページの上へドラッグし、「本の閲覧」と入力して Enter キーを押します。「プロパティー」ウィンドウで、ラベルの「id」プロパティーを「headerLabel」に、「labelLevel」を 「強 (1)」 に設定します。
  4. 「画像ハイパーリンク」コンポーネントをページの上にドラッグします。「id」プロパティーを fieldGuideLink に設定し、「text」プロパティーから「画像ハイパーリンク」という語を削除します。

  5. 「画像ハイパーリンク」を右クリックし、ポップアップメニューから「画像を設定」を選択します。fieldguide.png に移動して選択し、「了解」をクリックします。

    本『NetBeans IDE Field Guide』の画像がページに表示されます。ファイルはプロジェクトの web/resources サブディレクトリにもコピーされます。

  6. 「パレット」の「BluePrints AJAX Components」セクションから、ページに「Rating」コンポーネントをドラッグします。コンポーネントの「id」プロパティーを「fieldGuideRating」に設定します。

    上記図 1 で示すように、デフォルトでは格付けコンポーネントは星 5 つの列で表示されます。

  7. fieldGuideLink 画像ハイパーリンクをダブルクリックして、fieldGuideLink_action() メソッドの本体を次のコード (太字部分) に置き換えます。

    return null; が削除され、return "Detail"; に置き換えられていることを確認します。

    コード例 2:fieldGuideLink_action メソッド 
    public String fieldGuideLink_action() {
        SessionBean1 sessionBean = getSessionBean1();
        sessionBean.setCurrentItemData
        ((String[])sessionBean.getItemMap().get("fieldGuide"));
        sessionBean.setCurrentRatingData
        ((RatingData)sessionBean.getRatingMap().get("fieldGuide"));
        return "Detail";
         }

    このコードは fieldGuide を現在の品目として設定します。具体的には、コードは Session Bean の「currentItemData」プロパティーおよび「currentRatingData」プロパティーを設定します。ユーザーが画像ハイパーリンクをクリックすると、このメソッドは結果の Detail を返し、これにより 2 ページ目が開いて、現在の品目のデータを表示します。Detail ページは、あとでプロジェクトに追加します。

格付けコンポーネントの操作

格付けコンポーネントの機能の一つは、次の手順で説明するように、コンポーネントを作成するコントロールやテキストをカスタマイズできることです。

  1. 「デザイン」ボタンをクリックして、ビジュアルデザイナーで Page1 をもう一度開きます。格付けコンポーネントを選択し、「プロパティー」ウィンドウの「Apperance」セクションの下の、次のプロパティーを設定してコンポーネントを構成します。

    Appearance プロパティー
    includeClear
    チェックボックスを選択 True
    includeModeToggle
    チェックボックスを選択 True
    includeNotInterested
    チェックボックスを選択 True

    各プロパティーを True に設定したので、IDE によって格付けコンポーネントにコントロールが追加されます。最終結果が次の図に表示されます。

    図 2: カスタマイズした格付けコンポーネント 図 2: カスタマイズした格付けコンポーネント

    • 無関心アイコン コントロール (無関心コントロール) は、ユーザーが品目に興味がないことを示すのに使用されます。
    • 消去アイコン コントロール (消去コントロール) は、ユーザーによる格付けを消去するのに使用されます。
    • ユーザーモードアイコン コントロールはモードを切り替えるコントロールです。格付けコンポーネントはユーザーによって評価された格付けを表示するか、品目の格付けの平均値を表示するかを切り替えられます。

  2. 「プロパティー」ウィンドウの「Data」セクションにある次のプロパティーを設定します。場合によっては、コンポーネントのプロパティーを ratingMap または itemMap のエントリにバインドします。

    次に示すようなバインド表現を「プロパティー」ウィンドウに直接入力する必要があります。これらのバインドは「プロパティーのバインド」ダイアログでは使用できません。これは、「プロパティーのバインド」ダイアログが Map オブジェクトの項目を表示しないためです。

    Data プロパティー
    averageGrade
    #{SessionBean1.ratingMap.fieldGuide.averageGrade}
    averageModeHoverText
    この品目の格付けの平均値を表示
    averageModeText
    #{SessionBean1.ratingMap.fieldGuide.averageModeText}
    clearHoverText
    自分の格付けを消去
    grade
    #{SessionBean1.ratingMap.fieldGuide.grade}
    hoverTexts
    #{SessionBean1.ratingMap.fieldGuide.hoverTexts}
    inAverageMode
    チェックボックスを選択 True
    normalModeHoverText
    この品目の自分の格付けを表示
    normalModeText
    #{SessionBean1.ratingMap.fieldGuide.normalModeText}
    notInterestedHoverText
    この品目には興味がない

    • 「grade」プロパティーは、ユーザーが品目を評価した格付け (星の数) です。一方、「averageGrade」プロパティーは、品目を評価したユーザー全体の平均値です。
    • Text という語を含むプロパティーは、コンポーネントのコントロールにマウスを置いたり、離したりするときに表示されるテキストを設定します。テキストプロパティーは、ユーザーモード用 (通常) と平均値モード用に分かれています。
    • 「inAverageMode」プロパティーは、True のとき、コンポーネントの初期表示を平均値モードに設定します。

    プロパティーについての詳細は、「プロパティー」ウィンドウでプロパティー名にマウスを置いて表示されるツールチップを参照します。

アプリケーションのテスト

  1. プロジェクトを実行します。平均値モードアイコン コントロールおよび次のテキストで示されるように、Web ブラウザに、格付けコンポーネントを使用して格付けの平均値を表示したアプリケーションが開きます。 
    Average rating:0 (from 0 votes)
    コンポーネント上にマウスを移動すると、各コントロールを説明するテキストが変化します。コンポーネントからマウスを離すと、格付けの平均値が再度表示されます。

  2. 『FIELD GUIDE』を 4 つ星に格付けします。コンポーネントは格付けを受け付け、ユーザーモードアイコン コントロールで示されるように、ユーザーモード (通常) に切り替わります。

    コンポーネントからマウスを離すと、「Saved: I like it」というテキストが表示され、これはユーザーの格付けが保存されたことを示します。
  3. 考えを変えて、『FIELD GUIDE』を 5 つ星に格付けします。今度は、テキストは「Saved: I love it」となります。

  4. マウスを ユーザーモードアイコン コントロールに置いてコントロールが 平均値モードアイコン に変わったことを確認し、コントロールをクリックします。

    コントロールからマウスを離すと、「Average rating: 4.5 (from 2 votes)」が表示され、格付けの平均値が 4.5 に変わりました。

  5. 消去コントロールまたは無関心コントロールをクリックして、コンポーネントについてさらに学習します。

    この時点では、『FIELD GUIDE』の画像をクリックしても何も起こりません。あとで、このリンクに対するコードを実装します。

その他の可能な操作:格付けする 2 つ目の品目の追加

前の手順で説明したプロジェクトは、格付けコンポーネントの操作方法やカスタマイズ方法の紹介をしています。実際のアプリケーションには、通常、格付け対象の品目が複数あります。ここでは、次の図で示すように、ページに 2 冊目の本および格付けコンポーネントを追加します。

図 3: ページに 2 品目
図 3: ページに 2 品目
  1. ファイルシステムに corejsfbook.png をダウンロードします (まだ行なっていない場合)。
  2. 「画像ハイパーリンク」コンポーネントを Page1 にドラッグし、格付けコンポーネントの下にドロップします。「id」プロパティーを 「coreFacesLink」に設定し、「text」プロパティーから「画像ハイパーリンク」という語を削除します。

  3. 「URL」プロパティーの省略符号ボタン (...) をクリックします。corejsfbook.png - 画像 URL ダイアログで、corejsfbook.png に移動して選択します。「了解」をクリックします。

    本『CORE JAVA SERVER FACES』の画像がページに表示されます。ファイルはプロジェクトの web/resources サブディレクトリにもコピーされます。

  4. 本『FIELD GUIDE』の格付けコンポーネントをコピーして、画像『Core JAVA SERVER FACES』の下にコピーを貼り付けます。コピーした格付けコンポーネントの「id」プロパティーを「coreFacesRating」に設定します。

  5. プロパティーウィンドウの「Data」セクションで、バインドしたプロパティーの式を編集し、fieldGuide キーの代わりに coreFaces キーをプロパティーに含めます。

    注: 「プロパティー」ウィンドウにプロパティーの設定が表示されない場合、プロパティーに関連する省略符号ボタン (...) をクリックし、ポップアップウィンドウで「キャンセル」をクリックします。「プロパティー」ウィンドウに適切なテキストが表示されるはずです。ダイアログボックスでプロパティーを編集しないでください。

  6. coreFacesLink 画像ハイパーリンクをダブルクリックし、次のコードでアクションメソッドを実装します。

    ふたたび、return null; が削除され、return "Detail"; に置き換えられていることを確認します。

    コード例 3:coreFacesLink メソッド 
    public String coreFacesLink_action() {
        SessionBean1 sessionBean = getSessionBean1();
        sessionBean.setCurrentItemData
          ((String[])sessionBean.getItemMap().get("coreFaces"));
        sessionBean.setCurrentRatingData
          ((RatingData)sessionBean.getRatingMap().get("coreFaces"));
        return "Detail";
            }
  7. アプリケーションを構築してテストします。

その他の可能な操作:格付けの平均値とユーザー格付けの分離

格付けコンポーネントは、品目の格付けの平均値を表示するか、ユーザーが品目を評価した格付けを表示するかを切り替えます。必要に応じて、格付けの平均値およびユーザーによる格付けを、コンポーネントのインスタンスにそれぞれ表示することもできます。この節では、プロジェクトに 2 ページ目を追加します。このページはユーザーが最初のページで選択した品目の情報 (画像および説明) を動的に表示します。ページは、別々のインスタンスに格付けの平均値およびユーザーによる格付けも表示します。2 ページ目を追加する利点は、格付けの平均値およびユーザーによる格付けを複数のページ間で保持することです。

  1. 「プロジェクト」ウィンドウで、「RatingExample」>「Web ページ」を右クリックし、ポップアップメニューから「新規」>「ページ」を選択します。新しいページの名前を「Detail」とします。

    次の図に、この節で作成するページを示します。

    図 4: Detail ページのデザイン 図 4: Detail ページのデザイン
  2. 「ハイパーリンク」コンポーネントをページにドラッグし、「本の閲覧に戻る」と入力して、Enter キーを押します。「プロパティー」ウィンドウで、ハイパーリンクの「id」プロパティーを「browseLink」に設定し、「url」プロパティーを「/faces/Page1.jsp」に設定します。
  3. 「画像」コンポーネントをページの上にドラッグします。「id」プロパティーを「currentItemImage」に設定し、「url」プロパティーを「#{SessionBean1.currentItemData[0]}」に設定します。
  4. ページに「静的テキスト」コンポーネントをドラッグします。ボタンの「id」プロパティーを「currentItemText」に設定します。「text」プロパティーを 「#{SessionBean1.currentItemData[1]}」に設定します。
  5. ページに「Rating」コンポーネントをドラッグします。プロパティーを次のように設定します。

    プロパティー
    一般
    id
    averageRating
    Data
    averageGrade
    #{SessionBean1.currentRatingData.averageGrade}
    averageModeText
    #{SessionBean1.currentRatingData.averageModeText}
    inAverageMode
    チェックボックスを選択 True
    Advanced
    gradeReadOnly
    チェックボックスを選択 True
  6. ページに 2 つ目の「Rating」コンポーネントをドラッグします。プロパティーを次のように設定します。

    プロパティー
    一般
    id
    myRating
    Appearance
    includeClear
    チェックボックスを選択 True
    includeNotInterested
    チェックボックスを選択 True
    Data
    clearHoverText
    自分の格付けを消去
    grade
    #{SessionBean1.currentRatingData.grade}
    hoverTexts
    #{SessionBean1.currentRatingData.hoverTexts}
    normalModeText
    #{SessionBean1.currentRatingData.normalModeText}
    notInterestedHoverText
    この品目には興味がない

  7. ビジュアルデザイナーで右クリックし、ポップアップメニューから「ページナビゲーション」を選択します。

    「ページナビゲーション」タブが開きます。

  8. Page1.jsp アイコンの横にあるコネクタポートから、Detail.jsp アイコンまでコネクタをドラッグします。次の図に示すように、コネクタ名を「Detail」とします。コネクタポートを使用したあと、IDE がその下に 2 つめを追加します。

    図 5: ページナビゲーション 図 5: ページナビゲーション

  9. アプリケーションを構築してテストします。1 ページ目の本の画像をクリックして、その本の詳細情報が表示される 2 ページ目を開きます。格付けデータが複数のページ間で保持されます。

    注:Detail ページで品目の評価をしたときは、格付けの平均値を更新するためにページを再表示する必要あります。ただし、Page 1 に戻ると、更新された平均値が自動的に表示されます。これらの動作はどちらも、実際のアプリケーションをシミュレートしています。ページを描画するときは正確な平均値が必要ですが、誰かが品目を格付けするたびにリアルタイムで平均値を更新する必要はありません。

試してみましょう。このチュートリアルでは、Detail ページは単に Page 1 で選択した品目の画像と説明を表示します。実際のアプリケーションでは、Detail ページに出版日、ISBN 番号、出版社からのコメントなど、さらに詳しい情報が含まれる場合があります。これを行うために、まず String 配列に情報を追加します。そのあと、それぞれの情報を表示する「静的テキスト」コンポーネントを Detail ページに追加します。最後に、Detail ページに追加した静的テキストコンポーネントの「text」プロパティーを currentItemData の String 配列のメンバーにバインドします。

まとめ

格付けコンポーネントの主な特徴を次に示します。

  • デフォルトでは、格付けコンポーネントには 星 5 つの列が含まれます。maxGrade プロパティーの値を変更することにより、星の数をカスタマイズできます。
  • 格付けコンポーネントには、消去コントロールおよび無関心コントロールを含むためのプロパティー、およびユーザーがそれらのコントロールにマウスを置いたり離したりするときに表示されるテキストをカスタマイズするためのプロパティーもあります。
  • コンポーネントのモードを切り替えるコントロールにより、ユーザーによる格付けや格付けの平均値をコンポーネントの同じインスタンスに表示することができます。ただし、必要に応じて、ユーザーによる格付けと格付けの平均値を 2 つの別々のインスタンスに表示することもできます。コンポーネントにはテキストを設定したり、各モードに関連したテキストを表示させるプロパティーがあります。
  • 格付けの平均値およびユーザーによる格付けは複数のページ間で保持されます。
  • 通常、アプリケーションには格付け対象の品目は複数あるので、格付けデータのインスタンスを保持するために、マップを作成することを推奨します。
  • AJAX 要求はユーザーが格付けを変更した場合にのみ送信されます。ユーザーがすでに保存されている格付けと同じ格付けを割り当てても、AJAX 要求は送信されません。
  • 格付けコンポーネントの通常モードのテキストおよび平均値モードのテキストは、AJAX 要求に応じて、サーバ上で更新 (および国際化) されることがあります。

関連項目:

更新日: 2007 年 5 月 24 日


Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects: 		MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems