ヘッダーをスキップ
Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11gリリース1（11.1.1）
B52029-02
  目次
目次		 索引
索引
戻る
戻る 		 次へ
次へ		  

13 ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法

この章では、af:popup、af:noteWindow、af:dialog、af:menu、af:panelWindow、およびJSFページにポップアップ・ダイアログ、メニュー、ウィンドウを作成するためのその他のADF Facesコンポーネントを使用して、2次ウィンドウにポップアップ要素を作成および使用する方法を説明します。また、ADF Facesダイアログ・フレームワークを使用して、外部ブラウザ・ウィンドウに別のページ・フローを持つダイアログを作成する方法も説明します。

この章に含まれる項は次のとおりです。

13.1 ポップアップ要素の使用の概要

ADF Facesには、ページに表示される2次ウィンドウの情報を表示および非表示にするための、一連のリッチ・クライアント・コンポーネントが用意されています。af:popupコンポーネントは、ダイアログ、ウィンドウおよびメニューを表示するためにJSFページ内で使用される非表示のレイアウト・コントロールです。af:popupの最も一般的に使用される子コンポーネントは、読取り専用の情報を表示するためのaf:noteWindow、ダイアログやウィンドウを作成するためのaf:dialogおよびaf:panelWindow、ポップアップ・メニューを作成するためのaf:menuです。af:popupコンポーネントにはその他のタイプの子も含めることができ、その場合、そのコンテンツはインラインのポップアップ・セレクタとして表示されます。クライアント側のイベントに対応して宣言的にポップアップ要素を表示するために、ADF Facesには、タグaf:showPopupBehaviorがあります。

ADF Facesには、親ページとは別の外部ブラウザ・ウィンドウに表示されるプロセス用にページの作成をサポートするダイアログ・フレームワークも用意されています。フレームワークでは、独自の制御フローを持つ複数のダイアログ・ページがサポートされています。たとえば、あるユーザーが購入を選択した後にWebサイトから離れ、支払いを完了する前に新しいクレジット・カードへの申込みを決定したとします。外部ブラウザ・ウィンドウで、ダイアログ・フレームワークを使用してクレジット・カードのトランザクションが開始されます。クレジット・カードのトランザクションが終了しても、元のページのチェックアウト・トランザクションは終了しません。

ダイアログ・フレームワークは、ADFタスク・フローで使用できるように、ADF Facesコントローラと統合されています。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「ADFバインド・タスク・フローのモーダル・ダイアログとしての実行」を参照してください。

ADFリッチ・クライアント・コンポーネントは、外部ブラウザ・ウィンドウに個別のページ・フローを持つダイアログに埋め込むことが可能です。また、外部ブラウザ・ウィンドウにダイアログを開くこともできます。

13.2 ポップアップ要素の作成

ポップアップ要素がサポートされているADF Facesリッチ・クライアントのコンポーネントには、表13-1で説明されているコンポーネントが含まれます。

表13-1 インライン・ポップアップ・コンポーネント

コンポーネント 説明

af:dialog

ダイアログに子を表示するレイアウト要素。OK、承諾、拒否および取消しのアクションがアクティブ化された場合にDialogEventsを配信します。

af:noteWindow

特定のUIコンポーネントに関連付けられた読取り専用の情報が含まれるレイヤー。注意ウィンドウはヘルプやメッセージの表示に使用され、通常はマウスを置いたり、フォーカスをしたときに表示されます。

af:panelWindow

ウィンドウ内に子を表示するレイアウト要素。

af:popup

ユーザーには表示されないコントロール。このコンテンツは、af:menuを使用したポップアップ・メニュー、ウィンドウ、ダイアログおよびポップアップ・セレクタなど、ポップアップ・ウィンドウに使用されます。

af:dialogコンポーネントとaf:panelWindowコンポーネントはいずれも定義ヘルプがサポートされていますが、ヘルプ・アイコン（疑問符が表示された青い丸）の上にカーソルを移動するとコンテンツが表示されます。詳細は、17.5項「コンポーネントへのヘルプの表示」を参照してください。

図13-1に、af:dialogコンポーネントを使用するダイアログを示します。このダイアログで、検索条件を入力し、「OK」をクリックしてエントリを送信します。ダイアログを終了するには、「取消」をクリックするか、ダイアログを閉じます。

図13-1 af:dialogコンポーネント

インライン・ダイアログ

af:dialogコンポーネントは、非表示のコントロールaf:popupに含まれます。このダイアログ・コントロールは、クライアント上でdialogListenerリスナーに捕捉されると、OKおよび取消しのアクションを送信します。インライン・ダイアログ作成の詳細は、13.2.4項「ダイアログの作成方法」を参照してください。

図13-2に、関連する単語に位置が合せられた読取り専用の情報を含むaf:noteWindowコンポーネントを使用した注意ウィンドウを示します。

図13-2 af:noteWindowコンポーネント

注意ウィンドウ・コンポーネントが示されています。

図13-3に、コンテンツにリスト・ボックスが表示されているパネル・ウィンドウを示します。

図13-3 af:panelWindowコンポーネント

パネル・ウィンドウ・コンポーネントが示されています。

af:panelWindowコンポーネントは、非表示のコントロールaf:popupにネストしています。詳細は、13.2.5項「パネル・ウィンドウの作成方法」を参照してください。

図13-4に、ユーザーがアプリケーション内の一連のファイルの表示タイプを選択できるポップアップ・メニューを示します。

図13-4 ポップアップ・メニュー

一連のファイルの表示タイプが含まれるポップアップ・メニュー。

af:menuコンポーネントは、ファセットに含まれます。詳細は、13.2.6項「ポップアップ・メニューの作成方法」を参照してください。

13.2.1 ポップアップ要素の表示および非表示

