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

この章では、JSFページのダイアログ、メニュー、ウィンドウなど、セカンダリ・ウィンドウでポップアップを作成および使用する方法について説明します。

この章では、次の項目について説明します。

15.1項「ポップアップ・ダイアログ、メニューおよびウィンドウについて」
15.2項「ポップアップの宣言的な作成」
15.3項「ポップアップの宣言的な呼出し」
15.4項「ポップアップのプログラムによる呼出し」
15.5項「ポップアップへのコンテキスト情報の表示」
15.6項「インライン・ポップアップの自動取消の制御」
15.7項「ポップアップの入力フィールドのリセット」

15.1 ポップアップ・ダイアログ、メニューおよびウィンドウについて

popupコンポーネントを他のいくつかのADF Facesコンポーネントとともに使用して、情報を表示またはエンド・ユーザーからの入力を要求する様々なダイアログ、メニューおよびウィンドウを作成できます。これらのコンポーネントを使用して、エンド・ユーザーがセカンダリ・ウィンドウの情報の表示と非表示、追加データの入力または機能の呼出しを行うことのできる機能を構成できます。これらのコンポーネントによって提供される機能により、プライマリ・インタフェースでレンダリングされるコンテンツの補足であるコンテンツまたは機能をレンダリングでき、その結果、整然としたユーザー・フレンドリなインタフェースを開発できます。

popupコンポーネントは非表示のレイアウト・コントロールであり、インライン(つまり、同じページに属する)ダイアログ、ウィンドウおよびメニューを表示するために他のコンポーネントと一緒に使用されます。popupコンポーネントはプライマリ・インタフェース内から呼び出され、アプリケーションは、ポップアップ・ブロッカの干渉を受けずに、プライマリ・インタフェースのコンテンツなど、popupコンポーネントにレンダリングするコンテンツを管理します。popupコンポーネントにレンダリングするコンテンツのタイプはHTMLにすることをお薦めします。FlashやPDFファイルなどの他のタイプのコンテンツは、popupコンポーネントに適切にレンダリングされないことがあります。

図15-1に、popupコンポーネントがADF Facesコンポーネントと連携してセカンダリ・ウィンドウをレンダリングする例を示します。

図15-1 ダイアログ、メニューおよびウィンドウのADF Facesコンポーネント

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

このダイアログ・フレームワークは、親ページの一部としてインラインで使用することもできます。これは、ページで固有の制御フローを使用し、外部ウィンドウをポップアップ・ブロッカでブロックしない場合に役立つことがあります。

アプリケーションで完全なFusionテクノロジ・スタックを使用する場合は、このダイアログ・フレームワークがADFタスク・フローで使用するためにADFコントローラと統合されていることに注意してください。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のモーダル・ダイアログでのバインドされたタスク・フローの実行に関する項を参照してください。

アプリケーションのweb.xmlファイルでLAST_WINDOW_SESSION_TIMEOUTという名前のコンテキスト・パラメータを使用して、アプリケーションでウィンドウが1つのみ開いている場合にセッション・タイムアウトが発生するまでの最大非アクティブ期間を指定できます。コンテキスト・パラメータに対して指定する最大非アクティブ期間は、セッション・タイムアウトに対して指定する値よりも小さい必要があります。この機能を有効にし、セッションにウィンドウが1つのみ開いている場合、セッション・タイムアウトはこのコンテキスト・パラメータに対して指定した値に設定されます。例15-1に、web.xmlファイルのLAST_WINDOW_SESSION_TIMEOUTコンテキスト・パラメータの値を1800秒に設定する方法を示します。

例15-1 アプリケーションの最後のウィンドウのセッション・タイムアウトの指定

<!-- Sets the session timeout to 1800 seconds when there is only one window open 
in the session and 1800 seconds is smaller then the original session timeout. This 
gives your application the option to end the session when an end user closes the 
last window. Specify a value in seconds. A negative value disables this feature. 
The default value is -1. -->
   <context-param>
     <param-name>LAST_WINDOW_SESSION_TIMEOUT</param-name>
     <param-value>1800</param-value>
   </context-param>

アプリケーションのweb.xmlファイルの構成の詳細は、付録A「web.xmlでの構成」を参照してください。

15.1.1 ポップアップ・ダイアログ、メニュー、ウィンドウのユースケースと例

dialogコンポーネントをpopupコンポーネントに子として配置し、実行時にポップアップにダイアログをレンダリングできます。dialogコンポーネントは、popupコンポーネントの唯一の直接の子コンポーネントである必要があります。実行時に、エンド・ユーザーは情報(検索基準など)を表示または入力でき、dialogコンポーネントのデフォルトのコマンド・コンポーネント・ボタンを使用して、クリックされたときにdialogEventを呼び出すことができます。図15-2に、エンド・ユーザーが「閉じる」ボタンをクリックすることでダイアログを閉じる例を示します。

図15-2 af:dialogコンポーネント

ポップアップ内でコンポーネントを使用して、別のコンポーネントに関連するコンテキスト情報を表示することもできます。そのように構成されている場合は、関連コンポーネントが小さな四角形を表示します。マウスが置かれると、アイコンが拡大し、図15-3に示すようにノート・アイコンも表示されます。

図15-3 マウスが置かれるとノート付きの大きなアイコンが表示される

ユーザーがノート・アイコンをクリックすると、関連付けられたポップアップにそのコンテンツが表示されます。

15.1.2 ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能

popupコンポーネントを使用してダイアログ、メニューおよびウィンドウを作成する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページにpopupコンポーネント(または関連コンポーネント)を追加した後で、アクセシビリティやローカライズなどの機能を追加することが必要になる場合があります。これらのコンポーネントで使用できる他の機能へのリンクを次に示します。

テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。
イベント: dialogコンポーネントは、ADF Facesコマンド・コンポーネントをレンダリングします。コマンド・コンポーネントをshowPopupBehaviorタグとともに使用してポップアップを起動することもできます。これらのADF Facesコマンド・コンポーネントは、アクティブ化されたときにActionEventイベントを配信します。サーバーおよびクライアント上でのイベントの処理方法の詳細は、第6章「イベントの処理」を参照してください。
メッセージ: ポップアップ・ダイアログとセカンダリ・ウィンドウは、ユーザーに様々なレベルのヘルプ情報を提供するためによく使用されます。ユーザーへのメッセージの表示方法の詳細は、第19章「ヒント、メッセージおよびヘルプの表示」を参照してください。
ローカライズ: 作成するポップアップ・ダイアログ、メニューおよびウィンドウのラベルのテキストを直接入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、テキスト文字列の翻訳を管理できます。詳細は、第29章「ページの国際化およびローカライズ」を参照してください。
スキン: スキンを変更することで、ポップアップ・ダイアログ、メニューおよびウィンドウの作成に使用するコンポーネントのルック・アンド・フィールを変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
アクセシビリティ: ポップアップ・ダイアログ、メニューおよびウィンドウをアクセス可能にできます。詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。
ダイアログ・フレームワーク: アプリケーションで完全なFusionテクノロジ・スタックを使用する場合は、ダイアログ・フレームワークがADFタスク・フローで使用するためにADFコントローラと統合されていることに注意してください。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アプリケーションでのダイアログの使用」の章を参照してください。

15.2 ポップアップの宣言的な作成

dialog、panelWindow、menuおよびnoteWindowコンポーネントは、すべてpopupコンポーネントの内部で使用して、表15-1に示すようにインライン・ポップアップを表示できます。popupコンポーネントの子コンポーネントが存在しない場合は、非常に単純なインライン・ポップアップが表示されます。

表15-1 popupコンポーネントで使用されるコンポーネント

