8 部分ページ・コンテンツの再レンダリング

この章では、ADF Facesコンポーネントに用意されている部分ページ・レンダリング機能を使用して、ページ全体ではなく、ページの一部をレンダリングする方法について説明します。

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

• 8.1項「部分ページ・レンダリングについて」

• 8.2項「部分ページ・レンダリングの宣言的有効化」

• 8.3項「部分ページ・レンダリングのプログラムによる有効化」

• 8.4項「部分ページ・ナビゲーションの使用」

8.1 部分ページ・レンダリングについて

Ajax(非同期のJavaScriptおよびXML)は、対話型Webアプリケーションを作成するためのWeb開発手法であり、Ajaxを使用したアプリケーションでは、Webページ全体を再レンダリングせずに少量のデータを内部的にサーバーと交換するため、Webページのレスポンスが向上します。その結果、Webページの対話性、速度および使い勝手が向上します。

ADF Facesでは、Ajaxの部分ページ・レンダリング動作を実現する機能を部分ページ・レンダリング(PPR)と呼びます。PPRを使用すると、ページ全体を再レンダリングせずにページ上の特定のコンポーネントをレンダリングできます。たとえば、出力コンポーネントでは、ユーザーが入力コンポーネントで選択または入力した内容を表示でき、コマンド・リンクまたはボタンにより、ページ全体を再レンダリングせずにページ上の別のコンポーネントがレンダリングされるようにできます。

PPRが機能するには、その中のコンポーネントでのみライフサイクルが実行される境界をページで設定する必要があります。境界を判断するために、処理するコンポーネントのルートをフレームワークに通知する必要があります。ルート・コンポーネントは、次の2つの方法で識別されます。

• イベント: 特定のイベントはルートであるコンポーネントを示します。たとえば、showDetailコンポーネントを展開または縮小する(9.9項「コンテンツの動的な表示および非表示」を参照)と送信される表示イベントは、showDetailコンポーネントがルートであることを示します。showDetailコンポーネントが展開または縮小されると、そのコンポーネントでのみライフサイクルが実行されます。ルート・コンポーネントを識別するその他のイベントの例は、ツリーのノードの展開時の表示イベント、または表でのソート・イベントです。対応するイベント・ルート・コンポーネントを持つイベントの完全なリストは、6.1.1項「イベントおよび部分ページ・レンダリング」の表6-1を参照してください。

• コンポーネント: 特定のコンポーネントは境界として認識されるため、ルート・コンポーネントです。たとえば、フレームワークはポップアップ・ダイアログが境界であることを認識します。ダイアログ内でトリガーされたイベントに関係なく、ダイアログ外のコンポーネントでライフサイクルは実行されません。ポップアップでのみ実行されます。

組込みのPPR機能に加えて、1つのコンポーネントがトリガーとして機能し、別のコンポーネントがリスナーとして機能するように依存関係を設定できるクロスコンポーネント・レンダリングを使用するように、コンポーネントを構成できます。トリガー・コンポーネントでイベントが発生すると、ライフサイクルはリスナー・コンポーネントおよびリスナーの子コンポーネントでのみ実行され、リスナー・コンポーネントとその子のみがレンダリングされます。クロスコンポーネント・レンダリングは、宣言的に実装できます。ただし、デフォルトでは、トリガー・コンポーネントからのすべてのイベントはPPRの原因になります(表などの一部のコンポーネントでは、イベントのサブセットでのみ部分ターゲットをトリガーします)。PPRを起動するイベントを厳密に制御する必要がある場合、またはなんらかのロジックを使用してターゲットを判別する場合は、PPRをプログラムで実装できます。

ヒント: アプリケーションでFusionテクノロジ・スタックを使用する場合、任意のページで自動部分ページ・レンダリング機能を有効にできます。これによって、バックエンド・ビジネス・ロジックの結果として値が変更されるコンポーネントが自動的に再レンダリングされます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の自動部分ページ・レンダリングおよびイテレータ・バインディングに関する項を参照してください。