ポップアップ要素を表示する最善の方法は、af:showPopupBehaviorをページの任意の場所にあるコマンド・コンポーネントに追加することです。コマンドをアクティブ化するとポップアップ要素が表示されます。詳細は、13.3項「ポップアップ要素を表示するためのコマンド・コンポーネントの使用方法」を参照してください。af:dialog、af:noteWindow、af:panelWindowおよびaf:menuコンポーネントの組込みのコントロールは完了すると自動的に閉じ、インライン・セレクタは、ユーザーがコンテンツの外側をクリックすると自動的に閉じます。ADF Facesリッチ・クライアントのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。

13.2.2 クライアントへのコンテンツの送信

デフォルトで、ポップアップ要素のコンテンツは、ポップアップ要素が表示されるまでサーバーから送信されません。このため、開かれた時にポップアップ要素が表示されるスピードと、親ページがレンダリングされるスピードが入れ替わります。ポップアップ要素がロードされると、すぐに表示できるよう、コンテンツはクライアントにおいてデフォルトでキャッシュされます。

af:popupコンポーネントのcontentDelivery属性を次のいずれかのオプションに設定することで、コンテンツの配信方法を変更できます。

  • lazy: 前述のデフォルトの方法。コンテンツは、ポップアップ要素が一度表示されるまでロードされず、ロードされるとキャッシュされます。

  • immediate: コンテンツはすぐにページにロードされ、可能なかぎり迅速に表示されます。この方法は、ページが使用されるたびにすべてのユーザーが必ず使用するポップアップ要素に使用します。

  • lazyUncached: コンテンツはポップアップ要素が表示されるまでロードされず、ポップアップ要素が表示されるたびにリロードされます。この方法は、失効するか期限切れになる可能性があるデータをポップアップ要素に表示する場合に使用します。

13.2.3 ダイアログ・ボタンの使用方法

ADF Facesのaf:dialogコンポーネントには、部分送信のコマンド・ボタンが組み込まれています。これらのコンポーネントは、HTMLレイヤーおよびJavaScriptを使用してブラウザ・ウィンドウをシミュレートします。ボタンの構成ではaf:dialogのtypeプロパティが使用され、次のボタンを含む様々なボタンの組合せが定義されます。

  • okCancel

  • yesNoCancel

  • ok

  • yesNo

  • cancel

  • none

ボタンのラベルは、次のダイアログ・プロパティを使用して変更できます。

  • affirmativeTextAndAccessKey: 肯定またはOKボタンの場合

  • cancelTextAndAccessKey: 取消しボタンの場合

  • noTextAndAccessKey: 拒否のボタンの場合

af:dialogコンポーネントには、actionListenerアクションのかわりに使用されるメソッド式を指定するdialogListenerプロパティがあります。リスナーに渡されたDialogEventイベントには、押されたボタンの確認に使用可能な関連する定数と、結果のプロパティがあります。

ダイアログの取消しボタンと、ダイアログの右上端にある閉じるアイコンにより、サーバーには伝播されないクライアントのみのイベントが生成されます。取消しボタンを押すと、検証せずにダイアログが閉じられます。

部分的なページの更新でエラーまたは致命的な重大度レベルのメッセージが戻されない場合には、ダイアログのtypeプロパティを使用して指定されるその他のボタン（肯定、OKおよび拒否）でも、選択されると自動的にダイアログが閉じられます。警告や情報のメッセージはこのケースには当てはまりません。

ダイアログのコンテンツ内にあるaf:buttonBarファセットにこれらのコマンドを配置すると、ダイアログのフッターにその他のボタンを追加できます。これらのボタンは、DialogEventイベントを起動しない、部分送信ボタンであることが必要です。ダイアログのコンテンツ内やボタン・バーの外でもコマンドはサポートされていますが、これらも部分送信コマンドであることが必要です。

13.2.4 ダイアログの作成方法

af:popupコンポーネントは、ページのaf:formコンポーネント内に配置されている必要があります。

インライン・ダイアログを作成する手順:

  1. af:popupコンポーネントをJSFページに挿入します。

  2. af:popupコンポーネントにaf:dialogコンポーネントをネストさせます。

  3. af:dialogコンポーネントに、次の属性を設定します。

    • title: ダイアログ・ウィンドウにタイトルとして表示されるテキスト

    • dialogListener: ダイアログ・リスナー・メソッドへのEL式のメソッド参照

  4. af:inputTextなどのブラウザ入力コンポーネントを挿入し、required属性をtrueに、label属性をRequiredに設定します。af:panelGroupLayoutなどのレイアウト・コンポーネントを使用して、入力コンポーネントを配置します。

例13-1に、ダイアログを作成するときにJDeveloperによって生成されるコードの例を、図13-1に結果のダイアログを示します。

例13-1 ダイアログ・コンポーネント

<af:popup id="searchDialog">
  <af:dialog title="Search"
    dialogListener type="#{myBean.buttonClicked}">
      <af:panelGroupLayout>
        <af:inputText required="true" label="Required:"/>
    </af:panelGroupLayout>
  </af:dialog>
<af:popup>

public class MyBean
{
  public void dialogButtonClicked(oracle.adf.view.rich.event.DialogEvent dialogEvent)
  {
    System.out.println("The dialog outcome is:"+ dialogEvent.getOutcome());
  }
}

13.2.5 パネル・ウィンドウの作成方法

af:popupコンポーネントは、af:formコンポーネント内に配置されている必要があります。