コンポーネント	実行時の表示
`dialog`	ダイアログ内に子を表示し、`OK`、`Yes`、Noおよび`Cancel`アクションがアクティブ化されたときにイベントを配信します。詳細は、15.2.1項「ダイアログの作成方法」を参照してください。
`panelWindow`	ダイアログに似たウィンドウに子を表示しますが、イベントはサポートしません。詳細は、15.2.2項「パネル・ウィンドウの作成方法」を参照してください。
`menu`	関連コンポーネントのポップアップ・メニューを表示します。詳細は、15.2.3項「ポップアップ・メニューの作成方法」を参照してください。
`noteWindow`	特定のUIコンポーネントに関連付けられた読取り専用の情報を表示します。ノート・ウィンドウはヘルプやメッセージの表示に使用され、通常はマウスを置いたり、フォーカスをしたときに表示されます。詳細は、15.2.4項「ノート・ウィンドウの作成方法」を参照してください。
`dialog`、`panelWindow`、`menu`または`noteWindow`コンポーネントのいずれも直接の子コンポーネントとして持たない`popup`コンポーネント	コンテンツをインラインで表示します。

dialogコンポーネントとpanelWindowコンポーネントはいずれも定義ヘルプがサポートされていますが、ヘルプ・アイコン(疑問符が表示された青い丸)の上にカーソルを移動するとコンテンツが表示されます。dialogおよびpanelWindowコンポーネントでは説明ヘルプはサポートされません。詳細は、第19章「ヒント、メッセージおよびヘルプの表示」を参照してください。

通常は、コマンド・コンポーネントをshowPopupBehaviorタグとともに使用してポップアップを起動します。showPopupBehaviorタグを、起動する必要のあるコンポーネントに関連付けます。このタグは、(必要に応じて)ポップアップの位置も制御します。

コマンド・コンポーネントでアクション・イベントとともに使用することに加えて、showPopupBehaviorタグをshowDetailイベントやselectionイベントなどの他のイベントとともに使用することもできます。詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

showPopupBehaviorタグをコマンド・コンポーネントとともに使用するかわりに、バッキングBeanメソッドを作成することでポップアップを起動、取消または非表示にできます。作成するバッキングBeanメソッドは、コマンド・コンポーネントによって返されるactionEventを引数として受け取ります。この代替方法の詳細は、15.4項「ポップアップのプログラムによる呼出し」を参照してください。

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

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

lazy - 前述のデフォルトの方法。コンテンツは、ポップアップが一度表示されるまでロードされず、ロードされるとキャッシュされます。
immediate - コンテンツはすぐにページにロードされるため、コンテンツを可能なかぎり迅速に表示できます。この方法は、ページが使用されるたびにすべてのユーザーが必ず使用するポップアップに使用します。
lazyUncached - コンテンツはポップアップが表示されるまでロードされず、ポップアップを表示するたびにコンテンツが再ロードされます。この方法は、失効するか期限切れになる可能性があるデータをポップアップに表示する場合に使用します。

popupコンポーネントのcontentDelivery属性をlazyに設定することを選択した場合、別のpopupコンポーネント属性(childCreation)をdeferredに設定することで、popupコンポーネントとそれをホストするページのパフォーマンスをさらに最適化できます。これにより、アプリケーションがコンテンツを配信するまでpopupコンポーネントの子コンポーネントの作成が遅延されます。childCreation属性のデフォルト値はimmediateです。

15.2.1 ダイアログの作成方法

ダイアログの終了時にイベントを起動する必要がある場合は、ダイアログを作成します。dialogコンポーネントをpopupコンポーネントに子として追加した後、他のコンポーネントを追加してデータを表示および収集できます。

デフォルトでは、dialogコンポーネントは次のボタンの組合せを持つことができます。

取消
OK
「OK」および「取消」
「はい」および「いいえ」
「はい」、「いいえ」および「取消」
なし

これらのボタンは、クリックされるとdialogEventを起動します。buttonBarファセットを使用して、ダイアログに他のボタンを追加できます。追加するボタンはdialogEventを起動しません。かわりに、標準のactionEventを起動します。追加するこれらのボタンでは、partialSubmit属性をtrueに設定することをお薦めします。これにより、actionEventがダイアログ内のコンポーネントに対してのみ起動することが保証されます。ただし、af:popupコンポーネントのautoCancelプロパティの値をdisabledに設定した場合は、ボタンを追加し、そのpartialSubmit属性をfalseに設定できます。この後者のオプション(partialSubmitをfalseに設定)を選択すると、アプリケーションはpopupコンポーネントの可視性(また、拡張によりdialogコンポーネント)をリストアする前にページを再ロードしてページのコンポーネントを再初期化するため、エンド・ユーザーの待機時間が長くなります。af:popupコンポーネントのautoCancelプロパティの値がenabled(デフォルト値)に設定されている場合は、コマンド・コンポーネントのpartialSubmit属性をtrueに設定する必要があります。af:popupコンポーネントのautoCancelプロパティの使用の詳細は、15.6項「インライン・ポップアップの自動取消の制御」を参照してください。

始める前に:

dialogコンポーネントの属性およびその他のコンポーネントがインライン・ダイアログの機能に与える影響を理解することが役立つ場合があります。詳細は、15.2項「ポップアップの宣言的な作成」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、15.1.2項「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。

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

コンポーネント・パレットの「ADF Faces」ページで、「レイアウト」パネルの「セカンダリ・ウィンドウ」グループから「ポップアップ」をドラッグしてページにドロップします。

ヒント:

位置はpopupの呼出しに使用されるコンポーネントによって決定されるため、popupコンポーネントがページに表示されるかどうかは関係ありません。ただし、popupコンポーネントはformコンポーネント内にある必要があります。

プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。

ContentDelivery: ポップアップのコンポーネントにコンテンツが配信される方法を選択します。

ヒント:

ダイアログの入力コンポーネントの値は、ユーザーがダイアログの「取消」ボタンをクリックしたときにリセットされません。ユーザーが2回目にダイアログを開いた場合、これらの値が依然として表示されます。この値をサーバーの現在の値に合せるには、contentDelivery属性をlazyUncachedに設定します。

Animate: アニメーションを有効にするにはtrueを選択します。アニメーションはtrinidad-config.xmlファイルの構成とそのスキン・プロパティによって決定されます(詳細は、A.6.2.1項「アニメーションの有効化」を参照してください)。falseを選択することで、この設定をオーバーライドできます。
LauncherVar: 起動コンポーネントの参照に使用する変数を入力します。この変数は、popupまたはその子コンポーネントでのイベント配信時にのみ、またEventContextがlauncherに設定されている場合にのみアクセス可能です。
EventContext: ポップアップが複数のオブジェクトによって共有されている場合、たとえばポップアップ内のダイアログに表で選択された行に関する情報が表示される場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーがコールされる前にクリックされた行が現在の行になり、その行のデータのみ返されます。詳細は、15.2.5項「実行時に行われる処理: popupコンポーネントのイベント」を参照してください。

オプションで、プロパティ・インスペクタで「共通」セクションを開いて次の属性を設定します。
- AutoCancel: インライン・ポップアップの自動取消を防ぐにはdisabledを選択します。詳細は、15.6項「インライン・ポップアップの自動取消の制御」を参照してください。
- ChildCreation: アプリケーションがコンテンツを配信するまでpopupコンポーネントの子コンポーネントの作成を遅延するにはdeferredに設定します。childCreation属性のデフォルト値はimmediateです。詳細は、15.2項「ポップアップの宣言的な作成」を参照してください。
- ResetEditableValues: エンド・ユーザーがダイアログを取り消す場合にエンド・ユーザーが入力した編集可能な値をnullにリセットするには、whenCanceledを選択します。
  
  または、resetListenerコンポーネントを使用できます。resetListenerコンポーネントの使用の詳細は、15.7項「ポップアップの入力フィールドのリセット」を参照してください。
コンポーネント・パレットから、「ダイアログ」をpopupコンポーネントに直接の子としてドラッグ・アンド・ドロップします。

プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。

Type: ダイアログに表示する組込みの部分送信コマンド・ボタンを選択します。

たとえば、type属性をyesNoCancelに設定した場合、ダイアログには「はい」、「いいえ」、「取消」のボタンが表示されます。これらのいずれかのボタンがクリックされると、ダイアログが閉じ、関連付けられた結果(ok、yes、noまたはcancel)がイベントで配信されます。ok、yesおよびnoの結果はdialogEventで配信されます。cancelの結果はPopupCanceledイベントで送信されます。ロジックの決定に結果を使用して、適切なリスナー・プロパティを使用し、イベントを処理するメソッドにバインドできます。

