<af:showPopupBehavior>

showPopupBehavior show popup behavior


af:showPopupBehaviorタグは、クライアント側のイベントに応じてaf:popupを表示する宣言的方法です。クライアント・イベントは、triggerType属性を使用して指定します。イベントが指定されない場合、actionイベントがデフォルトのtriggerTypeになります。showPopupBehaviorタグがコンポーネントに関連付けられている場合、popupId属性で指定されたポップアップは、関連付けられたクライアント・イベントがアクティブ化すると自動的に表示されます。このタグは、af:clientListenerタグと類似したクライアント・イベントでのみ機能します。

ポップアップの位置合せ

このタグのalignIdおよびalign属性を使用して、ポップアップが開く場所を指定します。ほとんどのタイプのポップアップでは、これらの属性が必要です(ポップアップのタイプについては、af:popupを参照してください)。ただし、このルールには、いくつかの例外があります。af:dialogおよびaf:panelWindowのポップアップ・タイプでは、位置合せの属性は必要ありません。これらのタイプのポップアップは、ドラッグ・アンド・ドロップを使用して手動で再配置可能であり、デフォルトでブラウザ・ウィンドウの中央に開きます。位置合せの属性を必要としない3番目の例外は、ポップアップでcontextMenu triggerTypeを使用するポップアップに関連するものです。contextMenuイベントは、マウスを右クリックすると起動します。このトリガー・タイプの場合、ポップアップの位置合せはマウスの位置に基づきます。

クライアント・イベントの取消し

showPopupBehaviorタグでは、triggerTypeで定義されたクライアント・イベントが取り消されます。クライアント・イベントの取消しにより、サーバーへの配信を回避します。サーバー側のアクション・リスナーが無視されるため、これはコマンド・ファミリ・コンポーネントで起動されるactionイベントで重要となります。actionのtriggerTypeが使用されると、すべてのactionListenerメソッド・バインディングおよび関連付けられたアクション・リスナーは起動しません。

クライアント・イベントのサブスクライバ

showPopupBehaviorタグは、コンポーネント・イベントのみのサブスクライバです。つまり、クライアントのコンポーネント・イベントにのみ対応します。様々なクライアント・イベントおよびクライアント・イベントが起動される順序は、コンポーネント固有であり、showPopupBehaviorタグは関与しません。サーバー側の機能もトリガーする必要がある場合、開発者は手動でJavascriptを実行してポップアップを表示するか、AdfCustomEventおよびaf:serverListenerを使用するaf:clientListenerを追加して、サーバー側のイベントを配信します。

特別な動作

showPopupBehaviorタグにルック・アンド・フィール標準に基づいた特別な動作が追加されています。インライン・セレクタ・タイプのポップアップでは、関連付けられたポップアップの可視性が切り替わります。インライン・セレクタがすでに表示されている場合は、ポップアップが閉じます。この動作は、インライン・セレクタ・タイプのポップアップにのみ適用されます。

showPopupBehaviorを使用して1つのポップアップを複数の起動ソースで開くことができます。ポップアップがすでに表示されているときに、別の起動ソースからshowPopupBehaviorタグを使用して開くリクエストが作成されると、共有ポップアップは閉じてから再び表示されます。ポップアップがすでに表示されているときに、同じ起動ソースからポップアップを表示するリクエストが作成された場合、リクエストは無視されます(インライン・セレクタは除く)。

mouseOverまたはmouseHoverイベント・タイプには、500ミリ秒の起動遅延が組み込まれています。これは、遅延時間内に同じコンポーネントに対してmouseOutイベントがトリガーされると、暗黙的に取り消されます。

すべてのポップアップ・タイプには、自動消去動作が設定されています。ポップアップ・タイプの分類および想定される動作については、af:popupタグのドキュメントを参照してください。

例:

この例では、ボタンをクリックするとsomePopupのIDを持つポップアップを表示します。

<af:commandButton id="button" text="Click me">
  <af:showPopupBehavior popupid="somePopup" alignid="button" 
                           align="endBefore" triggerType="action" />
</af:commandButton>
            

この例では、panelGroupLayoutに含まれるものを右クリックすると、someMenuPopupのIDを持つメニューのポップアップを表示します。

<af:panelGroupLayout>
  <af:showPopupBehavior popupid="someMenuPopup"
                triggerType="contextMenu"/>
                .... any other content ...
</af:panelGroupLayout>
            

クライアント・イベントのトリガー・タイプ

次の表に、triggerType属性に割当て可能な、コンポーネント・ファミリ固有のイベント・タイプをリスト表示します。

イベント・タイプ コンポーネント・ファミリ 説明
action Command ユーザーがコマンド・コンポーネントをトリガーしたときに起動します。このイベントは取り消されるため、所有するコンポーネントのサーバー側のアクション・リスナーは無視されます。
dialog Dialog ユーザーがダイアログの「OK」ボタンまたは「取消」ボタンをクリックしたときに起動します。
disclosure ShowDetail 開示状態が切り替えられたときに起動します。
load Document ドキュメントのロードが終了したときに起動します。
fetch Popup ポップアップのコンテンツ配信がlazyまたはlazyUncachedの場合、コンテンツを開く前に起動されるコンテンツのフェッチ・イベント。これは、コンテンツ配信に必要な2つのイベントのうち、最初のイベントです。
contentLoaded Popup コンテンツ配信の一部はブラウザに配信されています。このイベントは、ポップアップ・コンポーネントに自身が表示可能であることを通知するものです。これはコンテンツ配信の2つ目のイベントです。
popupOpening Popup ポップアップが開く前に起動します。
popupOpened Popup ポップアップが開いた後で起動します。
popupClosed Popup ポップアップが閉じた後で起動します。
query Query 問合せアクションが発生したとき(ユーザーがquickQueryで検索アイコンをクリックするか、問合せコンポーネントで検索ボタンをクリックしたとき)に起動します。
rowDisclosure Tree、TreeTable 行の開示状態が切り替えられたときに起動します。
selection Table、Tree、TreeTable 選択状態が変化したときに起動します。
sort Table ユーザーがデータをソートしたときに起動します。
valueChange Input、Select\* 入力制御の値が変化したときに起動します。

