| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
前 |
次 |
この章では、JSFページのダイアログ、メニュー、ウィンドウなど、2次ウィンドウにポップアップ要素を作成および使用する方法について説明します。また、ADF Facesダイアログ・フレームワークを使用して、別のページ・フローを持つダイアログを作成する方法も説明します。
この章では、次の項目について説明します。
ADF Facesには、2次ウィンドウの情報を表示および非表示にするための、一連のリッチ・クライアント・コンポーネントが用意されています。popupコンポーネントは非表示のレイアウト・コントロールで、通常は、インライン(同じページに属する)ダイアログ、ウィンドウおよびメニューを表示するために、他のコンポーネントと組み合せて使用されます。
たとえば、図13-1は、dialogコンポーネントをpopupコンポーネントの子として配置することで作成されるダイアログ・ボックスを示しています。ユーザーは、検索条件を入力してから「OK」して、エントリを送信したり、「取消」をクリックまたはダイアログを閉じて、ダイアログを終了できます。
また、ポップアップ内のコンポーネントを使用して、別のコンポーネントに関連するコンテキスト情報を表示することもできます。このように構成すると、関連するコンポーネントに小さい正方形が表示されます。マウスをアイコンの上に置くと、図13-2に示すように、アイコンが大きくなり、ノート・アイコンも表示されます。
ノート・アイコンをクリックすると、関連するポップアップにそのコンテンツが表示されます。
ADF Facesには、親ページとは別にに表示されるプロセス用にページの作成をサポートするダイアログ・フレームワークも用意されています。このフレームワークでは、独自の制御フローを持つ複数のダイアログ・ページがサポートされています。たとえば、あるユーザーが購入を選択した後にWebサイトから離れ、支払いを完了する前に新しいクレジット・カードへの申込みを決定したとします。外部ブラウザ・ウィンドウで、ダイアログ・フレームワークを使用してクレジット・カードのトランザクションが開始されます。クレジット・カードのトランザクションが終了しても、元のページのチェックアウト・トランザクションは終了しません。
このダイアログ・フレームワークは、親ページの一部としてインラインで使用することもできます。これは、ページに独自の制御フローが必要だが、ポップアップ・ブロッカで外部ウィンドウをブロックさせない場合に便利です。
アプリケーションで完全なFusionテクノロジ・スタックを使用する場合は、このダイアログ・フレームワークがADFタスク・フローで使用するためにADFコントローラと統合されていることに注意してください。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のモーダル・ダイアログでのバインド・タスク・フロー実行に関する項を参照してください。
表13-1に示すように、dialog、panelWindow、menuおよびnoteWindowコンポーネントは、インライン・ポップアップ要素を表示するために、すべてpopupコンポーネント内で使用できます。popupコンポーネントで子コンポーネントが存在しない場合は、非常にシンプルなインライン・ポップアップが表示されます。
表13-1 popupコンポーネントで使用されるコンポーネント
| コンポーネント | 実行時に表示 |
|---|---|
|
|
OK、承諾、拒否および取消しのアクションがアクティブ化された場合に、ダイアログ内に子を表示し、イベントを配信します。  |
|
|
ダイアログに似たウィンドウに子を表示しますが、イベントはサポートしません。詳細は、13.2.2項「パネル・ウィンドウの作成方法」を参照してください。  |
|
|
関連するコンポーネントのポップアップ・メニューを表示します。詳細は、13.2.3項「ポップアップ・メニューの作成方法」を参照してください。  |
|
|
特定のUIコンポーネントに関連付けられた読取り専用の情報を表示します。ノート・ウィンドウはヘルプやメッセージの表示に使用され、通常はマウスを置いたり、フォーカスをしたときに表示されます。詳細は、13.2.4項「ノート・ウィンドウの作成方法」を参照してください。  |
|
親コンポーネントのない |
コンテンツをインラインで表示します。  |
dialogコンポーネントとpanelWindowコンポーネントはいずれも定義ヘルプがサポートされていますが、ヘルプ・アイコン(疑問符が表示された青い丸)の上にカーソルを移動するとコンテンツが表示されます。詳細は、17.5項「コンポーネントへのヘルプの表示」を参照してください。
通常は、コマンド・コンポーネントとshowPopupBehaviorタグを組み合せて、ポップアップ要素を起動します。showPopupBehaviorタグと、タグで起動されるコンポーネントを関連付けます。このタグでは、ポップアップ要素の位置も制御します(必要な場合)。
showPopupBehaviorタグは、コマンド・コンポーネントのアクション・イベントで使用されるだけでなく、showDetailイベントやselectionイベントなどの他のイベントと組み合せて使用できます。詳細は、13.4項「ポップアップ要素の起動」を参照してください。
デフォルトで、ポップアップ要素のコンテンツは、ポップアップ要素が表示されるまでサーバーから送信されません。このため、開かれた時にポップアップ要素が表示されるスピードと、親ページがレンダリングされるスピードが入れ替わります。ポップアップ要素がロードされると、すぐに表示できるよう、コンテンツはクライアントにおいてデフォルトでキャッシュされます。
popupコンポーネントのcontentDelivery属性を次のいずれかのオプションに設定することで、コンテンツの配信方法を変更できます。
lazy - 前述のデフォルトの方法。コンテンツは、ポップアップ要素が一度表示されるまでロードされず、ロードされるとキャッシュされます。
immediate - コンテンツはすぐにページにロードされ、可能なかぎり迅速に表示されます。この方法は、ページが使用されるたびにすべてのユーザーが必ず使用するポップアップ要素に使用します。
lazyUncached - コンテンツはポップアップ要素が表示されるまでロードされず、ポップアップ要素が表示されるたびにリロードされます。この方法は、失効するか期限切れになる可能性があるデータをポップアップ要素に表示する場合に使用します。
popupコンポーネントのcontentDelivery属性をlazyまたはlazyUncachedに設定した場合は、別のpopupコンポーネントの属性(childCreation)をdeferredに設定することで、popupコンポーネントおよびホストするページのパフォーマンスをさらに最適化できます。これにより、アプリケーションがコンテンツを配信するまで、popupコンポーネントの子コンポーネントの作成が遅延します。childCreation属性のデフォルト値はimmediateです。
ダイアログを閉じた場合にイベントを呼び出す必要がある場合は、ダイアログを作成します。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プロパティの使用の詳細は、13.6項「インライン・ポップアップの自動取消しの制御」を参照してください。
インライン・ダイアログを作成する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「ポップアップ」をドラッグ・アンド・ドロップします。
|
ヒント:
|
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
contentDelivery: コンテンツがポップアップ内のコンポーネントにどのように配信されるかを選択します。
|
ヒント: ダイアログ内の入力コンポーネントの値は、ユーザーがダイアログの「取消」ボタンをクリックしてもリセットされません。ユーザーが次にダイアログを開くと、これらの値はまだ表示されます。この値をサーバーの現在の値に合せるには、 |
animate: アニメーションを有効にするには、trueを選択します。アニメーションは、trinidad-config.xmlファイルの構成およびスキン・プロパティ(詳細は、A.6.2.1項「アニメーションの有効化」を参照)によって決定されます。この設定は、falseを選択することでオーバーライドできます。
launcherVar: 起動コンポーネントの参照に使用する変数を入力します。この変数は、ポップアップまたはその子コンポーネントでのイベント配信中で、eventContextがlauncherに設定されている場合にのみ到達可能です。
eventContext: 表で選択した行の情報がポップアップ内のダイアログに表示される場合など、ポップアップが複数のオブジェクトで共有されている場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーのコール前にクリックした行が最新の状態になり、その行のデータのみが返されます。詳細は、13.2.5項「実行時の処理: popupコンポーネント・イベント」を参照してください。
オプションで、自動取消し動作を決定するには、プロパティ・インスペクタで「その他」セクションを開き、autoCancelプロパティの値を設定します。詳細は、13.6項「インライン・ポップアップの自動取消しの制御」を参照してください。
コンポーネント・パレットから、「ダイアログ」をpopupコンポーネントの直接の子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
type: ダイアログに表示する組込みの部分送信コマンドを選択します。
たとえば、type属性をyesNoCancelに設定すると、ダイアログには「はい」、「いいえ」および「取消」ボタンが表示されます。これらのボタンを押すと、ダイアログ自身が閉じられ、関連する結果(ok、yes、noまたはcancel)がイベントで配信されます。ok、yesおよびnoの結果はdialogEventで配信されます。cancelの結果は、PopupCanceledイベントで送信されます。適切なリスナー・プロパティを使用すると、メソッドにバインドしてイベントを処理し、結果を使用してロジックを決定できます。
|
ヒント: 重大度がエラー以上のADF Facesメッセージがある場合、ダイアログは閉じられません。 |
title: ダイアログ・ウィンドウにタイトルとして表示されるテキストを入力します。
closeIconVisible: 「閉じる」アイコンをダイアログに表示するかどうかを選択します。
modal: ダイアログをモーダルにするかどうかを選択します。モーダル・ダイアログでは、ダイアログが閉じられるまでメイン・ページに戻ることはできません。
resize: ダイアログのサイズ変更をユーザーに許可するかどうかを選択します。デフォルトはoffです。
stretchChildren: ダイアログを埋めるために子コンポーネントを拡大するかどうかを選択します。firstに設定されている場合、ダイアログは1つの子コンポーネントを拡大します。ただし、拡大できる子コンポーネントであることが必要です。詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
|
注意: resizeを |
「外観」セクションを開き、テキスト属性を設定します。
ボタン・テキストとラベルとアクセス・キーを別々に指定するかわりに、2つを結合して、アクセス・キーがボタン・テキストの一部になるようにします。アクセス・キーとして使用する文字の前にアンパサンド(&)を付けます。
たとえば、肯定ボタンのテキストが「OK」で、「OK」のOをアクセス・キーにする場合は、&OKを入力します。
必要に応じて、「動作」セクションを開き、dialogListener属性の値を入力します。値は、イベントを処理するダイアログ・リスナー・メソッドのEL式メソッド参照にしてください。
たとえば、項目の削除を確認するためのダイアログを作成するとします。次に、例13-1に示すdeleteItemメソッドと同様のメソッドをマネージドBeanにメソッドを作成します。このメソッドは、イベントからの結果にアクセスします。結果がyes以外の場合、ダイアログは閉じられます。結果がyes(ユーザーが項目を削除する)場合、メソッドは選択された項目を取得して削除します。
例13-1 項目を削除する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);
}
例13-2に、dialogListener属性がdeleteItemメソッドにどのようにバインドされるかを示します。
例13-2 dialogListener属性のメソッドへのバインド
<af:dialog title="#{explorerBundle['deletepopup.popuptitle']}"
type="yesNo"
dialogListener="#{explorer.headerManager.deleteItem}"
id="d1">
dialogEventは、結果がok、yesまたはnoの場合にのみ伝播されます。これは必要に応じてブロックできます。詳細は、5.3.5項「イベントがサーバーに伝播されないようにする方法」を参照してください。
かわりに、ユーザーが「取消」ボタン(または「閉じる」アイコン)をクリックすると、結果がcancelになり、popupCancelクライアント・イベントがpopupコンポーネントで発生し、他のイベント(dialogEventなど)がサーバーにアクセスできなくなります。ただし、popupCancelイベントはサーバーに配信されます。
ダイアログに固定サイズを設定する場合、またはresizeをonまたはstretchChildrenをfirstに設定している場合は、「その他」セクションを開き、次の属性を設定します。
contentHeight: 目的の高さをピクセルで入力します。
contentWidth: 目的の幅をピクセルで入力します。
|
ヒント: ユーザーは実行時に、これらの属性の値を変更できますが( |
|
注意:
|
必要に応じて、コマンド・コンポーネントをbuttonBarファセットに追加します。追加されたすべてのコマンド・コンポーネントでpartialSubmit属性をtrueに設定することをお薦めします。ただし、af:popupコンポーネントのautoCancelプロパティの値をdisabledに設定すると、コマンド・コンポーネントのpartialSubmit属性をfalseに設定できます。af:popupコンポーネントのautoCancelプロパティおよびコマンドコンポーネントpartialSubmitプロパティの値では、コマンド・コンポーネントがダイアログをどのように閉じて再ロードするかを決定します。詳細は、13.6項「インライン・ポップアップの自動取消しの制御」を参照してください。
|
ヒント: ファセットがビジュアル・エディタに表示されない場合は、次のようにします。
|
デフォルトでは、追加されたコマンド・コンポーネントはダイアログを閉じません。ダイアログを閉じる処理および必要な処理を管理するハンドラに、コマンド・コンポーネントのactionListenerをバインドする必要があります。たとえば、これを行う方法については、タグのドキュメントを参照してください。
コンポーネントを挿入して、ダイアログのデータを表示または収集します。コンポーネントを含めるには、panelGroupLayoutなどのレイアウト・コンポーネントを使用します。
|
ヒント: 通常は、ダイアログの「取消」ボタンまたは「閉じる」アイコンをクリックすると、 |
親ページのロジックを追加し、ポップアップおよびダイアログを起動します。詳細は、13.4項「ポップアップ要素の起動」を参照してください。
panelWindowコンポーネントはdialogコンポーネントに似ていますが、ボタンを構成したり、ボタンをファセットに追加することはできません。いくつかのロジックを起動してpanelWindowのデータを処理する必要がある場合は、popupコンポーネントのcancelイベントのリスナーを作成する必要があります。
panelWindowコンポーネントを含むpopupコンポーネントは、formコンポーネント内に含まれる必要があります。
|
ヒント: Fusionテクノロジ・スタックを使用するアプリケーションのインライン・ポップアップとして |
インライン・ウィンドウを作成する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「ポップアップ」をドラッグ・アンド・ドロップします。
|
ヒント:
|
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
contentDelivery: コンテンツがポップアップ内のコンポーネントにどのように配信されるかを選択します。
|
ヒント: ユーザーが |
animate: アニメーションを有効にするには、trueを選択します。アニメーションは、trinidad-config.xmlファイルの構成およびスキン・プロパティ(詳細は、A.6.2.1項「アニメーションの有効化」を参照)によって決定されます。この設定は、falseを選択することでオーバーライドできます。
launcherVar: 変数の名前(sourceなど)を入力します。表のvar属性と同様、この変数は、showPopupBehaviorタグを含むコンポーネントに対するリクエスト・スコープの参照を格納するのに使用されます。この変数は、popupまたはその子コンポーネントでのイベント配信中で、eventContextがlauncherに設定されている場合にのみ到達可能です。
eventContext: 表で選択した行の情報がポップアップ内のウィンドウに表示される場合など、ポップアップが複数のオブジェクトで共有されている場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーのコール前にクリックした行が最新の状態になり、その行のデータのみが返されます。詳細は、13.2.5項「実行時の処理: popupコンポーネント・イベント」を参照してください。
popupCancelListener: ウィンドウが閉じられたときに起動するロジックでハンドラに評価されるEL式に設定します。
オプションで、自動取消し動作を決定するには、プロパティ・インスペクタで「その他」セクションを開き、autoCancelプロパティの値を設定します。詳細は、13.6項「インライン・ポップアップの自動取消しの制御」を参照してください。
コンポーネント・パレットの「レイアウト」パネルから、「パネル・ウィンドウ」をpopupコンポーネントの直接の子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
modal: ウィンドウをモーダルにするかどうかを選択します。モーダル・ウィンドウでは、ウィンドウが閉じられるまでメイン・ページに戻ることはできません。
closeIconVisible: 「閉じる」アイコンをウィンドウに表示するかどうかを選択します。
title: ウィンドウにタイトルとして表示されるテキスト。
resize: ダイアログのサイズ変更をユーザーに許可するかどうかを選択します。デフォルトはoffです。
stretchChildren: ウィンドウを埋めるために子コンポーネントを拡大するかどうかを選択します。firstに設定されている場合、ウィンドウは1つの子コンポーネントを拡大します。ただし、拡大できる子コンポーネントであることが必要です。詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
|
注意: resizeを |
ウィンドウに固定サイズを設定する場合、またはresizeをonまたはstretchChildrenをfirstに設定している場合は、「その他」セクションを開き、次の属性を設定します。
contentHeight: 目的の高さをピクセルで入力します。
contentWidth: 目的の幅をピクセルで入力します。
|
ヒント: ユーザーは実行時に、これらの属性の値を変更できますが( |
|
注意:
|
コンポーネントを挿入して、ウィンドウのデータを表示または収集します。コンポーネントを含めるには、panelGroupLayoutなどのレイアウト・コンポーネントを使用します。
親ページのロジックを追加し、ポップアップおよびパネル・ウィンドウを起動します。詳細は、13.4項「ポップアップ要素の起動」を参照してください。
ポップアップ・メニューは、ポップアップ・コンポーネント内のメニュー・コンポーネントを使用して作成します。次に、指定のトリガーに基づいて、別のコンポーネントからポップアップ・メニューのポップアップを起動できます。かわりに、ツールバーのツールバー・ボタンでポップアップ・メニューを起動する場合は、14.3項「ツールバーの使用方法」を参照してください。
インライン・ポップアップ・メニューを作成する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「ポップアップ」をドラッグ・アンド・ドロップします。
|
ヒント: ポップアップ・コンポーネントがページのどの場所に表示されるかは、ポップアップの起動に使用されるコンポーネントで導かれるため、これは重要ではありません。ただし、 |
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
contentDelivery: コンテンツがポップアップ内のコンポーネントにどのように配信されるかを決定します。
animate: アニメーションを有効にするには、trueを選択します。アニメーションは、trinidad-config.xmlファイルの構成およびスキン・プロパティ(詳細は、A.6.2.1項「アニメーションの有効化」を参照)によって決定されます。この設定は、falseを選択することでオーバーライドできます。
launcherVar: 起動コンポーネントの参照に使用する変数名(sourceなど)を入力します。この変数は、popupまたはその子コンポーネントでのイベント配信中で、eventContextがlauncherに設定されている場合にのみ到達可能です。
eventContext: 表で選択した行の情報がポップアップ内のメニューに表示される場合など、ポップアップが複数のオブジェクトで共有されている場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーのコール前にクリックした行が最新の状態になり、その行のデータのみが返されます。詳細は、13.2.5項「実行時の処理: popupコンポーネント・イベント」を参照してください。
オプションで、自動取消し動作を決定するには、プロパティ・インスペクタで「その他」セクションを開き、autoCancelプロパティの値を設定します。詳細は、13.6項「インライン・ポップアップの自動取消しの制御」を参照してください。
コンポーネント・パレットから「メニュー」をpopupコンポーネントの直接の子としてドラッグ・アンド・ドロップし、14.2.1項「メニュー・バーのメニューの作成および使用方法」の手順6からの説明に従って、commandMenuItemコンポーネントを使用してメニューをビルドします。
親ページのロジックを追加し、ポップアップおよびポップアップ・メニューを起動します。詳細は、13.4項「ポップアップ要素の起動」を参照してください。
読取り専用のテキストを表示するには、noteWindowコンポーネントを使用します。noteWindowコンポーネントを含むpopupコンポーネントは、formコンポーネント内に含まれる必要があります。
インライン・ウィンドウを作成する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「ポップアップ」をドラッグ・アンド・ドロップします。
|
ヒント: ポップアップ・コンポーネントがページのどの場所に表示されるかは、ポップアップの起動に使用されるコンポーネントで導かれるため、これは重要ではありません。ただし、 |
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
contentDelivery: コンテンツがポップアップ内のコンポーネントにどのように配信されるかを決定します。
animate: アニメーションを有効にするには、trueを選択します。アニメーションは、trinidad-config.xmlファイルの構成およびスキン・プロパティ(詳細は、A.6.2.1項「アニメーションの有効化」を参照)によって決定されます。この設定は、falseを選択することでオーバーライドできます。
launcherVar: 起動コンポーネントの参照に使用する変数を入力します。この変数は、popupまたはその子コンポーネントでのイベント配信中で、eventContextがlauncherに設定されている場合にのみ到達可能です。
eventContext: 表で選択した行の情報がポップアップ内のウィンドウに表示される場合など、ポップアップが複数のオブジェクトで共有されている場合は、launcherに設定します。この属性をlauncherに設定すると、イベント・リスナーのコール前にクリックした行が最新の状態になり、その行のデータのみが返されます。詳細は、13.2.5項「実行時の処理: popupコンポーネント・イベント」を参照してください。
popupCancelListener: ウィンドウが閉じられたときに起動するロジックでハンドラに評価されるEL式に設定します。
オプションで、自動取消し動作を決定するには、プロパティ・インスペクタで「その他」セクションを開き、autoCancelプロパティの値を設定します。詳細は、13.6項「インライン・ポップアップの自動取消しの制御」を参照してください。
コンポーネント・パレットから、「ノート・ウィンドウ」をpopupコンポーネントの直接の子としてドラッグ・アンド・ドロップします。
ウィンドウに表示するテキストを入力する手順:
「ソース」タブをクリックし、ページ・ソース・コードを表示します。
閉じスラッシュ(/)をaf:noteWindowタグから削除します。
シンプルHTMLタグを使用して、af:noteWindowタグの下に表示するテキストを入力し、af:noteWindow閉じタグで終了します。
例13-3に、ノート・ウィンドウのテキストを示します。
例13-3 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>
図13-3に、ノートがどのように表示されるかを示します。
オプションで、プロパティ・インスペクタで「その他」セクションを開き、AutoDismissalTimeoutプロパティに秒数を指定します。指定する値により、アプリケーションによってノート・ウィンドウが自動的に閉じられるまでに表示される秒数が決定されます。指定した値によって、デフォルトの自動消去動作がオーバーライドされます。このオーバーライドは、エンド・ユーザーがノート・ウィンドウのコンテンツの上にマウスを移動すると、取り消されますが、これは、この操作により、自動消去動作がノート・ウィンドウのデフォルトの自動消去動作に戻るためです。デフォルトの自動消去動作では、フォーカスが起動元またはポップアップのコンテンツから変更されると、ノート・ウィンドウが閉じられます。
|
注意: タイムアウト取消し期間はマウスを置くことでトリガーされ、キーボードの同等の操作は用意されていないため、このプロパティで有効化されたこの機能は使い勝手がよいとは言えません。 |
親ページのロジックを追加し、ポップアップおよびノート・ウィンドウを起動します。詳細は、13.4項「ポップアップ要素の起動」を参照してください。
コンテンツがポップアップに配信され、contentDelivery属性がlazyまたはlazyUncachedのいずれかに設定されている場合は、popupFetchサーバー側イベントが起動されます。このイベントには、eventContextとlauncherVarの2つのプロパティがあります。eventContextプロパティでは、ポップアップのコンテキスト(self)またはポップアップを起動したコンポーネント(launcher)から、イベントの配信元のコンテキストを決定します。コンテキストをlauncherに設定することは、ポップアップが複数のコンポーネントで共有されている場合に非常に有効ですが、これは、ポップアップを起動したコンポーネントがポップアップではなく、イベントを起動したかのようにように、フレームワークが動作するためです。launcherVarプロパティは、変数が表内の行のスタンプ設定に使用されるのと同様の方法で、現在のランチャの追跡に使用されます。
たとえば、コマンド・リンクを使用して個人の名前を表示する表の列があるとします。コマンド・リンクにカーソルを合せると、個人の氏名を表示するポップアップnoteWindowが起動されます。このnoteWindowは、表のすべての行で使用されますが、クリックしたコマンドリンクを含む行にのみ氏名を表示する必要があるため、eventContextプロパティを使用して、例13-4に示すように、コンテキストがその行になるようにします。
例13-4 共有ポップアップ要素での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>
変数ソースを使用すると、ソースから値を取得して適用したり、値を設定したりできます。たとえば、表で使用されるpeopleオブジェクトの氏名の値を取得し、例13-5に示すように、setPropertyListenerおよびclientAttributeタグを使用して、ウィンドウで使用されるtestBeanのfullNameプロパティの値として設定できます。
例13-5 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タグの使用の詳細は、4.7.2項「Javaコードを記述せずにpageFlowScopeスコープを使用する方法」を参照してください。クライアント属性の使用の詳細は、3.8項「クライアント側コンポーネントに対するボーナス属性の使用」を参照してください。showPopupBehaviorタグの詳細は、13.4項「ポップアップ要素の起動」を参照してください。
ポップアップでは、次のクライアント側イベントも起動します。
popupOpening: ポップアップが起動されると、開始されます。このイベントがクライアント側のリスナーで取り消されると、ポップアップは表示されません。
popupOpened: ポップアップが表示可能になった後、起動されます。このイベントの使用例には、ポップアップ内デフォルトのフォーカスをオーバーライドする、カスタムのルール作成があります。
popupCanceled: 自動消去やポップアップ・クライアント・コンポーネントのcancelメソッドの明示的な起動によってポップアップが予期せずに閉じると、起動します。このクライアント側イベントには、対応するサーバー側イベントもあります。
popupClosed: ポップアップが非表示になるか、ポップアップが予期せずに閉じられると、起動します。このクライアント側イベントには、対応するサーバー側イベントもあります。
「はい」ボタンがクリックされた場合など、ポップアップが肯定条件によって閉じられると、非表示になります。「閉じる」アイコンや「取消」ボタンがクリックされた場合など、ポップアップが自動消去によって閉じられると、取り消されます。どちらのタイプの消去でも、popupClosedクライアント側イベントが発生します。ポップアップを取り消すと、関連するサーバー側イベントを持つクライアント側popupCanceledイベントが発生します。このイベントは、イベントに登録されているリスナーがないかぎり、サーバーに伝播されません。伝播されると、ポップアップの子コンポーネントの処理ができなくなり、送信された値および検証が無視されます。ポップアップが取り消された場合に必要な処理を実行するロジックを含むpopupCanceledイベントのリスナーを作成できます。
クライアント側のイベントに基づいて一部のロジックを起動する場合は、カスタムのクライアント・リスナー・メソッドを作成できます。詳細は、3.2項「クライアント・イベントのリスニング」を参照してください。クライアント・イベントに基づいてサーバー側ロジックを起動する場合は、そのロジックを起動するserverListenerタグを追加できます。詳細は、5.4項「クライアントからサーバーへのカスタム・イベントの送信」を参照してください。
コマンド・コンポーネントによって生成されるactionEventに対して、ポップアップをプログラムで表示、非表示または取り消すことができます。この機能は、actionEventをサーバーにすぐに配信する場合に実行するため、サーバー側ロジックを起動して、サーバー側ロジックの起動結果に対してポップアップを表示、非表示または取り消すことができます。
ここで説明するプログラムによるポップアップの起動は、13.2項「ポップアップ要素の宣言的作成」で説明するポップアップの起動方法(showPopupBehaviorタグではactionEventがサーバーにすぐに配信されません)と異なります。
13.2項「ポップアップ要素の宣言的作成」の説明に従い、コンポーネントのいずれか(dialog、panelWindow、menuまたはnoteWindow)をpopupコンポーネント内に配置して、必要なポップアップのタイプを作成します。popupコンポーネントを起動する場合は、適切なコンテキストになるようにする必要があります。これを行う簡単な方法の1つは、例13-6のように、ページのバッキングBeanにバインドします。
これを実行したら、ポップアップ・バインディングのアクセッサをコールし、コマンド・コンポーネントのactionListener属性を構成して、popupコンポーネントを参照します。
ポップアップを起動、取消し、非表示にするバッキングBeanメソッドのコードを記述します。例13-7に、HINT_LAUNCH_IDヒントを使用して、actionEventが渡されるコマンド・コンポーネントを識別し、p1を使用して、showメソッドを起動するポップアップを参照するshowPopupバッキングBeanメソッドを示します。
例13-7 ポップアップを起動するバッキング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);
}
例13-8に、actionEventに対してポップアップを取り消すバッキングBeanメソッドを示します。
例13-8 ポップアップを取り消すバッキングBeanメソッド
public void cancelPopupActionListener(ActionEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
p1.cancel();
}
例13-9に、actionEventに対してpopupを非表示にするバッキングBeanメソッドを示します。
例13-9 ポップアップを非表示にするバッキング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 Java APIリファレンス for Oracle ADF Facesを参照してください。
ポップアップを表示、取消しまたは非表示にするバッキングBeanメソッドを参照するには、コマンド・コンポーネントのactionListener属性を構成します。
開始する前に:
13.2項「ポップアップ要素の宣言的作成」の説明に従い、サーバー側メソッドで起動するポップアップのタイプを作成します。
ポップアップ・コンポーネントをプログラムで起動する場合は、利用可能な構成オプションについて理解しておくと役立ちます。詳細は、13.3項「プログラムによるポップアップの起動」を参照してください。
プログラムでポップアップを起動する手順:
コンポーネント・パレットの「一般コントロール」パネルから、JSFページにコマンド・コンポーネントをドラッグ・アンド・ドロップします。
たとえば、「ボタン」コンポーネントです。
プロパティ・インスペクタで、「動作」セクションを開いて次の属性を設定します。
partialSubmit: エンド・ユーザーがコマンド・コンポーネントをクリックした後に、Fusion Webアプリケーションでページ全体をレンダリングしない場合は、trueに設定します。デフォルト値(false)では、エンド・ユーザーがコマンド・コンポーネントを起動した後に、ページ全体がアプリケーションでレンダリングされます。ページのレンダリングの詳細は、第7章「部分ページ・コンテンツの再レンダリング」を参照してください。
actionListener: エンド・ユーザーが実行時にコマンドコンポーネントを起動したときに、実行するロジックでバッキングBeanメソッドに評価されるEL式に設定します。
手順1のコマンド・コンポーネントでactionEventが渡されたときに、起動されるバッキングBeanのロジックを記述します。
詳細は、例13-7「ポップアップを起動するバッキングBeanメソッド」、例13-8「ポップアップを取り消すバッキングBeanメソッド」または例13-9「ポップアップを非表示にするバッキングBeanメソッド」を参照してください。
実行時に、エンド・ユーザーは、サーバ側メソッドを起動するように構成したコマンド・コンポーネントを起動して、ポップアップを表示、取消しまたは非表示にできます。たとえば、図13-4は、popupコンポーネント内部でレンダリングされるpanelWindowコンポーネントを示しています。これは、2つのコマンド・ボタン(「取消」および「非表示」)を公開し、cancelおよびhideメソッドをそれぞれ起動します。エンド・ユーザーは、基礎となるページでtableコンポーネントのSupplier Name列にレンダリングされるcommandLinkコンポーネントを起動して、ポップアップを表示します。
ADF Facesリッチ・クライアントのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。showPopupBehaviorクライアントの動作タグには、宣言的ソリューションが用意されているため、ポップアップを開いたり、スクリプトをコンポーネントに登録するためのJavaScriptを記述する必要はありません。クライアントの動作タグの詳細は、5.6項「クライアントの動作タグの使用」を参照してください。
showPopupBehaviorタグでは、コマンド・コンポーネントのactionEventやshowDetailコンポーネントのdisclosureEventなど、指定したイベントをリスニングします。ただし、showPopupBehaviorタグでは、そのイベントをサーバーに配信する処理も取り消します。したがって、showPopupBehaviorタグがリスニングしているイベントに基づいて、一部のサーバ側ロジックを起動する必要がある場合は、JavaScriptを使用してポップアップを起動するか、5.4項「クライアントからサーバーへのカスタム・イベントの送信」の説明に従ってカスタム・イベントを使用する必要があります。
showPopupBehaviorタグと、ポップアップ要素を起動するコンポーネント(ダイアログを起動するcommandButtonコンポーネントや、右クリックしたときにポップアップ・メニューを起動するinputTextコンポーネントなど)を組み合せて使用します。
開始する前に:
ポップアップ・コンポーネントとそのホルダを作成します。
ポップアップを起動するコンポーネントを作成します。
showPopupBehaviorタグを使用する手順:
コンポーネント・パレットの「操作」パネルから、「ポップアップ表示動作」を、ポップアップ要素の起動に使用されるコンポーネントの子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、PopupId属性のドロップダウン・メニューを使用して、「編集」を選択します。「プロパティの編集: PopuId」ダイアログを使用して、起動するポップアップ・コンポーネントを選択します。
「トリガー・タイプ」ドロップダウン・メニューから、ポップアップを起動するトリガーを選択します。デフォルトはactionで、コマンド・コンポーネントに使用できます。右クリックしたときにポップアップをトリガーするには、contextMenuを使用します。カーソルをコンポーネントの上に置いたときにポップアップをトリガーするには、mouseHoverを使用します。カーソルをコンポーネントから離すと、ポップアップは閉じます。ポップアップをトリガーできるコンポーネントおよびマウス/キーボード・イベントの詳細なリストは、showPopupBehaviorタグのドキュメントを参照してください。
|
注意:
|
AlignIdドロップダウンから、「編集」を選択し、「プロパティの編集: AlignId」ダイアログを使用して、ポップアップの位置合せに使用するコンポーネントを選択します。
「位置」ドロップダウン・メニューから、前述の手順で選択したコンポーネントに対するポップアップの相対的な位置を選択します。
|
注意:
また、 |
例13-10に、ボタン「Click me」がクリックされると、popup1というIDのaf:popupコンポーネントにテキストが表示されるサンプル・コードを示します。
例13-10 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>
例13-10のコードでは、ADF Facesによりポップアップ・コンテンツがbuttonというalignId値で識別されるcommandButtonと位置合せされ、図13-5に示すように、ポップアップ要素がafterEndの位置合せを使用してボタンの下に配置されます。
ページのタスクを完了するのに、ユーザーが詳しい情報を必要としていると考えられるケースがありますが、ページにアクセスするたびに、不必要な情報や、ダイアログを起動して情報を表示する複数のボタンでページを乱雑にしたくなとも考えています。コンポーネントを右クリックして起動したポップアップ要素に情報を配置できますが、その情報をポップアップで利用できるかを知る方法はありません。
contextInfoコンポーネントを使用すると、ポップアップ要素に追加情報を表示し、その追加情報が利用可能であることをユーザーに通知します。contextInfoコンポーネントを、コンテキスト情報をサポートするコンポーネントのコンテキスト・ファセットに配置すると、図13-6に示すように、オレンジ色の小さい正方形がコンポーネントの左上隅に表示されます。
ユーザーがカーソルを正方形の上に置くと、図13-7に示すように、ノート・アイコンとツールチップが付いた大きい三角形が表示され、追加情報が利用可能であることが示されます。
showPopupBehaviorタグはcontextInfoコンポーネントの子のため、図13-8に示すように、ユーザーが情報アイコンをクリックすると、参照されているポップアップが表示されます。
showPopupBehaviorコンポーネントをcontextInfoコンポーネントの子として使用することにより、ポップアップコンポーネントと、contextInfoコンポーネントを含むコンポーネントを位置合せできます。
開始する前に:
contextInfoコンポーネントの親となるコンポーネントを作成します。次のコンポーネントは、contextInfoコンポーネントをサポートしています。
column
commandLink
inputComboboxListOfValues
inputListOfValues
inputText
outputFormatted
outputText
selectOneChoice
13.2項「ポップアップ要素の宣言的作成」の説明に従って、表示するポップアップ要素を作成します。
contextInfoコンポーネントを使用する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、追加情報のアイコンを表示するコンポーネントのContextファアセットに、「コンテキスト情報」をドラッグ・アンド・ドロップします。
|
ヒント: ファセットがビジュアル・エディタに表示されない場合は、次のようにします。
|
contextInfoコンポーネントが表示されたときに、サーバ側ロジックで実行する必要がある場合は、イベントを処理できるハンドラにcontextInfoListener属性をバインドします。
|
注意:
|
コンポーネント・パレットの「操作」パネルから、「ポップアップ表示動作」をcontextInfoコンポーネントの子としてドラッグ・アンド・ドロップします。
showPopupBehaviorタグをエディタで選択し、13.4.1項「af:showPopupBehaviorタグの使用方法」の説明に従って、プロパティ・インスペクタで属性を設定します。triggerType値の場合は、contextInfoを入力します。
af:popupコンポーネントと他のいくつかのコンポーネントを使用すると、インライン・ポップアップを作成できます。つまり、インライン・ウィンドウ、ダイアログおよびポップアップ・メニューです。その他のコンポーネントには次のものがあります。
インライン・ダイアログを作成するためのダイアログ・コンポーネント
詳細は、13.2.1項「ダイアログの作成方法」を参照してください。
インライン・ウィンドウを作成するためのpanelWindowコンポーネント
詳細は、13.2.2項「パネル・ウィンドウの作成方法」を参照してください。
ポップアップ・メニューを作成するためのメニュー・コンポーネント
詳細は、13.2.3項「ポップアップ・メニューの作成方法」を参照してください。
ノート・ウィンドウを作成するためのnoteWindowコンポーネント
詳細は、13.2.4項「ノート・ウィンドウの作成方法」を参照してください。
デフォルトでは、インライン・ポップアップを定義するメタデータが置き換えられると、Fusion Webアプリケーションによってインライン・ポップアップが自動的に取り消されます。これが発生するシナリオは次のとおりです。
partialSubmitプロパティがfalseに設定されているコマンド・コンポーネントの起動。このようなコマンド・コンポーネントが起動されると、Fusion Webアプリケーションによってページ全体がレンダリングされます。、これに対し、partialSubmitプロパティがtrueに設定されているコマンド・コンポーネントでは、Fusion Webアプリケーションによって一部のコンテンツがレンダリングされます。ページのレンダリングの詳細は、第7章「部分ページ・コンテンツの再レンダリング」を参照してください。
エンド・ユーザーがコンテンツの表示と非表示を切り替えるためのアイコンをレンダリングするコンポーネントは、popupコンポーネントをホストします。例として、showDetailItemおよびpanelTabbedコンポーネントなどがあります。切替えアイコンをレンダリングするコンポーネントの使用の詳細は、8.9項「コンテンツの動的な表示および非表示」を参照してください。
Fusion Webアプリケーションでインライン・ポップアップが表示されると、フェイルオーバーが発生します。フェイルオーバー時には、Fusion Webアプリケーションによってページ全体が置き換えられます。
インライン・ポップアップ・コンポーネントの自動取消しを無効にすることで、前述のリストに記載されているデフォルトの動作を変更できます。つまり、Fusion Webアプリケーションでは、前述のイベントが発生した場合に、インライン・ポップアップを自動的に取り消しません。かわりに、Fusion Webアプリケーションではインライン・ポップアップをリストアします。
インライン・ポップアップの自動取消しは、popupコンポーネントのautoCancelプロパティをdisabledに設定して無効にします。
開始する前に:
他のコンポーネントが機能に与える影響について理解しておくと役立ちます。詳細は、13.6項「インライン・ポップアップの自動取消しの制御」を参照してください。
インライン・ポップアップの自動取消しを制御する手順:
構造ウィンドウで、自動取消し動作を構成するaf:popupコンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「その他」セクションを開き、autoCancelプロパティのドロップダウン・メニューを使用して、disabledを選択します。
JDeveloperでは、例13-11に示すように、af:popupコンポーネントのautoCancelプロパティの値をdisabledに設定します。
実行時、コマンドを起動してページを再レンダリングする前に、インライン・ポップアップが表示されると、ページのレンダリング後に、Fusion Webアプリケーションによってインライン・ポップアップがリストアされます。