ヒント:

エラーまたはそれより高い重大度のADF Facesメッセージがある場合、ダイアログは閉じません。
Title: ダイアログ・ウィンドウにタイトルとして表示するテキストを入力します。
CloseIconVisible: 「閉じる」アイコンをダイアログに表示するかどうかを選択します。
Modal: ダイアログをモーダルにするかどうかを選択します。モーダル・ダイアログでは、ユーザーはダイアログが閉じられるまでメイン・ページに戻ることができません。
Resize: ユーザーがダイアログのサイズを変更できるようにするかどうかを選択します。デフォルトはoffです。

StretchChildren: 子コンポーネントをダイアログに合せて拡大するかどうかを選択します。firstに設定されている場合、ダイアログは単一の子コンポーネントを拡大します。ただし、拡大できる子コンポーネントであることが必要です。詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

注意:

Resizeをonに設定するかStretchChildrenをfirstに設定した場合は、ContentWidthおよびContentHeightも設定する必要があります(手順8を参照)。それ以外の場合、サイズはデフォルトで250x250ピクセルになります。

「外観」セクションを開き、テキスト属性を設定します。

ボタン・テキストとアクセス・キーを別々に指定するかわりに、2つを結合して、アクセス・キーがボタン・テキストの一部になるようにできます。アクセス・キーとして使用する文字の前にアンパサンド(&)を付けます。

たとえば、肯定ボタンのテキストを「OK」にし、「OK」の「O」をアクセス・キーにする場合は、「&OK」と入力します。
「動作」セクションを開き、必要に応じてDialogListener属性の値を入力します。値は、イベントを処理するダイアログ・リスナー・メソッドへのEL式メソッド参照である必要があります。

たとえば、項目の削除を確認するダイアログを作成するとします。例15-2に示すdeleteItemメソッドのようなメソッドをマネージドBeanに作成できます。このメソッドは、イベントからの結果にアクセスします。結果がyes以外の場合は、ダイアログが閉じられます。結果がyes(ユーザーが項目を閉じることを意味します)の場合、メソッドは選択された項目を取得し、削除します。
例15-2 項目を削除するdialogEventのハンドラ
```
  public void deleteItem(DialogEvent dialogEvent)
  {
    if (dialogEvent.getOutcome() != DialogEvent.Outcome.yes)
    {
      return;
    }
 
    // Ask for selected item from FileExplorerBean
    FileItem selectedFileItem = _feBean.getLastSelectedFileItem();
    if (selectedFileItem == null)
    {
      return;
    }
    else
    {
      // Check if we are deleting a folder
      if (selectedFileItem.isDirectory())
      {
        _feBean.setSelectedDirectory(null);
      }
    }
 
    this.deleteSelectedFileItem(selectedFileItem);
  }
```
例15-3に、dialogListener属性がdeleteItemメソッドにバインドされる方法を示します。
例15-3
```
<af:dialog title="#{explorerBundle['deletepopup.popuptitle']}"
           type="yesNo"
           dialogListener="#{explorer.headerManager.deleteItem}"
           id="d1">
```
dialogEventは、結果がok、yesまたはnoの場合にのみサーバーに伝播されます。必要に応じてこれをブロックできます。詳細は、6.3.5項「イベントがサーバーに伝播されないようにする方法」を参照してください。

ユーザーが「取消」ボタン(または「閉じる」アイコン)をクリックした場合、結果はcancelで、popupCancelクライアント・イベントがpopupコンポーネントで発生します。popupコンポーネントにレンダリングされた入力コンポーネントに入力された値は、サーバーに送信されません。popupコンポーネントがレンダリングした後で値が変更された編集可能コンポーネントは、変更された値をサーバーに送信しません。popupCancelイベントがサーバーに配信されます。

ダイアログに固定サイズを設定する場合、またはresizeをonに設定するかstretchChildrenをfirstに設定する場合は、「外観」セクションを開き、次の属性を設定します。

ContentHeight: 目的の高さをピクセル単位で入力します。
ContentWidth: 目的の幅をピクセル単位で入力します。

ヒント:

(resize属性がonに設定されている場合)ユーザーは実行時にこれらの属性の値を変更できますが、アプリケーションが変更の永続性を使用するように構成されていないかぎり、ユーザーがページを終了すると値は保持されません。変更の永続性の有効化および使用方法の詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。

注意:

showPopupBehaviorタグのないコマンド・コンポーネントを使用してダイアログを起動する場合、また、そのコマンド・コンポーネントのwindowHeightおよびwindowWidth属性に値が指定されている場合、コマンド・コンポーネントの値はcontentHeightおよびcontentWidthの値をオーバーライドします。ダイアログ・フレームワークでは、コマンド・コンポーネントを使用して、showPopupBehaviorタグなしでダイアログを起動できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のモーダル・ダイアログでのバインドされたタスク・フローの実行に関する項を参照してください。showPopupBehaviorタグの詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

必要に応じて、コマンド・コンポーネントをbuttonBarファセットに追加します。追加された各コマンド・コンポーネントに対してpartialSubmit属性をtrueに設定することをお薦めします。ただし、af:popupコンポーネントのautoCancelプロパティがdisabledに設定されている場合は、コマンド・コンポーネントのpartialSubmit属性をfalseに設定できます。af:popupコンポーネントのautoCancelプロパティおよびコマンド・コンポーネントのpartialSubmitプロパティの値は、コマンド・コンポーネントがダイアログを閉じて再ロードする方法を決定します。詳細は、15.6項「インライン・ポップアップの自動取消の制御」を参照してください。

ヒント:

ファセットがビジュアル・エディタに表示されない場合は、次のようにします。

構造ウィンドウで、dialogコンポーネントを右クリックします。
ポップアップ・メニューから、「ファセット - ダイアログ」→「ButtonBar」を選択します。ページで使用されているファセットは、ファセット名の前にチェックマークが表示されます。

デフォルトでは、追加されたコマンド・コンポーネントはダイアログを閉じません。コマンド・コンポーネントのactionListenerを、ダイアログの終了および必要な処理を管理するハンドラにバインドする必要があります。これを行う方法の例は、タグのドキュメントを参照してください。

ダイアログのデータを表示または収集するコンポーネントを挿入します。panelGroupLayoutなどのレイアウト・コンポーネントを使用してコンポーネントを含めます。

ヒント:

通常は、ダイアログの「取消」ボタンまたは「閉じる」アイコンをクリックすると、inputTextコンポーネントに入力されたデータは送信されません。ただし、ダイアログのinputTextコンポーネントでautoSubmit属性をtrueに設定すると、この設定が送信の原因となるためダイアログの取消動作がオーバーライドされます。

親ページにロジックを追加して、ポップアップとダイアログを呼び出します。詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

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

panelWindowコンポーネントはdialogコンポーネントに似ていますが、ボタンの構成やファセットへのボタンの追加はできません。panelWindowのデータを処理するロジックを呼び出す必要がある場合は、popupコンポーネントのcancelイベントのリスナーを作成する必要があります。

panelWindowコンポーネントを含むpopupコンポーネントは、formコンポーネントに含まれている必要があります。

ヒント:

Fusionテクノロジ・スタックを使用するアプリケーションでpanelWindowをインライン・ポップアップとして使用している場合に、ダイアログの外観をエミュレートするには、panelStretchLayoutコンポーネントの中央ファセットにpanelWindowコンポーネントを配置し、コマンド・ボタンをbottomファセットに配置します。

始める前に:

panelWindowコンポーネントの属性がインライン・ウィンドウの機能に与える影響を理解することが役立つ場合があります。詳細は、15.2項「ポップアップの宣言的な作成」を参照してください。

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

ヒント:

位置はpopupの呼出しに使用されるコンポーネントによって決定されるため、popupコンポーネントがページに表示されるかどうかは関係ありません。ただし、popupコンポーネントはformコンポーネント内にある必要があります。

プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。

ContentDelivery: ポップアップのコンポーネントにコンテンツが配信される方法を選択します。

ヒント:

入力コンポーネントの値は、ユーザーがpanelWindowコンポーネントを閉じたときにリセットされません。ユーザーが2回目にウィンドウを開いた場合、これらの値が依然として表示されます。この値をサーバーの現在の値に合せるには、contentDelivery属性をlazyUncachedに設定します。

Animate: アニメーションを有効にするにはtrueを選択します。アニメーションは、trinidad-config.xmlファイルの構成およびスキン・プロパティ(詳細は、A.6.2.1項「アニメーションの有効化」を参照)によって決定されます。
LauncherVar: 変数の名前(sourceなど)を入力します。表のvar属性と同様に、この変数はリクエスト・スコープの参照を、showPopupBehaviorタグを含むコンポーネントに格納するために使用されます。変数は、popupまたはその子コンポーネントでのイベント配信時にのみ、またEventContextがlauncherに設定されている場合にのみアクセス可能です。
EventContext: ポップアップが複数のオブジェクトによって共有されている場合、たとえばポップアップ内のウィンドウに表で選択された行に関する情報が表示される場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーがコールされる前にクリックされた行が現在の行になり、その行のデータのみ返されます。詳細は、15.2.5項「実行時に行われる処理: popupコンポーネントのイベント」を参照してください。
PopupCancelListener: ウィンドウが閉じられるときに呼び出すロジックでハンドラに評価されるEL式に設定します。

オプションで、プロパティ・インスペクタの「共通」セクションを開き、AutoCancelプロパティの値を設定して自動取消動作を決定します。詳細は、15.6項「インライン・ポップアップの自動取消の制御」を参照してください。
コンポーネント・パレットの「ADF Faces」ページで、「レイアウト」パネルから「パネル・ウィンドウ」をpopupコンポーネントに直接の子としてドラッグ・アンド・ドロップします。

プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。

Modal: ウィンドウをモーダルにするかどうかを選択します。モーダル・ウィンドウでは、ユーザーはウィンドウが閉じられるまでメイン・ページに戻ることができません。
CloseIconVisible: 「閉じる」アイコンをウィンドウに表示するかどうかを選択します。
Title: ウィンドウにタイトルとして表示されるテキスト。
Resize: ユーザーがダイアログのサイズを変更できるようにするかどうかを選択します。デフォルトはoffです。

StretchChildren: 子コンポーネントをウィンドウに合せて拡大するかどうかを選択します。firstに設定されている場合、ウィンドウは単一の子コンポーネントを拡大します。ただし、拡大できる子コンポーネントであることが必要です。詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

注意:

Resizeをonに設定するかStretchChildrenをfirstに設定した場合は、ContentWidthおよびContentHeightも設定する必要があります(手順6を参照)。それ以外の場合、サイズはデフォルトで250x250ピクセルになります。

ウィンドウに固定サイズを設定する場合、またはresizeをonに設定するかstretchChildrenをfirstに設定する場合は、「外観」セクションを開き、次の属性を設定します。

ContentHeight: 目的の高さをピクセル単位で入力します。
ContentWidth: 目的の幅をピクセル単位で入力します。

ヒント:

注意:

ウィンドウのデータを表示または収集するコンポーネントを挿入します。panelGroupLayoutなどのレイアウト・コンポーネントを使用してコンポーネントを含めます。
親ページにロジックを追加して、ポップアップとパネル・ウィンドウを呼び出します。詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

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

popupコンポーネント内でメニュー・コンポーネントを使用して、ポップアップ・メニューを作成します。特定のトリガーに基づいて、別のコンポーネントからコンテキスト・メニュー・ポップアップを呼び出すことができます。かわりに、ツールバーのツールバー・ボタンでポップアップ・メニューを起動する場合は、16.3項「ツールバーの使用方法」を参照してください。

始める前に:

popupコンポーネントの属性およびその他のコンポーネントがポップアップ・メニューの機能に与える影響を理解することが役立つ場合があります。詳細は、15.2項「ポップアップの宣言的な作成」を参照してください。

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

ヒント:

位置はpopupの呼出しに使用されるコンポーネントによって決定されるため、popupコンポーネントがページに表示されるかどうかは関係ありません。ただし、popupコンポーネントはformコンポーネント内にある必要があります。

プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
- ContentDelivery: ポップアップのコンポーネントにコンテンツが配信される方法を決定します。
- Animate: アニメーションを有効にするにはtrueを選択します。アニメーションは、trinidad-config.xmlファイルの構成およびスキン・プロパティ(詳細は、A.6.2.1項「アニメーションの有効化」を参照)によって決定されます。falseを選択することで、この設定をオーバーライドできます。
- LauncherVar: 起動コンポーネントの参照に使用する変数名(sourceなど)を入力します。この変数は、popupまたはその子コンポーネントでのイベント配信時にのみ、またEventContextがlauncherに設定されている場合にのみアクセス可能です。
- EventContext: ポップアップが複数のオブジェクトによって共有されている場合、たとえばポップアップ内のメニューに表で選択された行に関する情報が表示される場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーがコールされる前にクリックされた行が現在の行になり、その行のデータのみ返されます。詳細は、15.2.5項「実行時に行われる処理: popupコンポーネントのイベント」を参照してください。
オプションで、プロパティ・インスペクタの「共通」セクションを開き、AutoCancelプロパティの値を設定して自動取消動作を決定します。詳細は、15.6項「インライン・ポップアップの自動取消の制御」を参照してください。

コンポーネント・パレットから、「メニュー」をpopupコンポーネントに直接の子としてドラッグ・アンド・ドロップし、16.2.1項「メニュー・バーのメニューの作成および使用方法」の手順6以降に従ってcommandMenuItemコンポーネントを使用してメニューを作成します。

ヒント:

これはポップアップ・メニューであるため、16.2.1項「メニュー・バーのメニューの作成および使用方法」の手順1から5に従ってメニュー・バーまたは複数メニューを作成する必要はありません。

親ページにロジックを追加して、ポップアップとポップアップ・メニューを呼び出します。詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

15.2.4 ノート・ウィンドウの作成方法

noteWindowコンポーネントを使用して、読取り専用テキストを表示します。noteWindowコンポーネントを含むpopupコンポーネントは、formコンポーネントに含まれている必要があります。

始める前に:

noteWindowコンポーネントの属性およびその他のコンポーネントが機能に与える影響を理解することが役立つ場合があります。詳細は、15.2項「ポップアップの宣言的な作成」を参照してください。

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

ヒント:

プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
- ContentDelivery: ポップアップのコンポーネントにコンテンツが配信される方法を決定します。
- Animate: アニメーションを有効にするにはtrueを選択します。アニメーションは、trinidad-config.xmlファイルの構成およびスキン・プロパティ(詳細は、A.6.2.1項「アニメーションの有効化」を参照)によって決定されます。falseを選択することで、この設定をオーバーライドできます。
- LauncherVar: 起動コンポーネントの参照に使用する変数を入力します。この変数は、popupまたはその子コンポーネントでのイベント配信時にのみ、またEventContextがlauncherに設定されている場合にのみアクセス可能です。
- EventContext: ポップアップが複数のオブジェクトによって共有されている場合、たとえばポップアップ内のウィンドウに表で選択された行に関する情報が表示される場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーがコールされる前にクリックされた行が現在の行になり、その行のデータのみ返されます。詳細は、15.2.5項「実行時に行われる処理: popupコンポーネントのイベント」を参照してください。
- PopupCancelListener: ウィンドウが閉じられるときに呼び出すロジックでハンドラに評価されるEL式に設定します。
オプションで、プロパティ・インスペクタの「共通」セクションを開き、AutoCancelプロパティの値を設定して自動取消動作を決定します。詳細は、15.6項「インライン・ポップアップの自動取消の制御」を参照してください。
コンポーネント・パレットから、「ノート・ウィンドウ」をpopupコンポーネントに直接の子としてドラッグ・アンド・ドロップします。
ウィンドウに表示するテキストを入力する手順:
1. 「ソース」タブをクリックしてページのソース・コードを表示します。
2. af:noteWindowタグから閉じるスラッシュ(/)を削除します。
3. af:noteWindowタグの下に、表示するテキストを単純なHTMLタグを使用して入力し、閉じるaf:noteWindowタグで終了します。
例15-4に、ノート・ウィンドウのテキストを表示します。
例15-4 af:noteWindowタグ内のテキスト
```
<af:popup id="popupHead" contentDelivery="lazyUncached">
  <af:noteWindow inlineStyle="width:200px" id="nw3">
    <p>In anatomy, the head of an animal is the rostral part (from
    anatomical position) that usually comprises the brain, eyes,
    ears, nose, and mouth (all of which aid in various sensory
    functions, such as sight, hearing, smell, and taste). Some very
    simple animals may not have a head, but many bilaterally
    symmetric forms do.</p>
  </af:noteWindow>
</af:popup>
```
図15-4に、ノートがどのように表示されるかを示します。