また、ADF FacesアプリケーションはナビゲーションにPPRを使用できます。標準JSFアプリケーションでは、あるページから次のページへのナビゲーションには新しいページのレンダリングが必要です。Ajaxのようなコンポーネントを使用する場合、様々なJavaScriptライブラリおよびスタイル・シートのダウンロードに必要な時間により、これがオーバーヘッドの原因になることがあります。このコストの高いオーバーヘッドを回避するために、ADF Facesアーキテクチャは、実際には単一ページに残ったままオプションで完全ページ遷移をシミュレートすることで、JavaScriptコードおよびスキン・スタイルの再ロードの必要性を回避できます。

注意: PPRが機能するためには、ブラウザでJavaScriptが有効になっている必要があります。

8.2 部分ページ・レンダリングの宣言的有効化

最も単純なクロスコンポーネント・レンダリングを使用した場合、トリガー・コンポーネントと呼ばれるコンポーネントでイベントが発生すると、ターゲット・コンポーネントと呼ばれるコンポーネントが再レンダリングされます。

たとえば、図8-1に示すように、File Explorerアプリケーションには「検索」パネルに検索結果を表示する表が含まれています。検索ボタンを使用すると、この表(この表のみ)が再レンダリングされます。検索ボタンがトリガーとして構成され、表がターゲットとして構成されています。

図8-1 検索ボタンで再レンダリングされる表

注意: トリガー・コンポーネントに関連付けられているすべてのイベントではなく、特定のイベントが発生したときのみ、コンポーネントを再レンダリングする場合や、コンポーネントを再レンダリングするかどうかを決定するロジックが必要な場合があります。この場合、プログラムでPPRを有効にします。詳細は、8.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イベントが起動され、ライフサイクルはイベントのルートとされているコンポーネントとその子でのみ実行されます。詳細は、5.3項「最適化されたライフサイクルの使用」を参照してください。

PPRがトリガーされると、ターゲットとして構成されているコンポーネントが再レンダリングされます。コンポーネントは、partialTriggers属性をトリガー・コンポーネントの相対IDに設定することで、ターゲットとして構成します。相対IDの詳細は、4.5項「ページでのクライアント・コンポーネントの検索」を参照してください。

たとえば、inputTextコンポーネントに対する変更を受けてoutputTextを更新するには、partialTriggers属性をinputTextコンポーネントの相対IDに設定します。

注意: showDetailコンポーネントのdisclosureイベントや表のsortイベントなど、コンポーネントの特定のイベントはデフォルトでPPRをトリガーします。これは、partialTriggers属性をそのコンポーネントのIDに設定することでターゲットに対して構成された任意のコンポーネントが、これらのタイプのイベントの発生時に再レンダリングすることを意味します。

注意: トリガー・コンポーネントがinputLovまたはinputComboBoxLovで、ターゲット・コンポーネントがrequiredに設定された入力コンポーネントの場合は、LOVポップアップが表示されるときに入力コンポーネントに対して検証エラーがスローされます。これを回避するには、プログラムによる部分ページ・レンダリングを使用する必要があります。詳細は、8.3項「部分ページ・レンダリングのプログラムによる有効化」を参照してください。

8.2.1 部分ページ・レンダリングを有効にする方法

別のコンポーネントで発生したイベントに基づいてコンポーネントを再レンダリングするには、どのコンポーネントがトリガーかを宣言する必要があります。

始める前に:

宣言的な部分ページ・レンダリングに関する知識が役立つ場合があります。詳細は、8.2項「部分ページ・レンダリングの宣言的有効化」を参照してください。

コンポーネントで別のコンポーネントを再レンダリングする手順:

1. 構造ウィンドウで、トリガー・コンポーネント(そのアクションによってPPRが起こるコンポーネント)を選択します。

   • プロパティ・インスペクタの「共通」セクションを開き、id属性を設定します(まだ設定されていない場合)。値はそのコンポーネントのネーミング・コンテナ内で一意である必要があります。コンポーネントがネーミング・コンテナ内に含まれていない場合、IDはページで一意である必要があります。ネーミング・コンテナの詳細は、4.5項「ページでのクライアント・コンポーネントの検索」を参照してください。

     
     

     ヒント: JDeveloperは、コンポーネントIDを自動的に割り当てます。この値を安全に変更できます。コンポーネントのIDは、有効なXML名であることが必要です。つまり、名前の先頭に数字を使用したり、IDにスペースを使用することはできません。JSFではIDでのコロン(:)も禁止されています。

     
     

   • トリガー・コンポーネントがコマンド・コンポーネントの場合、プロパティ・インスペクタで「動作」セクションを開き、partialSubmit属性をtrueに設定します。

   • トリガー・コンポーネントがフォーム内の入力または選択コンポーネントで、値を送信する場合、プロパティ・インスペクタで「動作」セクションを開き、コンポーネントのautoSubmit属性をtrueに設定します。

     
     

     注意: コンポーネントで値を送信する場合のみ、autoSubmit属性をtrueに設定します。値を送信しない場合、他のロジックを使用してコンポーネントでValueChangeEventイベントを起動する必要があります。このイベントによってデフォルトでPPRが起こり、トリガー・コンポーネントをpartialTriggers属性の値として持つコンポーネントが再レンダリングされます。

     
     

2. 構造ウィンドウで、PPRのトリガー元イベントが発生したときに再レンダリングするターゲット・コンポーネントを選択します。

3. プロパティ・インスペクタで「動作」セクションを開き、partialTriggers属性のドロップダウン・メニューをクリックして「編集」を選択します。

4. 「属性の編集」ダイアログで、トリガー・コンポーネントを選択済パネルに移動し、「OK」をクリックします。トリガー・コンポーネントがネーミング・コンテナ内にある場合、JDeveloperで相対パスが自動的に作成されます。

ヒント: selectBooleanRadioコンポーネントは、部分ページ・レンダリングで1つのコンポーネントのように動作しますが、実際は複数コンポーネントです。したがって、グループ内の異なるselectBooleanRadioの選択に基づいて他のコンポーネント(inputTextコンポーネントなど)を変更する場合、親コンポーネント内にまとめ、親コンポーネントのpartialTriggers属性がすべてのSelectBooleanRadioコンポーネントを指すように設定する必要があります。

例8-1に、PPRを実行するよう構成されたcommandLinkコンポーネントを示します。

例8-1 部分送信を介して部分ページ・レンダリングを有効化するためのコード

<af:commandLink id="deleteFromCart" partialSubmit="true"
                actionListener="#{homeBean...}">

例8-2に、例8-1のIDがdeleteFromCartのコマンド・リンクがクリックされると再レンダリングされるoutputTextコンポーネントを示します。

例8-2 他のコンポーネントによってトリガーされる部分ページ・レンダリングのコード

<af:outputText id="estimatedTotalInPopup"
               partialTriggers="deleteFromCart"
               value="#{shoppingCartBean...}"/>

ヒント: PPRを使用して、コンポーネントがページで検証されないようにできます。詳細は、5.3項「最適化されたライフサイクルの使用」を参照してください。

8.2.2 ブラウザの戻るボタンの使用について

ADF Facesアプリケーションでは、一部のコンポーネントで(暗黙的に、あるいは部分トリガーをリスニングするよう構成されていて)PPRが使用されるため、ユーザーがブラウザの戻るボタンをクリックしたときの動作は、単にJSFコンポーネントを使用するアプリケーションとは多少異なります。

単純なJSFコンポーネントを使用するアプリケーションでは、ユーザーがブラウザの戻るボタンをクリックすると、最後にレンダリングされたときのDocument Object Model(DOM)の状態にページがブラウザによって戻されます。しかし、JavaScriptの状態は、ユーザーが最初にページにアクセスしたときの状態です。