インライン・ウィンドウを作成する手順:

  1. af:popupコンポーネントをJSFページに挿入します。

  2. af:popupコンポーネントにaf:panelWindowコンポーネントを挿入します。

  3. af:panelWindowコンポーネントに、次の属性を設定します。

    • title: ウィンドウにタイトルとして表示されるテキスト。

    • modal: 親アプリケーションに戻る前にウィンドウを閉じる必要があるかどうか。デフォルトではfalseに設定されています。

  4. af:panelWindowコンポーネントにaf:selectManyListboxなどのブラウザ入力コンポーネントを挿入します。af:panelGroupLayoutなどのレイアウト・コンポーネントを使用して、親の入力コンポーネントを配置します。

  5. af:selectItem、af:selectItemsまたはf:selectItemコンポーネントなど、af:selectManyListboxの子を挿入し、入力コンポーネントの配置を完了します。

例13-2に、パネル・ウィンドウを作成するときにJDeveloperによって生成されるコードを、図13-3に結果のウィンドウを示します。

例13-2 Popup、panelWindowおよびselectManyListboxコンポーネント

<af:popup id="popupWindow">
  <af:panelWindow modal="true" title="Test Window">
    <af:panelGroupLayout>
      <af:selectManyListbox value="#{demoInput.manyListValue1}">
        <af:selectItem label="coffee" value="bean" shortDesc="Coffee from Kona"/>
        <f:selectItem itemLabel="tea" itemValue="leaf" itemDescription="Tea from China"/>
        <af:selectItem disabled="true" label="orange juice" value="orange"/>
        <f:selectItem itemDisabled="true" itemLabel="wine" itemValue="grape"/>
        <af:selectItem label="milk" value="moo"/>
        <f:selectItems value="#{demoInput.selectItems}"/>
      </af:selectManyListbox>
    </af:panelGroupLayout>
  </af:panelWindow>
</af:popup>

13.2.6 ポップアップ・メニューの作成方法

af:popupコンポーネントは、af:formコンポーネント内に配置されている必要があります。

インライン・ポップアップ・メニューを作成する手順:

  1. af:commandToolbarButtonコンポーネントをJSFページに挿入し、ボタン名を表示するためのtext属性を設定します。icon属性を使用して、ボタンに使用するイメージを設定します。

  2. af:commandToolbarButtonコンポーネントにf:facetコンポーネントを挿入し、name属性をpopupに設定します。

  3. f:facetコンポーネントにaf:menuタグを挿入します。

  4. f:facetコンポーネントに一連のaf:commandMenuItemコンポーネントを挿入し、メニューの項目を定義します。メニューの作成の詳細は、第14章「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。

例13-3に、popupファセットに含まれるメニューを作成する際にJDeveloperによって生成されるコードの例を、図13-4に結果のポップアップ・メニューを示します。

例13-3 popupファセットおよびmenuコンポーネント

<af:commandToolbarButton text="Arrange" icon="/images/arrange.gif">
  <f:facet name="popup">
    <af:menu>
      <af:commandMenuItem partialSubmit="true" text="Thumbnails"/>
      <af:commandMenuItem partialSubmit="true" text="Tiles"/>
      <af:commandMenuItem partialSubmit="true" text="Icons"/>
      <af:commandMenuItem partialSubmit="true" text="List"/>
      <af:commandMenuItem partialSubmit="true" text="Details"
         icon="/images/status_bullet.png"/>
    </af:menu>
  </f:facet>
</af:commandToolbarButton>

13.3 ポップアップ要素を表示するためのコマンド・コンポーネントの使用方法

クライアント側での動作を実装する場合、通常はJavaScriptを記述し、それをクライアント・リスナーとしてコンポーネントに登録する必要がありますが、ADF Facesのクライアント動作タグを使用すると、一般的なクライアント操作を宣言的に実行できます。このリリースでは、クライアント・リスナーのかわりに使用できるクライアント動作af:showPopupBehaviorがサポートされています。

13.3.1 af:showPopupBehaviorタグの使用方法

ユーザーがアクティブにし、インライン・ポップアップ要素にコンテンツを表示するボタンを用意するには、通常、af:showPopupBehaviorタグをaf:commandButtonなどのコマンド・コンポーネントに関連付けます。

af:showPopupBehaviorタグを使用する手順:

  • ポップアップ要素を起動するコンポーネント（コマンド・ボタン・コンポーネントなど）にaf:showPopupBehaviorタグをネストさせます。

    例13-4に、ボタン「Click me」がクリックされると、“popup1"というIDのaf:popupコンポーネントにテキストが表示されるサンプル・コードを示します。

例13-4 af:commandButtonコンポーネントに関連付けられたshowPopupBehavior

<af:commandButton text="Click me" id="button">
  <af:showPopupBehavior popupId="popup1" alignId="button" align="afterEnd"/>
</af:commandButton>

<af:popup id="popup1">
  <af:panelGroupLayout layout="vertical">
    <af:outputText value="Some"/>
    <af:outputText value="popup"/>
    <af:outputText value="content"/>
  </af:panelGroupLayout>
</af:popup>