図15-4 ノート・ウィンドウに表示されるテキスト

オプションで、プロパティ・インスペクタの「動作」セクションを開き、AutoDismissalTimeoutプロパティに秒数を指定します。指定する値によって、アプリケーションが自動的に閉じる前にノート・ウィンドウが表示される秒数が決定されます。指定する値によって、デフォルトの自動消去動作がオーバーライドされます。エンド・ユーザーがノート・ウィンドウのコンテンツにマウスを移動すると、自動消去動作はノート・ウィンドウのデフォルトの自動消去動作に戻るため、このオーバーライドは取り消されます。デフォルトの自動消去動作では、フォーカスが起動ソースまたはポップアップのコンテンツから変更された場合にノート・ウィンドウが終了します。

注意:

タイムアウト取消期間はマウス・カーソルを重ねることでトリガーされ、キーボードの同等の操作は用意されていないため、このプロパティで有効化された機能は使い勝手がよいとは言えません。

親ページにロジックを追加して、ポップアップとノート・ウィンドウを呼び出します。詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

15.2.5 実行時に行われる処理: popupコンポーネントのイベント

コンテンツがポップアップに配信され、contentDelivery属性がlazyまたはlazyUncachedに設定されている場合は、popupFetchサーバー側イベントが起動します。このイベントには、eventContextとlauncherVarの2つのプロパティがあります。eventContextプロパティは、イベントの配信元のコンテキストがポップアップのコンテキスト(self)とポップアップを起動したコンポーネント(launcher)のどちらであるかを決定します。コンテキストをlauncherに設定すると、フレームワークはポップアップを起動したコンポーネントがポップアップではなくイベントを起動したかのうように動作するため、ポップアップが複数のコンポーネントによって共有されている場合に非常に便利な可能性があります。変数を使用して表の行をスタンプ・アウトするのと同様の方法で、launcherVarプロパティを使用して現在のランチャを追跡します。

たとえば、表にコマンド・リンクを使用して人物の名前を表示する列があるとします。コマンド・リンクにマウス・カーソルを置くと、人物の姓名を表示するポップアップnoteWindowが起動されます。このnoteWindowは表のすべての行によって使用されますが、クリックされたコマンド・リンクを含む行の姓名のみ表示する必要があるため、例15-5に示すように、eventContextプロパティを使用してそのコンテキストがその行であるようにする必要があります。

例15-5 共有ポップアップでのeventContextの使用

<af:popup id="noteWindow" contentDelivery="lazyUncached" eventContext="launcher"
          launcherVar="source">
  <af:noteWindow>
    <af:outputText value="#{testBean.fullName}"/>
  </af:noteWindow>
</af:popup>
<af:table var="person" value="#{testBean.people}">
  <af:column id="firstName">
    <af:commandLink text="#{person.firstName}">
      <af:showPopupBehavior popupId="::noteWindow" triggerType="mouseHover"/>
    </af:commandLink>
  </af:column>
</af:table>

変数ソースを使用して、ソースから値を取得し、それらを適用するか、値を設定できます。たとえば、例15-6に示すようにsetPropertyListenerおよびclientAttributeタグを使用して、表で使用されるpeopleオブジェクトの姓名値を取得し、それをウィンドウで使用されるtestBeanのfullNameプロパティの値として設定できます。

例15-6 launcherVarプロパティを使用したポップアップのコンポーネントの値の設定

<af:popup id="noteWindow" contentDelivery="lazyUncached" eventContext="launcher"
          launcherVar="source">
  <af:noteWindow>
    <af:outputText value="#{testBean.fullName}"/>
  </af:noteWindow>
  <af:setPropertyListener from="#{source.attributes.fullName}"
                          to="#{testBean.fullName}" type="popupFetch"/>
</af:popup>
<af:table var="person" value="#{testBean.people}">
  <af:column id="firstName">
    <f:facet name="header">
      <af:outputText value="First Name"/>
    </f:facet>
    <af:commandLink text="#{person.firstName}">
      <af:showPopupBehavior popupId="::noteWindow" triggerType="mouseHover"/>
      <af:clientAttribute name="fullName" value="#{person.fullName}"/>
    </af:commandLink>
  </af:column>
</af:table>

この例では、launcherVarプロパティ・ソースはpopupFetchイベントを使用して現在の行の姓名を取得します。setPropertyListenerタグの使用の詳細は、5.7.2項「Javaコードを記述せずにpageFlowScopeスコープを使用する方法」を参照してください。クライアント属性の使用の詳細は、4.7項「クライアント側コンポーネントに対するボーナス属性の使用」を参照してください。showPopupBehaviorタグの詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

ポップアップは、次のクライアント側イベントも起動します。

popupOpening: ポップアップが呼び出されたときに起動します。このイベントがクライアント側のリスナーで取り消されると、ポップアップは表示されません。
popupOpened: ポップアップが表示可能になった後、起動されます。このイベントを使用する1つの例は、ポップアップでデフォルトのフォーカスをオーバーライドするカスタム・ルールの作成です。
popupCanceled: 自動消去やポップアップ・クライアント・コンポーネントのcancelメソッドの明示的な起動によってポップアップが予期せずに閉じると、起動します。このクライアント側イベントには、サーバー側の対応するイベントもあります。
popupClosed: ポップアップが非表示の場合、またはポップアップが予期せず閉じた場合に起動します。このクライアント側イベントには、サーバー側の対応するイベントもあります。

「はい」ボタンのクリックなど、肯定的な状況でポップアップが閉じられた場合は非表示になります。「閉じる」アイコンまたは「取消」ボタンがクリックされた場合など、ポップアップが自動消去によって閉じられた場合は取り消されます。どちらのタイプの消去でも、popupClosedクライアント側イベントが発生します。ポップアップを取り消すと、サーバー側に対応するイベントを持つクライアント側popupCanceledイベントも発生します。イベントに対しステータス登録されたリスナーがないかぎり、イベントはサーバーに伝播されません。伝播される場合、ポップアップの子コンポーネントの処理が阻止されるため、送信された値と検証は無視されます。ポップアップが取り消された場合に必要な処理を行うロジックを含む、popupCanceledイベントのリスナーを作成できます。

クライアント側イベントに基づくロジックを呼び出す場合は、カスタム・クライアント・リスナー・メソッドを作成できます。詳細は、4.2項「クライアント・イベントのリスニング」を参照してください。クライアント・イベントに基づいてサーバー側ロジックを呼び出す場合は、そのロジックを呼び出すserverListenerタグを追加できます。詳細は、6.4項「クライアントからサーバーへのカスタム・イベントの送信」を参照してください。

15.2.6 ダイアログ・イベントについて

dialogコンポーネントは、エンド・ユーザーが「OK」、「はい」、「いいえ」または「取消」ボタンをクリックしたときにdialogEventを生成します。dialogコンポーネントは、エラーまたはそれ以上の重大度のメッセージがページに存在しなければ、エンド・ユーザーが「OK」、「はい」または「いいえ」ボタンをクリックしたときに自動的に非表示になります。「取消」ボタンまたは閉じるアイコンを選択するエンド・ユーザーは、親popupコンポーネントを取り消し、ポップアップ取消イベントを生成します。

