Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
![]() 前 |
![]() 次 |
この章では、ADF Facesコンポーネントに用意されている部分ページ・レンダリング機能を使用して、ページ全体ではなく、ページの一部をレンダリングする方法について説明します。
この章では、次の項目について説明します。
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-1に示すように、File Explorerアプリケーションには「検索」パネルに検索結果を表示する表が含まれています。検索ボタンを使用すると、この表(この表のみ)が再レンダリングされます。検索ボタンがトリガーとして構成され、表がターゲットとして構成されています。
注意: トリガー・コンポーネントに関連付けられているすべてのイベントではなく、特定のイベントが発生したときのみ、コンポーネントを再レンダリングする場合や、コンポーネントを再レンダリングするかどうかを決定するロジックが必要な場合があります。この場合、プログラムで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リクエストが起動されます。
ヒント: 入力コンポーネントの |
PPRがトリガーされると、ターゲットとして構成されているコンポーネントが再レンダリングされます。コンポーネントは、partialTriggers
属性をトリガー・コンポーネントの相対IDに設定することで、ターゲットとして構成します。相対IDの詳細は、4.5項「ページでのクライアント・コンポーネントの検索」を参照してください。
たとえば、inputText
コンポーネントに対する変更を受けてoutputText
を更新するには、partialTriggers
属性をinputText
コンポーネントの相対IDに設定します。
注意:
|
注意: トリガー・コンポーネントが |
別のコンポーネントで発生したイベントに基づいてコンポーネントを再レンダリングするには、どのコンポーネントがトリガーかを宣言する必要があります。
始める前に:
宣言的な部分ページ・レンダリングに関する知識が役立つ場合があります。詳細は、8.2項「部分ページ・レンダリングの宣言的有効化」を参照してください。
コンポーネントで別のコンポーネントを再レンダリングする手順:
構造ウィンドウで、トリガー・コンポーネント(そのアクションによってPPRが起こるコンポーネント)を選択します。
プロパティ・インスペクタの「共通」セクションを開き、id
属性を設定します(まだ設定されていない場合)。値はそのコンポーネントのネーミング・コンテナ内で一意である必要があります。コンポーネントがネーミング・コンテナ内に含まれていない場合、IDはページで一意である必要があります。ネーミング・コンテナの詳細は、4.5項「ページでのクライアント・コンポーネントの検索」を参照してください。
ヒント: JDeveloperは、コンポーネントIDを自動的に割り当てます。この値を安全に変更できます。コンポーネントのIDは、有効なXML名であることが必要です。つまり、名前の先頭に数字を使用したり、IDにスペースを使用することはできません。JSFではIDでのコロン(:)も禁止されています。 |
トリガー・コンポーネントがコマンド・コンポーネントの場合、プロパティ・インスペクタで「動作」セクションを開き、partialSubmit
属性をtrue
に設定します。
トリガー・コンポーネントがフォーム内の入力または選択コンポーネントで、値を送信する場合、プロパティ・インスペクタで「動作」セクションを開き、コンポーネントのautoSubmit
属性をtrue
に設定します。
注意: コンポーネントで値を送信する場合のみ、 |
構造ウィンドウで、PPRのトリガー元イベントが発生したときに再レンダリングするターゲット・コンポーネントを選択します。
プロパティ・インスペクタで「動作」セクションを開き、partialTriggers
属性のドロップダウン・メニューをクリックして「編集」を選択します。
「属性の編集」ダイアログで、トリガー・コンポーネントを選択済パネルに移動し、「OK」をクリックします。トリガー・コンポーネントがネーミング・コンテナ内にある場合、JDeveloperで相対パスが自動的に作成されます。
ヒント:
|
例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...}"/>
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が実行されます。
多くのイベントが関連付けられている表などのコンポーネントでは、イベントがトリガーされるとPPRが発生し、そのたびに表を部分トリガーとするコンポーネントが再レンダリングされます。ターゲットが特定のイベントでのみ再レンダリングされるようにする場合、またはターゲットが別のロジックに基づいて再レンダリングされるようにする場合、部分ページ・レンダリングをプログラムから有効にします。
部分ページ・レンダリングを有効にするにはaddPartialTarget
メソッドを使用します。
始める前に:
プログラムによる部分ページ・レンダリングに関する知識が役立つ場合があります。詳細は、8.3項「部分ページ・レンダリングのプログラムによる有効化」を参照してください。
PPRをプログラムによって有効にする手順:
ターゲット・コンポーネントがレンダリングされる原因となるイベントのリスナー・メソッドを作成します。
addPartialTarget()
メソッドを使用して、イベントがトリガーされると部分ターゲット・コンポーネントが再レンダリングされるよう、そのイベントの部分ターゲットとしてコンポーネントを追加します(そのIDを使用)。このメソッドを使用して、再レンダリングするコンポーネントと再レンダリングをトリガーするイベントを関連付けます。
たとえば、File ExplorerアプリケーションにはNavigatorManager.refresh()
メソッドが含まれています。起動されると、ナビゲータ・アコーディオンが再レンダリングされます。
JSFページで、ターゲット・コンポーネントを選択します。プロパティ・インスペクタで、コンポーネントIDを入力し、ClientComponentをtrueに設定します。
注意:
|
プロパティ・インスペクタで、リフレッシュおよび手順1で作成したリスナー・メソッドへのバインドの原因となるイベントのリスナーを探します。
従来のページ全体の遷移のかわりに、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 他のブラウザの場合、これらのコンポーネントの |
部分ページ・ナビゲーションは、web.xml
ファイルのoracle.adf.view.rich.pprNavigation.OPTIONS
コンテキスト・パラメータをon
に設定することで有効にできます。
始める前に:
部分ページ・ナビゲーションに関する知識が役立つ場合があります。詳細は、8.4項「部分ページ・ナビゲーションの使用」を参照してください。
部分ページ・ナビゲーションを使用する手順:
web.xml
ファイルをダブルクリックします。
ソース・エディタで、oracle.adf.view.rich.pprNavigation.OPTIONS
パラメータを次のいずれかに変更します。
on
: 部分ページ・ナビゲーションを有効にします。
注意: パラメータを |
onWithForcePPR
: 部分ページ・ナビゲーションを有効にし、すべてのアクション・イベント(ナビゲーションが行われないアクション・イベントも含む)でPPRチャネルを使用するためのフレームワークを通知します。部分ページ・ナビゲーションでは、PPRチャネルを介してアクション・イベントを送信する必要があるため、このオプションを使用して部分ページ・ナビゲーションを簡単に有効化できます。
部分ページ・ナビゲーションを使用している場合、通常はページのビジュアル・コンテンツのみ再レンダリングされます(ヘッダー・コンテンツはすべてのページで一定のままです)。ただし、ページのアクションがフル・ページ送信を使用するように定義されている場合、およびアクションでナビゲーションが行われない場合も、ドキュメント全体が再レンダリングされます。
PPRナビゲーションを使用する前に、次の点に注意します。
PPRナビゲーションを使用する場合、このナビゲーションに関連するすべてのページで同じCSSスキンを使用する必要があります。
PPRナビゲーションでURLのハッシュ部分が使用されるため、ナビゲーションでのページ内のアンカーにハッシュ部分を使用できません。
resource
タグを使用して、現在のページに固有のJavaScriptおよびCSSコンテンツを含める必要があります。
標準のページ・ナビゲーションとは異なり、部分ナビゲーションではJavaScriptグローバル(グローバル・スコープに定義されている変数および関数)はアンロードされません。これが発生するのは、ウィンドウ・オブジェクトが部分ページの遷移でも残るためです。ページ固有のグローバル変数および関数を使用するアプリケーションでは、AdfPage.getPageProperty()
メソッドおよびAdfPage.setPageProperty()
メソッドを使用して、それらのオブジェクトを格納する必要があります。