af:showPopupBehaviorタグを使用する場合、af:showPopupBehaviorに設定する属性は次のとおりです。

  • popupId: ポップアップ要素にコンテンツを表示するaf:popupコンポーネントのIDを指定します。

  • alignIdおよびalign: alignIdを使用して、ポップアップ要素のコンテンツの位置を合せるコンポーネントのIDを指定します。その後、alignを使用して、alignIdで識別されるコンポーネントに対して相対的な配置位置を指定します。

    たとえば、例13-4のコードでは、ポップアップ・コンテンツはbuttonというIDで識別されるaf:commandButtonと位置合せされ、afterEndの位置に配置されます。これにより、ポップアップ要素は、ポップアップの右上の角がボタンの右下の角に合った状態でボタンの下に配置されます。図13-5に示されているように、ボタンとポップアップの右端の位置が合せられています。

    図13-5 ボタンおよびポップアップ・コンテンツ

    ボタンおよびポップアップ・コンテンツ

  • triggerType: ポップアップ要素の起動に使用するイベント・タイプを指定します。一般的にaf:showPopupBehaviorはコマンド・コンポーネントと関連付けるため、デフォルトはactionです。コマンド・コンポーネントがクリックされると、アクション・イベントが起動され、ポップアップ要素が表示されます。

    af:showPopupBehaviorタグを、af:outputTextなどのコマンド・コンポーネント以外のものに関連付けた場合は、af:showPopupBehaviorタグでtriggerType属性をcontextMenuに設定します。これにより、ポップアップ・メニューが表示されます。例13-5に、ユーザーがaf:outputTextによってレンダリングされたテキストを右クリックするとポップアップ・メニューが表示されるサンプル・コードを、図13-6に生成されるサンプルのポップアップ・メニューを示します。

    例13-5 af:outputTextコンポーネントに関連付けられたshowPopupBehavior

    <af:popup id="popupMenu">
  <af:menu>
    <af:commandMenuItem text="Cut"/>
    <af:commandMenuItem text="Copy"/>
    <af:commandMenuItem text="Paste"/>
  </af:menu>
</af:popup>

<af:outputText value="Right-click For A Popup Menu">
  <af:showPopupBehavior popupId="popupMenu"
                        triggerType="contextMenu"/>
</af:outputText>

    図13-6 af:outputTextおよびポップアップ・メニュー

    出力テキストおよびポップアップ

    マウスがトリガー・コンポーネント上に置かれたらモーダルではないポップアップ要素を表示する場合、およびマウスがトリガー・コンポーネントから離れたらモーダルではないポップアップ要素を非表示にする場合は、mouseHover属性を使用します。例13-6に、ユーザーがaf:outputTextコンポーネントによってレンダリングされたテキストにフォーカスするとポップアップ要素が表示されるサンプル・コードを、図13-7に生成されるサンプルのポップアップを示します。

    例13-6 af:outputTextおよびmouseHoverポップアップ・トリガー

    <af:popup id="popup4">
    <af:outputText value="Your mouse is hovering over this trigger button right now."/>
</af:popup>
    <af:outputText value="This demo shows a popup from a mouseHover trigger type."/>
     <af:spacer width="5"/>
     <af:commandButton
       immediate="true"
       text="Show Popup"
       clientComponent="true"
       id="popupButton4">
         <af:showPopupBehavior
           popupId="popup4"
           alignId="popupButton4"
           align="afterStart"
           triggerType="mouseHover"/>
        </af:commandButton>

    図13-7 ポップアップ上のmouseHoverトリガー

    ポップアップ上のマウスの置かれたターゲット

13.4 外部ブラウザのウィンドウ

Webブラウザによる作成には時間がかかりますが、現在のページと同じウィンドウではなく、新しいブラウザ・ウィンドウにページを表示する場合があります。外部のダイアログでは、ユーザーに情報を入力または選択させてから、その情報を使用する元のページに戻らせることができます。多くの場合、ダイアログを開いてプロセスを管理するためにJavaScriptを使用する必要があります。また、PDAなどの特定のクライアント・デバイスではポップアップがサポートされていないため、このようなケースを管理するためのコードを作成する必要もあります。ADF Facesにはダイアログ・フレームワークが備わっており、JavaScriptを使用せずに新しいブラウザ・ウィンドウを開き、ダイアログとプロセスの管理を容易に行うことができます。

注文を確認するユーザーにログインを要求する単純なアプリケーションについて考えてみます。図13-8は、5つのページ（login.jspx、orders.jspx、new_account.jspx、account_details.jspxおよびerror.jspx）からなるアプリケーションのページ・フローを示しています。

図13-8 外部ダイアログのサンプル・アプリケーションのページ・フロー

ポップアップ・ダイアログ・サンプル・アプリケーションのページ・フロー

既存のユーザーが正常にログインすると、アプリケーションにより「Orders」ページが表示され、ユーザーの注文が（存在していれば）表示されます。ユーザーが正常にログインできなかった場合、ポップアップ・ダイアログにエラー・ページが表示されます（図13-9）。

図13-9 ポップアップのエラー・ページ

ポップアップ・ダイアログに表示されたエラー・メッセージ

エラー・ページには「Cancel」ボタンがあります。ユーザーが「Cancel」をクリックすると、ポップアップ・ダイアログが閉じ、アプリケーションはログイン・ページ（図13-10）に戻ります。

図13-10 ログイン・ページ

ポップアップ・ダイアログ内のユーザー名とパスワードを入力するためのログイン画面

新規ユーザーがログイン・ページで「New User」リンクをクリックすると、ポップアップ・ダイアログ内に「New Account」ページが表示されます（図13-11）。

図13-11 ポップアップ・ダイアログ内の「New Account」ページ

ポップアップ・ダイアログ内の「New Account」ページ

姓名などの情報を入力した後、ユーザーが「Details」ボタンをクリックすると、同じポップアップ・ダイアログ内に「Account Details」ページが表示されます（図13-12）。ユーザーは「Account Details」ページでその他の情報を入力し、新しいログイン・アカウントのパスワードを確認入力します。「Account Details」ページには、2つのボタン（「Cancel」および「Done」）があります。

図13-12 ポップアップ・ダイアログ内の「Account Details」ページ

ポップアップ・ダイアログ内の「Account Details」ページ

新規ユーザーが新しいログイン・アカウントの作成の中止を決定して「Cancel」をクリックした場合、ポップアップ・ダイアログが閉じ、アプリケーションはログイン・ページに戻ります。新規ユーザーが「Done」をクリックした場合、ポップアップ・ダイアログが閉じられ、アプリケーションはログイン・ページに戻ります。このページの「Username」フィールドにユーザーの名前が移入されます（図13-13）。これで、新規ユーザーは、新しいパスワードを入力してログインできるようになります。