「OK」、「はい」、「いいえ」または「取消」ボタンによって返されるdialogEventをインターセプトするようにdialogListener属性を構成できます。「OK」、「はい」および「いいえ」ボタンによって返されるdialogEventのみ、サーバーに伝播されます。「取消」ボタン、[Esc]キーおよび閉じるアイコンによって返されるdialogEventは、クライアント・ダイアログ・イベントをキューに入れ、サーバーに伝播しません。

dialogコンポーネントが戻った後でdialogコンポーネントを呼び出してアクション(たとえば、inputTextコンポーネントの更新)を実行するコマンド・コンポーネントのactionListenerを構成する場合、コマンド・コンポーネントのimmediate値がtrueに設定されている場合はinputTextコンポーネントに対してresetValue()を呼び出す必要もあります。

dialogおよびpopupコンポーネントによって起動されるイベントの詳細は、『Oracle Fusion Middleware Oracle ADF Facesタグ・リファレンス』を参照してください。

15.3 ポップアップの宣言的な呼出し

ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。showPopupBehaviorタグは宣言的なソリューションを提供するため、popupコンポーネントを開くJavaScriptを作成したり、スクリプトをpopupコンポーネントに登録したりする必要はありません。クライアントの動作タグの詳細は、6.6項「ADF Facesのクライアントの動作タグの使用」を参照してください。

showPopupBehaviorタグは、コマンド・コンポーネントのactionEventやshowDetailコンポーネントのdisclosureEventなど、指定されたイベントをリスニングします。ただし、showPopupBehaviorタグはサーバーへのそのイベントの配信も取り消します。したがって、showPopupBehaviorタグがリスニングするイベントに基づいてサーバー側ロジックを起動する必要がある場合は、JavaScriptを使用してポップアップを呼び出すか、15.4項「ポップアップのプログラムによる呼出し」の説明に従ってpopupコンポーネントをプログラムで呼び出す必要があります。

15.3.1 af:showPopupBehaviorタグを使用してポップアップを宣言的に呼び出す方法

showPopupBehaviorタグは、ダイアログを呼び出すcommandButtonコンポーネントや右クリックされるとポップアップ・メニューを呼び出すinputTextコンポーネントなど、ポップアップを呼び出すコンポーネントとともに使用します。

始める前に:

15.2項「ポップアップの宣言的な作成」で説明したように、宣言的に呼び出すポップアップのタイプを作成し、ポップアップを呼び出すコンポーネントを作成します。

popupコンポーネントを宣言的に呼び出す場合は、使用可能な構成オプションに関する知識が役立つ場合があります。詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。

showPopupBehaviorタグを使用する手順:

コンポーネント・パレットで、「操作」パネルの「動作」グループから「ポップアップ表示動作」をドラッグし、ポップアップを呼び出すコンポーネントに子としてドロップします。
プロパティ・インスペクタで、PopupId属性のドロップダウン・メニューを使用して「編集」を選択します。「プロパティの編集: PopuId」ダイアログを使用して、呼び出すポップアップ・コンポーネントを選択し、「OK」をクリックします。

プロパティ・インスペクタで、「TriggerType」ドロップダウン・メニューから、ポップアップを呼び出すトリガーを選択します。デフォルトは、コマンド・コンポーネントに使用できるactionです。マウスが右クリックされたときにポップアップをトリガーするにはcontextMenuを使用します。カーソルがコンポーネント上に置かれたときにポップアップをトリガーするにはmouseHoverを使用します。カーソルがコンポーネントから離れるとポップアップが閉じます。ポップアップをトリガーできるコンポーネントおよびマウス/キーボード・イベントの詳細なリストは、『Oracle Fusion Middleware Oracle ADF Facesタグ・リファレンス』のshowPopupBehaviorタグのドキュメントを参照してください。

注意:

showPopupBehaviorタグのtriggerType属性に対して選択されたイベントは、サーバーに配信されません。このイベントに基づいてサーバー側ロジックを起動する必要がある場合は、6.4項「クライアントからサーバーへのカスタム・イベントの送信」の説明に従ってJavaScriptまたはカスタム・イベントを使用してポップアップを呼び出すか、15.4項「ポップアップのプログラムによる呼出し」の説明に従ってポップアップをプログラムで呼び出す必要があります。

「AlignId」ドロップダウンから、「編集」を選択し、「プロパティの編集: AlignId」ダイアログを使用して、ポップアップを位置合せするコンポーネントを選択します。

「位置合せ」ドロップダウン・メニューから、前の手順で選択したコンポーネントとの相対でポップアップを配置する方法を選択します。

注意:

dialogおよびpanelWindowコンポーネントでは、対応するポップアップをユーザーが移動できるため、alignIdまたはalign属性は不要です。AlignIdを設定した場合、値はダイアログまたはウィンドウの位置を手動でドラッグ・アンド・ドロップすることでオーバーライドされます。AlignIdまたはAlignに値が入力されていない場合、ダイアログまたはウィンドウはブラウザの中央に開きます。

また、triggerType属性がcontextMenuに設定されている場合、配置は常にマウスの位置に基づきます。

15.3.2 af:showPopupBehaviorタグを使用してポップアップを呼び出した場合の処理

設計時に、JDeveloperはプロパティ・インスペクタで選択したソース・ファイルに対応する値を生成します。例15-7に、ボタン「Click me」がクリックされると、"popup1"というIDのaf:popupコンポーネントにテキストが表示されるサンプル・コードを示します。

例15-7 commandButtonコンポーネントに関連付けられたshowPopupBehavior

<af:commandButton immediate="true" 
  text="Show Popup" 
  clientComponent="true"
  id="popupButton2">
    <af:showPopupBehavior
      popupId="popup2"
      alignId="popupButton2"
      align="afterStart"/>
</af:commandButton>

<af:popup id="popup2">
  <af:inputText label="What is your name?" id="it1"/>  
</af:popup>

例15-7のコードは、ポップアップ・コンポーネントの位置をid属性で識別されるcommandButtonに合せ、図15-5に示すようにポップアップをボタンの下に合せるafterStartの配置を使用するようADF Facesに指示します。

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

15.4 ポップアップのプログラムによる呼出し

コマンド・コンポーネントによって生成されたactionEventに対して、ポップアップをプログラムで表示、非表示または取り消すことができます。actionEventをサーバーに即時に配信してサーバー側ロジックを起動できるようにし、サーバー側ロジックの起動結果に対してポップアップを表示、非表示または取り消すことができるようにするには、この機能を実装します。

ここで説明するポップアップのプログラムによる呼出しは、showPopupBehaviorタグがactionEventをサーバーに即時に配信しない、15.3項「ポップアップの宣言的な呼出し」で説明したポップアップの呼出し方法とは異なります。

15.2項「ポップアップの宣言的な作成」で説明したように、コンポーネント(dialog、panelWindow、menuまたはnoteWindow)の1つをpopupコンポーネントに配置することで、目的のタイプのポップアップを作成します。popupコンポーネントが呼出し時に適切なコンテキストにあることを確認してください。これを簡単に行う方法の1つは、例15-8に示すようにページのバッキングBeanにバインドすることです。

例15-8 popupコンポーネントのバッキングBeanへのバインド

<af:popup 
  id="p1" 
  binding="#{mybean.popup}"
  ...
/>

これを行った後で、ポップアップ・バインディングのアクセッサを呼び出すことでpopupコンポーネントを参照するようにコマンド・コンポーネントのactionListener属性を構成します。

ポップアップの呼出し、取消または非表示を行うバッキングBeanメソッドのコードを作成します。例15-9に、HINT_LAUNCH_IDヒントを使用してactionEventを渡すコマンド・コンポーネントを識別し、p1を使用してshowメソッドを呼び出すポップアップを参照するshowPopupバッキングBeanメソッドを示します。

例15-9 ポップアップを呼び出すバッキングBeanメソッド