たとえば、ユーザーがPageAにアクセスしたとします。ユーザーがページ上のコンポーネントと対話した後で、PPRイベントがJavaScriptを使用して発生したとします。この新しいバージョンのページをPageA1と呼びます。次に、ユーザーがPageBにナビゲートし、ブラウザの戻るボタンをクリックしてPageAに戻るとします。PageA1上にはDOMがあったためユーザーにはDOMが表示されますが、JavaScriptは実行されないため、ページの一部はPageAの場合と同様になります。これは、ページに対する変更が失われることを意味する場合があります。ページをリフレッシュするとJavaScriptが実行されるため、ユーザーはPageA1を表示していたときの状態に戻ります。ADF Facesを使用するアプリケーションでは、リフレッシュは不要ですが、フレームワークは組込みサポートを提供するため、戻るボタンがクリックされるとJavaScriptが実行されます。

8.2.3 PPRとスクリーン・リーダーについて

スクリーン・リーダーでは、部分ページ・リクエストで全ページの再読上げは実行されません。PPRによって、スクリーン・リーダーは部分ページ・リクエストを起動したコンポーネントから始まるページを読み込みます。ターゲット・コンポーネントは、部分リクエストを起動するコンポーネントの後に配置する必要があります。このようにしないと、更新したターゲット・コンポーネントがスクリーン・リーダーに読み込まれません。

8.3 部分ページ・レンダリングのプログラムによる有効化

多くのイベントが関連付けられている表などのコンポーネントでは、イベントがトリガーされるとPPRが発生し、そのたびに表を部分トリガーとするコンポーネントが再レンダリングされます。ターゲットが特定のイベントでのみ再レンダリングされるようにする場合、またはターゲットが別のロジックに基づいて再レンダリングされるようにする場合、部分ページ・レンダリングをプログラムから有効にします。

8.3.1 部分ページ・レンダリングをプログラムで有効にする方法

部分ページ・レンダリングを有効にするにはaddPartialTargetメソッドを使用します。

始める前に:

プログラムによる部分ページ・レンダリングに関する知識が役立つ場合があります。詳細は、8.3項「部分ページ・レンダリングのプログラムによる有効化」を参照してください。

PPRをプログラムによって有効にする手順:

1. ターゲット・コンポーネントがレンダリングされる原因となるイベントのリスナー・メソッドを作成します。

   addPartialTarget()メソッドを使用して、イベントがトリガーされると部分ターゲット・コンポーネントが再レンダリングされるよう、そのイベントの部分ターゲットとしてコンポーネントを追加します(そのIDを使用)。このメソッドを使用して、再レンダリングするコンポーネントと再レンダリングをトリガーするイベントを関連付けます。

   たとえば、File ExplorerアプリケーションにはNavigatorManager.refresh()メソッドが含まれています。起動されると、ナビゲータ・アコーディオンが再レンダリングされます。

   例8-3 部分ターゲットを使用した再レンダリング

     public void refresh()
     {
       for (BaseNavigatorView nav: getNavigators())
       {
         nav.refresh();
       }
       
       AdfFacesContext adfFacesContext = AdfFacesContext.getCurrentInstance();
         adfFacesContext.addPartialTarget(_navigatorAccordion);
     }
   

2. JSFページで、ターゲット・コンポーネントを選択します。プロパティ・インスペクタで、コンポーネントIDを入力し、ClientComponentをtrueに設定します。

   
   

   注意: clientComponent属性をtrueに設定して、クライアントIDが生成されるようにします。

   
   

3. プロパティ・インスペクタで、リフレッシュおよび手順1で作成したリスナー・メソッドへのバインドの原因となるイベントのリスナーを探します。

8.4 部分ページ・ナビゲーションの使用

