16 ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法
この章の内容は次のとおりです。
ポップアップ・ダイアログ、メニューおよびウィンドウについて
ADF Faces popup
コンポーネントでは、セカンダリ・ウィンドウとしてポップアップ・ウィンドウを表示できます。popupコンポーネントを他のコンポーネントと組み合せて使用すると、ユーザーに入力値を送信させたり、追加の情報を指定させたりできます。
popup
コンポーネントを他のいくつかのADF Facesコンポーネントとともに使用して、情報を表示またはエンド・ユーザーからの入力を要求する様々なダイアログ、メニューおよびウィンドウを作成できます。これらのコンポーネントを使用して、エンド・ユーザーがセカンダリ・ウィンドウの情報の表示と非表示、追加データの入力または機能の呼出しを行うことのできる機能を構成できます。これらのコンポーネントによって提供される機能により、プライマリ・インタフェースでレンダリングされるコンテンツの補足であるコンテンツまたは機能をレンダリングでき、その結果、整然としたユーザー・フレンドリなインタフェースを開発できます。
popup
コンポーネントは非表示のレイアウト・コントロールであり、インライン(つまり、同じページに属する)ダイアログ、ウィンドウおよびメニューを表示するために他のコンポーネントと一緒に使用されます。popup
コンポーネントはプライマリ・インタフェース内から呼び出され、アプリケーションは、ポップアップ・ブロッカの干渉を受けずに、プライマリ・インタフェースのコンテンツなど、popup
コンポーネントにレンダリングするコンテンツを管理します。popup
コンポーネントにレンダリングするコンテンツのタイプはHTMLにすることをお薦めします。FlashやPDFファイルなどの他のタイプのコンテンツは、popup
コンポーネントに適切にレンダリングされないことがあります。
図16-1に、popup
コンポーネントがADF Facesコンポーネントと連携してセカンダリ・ウィンドウをレンダリングする例を示します。
親ページとは別に表示されるプロセスのページの作成をサポートするために、ADF Facesにはダイアログ・フレームワークが用意されています。このフレームワークでは、独自の制御フローを持つ複数のダイアログ・ページがサポートされています。たとえば、ユーザーがWebサイトで購入を選択した後の支払い手続き(チェックアウト)中に、支払いを完了する前に新しいクレジット・カードへの申込みを決定したとします。外部ブラウザ・ウィンドウで、ダイアログ・フレームワークを使用してクレジット・カードのトランザクションが開始されます。クレジット・カードのトランザクションが終了しても、元のページのチェックアウト・トランザクションは終了しません。
このダイアログ・フレームワークは、親ページの一部としてインラインで使用することもできます。これが役立つのは、ページ独自の制御フローが必要であるけれども、外部ウィンドウがポップアップ・ブロッカでブロックされることを防ぎたい場合です。
アプリケーションで完全なFusionテクノロジ・スタックを使用する場合は、このダイアログ・フレームワークがADFタスク・フローで使用するためにADFコントローラと統合されていることに注意してください。『Application Development FrameworkによるFusion Webアプリケーションの開発』で、モーダル・ダイアログでのバインドされたタスク・フローの実行に関する項を参照してください。
アプリケーションのweb.xml
ファイルでLAST_WINDOW_SESSION_TIMEOUT
という名前のコンテキスト・パラメータを使用して、アプリケーションでウィンドウが1つのみ開いている場合にセッション・タイムアウトが発生するまでの最大非アクティブ期間を指定できます。コンテキスト・パラメータに対して指定する最大非アクティブ期間は、セッション・タイムアウトに対して指定する値よりも小さい必要があります。この機能を有効にし、セッションにウィンドウが1つのみ開いている場合、セッション・タイムアウトはこのコンテキスト・パラメータに対して指定した値に設定されます。次の例に、web.xml
ファイルのLAST_WINDOW_SESSION_TIMEOUT
コンテキスト・パラメータの値を1800
秒に設定する方法を示します。
アプリケーションのweb.xml
ファイルの構成の詳細は、「web.xmlでの構成」を参照してください。
<!-- 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>
Java APIを使用してコンテキスト・パラメータを設定することで、アプリケーションを構成することもできます。「ADF Facesウィンドウ・マネージャ構成に関する必知事項」を参照してください。
ポップアップ・ダイアログ、メニュー、ウィンドウのユースケースと例
dialog
コンポーネントをpopup
コンポーネントに子として配置し、実行時にポップアップにダイアログをレンダリングできます。dialog
コンポーネントは、popup
コンポーネントの唯一の直接の子コンポーネントである必要があります。実行時に、エンド・ユーザーは情報(検索基準など)を表示または入力でき、dialog
コンポーネントのデフォルトのボタンを使用できます。このボタンがクリックされると、dialogEvent
が呼び出されます。図16-2に、エンド・ユーザーが「閉じる」ボタンをクリックすることでダイアログを閉じる例を示します。
図16-2 af:dialogコンポーネント
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/dialog_dialog_sky.png)
ポップアップ内でコンポーネントを使用して、別のコンポーネントに関連するコンテキスト情報を表示することもできます。そのように構成されている場合は、関連コンポーネントが小さな四角形を表示します。マウスが置かれると、アイコンが拡大し、ノート・アイコンも表示されます(図16-3を参照)。
図16-3 マウスを置くとアイコンが大きくなり、ノートが表示される
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/dialog_context_mouse_sky.png)
ユーザーがノート・アイコンをクリックすると、関連付けられたポップアップにそのコンテンツが表示されます。
ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能
popup
コンポーネントを使用してダイアログ、メニューおよびウィンドウを作成する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページにpopup
コンポーネント(または関連コンポーネント)を追加した後で、アクセシビリティやローカライズなどの機能を追加することが必要になる場合があります。これらのコンポーネントで使用できる他の機能へのリンクを次に示します。
-
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。「EL書式タグの使用方法」を参照してください。
-
イベント:
dialog
コンポーネントは、ADF Facesbutton
コンポーネントをレンダリングします。button
コンポーネントをshowPopupBehavior
タグとともに使用してポップアップを起動することもできます。button
コンポーネントをshowPopupBehavior
タグとともに使用すると、アクティブ化されたときにActionEvent
イベントが配信されます。サーバーおよびクライアント上でのイベントの処理方法の詳細は、「イベントの処理」を参照してください。 -
メッセージ: ポップアップ・ダイアログとセカンダリ・ウィンドウは、ユーザーに様々なレベルのヘルプ情報を提供するためによく使用されます。ユーザーへのメッセージの表示方法の詳細は、「ヒント、メッセージおよびヘルプの表示」を参照してください。
-
ローカライズ: 作成するポップアップ・ダイアログ、メニューおよびウィンドウのラベルのテキストを直接入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、テキスト文字列の翻訳を管理できます。「ページの国際化およびローカライズ」を参照してください。
-
スキン: スキンを変更することで、ポップアップ・ダイアログ、メニューおよびウィンドウの作成に使用するコンポーネントのルック・アンド・フィールを変更できます。「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
-
アクセシビリティ: ポップアップ・ダイアログ、メニューおよびウィンドウをアクセス可能にできます。「アクセス可能なADF Facesページの開発」を参照してください。
-
ダイアログ・フレームワーク: アプリケーションで完全なFusionテクノロジ・スタックを使用する場合は、ダイアログ・フレームワークがADFタスク・フローで使用するためにADFコントローラと統合されていることに注意してください。『Application Development FrameworkによるFusion Webアプリケーションの開発』で、アプリケーションでのダイアログの使用方法に関する項を参照してください。
-
タッチ装置: ADF Facesコンポーネントはタッチ装置によって異なる動作および表示を行うことがあります。「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
-
ドラッグ・アンド・ドロップ: ユーザーがコンポーネントをページの別の領域にドラッグ・アンド・ドロップできるように、コンポーネントを構成できます。「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
ADF Facesウィンドウ・マネージャ構成に関する必知事項
ADF Facesウィンドウ・ライフサイクルの状態は、ウィンドウ・マネージャにより管理されます。これは、特にバインド・タスク・フローの管理用のページ・フロー制御と一致しています。ADF Facesウィンドウ・マネージャを構成するには、web.xml
ファイルの<context-param>
要素を使用します。ただし、ページ開発者をweb.xml
ファイルから遮断するアプリケーションの場合は、Java APIを使用してADF Facesウィンドウ・マネージャを構成できます(これは、J2EE Webアプリケーション・セッション管理と似ています)。
oracle.adf.view.rich.context.WindowManagerContext
を使用して、ウィンドウ・マネージャ構成を設定するためのプログラム・インタフェースを定義できます。次のリストは、ADF Facesウィンドウ・マネージャのコンテキストを構成するためのJava APIコールの例を示しています。
- 外部コンテキストを指定するには:
extContext = FacesContext.getCurrentInstance().getExternalContext();
- リクエスト・コンテキストを指定するには:
rc = RequestContext.getCurrentInstance();
- ウィンドウ・マネージャ・コンテキストを指定するには:
wmContext = new WindowManagerContext(rc.getWindowManager()); wmContext.setMaxWindowCacheSize(extContext, 100);
次の表に、web.xml
で使用するコンテキスト・パラメータ、および同等のJava APIを示します。
web.xml context-param | Java API | 説明 |
---|---|---|
|
|
最後のウィンドウがアンロード状態に移行したときに適用されるセッション・タイムアウトを秒単位で指定します。 アンロードされたウィンドウとは、閉じられたブラウザ・ウィンドウまたはアプリケーションから移動したブラウザ・ウィンドウです。 値は、アクティブ・セッションの |
|
|
アンロードされたウィンドウがクローズ状態に暗黙的に遷移するまでの秒数を指定します。 ウィンドウがクローズ状態に移行すると、セッション状態にキャッシュされている関連リソースが解放されます。 デフォルトは |
|
|
セッション・キャッシュでオープンできる最大ウィンドウ数を指定します。 このしきい値に達すると、使用頻度の最も低いウィンドウが、最新のウィンドウ・オープン・リクエストのクローズ状態に暗黙的に移動します。デフォルトは |
注意:
ウィンドウがクローズ状態に遷移すると、そのウィンドウに関連付けられているすべてのサブセッション・リソースが解放されます。ブラウザ・ウィンドウが、ウィンドウを以前に閉じたバインド・タスク・フローに再び入ると、ADFコントローラは、リクエストをセッション・タイムアウトと同様に処理し、ホーム・ページなどの安全な再エントリ・ポイントにリダイレクトします。
ポップアップの宣言的な作成
ADF Facesには、コンポーネントのボタンに対するアクション・イベントを伴うポップアップを宣言的に作成できるshowPopupBehavior
タグが用意されています。ポップアップ・コンポーネントで別のコンポーネントを使用できます。
dialog
、panelWindow
、menu
およびnoteWindow
コンポーネントは、すべてpopup
コンポーネントの内部で使用して、表16-1に示すようにインライン・ポップアップを表示できます。popup
コンポーネントの子コンポーネントが存在しない場合は、非常に単純なインライン・ポップアップが表示されます。
表16-1 popupコンポーネントで使用されるコンポーネント
コンポーネント | 実行時の表示 |
---|---|
|
子をダイアログ内に表示し、 ![]() |
|
ダイアログに似たウィンドウに子を表示しますが、イベントはサポートしません。「パネル・ウィンドウの作成方法」を参照してください。 ![]() |
|
関連コンポーネントのポップアップ・メニューを表示します。「ポップアップ・メニューの作成方法」を参照してください。 ![]() |
|
特定のUIコンポーネントに関連付けられた読取り専用の情報を表示します。ノート・ウィンドウはヘルプやメッセージの表示に使用され、通常はマウスを置いたり、フォーカスをしたときに表示されます。「ノート・ウィンドウの作成方法」を参照してください。 ![]() |
|
コンテンツをインラインで表示します。
![]() |
dialog
コンポーネントとpanelWindow
コンポーネントはいずれも定義ヘルプがサポートされていますが、ヘルプ・アイコン(疑問符が表示された青い丸)の上にカーソルを移動するとコンテンツが表示されます。dialog
およびpanelWindow
コンポーネントでは説明ヘルプはサポートされません。「ヒント、メッセージおよびヘルプの表示」を参照してください。
一般的には、button
コンポーネントをshowPopupBehavior
タグとともに使用してポップアップを起動します。showPopupBehavior
タグを、起動する必要のあるコンポーネントに関連付けます。このタグは、(必要に応じて)ポップアップの位置も制御します。
button
コンポーネントのアクション・イベントとともに使用することに加えて、showPopupBehavior
タグは他のイベント(showDetail
イベントやselection
イベントなど)とともに使用することもできます。「ポップアップの宣言的な呼出し」を参照してください。
showPopupBehavior
タグをアクション・コンポーネントとともに使用するかわりに、バッキングBeanメソッドを作成してポップアップを起動、取消または非表示にできます。作成するバッキングBeanメソッドは、アクション・コンポーネントによって返されるactionEvent
を引数として受け取ります。この代替方法の詳細は、「ポップアップのプログラムによる呼出し」を参照してください。
デフォルトで、ポップアップのコンテンツは、ポップアップが表示されるまでサーバーから送信されません。このため、開かれたときにポップアップが表示されるスピードと、親ページがレンダリングされるスピードが入れ替わります。ポップアップがロードされると、すぐに表示できるよう、コンテンツはクライアントにおいてデフォルトでキャッシュされます。
popup
コンポーネントのcontentDelivery
属性を次のいずれかのオプションに設定することで、コンテンツの配信戦略を変更できます。
-
lazy
- 前述のデフォルトの戦略。コンテンツは、ポップアップが一度表示されるまでロードされず、ロードされるとキャッシュされます。 -
immediate
- コンテンツはすぐにページにロードされるため、コンテンツを可能なかぎり迅速に表示できます。この方法は、ページが使用されるたびにすべてのユーザーが必ず使用するポップアップに使用します。 -
lazyUncached
- コンテンツはポップアップが表示されるまでロードされず、ポップアップを表示するたびにコンテンツが再ロードされます。この方法は、失効するか期限切れになる可能性があるデータをポップアップに表示する場合に使用します。
popup
コンポーネントのcontentDelivery
属性をlazy
に設定することを選択した場合、別のpopup
コンポーネント属性(childCreation
)をdeferred
に設定することで、popup
コンポーネントとそれをホストするページのパフォーマンスをさらに最適化できます。これにより、アプリケーションがコンテンツを配信するまでpopup
コンポーネントの子コンポーネントの作成が遅延されます。childCreation
属性のデフォルト値はimmediate
です。
ダイアログの作成方法
ダイアログの終了時にイベントを起動する必要がある場合は、ダイアログを作成します。dialog
コンポーネントをpopup
コンポーネントに子として追加した後、他のコンポーネントを追加してデータを表示および収集できます。
デフォルトでは、dialog
コンポーネントは次のボタンの組合せを持つことができます。
-
取消
-
OK
-
「OK」および「取消」
-
「はい」および「いいえ」
-
「はい」、「いいえ」および「取消」
-
なし
これらのボタンは、クリックされるとdialogEvent
を起動します。buttonBar
ファセットを使用して、ダイアログに他のボタンを追加できます。追加するボタンはdialogEvent
を起動しません。かわりに、標準のactionEvent
を起動します。actionEvent
がダイアログ内のコンポーネントに対してのみ起動されるようにするために、追加するボタンのpartialSubmit
属性をtrue
に設定してください。ただし、af:popup
コンポーネントのautoCancel
プロパティの値をdisabled
に設定した場合は、ボタンを追加し、そのpartialSubmit
属性をfalse
に設定できます。この後者のオプション(partialSubmit
をfalse
に設定)を選択すると、アプリケーションはpopup
コンポーネントの可視性(また、拡張によりdialog
コンポーネント)をリストアする前にページを再ロードしてページのコンポーネントを再初期化するため、エンド・ユーザーの待機時間が長くなります。af:popup
コンポーネントのautoCancel
プロパティの値がenabled
(デフォルト値)に設定されている場合は、ボタンのpartialSubmit
属性をtrue
に設定する必要があります。af:popup
コンポーネントのautoCancel
プロパティの使用の詳細は、「インライン・ポップアップの自動取消の制御」を参照してください。
始める前に:
dialog
コンポーネントの属性およびその他のコンポーネントがインライン・ダイアログの機能に与える影響を理解することが役立つ場合があります。「ポップアップの宣言的な作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
インライン・ダイアログを作成する手順:
パネル・ウィンドウの作成方法
panelWindow
コンポーネントはdialog
コンポーネントに似ていますが、ボタンの構成やファセットへのボタンの追加はできません。panelWindow
のデータを処理するロジックを呼び出す必要がある場合は、popup
コンポーネントのcancel
イベントのリスナーを作成する必要があります。
panelWindow
コンポーネントを含むpopup
コンポーネントは、form
コンポーネントに含まれている必要があります。
ヒント
Fusionテクノロジ・スタックを使用するアプリケーションでpanelWindow
をインライン・ポップアップとして使用する場合に、ダイアログの外観をエミュレートするには、panelStretchLayout
コンポーネントの中央ファセットにpanelWindow
コンポーネントを配置し、button
ボタンをbottom
ファセットに配置します。
始める前に:
panelWindow
コンポーネントの属性がインライン・ウィンドウの機能に与える影響を理解することが役立つ場合があります。「ポップアップの宣言的な作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
インライン・ウィンドウを作成する手順:
ポップアップ・メニューの作成方法
popupコンポーネント内でメニュー・コンポーネントを使用して、ポップアップ・メニューを作成します。特定のトリガーに基づいて、別のコンポーネントからコンテキスト・メニュー・ポップアップを呼び出すことができます。かわりに、ツールバーのツールバー・ボタンでポップアップ・メニューを起動する場合は、「ツールバーの使用方法」を参照してください。
始める前に:
popup
コンポーネントの属性およびその他のコンポーネントがポップアップ・メニューの機能に与える影響を理解することが役立つ場合があります。「ポップアップの宣言的な作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
インライン・ポップアップ・メニューを作成する手順:
ノート・ウィンドウの作成方法
noteWindow
コンポーネントを使用して、読取り専用テキストを表示します。noteWindow
コンポーネントを含むpopup
コンポーネントは、form
コンポーネントに含まれている必要があります。
始める前に:
noteWindow
コンポーネントの属性およびその他のコンポーネントが機能に与える影響を理解することが役立つ場合があります。「ポップアップの宣言的な作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
インライン・ウィンドウを作成する手順:
-
「コンポーネント」ウィンドウの「レイアウト」パネルの「セカンダリ・ウィンドウ」グループから、「ポップアップ」をドラッグしてページにドロップします。
ヒント
位置はpopupの呼出しに使用されるコンポーネントによって決定されるため、popupコンポーネントがページに表示されるかどうかは関係ありません。ただし、
popup
コンポーネントはform
コンポーネント内にある必要があります。 -
「プロパティ」ウィンドウの「共通」セクションを開いて、次の属性を設定します。
-
ContentDelivery: ポップアップのコンポーネントにコンテンツが配信される方法を決定します。
-
Animate: ノート・ウィンドウのアニメーションを構成します。「アニメーションおよびポップアップに関する必知事項」を参照してください。
-
LauncherVar: 起動コンポーネントの参照に使用する変数を入力します。この変数は、
popup
またはその子コンポーネントでのイベント配信時にのみ、またEventContextがlauncher
に設定されている場合にのみアクセス可能です。 -
EventContext: ポップアップが複数のオブジェクトによって共有されている場合、たとえばポップアップ内のウィンドウに表で選択された行に関する情報が表示される場合は、launcherを選択します。この属性を
launcher
に設定すると、イベント・リスナーがコールされる前にクリックされた行が現在の行になり、その行のデータのみ返されます。「実行時に行われる処理: popupコンポーネントのイベント」を参照してください。 -
PopupCancelListener: ウィンドウが閉じられるときに呼び出すロジックでハンドラに評価されるEL式に設定します。
-
必要に応じて、「AutoCancel」ドロップダウンで値を選択します。この値によって、自動取消の動作が決定します。「インライン・ポップアップの自動取消しの制御」を参照してください。
-
-
「コンポーネント」ウィンドウの「レイアウト」パネルの「セカンダリ・ウィンドウ」グループから、「ノート・ウィンドウ」を
popup
コンポーネントに直接の子としてドラッグ・アンド・ドロップします。 -
ウィンドウに表示するテキストを入力する手順:
-
「ソース」タブをクリックしてページのソース・コードを表示します。
-
af:noteWindow
タグから閉じるスラッシュ(/)を削除します。 -
af:noteWindow
タグの下に、表示するテキストを単純なHTMLタグを使用して入力し、閉じる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>
図16-4に、ノートがどのように表示されるかを示します。
-
-
必要に応じて、「プロパティ」ウィンドウの「動作」セクションを開いて「AutoDismissalTimeout」フィールドで秒数を指定します。指定する値によって、アプリケーションが自動的に閉じる前にノート・ウィンドウが表示される秒数が決定されます。指定する値によって、デフォルトの自動消去動作がオーバーライドされます。エンド・ユーザーがノート・ウィンドウのコンテンツにマウスを移動すると、自動消去動作はノート・ウィンドウのデフォルトの自動消去動作に戻るため、このオーバーライドは取り消されます。デフォルトの自動消去動作では、フォーカスが起動ソースまたはポップアップのコンテンツから変更された場合にノート・ウィンドウが終了します。
注意:
タイムアウト取消期間はマウス・カーソルを重ねることでトリガーされ、キーボードの同等の操作は用意されていないため、このプロパティで有効化された機能は使い勝手がよいとは言えません。
-
親ページにロジックを追加して、ポップアップとノート・ウィンドウを呼び出します。「ポップアップの宣言的な呼出し」を参照してください。
実行時に行われる処理: popupコンポーネントのイベント
コンテンツがポップアップに配信され、contentDelivery
属性がlazy
またはlazyUncached
に設定されている場合は、popupFetch
サーバー側イベントが起動します。このイベントには、eventContext
とlauncherVar
の2つのプロパティがあります。eventContext
プロパティは、イベントの配信元のコンテキストがポップアップのコンテキスト(self
)とポップアップを起動したコンポーネント(launcher
)のどちらであるかを決定します。コンテキストをlauncher
に設定すると、フレームワークはポップアップを起動したコンポーネントがポップアップではなくイベントを起動したかのうように動作するため、ポップアップが複数のコンポーネントによって共有されている場合に非常に便利な可能性があります。変数を使用して表の行をスタンプ・アウトするのと同様の方法で、launcherVar
プロパティを使用して現在のランチャを追跡します。
たとえば、表の中の列で、link
コンポーネントを使用して人物のファースト・ネームを表示するとします。このlink
コンポーネントにマウスを置くと、ポップアップnoteWindow
が起動されて、その人物のフル・ネームが表示されます。このnoteWindow
は表のすべての行で使用されますが、表示する必要があるのはクリックされたlink
コンポーネントが存在する行のフル・ネームのみであるため、次の例に示すように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:link text="#{person.firstName}"> <af:showPopupBehavior popupId="::noteWindow" triggerType="mouseHover"/> </af:link> </af:column> </af:table>
変数ソースを使用して、ソースから値を取得し、それらを適用するか、値を設定できます。たとえば、次の例に示すようにsetPropertyListener
およびclientAttribute
タグを使用して、表で使用されるpeople
オブジェクトの姓名値を取得し、それをウィンドウで使用されるtestBean
のfullName
プロパティの値として設定できます。
<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:link text="#{person.firstName}"> <af:showPopupBehavior popupId="::noteWindow" triggerType="mouseHover"/> <af:clientAttribute name="fullName" value="#{person.fullName}"/> </af:link> </af:column> </af:table>
この例では、launcherVar
プロパティ・ソースはpopupFetch
イベントを使用して現在の行の姓名を取得します。setPropertyListener
タグの使用の詳細は、「Javaコードを記述せずにpageFlowScopeスコープを使用する方法」を参照してください。クライアント属性の使用の詳細は、「クライアント側コンポーネントに対するボーナス属性の使用」を参照してください。showPopupBehavior
タグの詳細は、「ポップアップの宣言的な呼出し」を参照してください。
ポップアップは、次のクライアント側イベントも起動します。
-
popupOpening
: ポップアップが起動されると、開始されます。このイベントがクライアント側のリスナーで取り消されると、ポップアップは表示されません。 -
popupOpened
: ポップアップが表示可能になった後、起動されます。このイベントを使用する1つの例は、ポップアップでデフォルトのフォーカスをオーバーライドするカスタム・ルールの作成です。 -
popupCanceled
: 自動消去やポップアップ・クライアント・コンポーネントのcancelメソッドの明示的な起動によってポップアップが予期せずに閉じると、起動します。このクライアント側イベントには、サーバー側の対応するイベントもあります。 -
popupClosed
: ポップアップが非表示の場合、またはポップアップが予期せず閉じた場合に起動します。このクライアント側イベントには、サーバー側の対応するイベントもあります。
「はい」ボタンのクリックなど、肯定的な状況でポップアップが閉じられた場合は非表示になります。「閉じる」アイコンまたは「取消」ボタンがクリックされた場合など、ポップアップが自動消去によって閉じられた場合は取り消されます。どちらのタイプの消去でも、popupClosed
クライアント側イベントが発生します。ポップアップを取り消すと、サーバー側に対応するイベントを持つクライアント側popupCanceled
イベントも発生します。イベントに対しステータス登録されたリスナーがないかぎり、イベントはサーバーに伝播されません。伝播される場合、ポップアップの子コンポーネントの処理が阻止されるため、送信された値と検証は無視されます。ポップアップが取り消された場合に必要な処理を行うロジックを含む、popupCanceled
イベントのリスナーを作成できます。
クライアント側イベントに基づくロジックを呼び出す場合は、カスタム・クライアント・リスナー・メソッドを作成できます。「クライアント・イベントのリスニング」を参照してください。クライアント・イベントに基づきサーバー側ロジックを起動する場合、そのロジックを起動するserverListener
タグを追加できます。「クライアントからサーバーへのカスタム・イベントの送信」を参照してください。
ダイアログ・イベントに関する必知事項
dialog
コンポーネントは、エンド・ユーザーが「OK」、「はい」、「いいえ」または「取消」ボタンをクリックしたときにdialogEvent
を生成します。dialog
コンポーネントは、エラーまたはそれ以上の重大度のメッセージがページに存在しなければ、エンド・ユーザーが「OK」、「はい」または「いいえ」ボタンをクリックしたときに自動的に非表示になります。「取消」ボタンまたは閉じるアイコンを選択するエンド・ユーザーは、親popup
コンポーネントを取り消し、ポップアップ取消イベントを生成します。
「OK」、「はい」、「いいえ」または「取消」ボタンによって返されるdialogEvent
をインターセプトするようにdialogListener
属性を構成できます。「OK」、「はい」および「いいえ」ボタンによって返されるdialogEvent
のみ、サーバーに伝播されます。「取消」ボタン、[Esc]キーおよび閉じるアイコンによって返されるdialogEvent
は、クライアント・ダイアログ・イベントをキューに入れ、サーバーに伝播しません。
dialog
コンポーネントを起動するアクション・コンポーネントのactionListener
が、dialog
コンポーネントから制御が戻った後にアクション(たとえば、inputText
コンポーネントの更新)を実行するように構成されている場合は、inputText
コンポーネントに対してresetValue()
を呼び出すことも必要になります。これが必要になるのは、アクション・コンポーネントのimmediate
の値がtrue
に設定されている場合です。
dialog
コンポーネントおよびpopup
コンポーネントによって起動されるイベントの詳細は、Oracle ADF Facesタグ・リファレンスを参照してください。
アニメーションおよびポップアップに関する必知事項
ポップアップを表示するためにpopup
コンポーネント内でレンダリングするdialog
、panelWindow
、menu
およびnoteWindow
コンポーネントは、レンダリング時にアニメーションを使用できます。「アニメーションの有効化」で説明されているように、アプリケーションのtrinidad-config.xml
ファイルで、<animation-enabled>
要素をtrue
に設定することにより、アプリケーションのこれらのコンポーネントに対してアニメーションを有効化します。
さらに、アプリケーションのADFスキンの-tr-animate
および-tr-open-animation-duration
ADFスキン・プロパティに対して値を書き込むことにより、これらのコンポーネントに対してアニメーションをカスタマイズまたは無効化を行うこともできます。次の例では、アプリケーションのmenu
コンポーネントに対してアニメーションを許可し、dialog
コンポーネントに対してアニメーションを無効化する方法を示しています。
/** Animate menu components and specify 10 seconds as the duration to open a menu or a popup menu */ af|menu { -tr-open-animation-duration: 10000; -tr-animate: true; } /** Disable animation for dialog components */ af|dialog { -tr-animate: false; }
popup
コンポーネントの特定のインスタンスのアニメーション動作は、次のリストに示すように、popup
コンポーネントのanimate
プロパティに適切な値を設定することによって構成できます。
-
default: アプリケーションの
trinidad-config.xml
ファイル内の<animation-enabled>
要素およびアプリケーションのADFスキンのADFスキン・プロパティがポップアップ・コンポーネントのアニメーション動作を決定します。 -
false:
trinidad-config.xml
ファイルまたはアプリケーションのADFスキンでアプリケーションに対して構成したアニメーション設定に関係なく、ポップアップのアニメーションを無効にします。たとえば、menu
コンポーネントを表示するpopup
コンポーネントにこの値を設定すると仮定します。アニメーションが有効化され、前述のコード例に示されたmenu
コンポーネントにADFスキン・プロパティが含まれていても、特定のポップアップ・メニューに対して、アニメーションが無効化されます。 -
true: アプリケーションのADFスキン内の
-tr-animate: false
エントリをオーバーライドします。たとえば、dialog
コンポーネントをレンダリングするpopup
コンポーネントに対してanimate
プロパティをtrue
に設定した場合、前述のコード例に示されたdialog
コンポーネントにADFスキン・プロパティが構成されていても、ポップアップ・ダイアログは、レンダリング時にアニメーションを使用します。
アニメーションのADFスキン・プロパティの詳細は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスを参照してください。
ポップアップの表示動作の制御
ADF Faces popupコンポーネントのプロパティを変更すると、ユーザーがポップアップを閉じたり、ポップアップの動作を制御したりすることを許可できます。ポップアップ動作を制御するには、AutoDismissalTimeout
、Pinning
、Stealing Focus
およびPositioning
プロパティを使用します。
ポップアップの表示方法、自動的に消去されるまでにpopup
コンポーネントが表示される時間、フォーカスをメイン・ウィンドウまたはポップアップ・ウィンドウのどちらに当てるか、および画面上でpopup
コンポーネントを位置合せする場所を制御できます。これらの動作は、コンポーネントのプロパティを変更することによって変更できます。
-
AutoDismissalTimeout これはアプリケーションが自動的に消去するまでに
popup
コンポーネントを表示する秒数です。デフォルトの自動消去動作では、フォーカスが起動元またはポップアップのコンテンツから変更されると、コンポーネントが閉じられます。popup
コンポーネントの時間の指定の詳細は、ポップアップ・コンポーネントを自動的に消去する方法を参照してください。注意:
popup
コンポーネントおよびnoteWindow
にこの属性を指定した場合は、noteWindow
のAutoDismissalTimeout属性が優先されます。 -
固定 AutoDismissalTimeoutプロパティに有効な値を指定した場合は、新しいピン・アイコンがダイアログのヘッダーで使用可能になります。ピン・アイコンをクリックすると、自動消去動作が取り消され、Behaviourセクションで再び値を変更するまで再度有効になりません。
注意:
この機能は、dialog
コンポーネントおよびpanelwindow
コンポーネントにのみ使用できます。 -
フォーカスの移動 新しいプロパティInitialFocusを使用でき、値にAutoまたはNoneを設定できます。Noneを指定した場合、ダイアログを開いたときに、フォーカスがメイン・ページに残ります。Autoを指定した場合は、フォーカスがメインからダイアログに変更されます。デフォルト値はAutoです。
注意:
-
この機能は、
dialog
コンポーネントおよびpanelwindow
コンポーネントにのみ使用できます。 -
このプロパティは非モーダル・ダイアログでのみ有効です。
-
[Ctrl]+[Alt]+[W]
キーの組合せを使用して、ウィンドウ間でフォーカスを切り替えることができます。
-
-
位置指定 デフォルトでは、
popup
コンポーネントは画面の中央に表示されます。AlignIdプロパティに値を指定すると、コンポーネントはコンポーネントに対する相対位置に配置されます。
ポップアップ・コンポーネントを自動的に消去する方法
フォーカスが起動元またはポップアップのコンテンツから移動されると、デフォルトでは、アプリケーションはpopup
コンポーネントを自動的に閉じます。ただし、アプリケーションが自動的に閉じるまでにpopup
コンポーネントが表示される時間(秒単位)を指定することもできます。
始める前に:
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
popup
コンポーネントに時間を指定するには:
- 「構造」ウィンドウで、時間を指定する
af:popup
コンポーネントを右クリックし、「プロパティに移動」を選択します。 - 「プロパティ」ウィンドウの「動作」セクションを開いて「AutoDismissalTimeout」プロパティで秒数を指定します。
ポップアップ・コンポーネントが自動消去されるときの処理内容
AutoDismissalTimeout属性に指定された時間の後にインライン・ポップアップが自動的に消去されると、システムはクライアントのみのAdfPopupClosedEventイベントを生成します。このイベントはサーバーに同期して戻されません。カスタム・データをサーバーに送信して戻すには、JavaScriptのコードを記述する必要はなく、次の例に示されているように既存のaf:serverListener
タグを活用してそれをaf:clientListener
タグにバインドする新しいリスナーを作成します。
<af:popup id="test" contentDelivery="lazyUncached">
<af:dialog title="test">
<af:inputText id="testInput" label="test" binding="#{mybean.testInput}"/>
</af:dialog>
<af:clientServerListener method="#{mybean.clientDelegateListener}" immediate="true" triggerType="click"/>
</af:popup>
ポップアップの宣言的な呼出し
ポップアップのデフォルト動作を利用してpopup
コンポーネントを開くか、ADF Faces showPopupBehavior
タグを使用してその動作を制御することができます。
ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。showPopupBehavior
タグは宣言的なソリューションを提供するため、popup
コンポーネントを開くJavaScriptを作成したり、スクリプトをpopup
コンポーネントに登録したりする必要はありません。クライアントの動作タグの詳細は、「ADF Facesのクライアントの動作タグの使用」を参照してください。
showPopupBehavior
タグは、指定されたイベント(たとえば、アクション・コンポーネントのactionEvent
やshowDetail
コンポーネントのdisclosureEvent
)をリスニングします。ただし、showPopupBehavior
タグはサーバーへのそのイベントの配信も取り消します。したがって、showPopupBehavior
タグがリスニングするイベントに基づいてサーバー側ロジックを起動する必要がある場合は、JavaScriptを使用してポップアップを起動するか、「ポップアップのプログラムによる呼出し」の説明に従ってpopup
コンポーネントをプログラムで起動する必要があります。
af:showPopupBehaviorタグを使用してポップアップを宣言的に呼び出す方法
showPopupBehavior
タグは、ポップアップを呼び出すコンポーネントとともに使用します。たとえば、ダイアログを呼び出すbutton
コンポーネントや、右クリックされたときにコンテキスト・メニューを呼び出すinputText
コンポーネントです。
始める前に:
popupコンポーネントを宣言的に呼び出す場合は、使用可能な構成オプションに関する知識が役立つ場合があります。「ポップアップの宣言的な呼出し」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
次のタスクを完了する必要があります。
- 宣言的に呼び出すタイプのポップアップ作成し(「ポップアップの宣言的な作成」を参照)、ポップアップを呼び出すコンポーネントを作成します。
showPopupBehaviorタグを使用する手順:
af:showPopupBehaviorタグを使用してポップアップを呼び出した場合の処理
設計時に、「プロパティ」ウィンドウで選択したソース・ファイルの中に、対応する値がJDeveloperによって生成されます。次の例に示すサンプル・コードでは、ボタン「Show Popup」がクリックされると、id
属性がpopup2
であるaf:popup
コンポーネントにテキストが表示されます。
<af:button text="Click me" clientComponent="true" id="popupButton2"> <showPopupBehavior popupId="popup2" alignId="popupButton2" align="afterStart"/> </af:button> ... <af:popup id="popup2"> <af:panelGroupLayout layout="vertical"> <af:outputText value="Some"/> <af:outputText value="popup"/> <af:outputText value="content"/> </af:panelGroupLayout> </af:popup>
この例のコードはADF Facesに、ポップアップの内容をid
属性で指定されたbutton
に合せることと、配置の位置としてafterStart
(ポップアップをボタンのすぐ下に配置する)を使用することを指示するものです(図16-5を参照)。
図16-5 ボタンおよびポップアップ・コンテンツ
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/dialog_aligned_sky.png)
tail
属性を、af:showPopupBehavior
タグとともに使用すると、三角形の付いたポップアップ・ウィンドウが表示されます。ここで有効な値は、none
かsimple
、または任意のカスタム値です。tail
属性のデフォルトはnone
ですが、notewindow
ポップアップ・タイプの場合は例外で、デフォルト値がsimple
です。次の例に示すサンプル・コードでは、af:button
コンポーネントで一部のテキストが表示され、ポップアップの表示ボタンがクリックされると、id
属性のlaunchElement
とtail
属性がsimple
に設定されます。
<af:button id="launchElement" text="Show Popup" clientComponent="true"> <af:showPopupBehavior popupId="popup" align="afterCenter" alignId="launchElement" triggerType="action" tail="simple"/> </af:button>
この例のコードはADF Facesに、ポップアップの内容をid
属性で指定されたボタンに合せることと、配置の位置としてafterCenter
(ポップアップをボタンのすぐ後に配置する)を使用することを指示するものです(図16-6を参照)。
図16-6 tail属性付きのポップアップ
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/showpopupbehaviorwithtail.png)
ポップアップのプログラムによる呼出し
ADF Facesのコンポーネントでプログラム的にポップアップを開いて、actionEvent
の結果をサーバーに送信する、あるいはサーバー側レスポンスの結果としてポップアップを表示する、非表示にする、または取り消すことができます。
アクション・コンポーネントによって生成されたactionEvent
への応答として、プログラムでポップアップを表示、非表示または取り消すことができます。actionEvent
をサーバーに即時に配信してサーバー側ロジックを起動できるようにし、サーバー側ロジックの起動結果に対してポップアップを表示、非表示または取り消すことができるようにするには、この機能を実装します。
ここで説明するポップアップのプログラムによる呼出しは、showPopupBehavior
タグがactionEvent
をサーバーに即時に配信しない、「ポップアップの宣言的な呼出し」で説明したポップアップの呼出し方法とは異なります。
「ポップアップの宣言的な作成」で説明しているように、popup
コンポーネント内のコンポーネントの1つ(dialog
、panelWindow
、menu
またはnoteWindow
)を配置することで必要なポップアップのタイプを作成します。起動するときに、popup
コンポーネントが正しいコンテキストにあることを確認します。これを簡単に行う方法の1つは、次の例に示すようにページのバッキングBeanにバインドすることです。
<af:popup id="p1" binding="#{mybean.popup}" ... />
これが完了したら、アクション・コンポーネントのactionListener
属性がpopup
コンポーネントを参照するように構成します。具体的には、ポップアップ・バインディングのアクセッサを呼び出します。
ポップアップの呼出し、取消または非表示を行うバッキングBeanメソッドのコードを作成します。次の例に示すshowPopup
バッキングBeanメソッドでは、HINT_LAUNCH_ID
ヒントを使用してアクション・コンポーネントを指定しています。このコンポーネントからactionEvent
がこのメソッドに渡されます。p1
を使用して参照されているポップアップに対して、show
メソッドを呼び出します。
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); }
例16-1に、actionEvent
に対する応答でポップアップを取り消すバッキングBeanメソッドを示し、例16-2に、actionEvent
に対する応答でポップアップを非表示にするバッキングBeanメソッドを示します。次の例のp1
オブジェクトは、次のパッケージのRichPopup
クラスのインスタンスを参照します。
oracle.adf.view.rich.component.rich.RichPopup
RichPopup
の詳細は、Java APIリファレンスfor Oracle ADF Facesを参照してください。
例16-1 ポップアップを取り消すバッキングBeanメソッド
public void cancelPopupActionListener(ActionEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
p1.cancel();
}
例16-2 ポップアップを非表示にするバッキングBeanメソッド
public void hidePopupActionListener(ActionEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
p1.hide();
}
ポップアップをプログラムで呼び出す方法
ポップアップの表示、取消または非表示を行うバッキングBeanメソッドを参照するように、アクション・コンポーネントのactionListener
属性を構成します。
始める前に:
popupコンポーネントをプログラムで呼び出す場合は、使用可能な構成オプションに関する知識が役立つ場合があります。「プログラムによるポップアップの起動」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
次のタスクを完了する必要があります。
- 「ポップアップの宣言的な作成」の説明に従って、サーバー側メソッドで呼び出すポップアップのタイプを作成します。
ポップアップをプログラムで呼び出す手順:
ポップアップをプログラムで呼び出した場合の処理
実行時に、エンド・ユーザーは、ポップアップの表示、取消または非表示を行うためにサーバー側メソッドを呼び出すように構成されているアクション・コンポーネントを呼び出すことができます。たとえば、図16-7に、popup
コンポーネントの内部にレンダリングするpanelWindow
コンポーネントを示します。panelWindow
コンポーネントは、2つのボタン(「取消」および「非表示」)を公開します。前者はcancel
メソッド、後者はhide
メソッドを呼び出します。ページのtable
コンポーネントのSupplierName列内にレンダリングされているlink
コンポーネントをエンド・ユーザーが呼び出すと、ポップアップが表示されます。
図16-7 サーバー側メソッドによって呼び出されるpopupコンポーネント
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/dialog_serversidepopup_sky.png)
ポップアップへのコンテキスト情報の表示
ADF Faces contextInfoコンポーネントでは、追加の情報をポップアップ・ウィンドウで表示できます。このコンポーネントを使用すれば、コンポーネントが右クリックされたときにメッセージ、警告、ヒントなどの追加情報を表示することができます。
ユーザーがページでタスクを完了するのにより多くの情報が必要だが、ページにアクセスするたびに必要にはならない情報や、情報を表示するためにダイアログを起動する複数のボタンによって、ページが乱雑になるのは望ましくない場合があります。コンポーネントの右クリックで起動するポップアップに情報を表示することも考えられますが、その情報をポップアップで参照できることがユーザーからはわかりません。
contextInfo
コンポーネントでは、ポップアップに追加情報を表示し、追加情報が使用可能であることをユーザーに通知することもできます。contextInfo
コンポーネントを、コンテキスト情報をサポートするコンポーネントのコンテキスト・ファセットに配置すると、図16-8に示すように、小さなオレンジ色の正方形がコンポーネントの左上に表示されます。
図16-8 contextInfoに表示される正方形
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/dialog_context_sky.png)
ユーザーが正方形の上にカーソルを置くと、図16-9に示すようにノート・アイコンの付いた大きな三角形とツールチップが表示され、追加情報が使用可能であることが示されます。
図16-9 contextInfoコンポーネントは追加情報が使用可能であることを示す
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/dialog_context_mouse2_sky.png)
showPopupBehavior
タグがcontextInfo
コンポーネントの子の1つであるため、参照されるポップアップはユーザーが情報アイコンをクリックしたときに表示されます(図16-10を参照)。
図16-10 contextInfoコンポーネントから起動されたダイアログ
![この図は周囲のテキストで説明しています この図は周囲のテキストで説明しています](img/dialog_context_popup_sky.png)
コンテキスト情報の作成方法
showPopupBehavior
コンポーネントをcontextInfo
コンポーネントの子として使用すると、ポップアップ・コンポーネントを、contextInfo
コンポーネントを含むコンポーネントに位置揃えできます。
始める前に:
-
contextInfo
コンポーネントの親になるコンポーネントを作成します。次のコンポーネントではcontextInfo
コンポーネントがサポートされます。-
column
-
link
-
inputComboboxListOfValues
-
inputListOfValues
-
inputText
-
outputFormatted
-
outputText
-
selectOneChoice
-
-
「ポップアップの宣言的な作成」の説明に従って、表示するポップアップを作成します。
-
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
contextInfoコンポーネントを使用する手順:
インライン・ポップアップの自動取消の制御
インライン・ポップアップは、ADF Webアプリケーションによって自動的に取り消されますが、インライン・ポップアップ・コンポーネントの自動取消しを無効にすれば、このデフォルトの動作は変えることができます。
popup
コンポーネントを他の多数のコンポーネントとともに使用して、インライン・ポップアップを作成できます。つまり、インライン・ウィンドウ、ダイアログおよびポップアップ・メニューです。他のコンポーネントには次のものがあります。
-
インライン・ダイアログを作成するためのダイアログ・コンポーネント
「ダイアログの作成方法」を参照してください。
-
インライン・ウィンドウを作成するための
panelWindow
コンポーネント「パネル・ウィンドウの作成方法」を参照してください。
-
ポップアップ・メニューを作成するためのメニュー・コンポーネント
「ポップアップ・メニューの作成方法」を参照してください。
-
ノート・ウィンドウを作成するための
noteWindow
コンポーネント「ノート・ウィンドウの作成方法」を参照してください。
デフォルトでは、Fusion Webアプリケーションは、インライン・ポップアップを定義するメタデータが置換された場合にインライン・ポップアップを自動的に取り消します。この状況が発生するシナリオの一部を次に示します。
-
partialSubmit
プロパティがfalse
に設定されているアクション・コンポーネントの呼出し。Fusion Webアプリケーションは、このようなアクション・コンポーネントを呼び出した後でページ全体をレンダリングします。対照的に、アクション・コンポーネントのpartialSubmit
プロパティがtrue
に設定されている場合は、Fusion Webアプリケーションはコンテンツを部分的にレンダリングします。ページ・レンダリングの詳細は、「部分ページ・コンテンツの再レンダリング」を参照してください。 -
エンド・ユーザーがコンテンツを表示または非表示にするための切替えアイコンをレンダリングするコンポーネントは、
popup
コンポーネントをホストします。たとえば、showDetailItem
コンポーネントやpanelTabbed
コンポーネントなどです。切替えアイコンをレンダリングするコンポーネントの使用の詳細は、「コンテンツの動的な表示および非表示」を参照してください。 -
Fusion Webアプリケーションがインライン・ポップアップを表示するときにフェイルオーバーが発生します。フェイルオーバー時に、Fusion Webアプリケーションはページ全体を置換します。
前のリストで説明したデフォルトの動作は、インライン・ポップアップ・コンポーネントの自動取消を無効にすることで変更できます。これは、前述のいずれかのイベントが発生した場合にFusion Webアプリケーションがインライン・ポップアップを自動的に取り消さないことを意味します。かわりに、Fusion Webアプリケーションはインライン・ポップアップをリストアします。
インライン・ポップアップの自動取消を無効にする方法
popup
コンポーネントのautoCancel
プロパティをdisabled
に設定することで、インライン・ポップアップの自動取消を無効にします。
始める前に:
他のコンポーネントが機能に与える影響を理解することが役立つ場合があります。「インライン・ポップアップの自動取消しの制御」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
インライン・ポップアップの自動取消を制御する手順:
- 「構造」ウィンドウで、自動取消動作を構成する
af:popup
コンポーネントを右クリックし、「プロパティに移動」を選択します - 「プロパティ」ウィンドウの「共通」セクションを開き、「AutoCancel」ドロップダウン・リストで「disabled」を選択します。
ポップアップの入力フィールドのリセット
ADF Faces resetListenerコンポーネントを使用すると、サーバー側イベントで起動された入力コンポーネントの値を宣言的にリセットできます。このコンポーネントを使用すると、エンド・ユーザーが入力フィールドで入力値をリセットすることを許可できます。
resetListener
コンポーネントをpopup
コンポーネントとともに使用すると、ユーザーが入力フィールドの入力値をリセットできるようになります。popup
コンポーネントにレンダリングする入力コンポーネントに対してこの機能を実装するユースケースを次に示します。
-
エンド・ユーザーに、前に入力した不適切な値のリセットを許可する
-
値を削除する。この場合、エンド・ユーザーが入力した値をアプリケーションがサーバーに送信する前に、
popup
コンポーネントがpopupCanceledEvent
を呼び出します。popupCancelEvent
を呼び出すエンド・ユーザー操作の例としては、ボタンのクリック(たとえば「閉じる」というラベルの付いたボタン)、ポップアップ・ダイアログのタイトル・バーにある取消しアイコンのクリック、[Esc]キーの押下などがあります。popup
コンポーネントの構成方法に応じて、データがクライアントにキャッシュされることがあります。たとえば、popup
コンポーネントのcontentDelivery
属性をimmediate
に設定した場合、アプリケーションは常にデータをクライアントにキャッシュします。
contentDelivery
属性に対して選択した設定によってpopup
コンポーネントのコンテンツ配信方針がどのように決定されるかの詳細は、「ポップアップの宣言的な作成」および「実行時に行われる処理: popupコンポーネントのイベント」を参照してください。
「ポップアップの宣言的な呼出し」に、contentDelivery
属性がimmediate
に設定され、「ダイアログの作成方法」で説明したようにユーザーのポップアップがdialogEvents
を生成する事前構成済のコントロールとともにdialog
コンポーネントをレンダリングするpopupコンポーネントのメタデータを示します。このシナリオでは、エンド・ユーザーが入力したデータはクライアントにキャッシュされます。アプリケーションは、リセットするデータをサーバーに送信しません。また、dialog
コンポーネントによってレンダリングされる事前構成済コントロールは、検証エラーが発生した場合にポップアップが閉じない原因となることがあります。
popup
コンポーネントとは無関係にresetListener
コンポーネントを使用する方法の詳細は、「入力フィールドをリセットするためのアクション・コンポーネントの使用方法」を参照してください。
注意:
resetListener
コンポーネントのtype
属性をpopupCanceled
に設定すると、popup
コンポーネントのresetEditableValues
属性をwhenCanceled
に設定するのと同じ機能が提供されます。popup
コンポーネントのresetEditableValues
属性の設定の詳細は、「ダイアログの作成方法」を参照してください。
例16-3 popupコンポーネントのresetListenerタグ
<af:popup id="popup" contentDelivery="immediate"> <af:resetListener type="popupCanceled"/> </af:popup>
ポップアップの入力フィールドのリセット方法
エンド・ユーザーがポップアップの入力フィールドのデータをnull
にリセットできるようにするには、resetListener
コンポーネントのtype
属性をpopupCanceled
に設定します。
始める前に:
popup
コンポーネントでこの機能を構成できるユースケースを理解することが役立つ場合があります。「ポップアップの入力フィールドのリセット」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「ポップアップ・ダイアログ、メニューおよびウィンドウの追加機能」を参照してください。
ポップアップの入力フィールドをリセットする手順:
入力フィールドをリセットするようにポップアップを構成した場合の処理
popup
コンポーネントとresetListener
コンポーネントでエンド・ユーザーがpopup
コンポーネントの入力フィールドをnull
にリセットできるように構成した場合、JDeveloperは例16-4に示すようなエントリを作成します。
図16-11に示すように、実行時にpopupCanceled
イベントを生成するエンド・ユーザー操作により、resetListener
コンポーネントはpopup
コンポーネントの入力フィールドの値をnull
にリセットします。
例16-4 リセット・リスナーを使用して入力フィールドをリセットするように構成された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>