public void showPopup(ActionEvent event) {
{
   FacesContext context = FacesContext.getCurrentInstance();
   UIComponent source = (UIComponent)event.getSource();
   String alignId = source.getClientId(context);
   RichPopup.PopupHints hints = new RichPopup.PopupHints();
      hints.add(RichPopup.PopupHints.HintTypes.HINT_ALIGN_ID,source)
      .add(RichPopup.PopupHints.HintTypes.HINT_LAUNCH_ID,source)
      .add(RichPopup.PopupHints.HintTypes.HINT_ALIGN,
      RichPopup.PopupHints.AlignTypes.ALIGN_AFTER_END);
   p1.show(hints);
}

例15-10に、actionEventに対してポップアップを取り消すバッキングBeanメソッドを示します。

例15-10 ポップアップを取り消すバッキングBeanメソッド

public void cancelPopupActionListener(ActionEvent event) {
   FacesContext context = FacesContext.getCurrentInstance();
   p1.cancel();
  }

例15-11に、actionEventに対してポップアップを非表示にするバッキングBeanメソッドを示します。

例15-11 ポップアップを非表示にするバッキングBeanメソッド

public void hidePopupActionListener(ActionEvent event) {
   FacesContext context = FacesContext.getCurrentInstance();
   p1.hide();
 }

前の例のp1オブジェクトは、次のパッケージのRichPopupクラスのインスタンスを参照します。

oracle.adf.view.rich.component.rich.RichPopup

RichPopupの詳細は、『Oracle Fusion Middleware Oracle ADF Faces Java APIリファレンス』を参照してください。

15.4.1 ポップアップをプログラムで呼び出す方法

ポップアップの表示、取消または非表示を行うバッキングBeanメソッドを参照するように、コマンド・コンポーネントのactionListener属性を構成します。

始める前に:

15.2項「ポップアップの宣言的な作成」の説明に従って、サーバー側メソッドで呼び出すポップアップのタイプを作成します。

popupコンポーネントをプログラムで呼び出す場合は、使用可能な構成オプションに関する知識が役立つ場合があります。詳細は、15.4項「ポップアップのプログラムによる呼出し」を参照してください。

ポップアップをプログラムで呼び出す手順:

コンポーネント・パレットで、「一般コントロール」パネルからコマンド・コンポーネントをJSFページにドラッグ・アンド・ドロップします。

たとえば、Buttonコンポーネントなどです。
プロパティ・インスペクタで、「動作」セクションを開いて次の属性を設定します。
- PartialSubmit: エンド・ユーザーがコマンド・コンポーネントをクリックした後でFusion Webアプリケーションでページ全体をレンダリングしない場合はtrueに設定します。デフォルト値(false)を指定すると、アプリケーションはエンド・ユーザーがコマンド・コンポーネントを呼び出した後にページ全体をレンダリングします。ページ・レンダリングの詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
- ActionListener: エンド・ユーザーが実行時にコマンド・コンポーネントを呼び出したときに実行するロジックでバッキングBeanメソッドに評価されるEL式に設定します。
手順2でコマンド・コンポーネントがactionEventを渡すときに呼び出されるバッキングBeanのロジックを作成します。

詳細は、例15-9「ポップアップを呼び出すバッキングBeanメソッド」、例15-10「ポップアップを取り消すバッキングBeanメソッド」または例15-11「ポップアップを非表示にするバッキングBeanメソッド」を参照してください。

15.4.2 ポップアップをプログラムで呼び出した場合の処理

実行時に、エンド・ユーザーは、ポップアップの表示、取消または非表示を行うためにサーバー側メソッドを呼び出すように構成したコマンド・コンポーネントを呼び出すことができます。たとえば、図15-6に、popupコンポーネントの内部にレンダリングするpanelWindowコンポーネントを示します。これは、それぞれcancelおよびhideメソッドを呼び出す2つのコマンド・ボタン(「取消」および「非表示」)を公開します。エンド・ユーザーは、基になるページのtableコンポーネントのSupplierName列にレンダリングされるcommandLinkコンポーネントを呼び出して、ポップアップを表示します。

図15-6 サーバー側メソッドによって呼び出されるpopupコンポーネント

15.5 ポップアップへのコンテキスト情報の表示

ユーザーがページでタスクを完了するのにより多くの情報が必要だが、ページにアクセスするたびに必要にはならない情報や、情報を表示するためにダイアログを起動する複数のボタンによって、ページが乱雑になるのは望ましくない場合があります。コンポーネントの右クリックで起動するポップアップに情報を挿入できますが、ユーザーは情報がポップアップで使用可能であることを知る方法がありません。

contextInfoコンポーネントでは、ポップアップに追加情報を表示し、追加情報が使用可能であることをユーザーに通知することもできます。contextInfoコンポーネントを、コンテキスト情報をサポートするコンポーネントのコンテキスト・ファセットに配置すると、図15-7に示すように、小さなオレンジ色の正方形がコンポーネントの左上に表示されます。

図15-7 contextInfoに表示される正方形

ユーザーが正方形の上にカーソルを置くと、図15-8に示すようにノート・アイコンの付いた大きな三角形とツールチップが表示され、追加情報が使用可能であることが示されます。

図15-8 contextInfoコンポーネントは追加情報が使用可能であることを示す

showPopupBehaviorタグはcontextInfoコンポーネントの子であるため、図15-9に示すように、参照されるポップアップはユーザーが情報アイコンをクリックすると表示されます。

図15-9 contextInfoコンポーネントから起動されたダイアログ

15.5.1 コンテキスト情報の作成方法

showPopupBehaviorコンポーネントをcontextInfoコンポーネントの子として使用すると、ポップアップ・コンポーネントを、contextInfoコンポーネントを含むコンポーネントに位置揃えできます。

始める前に:

contextInfoコンポーネントの親になるコンポーネントを作成します。次のコンポーネントではcontextInfoコンポーネントがサポートされます。
- column
- commandLink
- inputComboboxListOfValues
- inputListOfValues
- inputText
- outputFormatted
- outputText
- selectOneChoice
15.2項「ポップアップの宣言的な作成」の説明に従って、表示するポップアップを作成します。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、15.1.2項「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。

contextInfoコンポーネントを使用する手順:

コンポーネント・パレットの「ADF Faces」ページで、「一般コントロール」パネルから「コンテキスト情報」をドラッグし、追加情報アイコンを表示するコンポーネントのContextファセットにドロップします。

ヒント:

ファセットがビジュアル・エディタに表示されない場合は、次のようにします。

構造ウィンドウで、outputTextコンポーネントを右クリックします。
ポップアップ・メニューから、「ファセット - component name」→「コンテキスト」を選択します。ページで使用されているファセットは、ファセット名の前にチェックマークが表示されます。

contextInfoコンポーネントが表示されたときにサーバー側ロジックを実行する必要がある場合は、イベントを処理できるハンドラにcontextInfoListener属性をバインドします。

注意:

showPopupBehaviorタグを使用してポップアップを起動する場合は、サーバーへのcontextInfoEventの配信が取り消されます。このイベントに基づいてサーバー側ロジックを起動する必要がある場合は、6.4項「クライアントからサーバーへのカスタム・イベントの送信」の説明に従って、JavaScriptまたはカスタム・イベントを使用してポップアップを起動する必要があります。

コンポーネント・パレットで、「操作」パネルの「動作」グループから「ポップアップ表示動作」をドラッグし、contextInfoに子としてドロップします。
エディタでshowPopupBehaviorタグが選択された状態で、15.3.1項「af:showPopupBehaviorタグを使用してポップアップを宣言的に呼び出す方法」の説明に従ってプロパティ・インスペクタで属性を設定します。triggerType値には、contextInfoを入力してください。

15.6 インライン・ポップアップの自動取消の制御

af:popupコンポーネントを他のいくつかのコンポーネントとともに使用して、インライン・ポップアップを作成できます。つまり、インライン・ウィンドウ、ダイアログおよびポップアップ・メニューです。他のコンポーネントには次のものがあります。

インライン・ダイアログを作成するためのダイアログ・コンポーネント

詳細は、15.2.1項「ダイアログの作成方法」を参照してください。
インライン・ウィンドウを作成するためのpanelWindowコンポーネント

詳細は、15.2.2項「パネル・ウィンドウの作成方法」を参照してください。
ポップアップ・メニューを作成するためのメニュー・コンポーネント

詳細は、15.2.3項「ポップアップ・メニューの作成方法」を参照してください。
ノート・ウィンドウを作成するためのnoteWindowコンポーネント

詳細は、15.2.4項「ノート・ウィンドウの作成方法」を参照してください。

デフォルトでは、Fusion Webアプリケーションは、インライン・ポップアップを定義するメタデータが置換された場合にインライン・ポップアップを自動的に取り消します。この状況が発生するシナリオの一部を次に示します。

partialSubmitプロパティがfalseに設定されているコマンド・コンポーネントの呼出し。Fusion Webアプリケーションは、このようなコマンド・コンポーネントを呼び出した後でページ全体をレンダリングします。反対に、partialSubmitプロパティがtrueに設定されたコマンド・コンポーネントでは、Fusion Webアプリケーションは部分的なコンテンツをレンダリングします。ページ・レンダリングの詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
エンド・ユーザーがコンテンツを表示または非表示にするための切替えアイコンをレンダリングするコンポーネントは、popupコンポーネントをホストします。たとえば、showDetailItemコンポーネントやpanelTabbedコンポーネントなどです。切替えアイコンをレンダリングするコンポーネントの使用の詳細は、9.9項「コンテンツの動的な表示および非表示」を参照してください。
Fusion Webアプリケーションがインライン・ポップアップを表示するときにフェイルオーバーが発生します。フェイルオーバー時に、Fusion Webアプリケーションはページ全体を置換します。

前のリストで説明したデフォルトの動作は、インライン・ポップアップ・コンポーネントの自動取消を無効にすることで変更できます。これは、前述のいずれかのイベントが発生した場合にFusion Webアプリケーションがインライン・ポップアップを自動的に取り消さないことを意味します。かわりに、Fusion Webアプリケーションはインライン・ポップアップをリストアします。

15.6.1 インライン・ポップアップの自動取消を無効にする方法

popupコンポーネントのautoCancelプロパティをdisabledに設定することで、インライン・ポップアップの自動取消を無効にします。

始める前に:

他のコンポーネントが機能に与える影響を理解することが役立つ場合があります。詳細は、15.6項「インライン・ポップアップの自動取消の制御」を参照してください。

インライン・ポップアップの自動取消を制御する手順:

構造ウィンドウで、自動取消動作を構成するaf:popupコンポーネントを右クリックし、「プロパティに移動」を選択します
プロパティ・インスペクタで、「共通」セクションを開き、AutoCancelプロパティのドロップダウン・メニューを使用して「disabled」を選択します。

15.6.2 インライン・ポップアップの自動取消を無効にした場合の処理

例15-12に示すように、JDeveloperは、af:popupコンポーネントのautoCancelプロパティの値をdisabledに設定します。

例15-12 インライン・ポップアップの自動取消を防ぐためのメタデータ

<af:popup id="p1" autoCancel="disabled">
  ...
</af:popup>

実行時に、Fusion Webアプリケーションは、ページを再レンダリングするコマンドの呼出し前にインライン・ポップアップが表示された場合に、ページを再レンダリングした後でインライン・ポップアップをリストアします。

15.7 ポップアップの入力フィールドのリセット

resetListenerコンポーネントをpopupコンポーネントとともに使用して、ユーザーが入力フィールドの入力値をリセットできるようにすることができます。popupコンポーネントにレンダリングする入力コンポーネントに対してこの機能を実装するユースケースを次に示します。

エンド・ユーザーに、前に入力した不適切な値のリセットを許可する
値を削除する。この場合、エンド・ユーザーが入力した値をアプリケーションがサーバーに送信する前に、popupコンポーネントがpopupCanceledEventを呼び出します。

popupCancelEventを呼び出すエンド・ユーザーの操作には、コマンド・ボタンのクリック(「閉じる」というラベルの付いたボタンなど)、ポップアップ・ダイアログのタイトル・バーの取消しアイコンのクリック、[Esc]キーの押下などがあります。

popupコンポーネントの構成方法に応じて、データがクライアントにキャッシュされることがあります。たとえば、popupコンポーネントのcontentDelivery属性をimmediateに設定した場合、アプリケーションは常にデータをクライアントにキャッシュします。

contentDelivery属性に対して選択した設定によってpopupコンポーネントのコンテンツ配信方針がどのように決定されるかの詳細は、15.2項「ポップアップの宣言的な作成」および15.2.5項「実行時に行われる処理: popupコンポーネントのイベント」を参照してください。

例15-13に、contentDelivery属性がimmediateに設定され、15.2.1項「ダイアログの作成方法」で説明したようにユーザーのポップアップがdialogEventsを生成する事前構成済のコントロールとともにdialogコンポーネントをレンダリングするpopupコンポーネントのメタデータを示します。このシナリオでは、エンド・ユーザーが入力したデータはクライアントにキャッシュされます。アプリケーションは、リセットするデータをサーバーに送信しません。また、dialogコンポーネントによってレンダリングされる事前構成済コントロールは、検証エラーが発生した場合にポップアップが閉じない原因となることがあります。

例15-13 popupコンポーネントのresetListenerタグ

<af:popup id="popup" contentDelivery="immediate">
  <af:resetListener type="popupCanceled"/>
</af:popup>

popupコンポーネントに依存しないresetListenerコンポーネントの使用の詳細は、20.5.2項「入力フィールドをリセットするためのコマンド・コンポーネントの使用方法」を参照してください。

注意:

resetListenerコンポーネントのtype属性をpopupCanceledに設定すると、popupコンポーネントのresetEditableValues属性をwhenCanceledに設定するのと同じ機能が提供されます。popupコンポーネントのresetEditableValues属性の設定の詳細は、15.2.1項「ダイアログの作成方法」を参照してください。

15.7.1 ポップアップの入力フィールドのリセット方法

エンド・ユーザーがポップアップの入力フィールドのデータをnullにリセットできるようにするには、resetListenerコンポーネントのtype属性をpopupCanceledに設定します。

始める前に:

popupコンポーネントでこの機能を構成できるユースケースを理解することが役立つ場合があります。詳細は、15.7項「ポップアップの入力フィールドのリセット」を参照してください。

ポップアップの入力フィールドをリセットする手順:

15.2項「ポップアップの宣言的な作成」の説明に従って、必要なポップアップ・ダイアログのタイプを作成します。
コンポーネント・パレットから、リスナーのリセットをpopupコンポーネントに直接の子としてドラッグ・アンド・ドロップします。
JDeveloperが表示するリセット・リスナーの挿入ダイアログで、popupCanceledをresetListenerコンポーネントが応答するイベントのタイプとして入力します。

リセット・リスナーの挿入ダイアログで「ヘルプ」をクリックして、サポートされる値のリストを表示します。

15.7.2 入力フィールドをリセットするようにポップアップを構成した場合の処理

popupコンポーネントとresetListenerコンポーネントでエンド・ユーザーがpopupコンポーネントの入力フィールドをnullにリセットできるように構成した場合、JDeveloperは例15-14に示すようなエントリを作成します。

例15-14 リセット・リスナーを使用して入力フィールドをリセットするように構成されたpopupコンポーネント

<af:popup id="popupDialog" contentDelivery="lazyUncached" 
  popupCanceledListener="#{demoInput.resetPopupClosed}">
    <af:dialog title="Enter an Incorrect Value">
      <af:inputText id="it2" label="Always-incorrect Value" value="#{demoInput.value}">
        <f:validator binding="#{demoInput.obstinateValidator2}"/>
      </af:inputText>
    </af:dialog>
    <af:resetListener type="popupCanceled"/>
</af:popup>

図15-10に示すように、実行時にpopupCanceledイベントを生成するエンド・ユーザー操作により、resetListenerコンポーネントはpopupコンポーネントの入力フィールドの値をnullにリセットします。

図15-10 入力フィールドをリセットするpopupコンポーネント