図13-13 「Username」フィールドに名前が移入されたログイン・ページ

ユーザー名が定義されたログイン・ページ

注意:

ダイアログ・フレームワークを使用して、一度に複数のダイアログを開くことや、ベース・ページと存続期間が異なるダイアログを起動することはしないでください。

13.4.1 外部ダイアログおよびページ・フローの作成方法

ADF Facesには、アプリケーションで簡単にダイアログをサポートできるように、ActionSourceアクションを実装するコンポーネント（af:commandMenuItemやaf:commandButtonなど）にダイアログ機能が組み込まれています。ActionSourceコンポーネントから新しいブラウザ・ウィンドウ・ダイアログ内にページを起動するかどうかをADF Facesに判断させるためには、次の4つの条件が満たされている必要があります。

  • dialog:で始まる結果を持つJSFナビゲーション・ルールが存在していること

  • コマンド・コンポーネントのアクション結果がdialog:で始まっていること

  • コマンド・コンポーネントのuseWindow属性がtrueであること

  • クライアント・デバイスでポップアップ要素がサポートされていること


注意:

useWindow属性がfalseの場合や、クライアント・デバイスでポップアップ要素がサポートされていない場合、ADF Facesでは自動的に、ポップアップ・ウィンドウを使用せずに現在のウィンドウ内にページが表示されます。このアクションを実現するためにコードを変更する必要はありません。

ダイアログに表示されるページは通常のJSFページですが、この章では外部ダイアログの実装方法を説明することを目的としているため、ポップアップ・ダイアログ内に表示されるページをダイアログ・ページと表記し、ダイアログの起動元のページを元のページと表記します。ダイアログ・プロセスは、元のページがダイアログ（1つのダイアログ・ページが含まれる場合も、一連のダイアログ・ページが含まれる場合もある）を起動した時点で開始され、ユーザーがダイアログを閉じて元のページに戻った時点で終了します。

アプリケーションで新しいブラウザ・ウィンドウ・ダイアログをサポートするための操作は、次のとおりです。

  1. ダイアログを開くためのJSFナビゲーション・ルールを定義します。

  2. ダイアログの起動元のJSFページを作成します。

  3. ダイアログ・ページを作成し、ダイアログ値を返します。

  4. 値をダイアログに渡します（オプション）。

  5. 戻り値を処理します。

これらの操作は、任意の順序で実行できます。

13.4.1.1 ダイアログを開くためのJSFナビゲーション・ルールの定義

ダイアログのナビゲーションを管理するには、特殊なdialog:結果を持つ標準的なJSFナビゲーション・ルールを定義します。ダイアログ・サンプル・アプリケーション（図13-8）を使用すると、「Login」ページからは次の3つのナビゲーション結果が考えられます。

  • 同じウィンドウ内に「Orders」ページを表示（ログインの正常完了）

  • ダイアログ内に「Error」ダイアログ・ページを表示（ログインの失敗）

  • ダイアログ内に「New Account」ダイアログ・ページを表示（新規のユーザー）

例13-7に、「Login」ページ（login.jspx）からの3つのナビゲーション・ケースのナビゲーション・ルールを示します。

例13-7 faces-config.xmlファイル内のダイアログ・ナビゲーション・ルール

<navigation-rule>

  <!-- Originating JSF page -->
  <from-view-id>/login.jspx</from-view-id>

  <!-- Navigation case for the New Account dialog page (new user)-->
  <navigation-case>
    <from-outcome>dialog:newAccount</from-outcome>
    <to-view-id>/new_account.jspx</to-view-id>
  </navigation-case>

  <!-- Navigation case for the Error dialog page (upon login failure) -->
  </navigation-case>
    <from-outcome>dialog:error</from-outcome>
    <to-view-id>/error.jspx</to-view-id>
  </navigation-case>

  <!-- Navigation case for the Orders page (upon login success) -->
  </navigation-case>
    <from-outcome>orders</from-outcome>
    <to-view-id>/orders.jspx</to-view-id>
  </navigation-case>

</navigation-rule>

実行時に、それぞれのダイアログ・ナビゲーション・ルールによって、指定したページが元のページ内に表示されるだけです。しかし、dialog:アクション結果を持つコマンド・コンポーネントを使用し、useWindow属性をtrueに設定した場合は、ADF Facesによりダイアログ内にページが開かれます。これについては、次の手順で説明します。

13.4.1.2 ダイアログを開くJSFページの作成

ポップアップ・ダイアログを起動する元のページでは、ActionSourceコンポーネントに対してアクション・メソッドまたは静的アクション結果を使用できます。静的アクション結果を指定する場合も、アクション結果を返すアクション・メソッドを使用する場合も、このアクション結果はdialog:で開始する必要があります。

説明するページ・フローでは、commandButtonコンポーネントに対してアクション・メソッド・バインディングを使用して、「Orders」ページまたは「Error」ダイアログ・ページのいずれにナビゲートするかをプログラムにより指定しています。また、commandLinkコンポーネントに対して静的アクション結果を使用して、「New Account」ダイアログ・ページに直接ナビゲートしています。どちらのコマンド・コンポーネントも「Login」ページにあります。例13-8に、LoginのcommandButtonコンポーネントのコードを示します。

例13-8 「Login」ページの「Login」ボタン

af:commandButton id="cmdBtn"
                 text="Login"
                 action="#{backing_login.commandButton_action}"
                 useWindow="true"
                 windowHeight="200"
                 windowWidth="500"
                 partialSubmit="true"/>

