| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
 戻る |
 次へ |
| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
戻る |
次へ |
この章では、ADF Facesコンポーネントに用意されている部分ページ・リフレッシュ機能を使用して、ページ全体ではなく、ページの一部をリフレッシュする方法について説明します。
この章に含まれる項は次のとおりです。
Asynchronous JavaScript and XML（AJAX）は、対話型のWebアプリケーションを作成するWeb開発手法です。Webページ全体をリフレッシュするかわりに、サーバーとの間で内部的に少量のデータを交換し、Webページの応答性を向上させます。効用は、Webページの対話性、速度およびユーザビリティが向上することです。
ADF Facesでは、AJAXの部分ページ・リフレッシュ動作を実現する機能は、部分ページ・レンダリング（PPR）と呼ばれます。PPRでは、ページの特定のコンポーネントのみが再レンダリングされ、ページ全体をリフレッシュする必要がありません。たとえば、出力コンポーネントでは、ユーザーの入力コンポーネントでの選択または入力を表示できます。コマンド・リンクまたはボタンでは、ページ全体のリフレッシュではなく、ページの別のコンポーネントを再レンダリングできます。
PPRが機能するには、その中のコンポーネントでのみライフサイクルが実行される境界をページで設定する必要があります。境界を判断するために、処理するコンポーネントのルートをフレームワークに通知する必要があります。ルート・コンポーネントは、次の2つの方法で識別されます。
イベント: 特定のイベントはルートであるコンポーネントを示します。たとえば、showDetailコンポーネントを展開または縮小する（8.8項「コンテンツの動的な表示および非表示」を参照）と送信される表示イベントは、showDetailコンポーネントがルートであることを示します。したがって、showDetailコンポーネントを展開または縮小すると、このコンポーネントでのみライフサイクルが実行されます。これは、表示イベントを使用して、ツリーのノードの展開時にPPRを行う場合、またはソート・イベントで表のソート時にPPRを行う場合も同様です。
コンポーネント: ポップアップ・ダイアログは、フレームワークで境界が認識されるコンポーネントの1つの例です。ダイアログ内でトリガーされたイベントに関係なく、ダイアログ外のコンポーネントでライフサイクルは実行されません。ポップアップでのみ実行されます。
ビルトインPPR機能以外に、クロスコンポーネント・レンダリングを使用するようコンポーネントを構成できます。この機能では、あるコンポーネントがトリガーとして機能し、別のコンポーネントがリスナーとして機能するよう依存性を設定できます。トリガー・コンポーネントでイベントが発生すると、リスナー・コンポーネントとリスナーの子コンポーネントでのみライフサイクルが実行され、リスナー・コンポーネントと子のみが再レンダリングされます。クロスコンポーネント・レンダリングは、JDeveloperで宣言的に実装できます。ただし、デフォルトでは、トリガー・コンポーネントからのすべてのイベントでPPRが行われます（表など、一部のイベントで部分ターゲットがトリガーされるコンポーネントもあります）。PPRを起動するイベントを厳密に制御する必要がある場合、またはターゲットを決めるロジックを使用する場合は、プログラムでPPRを実装できます。
|
ヒント: アプリケーションでFusionテクノロジ・スタックを使用する場合、任意のページで自動部分ページ・レンダリング機能を有効にできます。これによって、バックエンド・ビジネス・ロジックの結果として値が変更されるコンポーネントが自動的に再レンダリングされます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の自動部分ページ・レンダリングに関する項を参照してください。 |
また、ADF FacesアプリケーションでPPRナビゲーションを使用できます。標準JSFアプリケーションでは、あるページから次のページへナビゲートすると、新しいページをレンダリングする必要があります。AJAX式のコンポーネントを使用している場合、異なるJavaScriptライブラリとスタイルシートのダウンロードに時間がかかるため、これによってオーバーヘッドが生じる可能性があります。このオーバーヘッドを避けるため、ADF Facesアーキテクチャで必要に応じてページ全体の遷移をシミュレートできます。実際は1つのページにいるため、JavaScriptコードとスキン・スタイルを再ロードする必要がありません。
|
注意: PPRが機能するには、ブラウザでJavaScriptが有効になっている必要があります。 |
最も単純なクロスコンポーネント・レンダリングを使用した場合、トリガー・コンポーネントと呼ばれるコンポーネントでイベントが発生すると、ターゲット・コンポーネントと呼ばれるコンポーネントが再レンダリングされます。
たとえば、図7-1に示すように、File Explorerアプリケーションには「検索」パネルに検索結果を表示する表が含まれています。検索ボタンを使用すると、この表（この表のみ）が再レンダリングされます。検索ボタンがトリガーとして構成され、表がターゲットとして構成されています。
|
注意: トリガー・コンポーネントに関連付けられているすべてのイベントではなく、特定のイベントが発生したときのみ、コンポーネントを再レンダリングする場合や、コンポーネントを再レンダリングするかどうかを決定するロジックが必要な場合があります。この場合、プログラムでPPRを有効にします。詳細は、7.3項「部分ページ・レンダリングのプログラムによる有効化」を参照してください。 |
トリガー・コンポーネントで、PPRリクエストが発生したことをフレームワークに通知する必要があります。コマンド・コンポーネントでは、partialSubmit属性をtrueに設定することでこれを行えます。これを行うと、コマンド・コンポーネントがクリックされるたびに部分ページ・リクエストが発生します。
たとえば、ページにinputTextコンポーネント、commandButtonコンポーネントおよびoutputTextコンポーネントが含まれるとします。ユーザーがinputTextコンポーネントに値を入力してcommandButtonコンポーネントをクリックすると、入力値がoutputTextコンポーネントに反映されます。commandButtonコンポーネントのpartialSubmit属性をtrueに設定します。
ただし、コマンド・コンポーネント以外のコンポーネントでPPRをトリガーできます。ADF Facesの入力コンポーネントと選択コンポーネントには、値が変更されると部分ページ・リクエストを自動的にトリガーする機能があります。この機能を使用するには、入力または選択コンポーネントのautoSubmit属性を使用して、値が入力されて送信されると、valueChangeEventイベントが発生するようにします。ターゲット・コンポーネントが設定されているかぎり、フレームワークにPPRを実行するよう通知するのはこのイベントです。前述の例で、commandButtonコンポーネントを削除し、かわりにinputTextコンポーネントのautoSubmit属性をtrueに設定します。値が変更されるたびに、PPRリクエストが起動されます。
|
ヒント: 入力コンポーネントのautoSubmit属性とコマンド・コンポーネントのpartialSubmit属性は同じものではありません。partialSubmitがtrueに設定されている場合、partialTriggers属性に値を持つコンポーネントのみでライフサイクルが実行されます。autoSubmit属性は、入力コンポーネントと選択コンポーネントで使用され、値が変更されると自動的にフォームを送信するようフレームワークに指示します。ただし、フォームが送信され、autoSubmit属性がtrueに設定されている場合、valueChangeEventイベントが起動され、ライフサイクルはイベントのルートとされているコンポーネントとその子でのみ実行されます。詳細は、4.4項「最適化されたライフサイクルの使用」を参照してください。 |
PPRがトリガーされると、ターゲットとして構成されているコンポーネントが再レンダリングされます。コンポーネントは、partialTriggers属性をトリガー・コンポーネントの相対IDに設定することで、ターゲットとして構成します。相対IDの詳細は、3.5項「ページでのクライアント・コンポーネントの検索」を参照してください。
たとえば、inputTextコンポーネントに対する変更を受けてoutputTextを更新するには、partialTriggers属性をinputTextコンポーネントの相対IDに設定します。
|
注意: コンポーネントのイベントにはデフォルトでPPRをトリガーするものがあります。たとえば、showDetailコンポーネントのdisclosureイベントや表のsortイベントなどです。つまり、partialTriggers属性をそのコンポーネントのIDに設定してターゲットとして構成されているコンポーネントは、この種のイベントが発生すると再レンダリングされます。 |
別のコンポーネントで発生したイベントに基づいてコンポーネントを再レンダリングするには、どのコンポーネントがトリガーかを宣言する必要があります。
コンポーネントで別のコンポーネントを再レンダリングする手順:
構造ウィンドウで、トリガー・コンポーネント（そのアクションによってPPRが起こるコンポーネント）を選択します。
プロパティ・インスペクタの「共通」セクションを開き、id属性を設定します（まだ設定されていない場合）。値はそのコンポーネントのネーミング・コンテナ内で一意である必要があります。コンポーネントがネーミング・コンテナ内に含まれていない場合、IDはページで一意である必要があります。ネーミング・コンテナの詳細は、3.5項「ページでのクライアント・コンポーネントの検索」を参照してください。
|
ヒント: JDeveloperではコンポーネントIDが自動的に割り当てられます。この値は安全に変更できます。コンポーネントのIDは有効なXML名である必要があります。つまり、IDの先頭に数値や空白を使用できません。JSFでは、IDにコロン（:）も使用できません。 |
トリガー・コンポーネントがコマンド・コンポーネントの場合、プロパティ・インスペクタで「動作」セクションを開き、partialSubmit属性をtrueに設定します。
トリガー・コンポーネントがフォーム内の入力または選択コンポーネントで、値を送信する場合、プロパティ・インスペクタで「動作」セクションを開き、コンポーネントのautoSubmit属性をtrueに設定します。
|
注意: コンポーネントで値を送信する場合のみ、autoSubmit属性をtrueに設定します。値を送信しない場合、他のロジックを使用してコンポーネントでValueChangeEventイベントを起動する必要があります。このイベントによってデフォルトでPPRが起こり、トリガー・コンポーネントをpartialTriggers属性の値として持つコンポーネントが再レンダリングされます。 |
構造ウィンドウで、PPRのトリガー元イベントが発生したときに再レンダリングするターゲット・コンポーネントを選択します。
プロパティ・インスペクタで「動作」セクションを開き、partialTriggers属性のドロップダウン・メニューをクリックして「編集」を選択します。
「属性の編集」ダイアログで、トリガー・コンポーネントを選択済パネルに移動し、「OK」をクリックします。トリガー・コンポーネントがネーミング・コンテナ内にある場合、JDeveloperで相対パスが自動的に作成されます。
例7-1に、PPRを実行するよう構成されたcommandLinkコンポーネントを示します。
例7-1 部分送信を使用して部分ページ・レンダリングを有効にするコード
<af:commandLink id="deleteFromCart" partialSubmit="true" actionListener="#{homeBean...}">
例7-2に、例7-1のIDがdeleteFromCartのコマンド・リンクがクリックされると再レンダリングされるoutputTextコンポーネントを示します。
例7-2 他のコンポーネントによってトリガーされる部分リフレッシュのコード
<af:outputText id="estimatedTotalInPopup"
partialTriggers="deleteFromCart"
value="#{shoppingCartBean...}"/>
ADF Facesアプリケーションでは、一部のコンポーネントで（暗黙的に、あるいは部分トリガーをリスニングするよう構成されていて）PPRが使用されるため、ユーザーがブラウザの戻るボタンをクリックしたときの動作は、単にJSFコンポーネントを使用するアプリケーションとは多少異なります。
通常、ユーザーがブラウザの戻るボタンをクリックすると、最後にレンダリングされたときのDocument Object Model（DOM）の状態にページがブラウザによって戻されます。しかし、JavaScriptの状態は、ユーザーが最初にページにアクセスしたときの状態です。
たとえば、ユーザーがPageAにアクセスするとします。ページのコンポーネントとの対話後、JavaScriptを使用してPPRイベントが発生します。新たなバージョンのこのページをPageA1とします。ユーザーがPageBに移動し、ブラウザの戻るボタンを使用してPageAに戻ります。ユーザーにPageA1のDOMが表示されますが、JavaScriptは実行されていません。このため、ページの一部はPageAのままです。つまり、ページに対する変更が失われています。ページをリフレッシュすると、JavaScriptが実行されてPageA1の状態に戻りますが、ADF Facesフレームワークで、リフレッシュが必要ないようなビルトイン・サポートが提供されます。
多くのイベントが関連付けられている表などのコンポーネントでは、イベントがトリガーされるとPPRが発生し、そのたびに表を部分トリガーとするコンポーネントが再レンダリングされます。ターゲットが特定のイベントでのみ再レンダリングされるようにする場合、またはターゲットが別のロジックに基づいて再レンダリングされるようにする場合、部分ページ・レンダリングをプログラムから有効にします。
PPRをプログラムによって有効にする手順:
JSFページで、ターゲット・コンポーネントを選択します。プロパティ・インスペクタで、コンポーネントIDを入力し、clientComponent属性をtrueに設定します。
|
注意: clientComponent属性をtrueに設定して、クライアントIDが生成されるようにします。 |
addPartialTarget()メソッドを使用して、イベントがトリガーされると部分ターゲット・コンポーネントが再レンダリングされるよう、そのイベントの部分ターゲットとしてコンポーネントを追加します（そのIDを使用）。このメソッドを使用して、再レンダリングするコンポーネントと再レンダリングをトリガーするイベントを関連付けます。
たとえば、File ExplorerアプリケーションにはNavigatorManager.refresh()メソッドが含まれています。起動されると、ナビゲータ・アコーディオンが再レンダリングされます。
例7-3 部分ターゲットを使用した再レンダリング
public void refresh()
{
for (BaseNavigatorView nav: getNavigators())
{
nav.refresh();
}
AdfFacesContext adfFacesContext = AdfFacesContext.getCurrentInstance();
adfFacesContext.addPartialTarget(_navigatorAccordion);
}
コンポーネントでの1つのイベントのみに基づいて再レンダリングが起こるようにする場合、そのイベントのリスナーでaddPartialTrigger()メソッドを実装します。
従来のページ全体の遷移のかわりに、部分ページ・レンダリング・リクエストを使用してナビゲーションがトリガーされるように、ADF Facesアプリケーションを構成できます。新しいページは、部分ページ・レンダリングを使用してクライアントに送信されます。部分ページ・ナビゲーションは、デフォルトでは無効になっています。
位置を把握しておく（ブックマーク用、リフレッシュが行われたとき用など）ために、フレームワークでURLのハッシュ部分を使用します。URLのこの部分には、ブラウザに表示される実際のページが含まれます。
部分ページ・ナビゲーションは、web.xmlファイルのoracle.adf.view.rich.pprNavigation.OPTIONSコンテキスト・パラメータをonに設定することで有効にできます。
部分ページ・ナビゲーションを使用する手順:
web.xmlファイルをダブルクリックして、コード・エディタ内で開きます。
oracle.adf.view.rich.prNavigation.OPTIONSパラメータを次のいずれかに変更します。
on: 部分ページ・ナビゲーションを有効にします。
|
注意: パラメータを有効にする場合、ナビゲーションに含まれるコマンド・コンポーネントのpartialSubmit属性をtrueに設定する必要があります。 |
onWithForcePPR: 部分ページ・ナビゲーションを有効にし、すべてのアクション・イベント（ナビゲーションが行われないアクション・イベントも含む）でPPRチャネルを使用するためのフレームワークを通知します。部分ページ・ナビゲーションでは、PPRチャネルを介してアクション・イベントを送信する必要があるため、このオプションを使用して部分ページ・ナビゲーションを簡単に有効化できます。
部分ページ・ナビゲーションを使用している場合、通常はページのビジュアル・コンテンツのみ再レンダリングされます（ヘッダー・コンテンツはすべてのページで一定のままです）。ただし、ページのアクションがフル・ページ送信を使用するように定義されている場合、およびアクションでナビゲーションが行われない場合も、ドキュメント全体が再レンダリングされます。
PPRナビゲーションを使用する前に、次の点に注意します。
PPRナビゲーションを使用する場合、このナビゲーションに関連するすべてのページで同じCSSスキンを使用する必要があります。
PPRナビゲーションでURLのハッシュ部分が使用されるため、ナビゲーションでのページ内のアンカーにハッシュ部分を使用できません。
標準のページ・ナビゲーションとは異なり、部分ナビゲーションではJavaScriptグローバル（グローバル・スコープに定義されている変数および関数）はアンロードされません。これが発生するのは、ウィンドウ・オブジェクトが部分ページの遷移でも残るためです。ページ固有のグローバル変数および関数を使用するアプリケーションでは、AdfPage.getPageProperty()メソッドおよびAdfPage.setPageProperty()メソッドを使用して、それらのオブジェクトを格納する必要があります。