次の表に、入力(マウス/キーボード)のイベント・タイプをリスト表示します。これらのイベントはすべてのコンポーネントに配信されます(ただし場合によっては、ピアの実装で使用されます)。また、triggerType属性に割当て可能です。

イベント・タイプ 説明
click ユーザーがコンポーネントをクリックすると起動します。イベントのソースがコマンド・ファミリ・コンポーネントの場合は、コンポーネントからactionイベントが起動されます。
contextMenu マウスを右クリックすると、ポップアップが表示されます。位置合せはマウスの位置に基づくとみなされます。
dblClick ユーザーがコンポーネントをダブルクリックすると起動します。
mouseDown ユーザーがコンポーネントに対してマウス・ボタンを押した状態にすると起動します。
mouseUp ユーザーがコンポーネント上でマウス・ボタンを離すと起動します。
mouseMove ユーザーがコンポーネント上でマウスを動かすと起動します。
mouseOver マウスがコンポーネント上に移動すると起動します。ポップアップの起動までに500ミリ秒の遅延があるとみなされます。この遅延時間内にmouseOutが起動されると、保留中の起動リクエストは取り消されます。
mouseOut マウスがコンポーネントから外れると起動します。
keyDown コンポーネントをフォーカスした状態でユーザーがキーを押すと起動します。
keyUp コンポーネントをフォーカスした状態でユーザーがキーを離すと起動します。
keyPress コンポーネントをフォーカスした状態でキーが正しく押されると起動します。
focus キーボードを使用してコンポーネントをフォーカスすると起動します。
blur キーボードを使用してコンポーネントからフォーカスを外すと起動します。

次の表に、複数のイベント・タイプを組み合せる、混合イベント・タイプをリスト表示します。

ニーモニック 説明
mouseHover mouseOverでポップアップを表示し、mouseOutでポップアップを非表示にする混合イベント・タイプ。このイベントでは、ポップアップの起動までに500ミリ秒の遅延があるとみなされます。500ミリ秒の遅延内にmouseOutイベントが起動されると、保留中の起動リクエストは取り消されます。このイベント・タイプでは、alignIdおよびalign属性を使用した要素への位置合せが必要です。

属性

名前 ELのサポート 説明
popupId String あり 含むコンポーネントに対して相対的な、ポップアップのID。1つのコロンで始まるIDは、(コロンを除いた後)絶対値として扱われます。
alignId String なし 位置合せするポップアップに対して相対的なコンポーネントのID。コロン1つで始まるIDは、(コロンを除いた後)絶対値として扱われます。その他のIDは、showPopupBehaviorを含むコンポーネントに対して相対的に解決されます。
align String なし

alignIdコンポーネントに対して相対的にポップアップを位置合せする方法を示します。有効な値は次のとおりです。

  • afterStart: ポップアップは要素の下に表示されます。このときポップアップの左上角は、要素の左下角に位置合せされます。要素およびポップアップの左端が位置合せされます。
  • afterEnd: ポップアップは要素の下に表示されます。このときポップアップの右上角は要素の右下角に位置合せされます。要素およびポップアップの右端が位置合せされます。
  • beforeStart: ポップアップは要素の上に表示されます。このときポップアップの左下角は要素の左上角に位置合せされます。要素およびポップアップの左端が位置合せされます。
  • beforeEnd: ポップアップは要素の上に表示されます。このときポップアップの右下角は要素の右上角に位置合せされます。要素およびポップアップの右端が位置合せされます。
  • endAfter: ポップアップは要素の右に表示されます。このときポップアップの左下角は要素の右下角に位置合せされます。要素およびポップアップの下端が位置合せされます。
  • endBefore: ポップアップは要素の右に表示されます。このときポップアップの左上角は要素の右上角に位置合せされます。要素およびポップアップの上端が位置合せされます。
  • startAfter: ポップアップは要素の左に表示されます。このときポップアップの右下角は要素の左下角に位置合せされます。要素およびポップアップの下端が位置合せされます。
  • startBefore: ポップアップは要素の左に表示されます。このときポップアップの右上角は要素の左上角に位置合せされます。要素およびポップアップの上端が位置合せされます。
triggerType String なし ポップアップの表示をトリガーするイベント・タイプ。デフォルトはactionです。ポップアップ・メニューを表示するには、contextMenuを使用します。モーダルではないポップアップを表示するには、mouseHoverを使用して、マウスをトリガー・コンポーネントの上に移動させます。またこれを非表示にするには、マウスをトリガー・コンポーネントの外に移動させます。トリガー・タイプのリストについては、前述のクライアント・イベントのトリガー・タイプの項を参照してください。