ポップアップ・ダイアログ内にページを開く際は、属性useWindow、windowHeightおよびwindowWidthが使用されます。クライアント・デバイスでポップアップ・ダイアログがサポートされていない場合、これらの属性は無視されます。

useWindow="true"の場合、ADF Facesにより新しいポップアップ・ダイアログ内にダイアログ・ページが開かれます。windowHeight属性とwindowWidth属性は、ポップアップ・ダイアログのサイズを指定します。


ヒント:

commandButtonコンポーネントのpartialSubmit属性はtrueに設定してください。こうすることで、ポップアップ・ダイアログが表示されたときに元のページがリロードされることがありません（このため、一瞬表示されることもありません）。

af:commandButtonコンポーネントのaction属性は、ページのバッキングBean（Login.java）内のアクション・メソッドへの参照を指定しています。アクション・メソッドは結果文字列を必ず返します。JSFはこの結果文字列を、faces-config.xmlファイル内で定義されているナビゲーション・ケースにおける結果と比較することにより、次に表示するページを決定します。このアクション・メソッドのコードを例13-9に示しています。

例13-9 「Login」ボタンのアクション・メソッド・コード

public String commandButton_action()
{
  String retValue;
  retValue = "orders";
  _cust = getListCustomer();
  if (_cust == null || !password.equals(_cust.getPassword()))
  {
    retValue = "dialog:error";
  }

  return retValue;
}

例13-10に、静的アクション結果を使用する「New User」のcommandLinkコンポーネントのコードを示します。

例13-10 「Login」ページの「New User」コマンド・リンク

<af:commandLink id="cmdLink"
                text="New User?"
                action="dialog:newAccount"
                useWindow="true"
                partialSubmit="true"
                windowHeight="200"
                windowWidth="500" />

action属性値はdialog:で始まる単なる静的結果文字列であり、アクション・メソッドを参照しません。

実行時、ADF Facesは、属性useWindow="true"を、dialog:で始まるアクション結果とともに使用して、ダイアログ・プロセスを開始してポップアップ・ダイアログ内にページを開くかどうかを決定します（faces-config.xmlファイル内にdialog:ナビゲーション・ルールが定義されていることを前提とします）。

アクション結果がdialog:で始まっていない場合、useWindow="true"であっても、ADF Facesによりプロセスが開始されることも、ポップアップ・ダイアログが開かれることもありません。逆に、アクション結果がdialog:で始まっていて、useWindow="false"であるか、useWindowが設定されていないとき、ADF Facesはポップアップ・ダイアログを開きませんが、新しいプロセスを開始します。

クライアント・デバイスでポップアップ・ダイアログがサポートされていない場合、ADF Facesは、現在のページのすべての状態を保存した後、現在のウィンドウ内にダイアログ・ページを表示します。この処理を実現するためにコードを記述する必要はありません。

コマンド・コンポーネントはダイアログを開くとき、LaunchEventイベントを配信します。LaunchEventイベントは、ポップアップ・ダイアログを開くコンポーネントと、ダイアログ・プロセスの開始時に表示するコンポーネント・ツリーのルートに関する情報を格納しています。LaunchEventは、パラメータのマップをダイアログに渡すこともできます。詳細は、13.4.1.4項「ダイアログに値を渡す」を参照してください。

13.4.1.3 ダイアログ・ページを作成し、ダイアログ値を返す

サンプル・ページ・フローのダイアログ・ページは、「Error」ページ、「New Account」ページおよび「Account Details」ページです。新規のユーザーのダイアログ・プロセスでは、実際に2つのページ（「New Account」ページと「Account Details」ページ）が表示されます。ユーザーがログインに失敗したときのダイアログ・プロセスでは、「Error」ページのみが表示されます。

ダイアログ・ページは他のJSFページとほとんど同じですが、1つのみ例外があります。ダイアログ・ページでは、ダイアログ・プロセスが終了したとき（つまり、ユーザーがダイアログを閉じたとき）にADF Facesに通知する方法を指定する必要があります。通常は、コマンド・コンポーネントの名前をプログラムまたは宣言により指定します。例13-11に、「Error」ページの「Cancel」ボタンを使用して、プログラムによりこれを指定する方法を示します。

例13-11 「Error」ページの「Cancel」ボタン

<af:commandButton text="Cancel"
                  actionListener="#{backing_error.cancel}" />

af:commandButtonコンポーネントのactionListener属性は、ページのバッキングBean（Error.java）内のアクション・リスナー・メソッドへの参照を指定しています。アクション・リスナー・メソッドは、「Cancel」ボタンをクリックしたときに生成されるアクション・イベントを処理します。このアクション・リスナー・メソッド内でAdfFacesContext.getCurrentInstance()returnFromDialog()メソッドをコールします（例13-12を参照）。

例13-12 バッキングBean内の「Cancel」ボタンに対するアクション・リスナー・メソッド

public void cancel(ActionEvent actionEvent)
{
  AdfFacesContext.getCurrentInstance().returnFromDialog(null, null);
}

注意:

AdfFacesContext.returnFromDialog()メソッドはnullを返します。バッキングBean内で「Cancel」アクション・イベントを処理するのに必要な値はこれだけです。

「Account Details」ダイアログ・ページで、ダイアログ・プロセスが終了したことをADF Facesに宣言的に通知するには、af:returnActionListenerタグを「Cancel」ボタン・コンポーネントにアタッチします（例13-13を参照）。af:returnActionListenerタグは、AdfFacesContextのreturnFromDialogメソッドをコールします。バッキングBeanのコードは必要ありません。

例13-13 「Account Details」ページの「Cancel」ボタン

<af_commandButton text="Cancel" immediate="true">
  <af:returnActionListener/>
</af:commandButton>