従来のページ全体の遷移のかわりに、PPRリクエストを使用してナビゲーションがトリガーされるように、ADF Facesアプリケーションを構成できます。新しいページは、PPRを使用してクライアントに送信されます。部分ページ・ナビゲーションは、デフォルトでは無効になっています。

部分ページ・ナビゲーションが使用される場合、位置を把握しておく(ブックマーク用、リフレッシュが行われたとき用など)ために、フレームワークでURLのハッシュ部分を使用します。URLのこの部分には、ブラウザに表示される実際のページが含まれます。

また、JavaScriptおよびCSSは各ページにロードされません。resourceタグを使用して、現在のページに固有のJavaScriptおよびCSSコンテンツを含める必要があります。<f:verbatim>または<trh:stylesheet>タグは機能しません。詳細は、4.3項「JavaScriptのページへの追加」を参照してください。

部分ページ・ナビゲーションがアプリケーションで有効になっている場合、getリクエストは次のADF Facesコンポーネントに対してサポートされます。

• goButton

• goLink

• goImageLink

• goMenuItem

• commandNavigationItem

注意: PPR getリクエストは、Internet Explorerでサポートされません。このブラウザを使用する場合、URLは標準の取得リクエストを使用してロードされます。 他のブラウザの場合、これらのコンポーネントのgetリクエストはアプリケーション内のページに対してのみサポートされます。

8.4.1 部分ページ・ナビゲーションの使用方法

部分ページ・ナビゲーションは、web.xmlファイルのoracle.adf.view.rich.pprNavigation.OPTIONSコンテキスト・パラメータをonに設定することで有効にできます。

始める前に:

部分ページ・ナビゲーションに関する知識が役立つ場合があります。詳細は、8.4項「部分ページ・ナビゲーションの使用」を参照してください。

部分ページ・ナビゲーションを使用する手順:

1. web.xmlファイルをダブルクリックします。

2. ソース・エディタで、oracle.adf.view.rich.pprNavigation.OPTIONSパラメータを次のいずれかに変更します。

   • on: 部分ページ・ナビゲーションを有効にします。

     
     

     注意: パラメータをonに設定する場合、ナビゲーションに含まれるコマンド・コンポーネントのpartialSubmit属性をtrueに設定する必要があります。

     
     

   • onWithForcePPR: 部分ページ・ナビゲーションを有効にし、すべてのアクション・イベント(ナビゲーションが行われないアクション・イベントも含む)でPPRチャネルを使用するためのフレームワークを通知します。部分ページ・ナビゲーションでは、PPRチャネルを介してアクション・イベントを送信する必要があるため、このオプションを使用して部分ページ・ナビゲーションを簡単に有効化できます。

     部分ページ・ナビゲーションを使用している場合、通常はページのビジュアル・コンテンツのみ再レンダリングされます(ヘッダー・コンテンツはすべてのページで一定のままです)。ただし、ページのアクションがフル・ページ送信を使用するように定義されている場合、およびアクションでナビゲーションが行われない場合も、ドキュメント全体が再レンダリングされます。

8.4.2 PPRナビゲーションについて

PPRナビゲーションを使用する前に、次の点に注意します。

• PPRナビゲーションを使用する場合、このナビゲーションに関連するすべてのページで同じCSSスキンを使用する必要があります。

• PPRナビゲーションでURLのハッシュ部分が使用されるため、ナビゲーションでのページ内のアンカーにハッシュ部分を使用できません。

• resourceタグを使用して、現在のページに固有のJavaScriptおよびCSSコンテンツを含める必要があります。

• 標準のページ・ナビゲーションとは異なり、部分ナビゲーションではJavaScriptグローバル(グローバル・スコープに定義されている変数および関数)はアンロードされません。これが発生するのは、ウィンドウ・オブジェクトが部分ページの遷移でも残るためです。ページ固有のグローバル変数および関数を使用するアプリケーションでは、AdfPage.getPageProperty()メソッドおよびAdfPage.setPageProperty()メソッドを使用して、それらのオブジェクトを格納する必要があります。