af:returnActionListenerタグでは、属性は使用されません。af:commandButtonコンポーネントのimmediate属性はtrueに設定します。これにより、ユーザーが必須の「Password」および「Confirm Password」フィールドに値を入力せずに「Cancel」をクリックした場合、アプリケーション起動フェーズではなくリクエスト値適用フェーズ中にデフォルトのJSF ActionListenerを実行して、入力の検証を省略することができます。詳細は、第4章「JSFライフサイクル」を参照してください。

「New Account」ページと「Account Details」ページは、同じダイアログ・プロセスに属しています。ダイアログ・プロセスは必要なだけいくつでも指定できますが、AdfFacesContext.getCurrentInstance().returnFromDialog()のコールが必要なのは1回のみです。

プロセスを終了する場合とダイアログから値を返す場合に、同じaf:returnActionListenerタグまたはAdfFacesContext.getCurrentInstance().returnFromDialog()メソッドを使用することもできます。たとえば、ユーザーが「Account Details」ページの「Done」をクリックした場合、プロセスは終了し、ユーザーの入力値が返されます。例13-14に、「Done」ボタンのコードを示します。

例13-14 「Account Details」ページの「Done」ボタン

<af:commandButton text="Done"
                  actionListener="#{backing_new_account.done}" />

af:commandButtonコンポーネントのactionListener属性は、ページのバッキングBean（New_account.java）内のアクション・リスナー・メソッドへの参照を指定しています。アクション・リスナー・メソッドは、「Done」ボタンをクリックしたときに生成されるアクション・イベントを処理します。例13-15に、このアクション・リスナー・メソッドのコードを示します。ここでは、戻り値が取得されてから、AdfFacesContext.returnFromDialog()メソッドを使用して返されています。

例13-15 バッキングBean内の「Done」ボタンに対するアクション・リスナー・メソッド

public void done(ActionEvent e)
{
  AdfFacesContext afContext = AdfFacesContext.getCurrentInstance();
  String firstname = afContext.getPageFlowScope().get("firstname").toString();
  String lastname = afContext.getPageFlowScope().get("lastname").toString();
  String street = afContext.getPageFlowScope().get("street").toString();
  String zipCode = afContext.getPageFlowScope().get("zipCode").toString();
  String country = afContext.getPageFlowScope().get("country").toString();
  String password = afContext.getPageFlowScope().get("password").toString();
  String confirmPassword =
   afContext.getPageFlowScope().get("confirmPassword").toString();
  if (!password.equals(confirmPassword))
  {
    FacesMessage fm = new FacesMessage();
    fm.setSummary("Confirm Password");
    fm.setDetail("You've entered an incorrect password. Please verify that you've
     entered a correct password!");
    FacesContext.getCurrentInstance().addMessage(null, fm);
  }
  else
  {
    //Get the return value
    Customer cst = new Customer();
    cst.setFirstName(firstname);
    cst.setLastName(lastname);
    cst.setStreet(street);
    cst.setPostalCode(zipCode);
    cst.setCountry(country);
    cst.setPassword(password);
    // And return it
    afContext.getCurrentInstance().returnFromDialog(cst, null);
    afContext.getPageFlowScope().clear();
  }
}

AdfFacesContext.returnFromDialog()メソッドを使用すると、パラメータのjava.lang.Objectまたはjava.util.Mapの形式で戻り値を返すことができます。値を返す先がわからなくてもかまいません。ADF Facesにより自動的に処理されます。

実行時、AdfFacesContext.returnFromDialog()メソッドは、ユーザーがダイアログを閉じるとADF Facesに通知します。このメソッドは、ダイアログ・ページがポップアップ・ダイアログに表示されているかメイン・ウィンドウに表示されているかに関係なく、コールできます。ポップアップ・ダイアログが使用されている場合、ADF Facesにより自動的にそのポップアップ・ダイアログが閉じられます。

サンプル・アプリケーションでは、ユーザーが「Error」ページまたは「Account Details」ページの「Cancel」ボタンをクリックした場合、ADF FacesによってAdfFacesContext.returnFromDialog()がコールされ（これによりnullが返される）、ポップアップ・ダイアログが閉じて元のページに戻ります。

新規ユーザーのダイアログ・プロセスの最初のページは、「New Account」ページです。「New Account」ページの「Details」ボタンがクリックされると、アプリケーションは「New Account」ページの状態を保存した後、（useWindow="false"であるため）同じポップアップ・ダイアログ内に「Account Details」ダイアログ・ページが表示されます。

「Account Details」ページの「Done」ボタンがクリックされると、ADF Facesはポップアップ・ダイアログを閉じ、AdfFacesContext.returnFromDialog()メソッドは元のページにcstを返します。

ダイアログが閉じると、ADF Facesは戻りイベント（ReturnEvent）を生成します。AdfFacesContext.returnFromDialog()メソッドは、戻り値を戻りイベントのプロパティとして送信します。この戻りイベントは、ダイアログを開いたコマンド・コンポーネント（「Login」ページのNew user commandLink）に登録されている戻りリスナー（ReturnListener）に配信されます。戻り値を処理する方法は、13.4.1.5項「戻り値の処理」を参照してください。

13.4.1.4 ダイアログに値を渡す

AdfFacesContext.returnFromDialog()メソッドを使用すると、ダイアログからの戻り値を返すことができます。値をダイアログに渡す必要がある場合もあります。値をダイアログに渡すには、LaunchListenerリスナーを使用します。

サンプル・アプリケーションでは、新規のユーザーは「Login」ページの「Username」フィールドに名前を入力してから、「New User」リンクをクリックします。ポップアップ・ダイアログ内に「New Account」ダイアログ・ページが表示されると、「First Name」入力フィールドには、「Login」ページで入力された名前が自動的に移入されます。これを実現するには、ダイアログを開いたコマンド・コンポーネント（commandLink）にLaunchListenerリスナーを登録します。例13-16に、commandLinkコンポーネントのコードを示します。

例13-16 「Login」ページの入力フィールドと「New User」コマンド・リンク

<af:inputText label="Username" value="#{backing_login.username}"/>
<af:commandLink id="cmdLink" text="New User?"
                action="dialog:newAccount"
                useWindow="true" partialSubmit="true"
                launchListener="#{backing_login.handleLaunch}"
                returnListener="#{backing_login.handleReturn}"
                windowHeight="200" windowWidth="500" />

af:commandLinkのlaunchListener属性は、ページのバッキングBean（Login.java）内にあるLaunchEventのリスナー・メソッドへの参照を指定します。launchListenerメソッド内で、getDialogParameters()メソッドを使用して、キーと値のペアを使用してパラメータをMapに追加します。例13-17に、launchListenerメソッドのコードを示します。

例13-17 バッキングBean内の「New User」コマンド・リンクに対するlaunchEventリスナー・メソッド

public void handleLaunch(LaunchEvent event)
{
  //Pass the current value of the field into the dialog
  Object usr = username;
  event.getDialogParameters().put("firstname", getUsername());
}
// Use by inputText value binding
private String username;
public String getUsername()
{
  return username;
}
public void setUsername(String username)
{
  this.username = username;
}

「New Account」ダイアログ・ページにパラメータ値を表示するには、ADF FacesのpageFlowScopeを使用して、#{pageFlowScope.someKey}という形式の特殊なEL式を介してキーと値を取得します（例13-18を参照）。

例13-18 「New Account」ページの入力フィールド

<af:inputText label="First name" value="#{pageFlowScope.firstname}"/>

注意:

pageFlowScopeは、ADF Facesコンポーネントのみでなく、すべてのJSFコンポーネントとともに使用できます。

（すべての条件が満たされていると仮定した場合、）コマンド・コンポーネントによりダイアログが起動される実行時に、ADF FacesがLaunchEventをキューに挿入します。このイベントは、ダイアログを起動するコンポーネントと、ダイアログ・プロセスの開始時に表示するコンポーネント・ツリーのルートに関する情報を格納しています。LaunchEventに関連付けられているlaunchListenerは、LaunchEventを1つの引数として使用し、必要に応じてイベントを処理します。

サンプル・アプリケーションでは、ADF FacesがcommandLinkコンポーネントに登録されているlaunchListenerにLaunchEventを配信すると、handleLaunch()メソッドがコールされ、それに応じてイベントが処理されます。

ADF Facesでは、プロセスは常に、ダイアログが起動されたページのpageFlowScope内に存在するすべての値のコピーを取得します。getDialogParameters()メソッドがパラメータをMapに追加すると、これらのパラメータもpageFlowScope内で使用可能になり、ダイアログ・プロセス内のすべてのページは、EL式を介してpageFlowScopeオブジェクトを参照することによりpageFlowScopeから値を取得できます。

sessionScopeとは異なり、pageFlowScopeの値は、現在のページ・フローまたはプロセスでのみ表示可能です。ユーザーが新しいウィンドウを開いてナビゲーションを開始すると、その一連のウィンドウは独自のプロセスを持ちます。つまり、各ウィンドウで格納された値は他からの独立性を保ちます。ブラウザの「Back」ボタンをクリックすると、自動的にpageFlowScopeは元の状態にリセットされます。プロセスから戻ると、pageFlowScopeはプロセス開始前の状態に戻ります。プロセスからの値を渡すには、AdfFacesContext.returnFromDialog()、sessionScopeまたはapplicationScopeを使用します。

13.4.1.5 戻り値の処理

戻り値を処理するには、ダイアログを起動したコマンド・コンポーネント（サンプル・アプリケーションでは「Login」ページの「New User」リンク・コンポーネント）に戻りリスナーを登録します。例13-19に、「New User」リンク・コンポーネントのコードを示します。

例13-19 「Login」ページの「New User」コマンド・リンク

<af:commandLink id="cmdLink" text="New User?"
                action="dialog:newAccount"
                useWindow="true" partialSubmit="true"
                returnListener="#{backing_login.handleReturn}"
                windowHeight="200" windowWidth="500" />

commandLinkのreturnListener属性は、ページのバッキングBean（Login.java）内の戻りリスナー・メソッドへの参照を指定します。戻りリスナー・メソッドは、ダイアログが閉じたときに生成される戻りイベントを処理します。例13-20に、戻り値を処理する戻りリスナー・メソッドのコードを示します。

例13-20 バッキングBean内の「New User」リンクに対する戻りリスナー・メソッド

public void handleReturn(ReturnEvent event)
{
  if (event.getReturnValue() != null)
  {
    Customer cst;
    String name;
    String psw;
    cst = (Customer)event.getReturnValue();
    name = cst.getFirstName();
    psw = cst.getPassword();
    CustomerList.getCustomers().add(cst);
    inputText1.setSubmittedValue(null);
    inputText1.setValue(name);
    inputText2.setSubmittedValue(null);
    inputText2.setValue(psw);
  }
}

getReturnValue()メソッドを使用して戻り値を取得します。戻り値は自動的にReturnEventのプロパティとして追加されるためです。

サンプル・アプリケーションの実行時に、ADF Facesがaf:commandLinkコンポーネントに登録されているReturnListenerにReturnEventを配信すると、handleReturn()メソッドがコールされ、それに応じて戻り値が処理されます。新規ユーザーが顧客リストに追加されます。また、ユーザーへの便宜上、「Login」ページで以前に送信された値はクリアされ、入力フィールドに新しい情報が移入されます。

  戻る
戻る 		 次へ
次へ
  目次
目次		 索引
索引