Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
前 |
次 |
この章では、commandButton
、navigationPane
およびtrain
など、ADF Facesのナビゲーション・コンポーネントを使用して、Webユーザー・インタフェースでのナビゲーションを実現する方法を説明します。
この章では、次の項目について説明します。
JSFアプリケーション同様、ADF Facesコンポーネントを使用するアプリケーションには、ボタンやリンク(またはその他のナビゲーション・コンポーネント)がクリックされた場合に、次に表示するページを選択する一連のルールがあります。ルールは、アプリケーションの構成リソース・ファイル(faces-config.xml
)にJSFナビゲーション・ルールおよびケースを追加することで定義します。
JSFでは、結果の文字列は、ページ・ナビゲーションの実行に使用するナビゲーション・ルールの選択に使用されます。javax.faces.component.ActionSource
インタフェースを実装するADF Facesのナビゲーション・コンポーネントでは、ユーザーがコンポーネントをアクティブ化するとActionEvent
イベントが生成されます。JSF NavigationHandler
およびデフォルトのActionListener
メカニズムでは、アクティブ化されたコンポーネントの結果文字列を使用して、一連のナビゲーション・ルールで一致するものが検出されます。JSFで一致が検出されると、対応するページが選択され、レスポンスのレンダリング・フェーズで選択したページがレンダリングされます。JSFライフサイクルの詳細は、第4章「JSFおよびADF Facesのライフサイクルの使用」を参照してください。また、ADF Facesアプリケーションのナビゲーションでは、部分ページ・レンダリングが使用される場合があります。詳細は、部分ページ・ナビゲーションの使用に関する項を参照してください。
次に、ADF Facesのコマンド・コンポーネントに含まれるものを示します。
サーバー側のアクションの有無にかかわらず、別の場所にナビゲートするためのボタンおよびリンク・コンポーネント。18.2項「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。
階層ページをナビゲートするためのタブおよびブレッドクラムなどの項目をレンダリングするコンポーネント。18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
マルチステップ・プロセスをナビゲートするためのtrainコンポーネント。18.8項「trainコンポーネントを使用したマルチステップ・プロセス用のナビゲーション・アイテムの作成」を参照してください。
ナビゲーションにコマンド・コンポーネントを使用するのに加え、ADF Facesには、アクション・イベントの起動時に特定の機能を実行するためにコマンド・コンポーネントとともに使用できるリスナー・タグも含まれています。詳細は、18.4項「ボタンまたはリンクの機能の呼出し目的での使用」を参照してください。
ADF Facesのボタンおよびリンクには、コマンド・コンポーネント(commandButton
、commandLink
、commandImageLink
)、および実行コンポーネント(goButton
、goImageLink
、goLink
)が含まれます。コマンド・コンポーネントと実行コンポーネントの主な違いは、コマンド・コンポーネントはリクエストを送信してActionEvent
イベントを起動するのに対し、実行コンポーネントはアクションを配信せずに直接別の場所に移動する点です。図18-11に示すように、レンダリングされたコマンド・コンポーネントと実行コンポーネントは視覚的に同じように見えます。
ヒント: ADF Facesには、メニューやツールバー内で使用できる特殊なコマンド・コンポーネントも用意されています。詳細は、第14章「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。 |
commandImageLink
およびgoImageLink
コンポーネントは、図18-2に示すように、オプションのテキストとともにイメージをリンクとしてレンダリングします。iconPosition
属性の値を設定して、オプションのテキストに関連するイメージの位置を指定できます。さらに、ユーザーがアイコンにカーソルを置いた場合や、アイコンが押された場合または無効化された場合に、別々のアイコンを設定できます。
ADF Facesには、ツールバー・ボタンからポップアップ・メニューを開くことができるpopup
ファセットなど、その他の機能を提供するツールバー・ボタンもあります。詳細は、14.3項「ツールバーの使用方法」を参照してください。
リンクをレンダリングするコマンド・コンポーネントをエンド・ユーザーが右クリックしたときに、ブラウザのポップアップ・メニューを起動できるように、アプリケーションを構成できます。コマンド・コンポーネントによってレンダリングされたリンクを右クリックするエンド・ユーザーは、ブラウザのポップアップ・メニューを使用して、ユーザーが起動する必要のないアクションを起動することがあります(たとえば、新しいウィンドウでリンクを開くなど)。詳細は、コマンド・リンクに対するブラウザのポップアップ・メニューの構成に関する項を参照してください。
コミットされていないデータを含むページからユーザーが移動しようとする場合、ユーザーに警告メッセージを表示できます。immediate
属性にtrue
を設定したコマンド・コンポーネントに、checkUncommittedDataBehavior
コンポーネントを子として追加します。ユーザーが移動しないことを選択した場合、クライアント・イベントが取り消されます。次のコンポーネントにcheckUncommittedDataBehavior
コンポーネントを子として追加できます。
af:commandButton
af:commandLink
af:commandImageLink
af:commandToolbarButton
af:activeCommandToolbarButton
警告メッセージがエンド・ユーザーに表示されるために、ページにはコミットされていないデータが含まれている必要があります。また、documentタグの構成方法に関する項で説明されているように、document
タグのuncommittedDataWarning
属性をon
に設定する必要もあります。
注意:
|
通常、commandButton
、commandLink
およびcommandImageLink
コンポーネントは、ページ・ナビゲーションおよびサーバー側の処理を実行するために使用します。
コマンド・コンポーネントを作成および使用する手順:
コンポーネント・パレットからJSFページに「Button」をドラッグ・アンド・ドロップして、commandButton
コンポーネントを作成します。「リンク」をドラッグ・アンド・ドロップして、commandLink
コンポーネントを作成します。「イメージ・リンク」をドラッグ・アンド・ドロップして、commandImageLink
コンポーネントを作成します。
プロパティ・インスペクタで、「共通」セクションを開き、text
属性を設定します。
ヒント: かわりに、 |
icon
属性を、commandButton
またはcommandImageLink
コンポーネント内に使用するイメージ・ファイルのURIに設定します(commandLink
ではサポートされていません)。commandImageLink
コンポーネントの場合は、hoverIcon
、disabledIcon
およびdepressedIcon
属性を設定することも可能です。
ヒント:
|
結果の文字列、または論理結果のString
を返すバッキングBeanのアクション・メソッドを参照するメソッド式に、action
属性を設定します。ページ間のナビゲーションを構成する方法の詳細は、2.3項「ページ・フローの定義」を参照してください。
デフォルトのJSF ActionListener
メカニズムでは、結果の文字列を使用して適切なJSFナビゲーション・ルールが選択され、レスポンスのレンダリング・フェーズに使用するページがJSF NavigationHandler
に通知されます。マネージドBeanメソッドを使用してダイアログを開く方法の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。JSFアプリケーションでの結果の文字列およびナビゲーションの詳細は、http://download.oracle.com/javaee/index.html
でJava EE 6チュートリアルを参照してください。
ヒント: 結果を返すハンドラにバインドされている場合は、ナビゲーションに たとえば、File Explorerアプリケーションの「検索」パネルの「検索」ボタンにはナビゲート先はありません。かわりに、検索の実行に使用されます。 actionListener="#{explorer.navigatorManager.searchNavigator. searchForFileItem}" この式は、実際に検索を実行するメソッドに評価されます。 |
コンポーネントを対話型ではないボタンまたはリンクとして表示する場合は、「動作」セクションを開いて、disabled
属性をtrue
に設定します。
コンポーネントがアクティブ化されるたびに部分ページ・リクエストが起動されるように、partialSubmit
属性をtrue
に設定します。詳細は、7.2項「部分ページ・レンダリングの宣言的有効化」を参照してください。
検証の処理およびモデルの更新フェーズをスキップする場合は、immediate
属性をtrue
に設定します。コンポーネントのアクション・リスナー(存在する場合)およびデフォルトのJSF ActionListener
ハンドラは、JSFライフサイクルのリクエスト値の適用フェーズの最後に実行されます。詳細は、4.2項「immediate属性の使用」を参照してください。
オプションで、手順7に示されているように、immediate
属性をtrue
に設定した場合、af:checkUncommittedDataBehavior
コンポーネントを子としてコマンド・コンポーネントに追加すると、ページにコミットされていないデータが含まれているときに警告メッセージをユーザーに表示できます。コンポーネント・パレットの「操作」パネルの「動作」セクションから「未コミット・データの確認動作」をドラッグして、手順1で追加したコマンド・コンポーネントの子として、これをドロップします。
コマンド・ボタンおよびリンクも、useWindow
、windowHeight
、windowWidth
、launchListener
およびreturnListener
の属性を使用して、2次ウィンドウを開くために使用できます。2次ウィンドウを開く方法の詳細は、第18章「ナビゲーション・コンポーネントの使用」を参照してください。
goButton
、goImageLink
およびgoLink
コンポーネントは、ActionEvent
イベントを配信せずに、ページ・ナビゲーションを直接実行するために使用します。
実行ボタンおよび実行リンクを作成および使用する手順:
コンポーネント・パレットからJSFページに実行ボタンをドラッグ・アンド・ドロップして、goButton
コンポーネントを作成します。移動リンクをドラッグ・アンド・ドロップして、goLink
コンポーネントを作成します。「実行イメージ・リンク」をドラッグ・アンド・ドロップして、goImageLink
コンポーネントを作成します。
goButton
またはgoLink
コンポーネントを作成した場合、プロパティ・インスペクタで「共通」セクションを開き、text
属性を設定します。goImageLink
コンポーネントを作成した場合、「その他」セクションでtext
属性を設定します。
ヒント: かわりに、 |
icon
属性を、goButton
またはgoImageLink
コンポーネント内に使用するイメージ・ファイルのURIに設定します(goLink
ではサポートされていません)。goImageLink
コンポーネントの場合は、hoverIcon
、disabledIcon
、depressedIcon
およびiconPosition
属性を設定することも可能です。
iconPosition
属性では、leading
(デフォルト)およびtrailing
の2つの値がサポートされています。テキストの前にアイコンをレンダリングするには、leading
に設定します。テキストの後ろにアイコンをレンダリングするには、trailing
に設定します。
ヒント:
|
destination
属性を、リンクのナビゲート先のページのURIに設定します。
たとえば、File Explorerアプリケーションのpopups.jspx
ファイルのgoLink
コンポーネントには、destination
属性に次のEL式が設定されています。
destination="http://www.oracle.com"
targetFrame
属性を設定して、新しいページの表示場所を指定します。使用できる値は次のとおりです。
_blank
: リンクにより、ドキュメントは新しいウィンドウに開かれます。
_parent
: リンクにより、ドキュメントは親ウィンドウに開かれます。たとえば、リンクがダイアログに表示された場合、結果のページは親ウィンドウにレンダリングされます。
_self
: リンクにより、ドキュメントは同じページまたはリージョンに開かれます。
_top
: リンクにより、ページ全体が置き換えられて、ドキュメントはウィンドウ全体に開かれます。
コンポーネントを対話型ではないボタンまたはリンクとして表示する場合は、「動作」セクションを開いて、disabled
属性をtrue
に設定します。「その他」セクションで、goImageLink
コンポーネントのdisabled
属性を設定します。
実行時にリンクをレンダリングするコマンド・コンポーネントを使用すると、エンド・ユーザーがアクションを起動できます。さらに、ADF Facesフレームワークで、エンド・ユーザーのブラウザがこれらのコマンド・コンポーネントのポップアップ・メニューをレンダリングできるように、アプリケーションを構成できます。ポップアップ・メニューは、コマンド・コンポーネントで指定されたリンクに対して、異なるアクション(たとえば、新しいウィンドウでリンクを開くなど)を起動するメニュー・オプションを表示することができます。この動作を構成できるコンポーネントは、次のとおりです。
af:commandLink
af:commandImageLink
af:commandMenuItem
(スタンドアロンまたはaf:menuBar
コンポーネント内)
af:commandNavigationItem
(destination
属性に値が指定されていない場合、ADF Facesフレームワークでは、次のシナリオでブラウザのポップアップ・メニューが有効になります。)
af:commandNavigationItem
がaf:train
コンポーネント内でレンダリングする2つのアンカー用
af:commandNavigationItem
がaf:breadCrumbs
コンポーネント内でレンダリングされる場合
af:commandNavigationItem
がaf:navigationPane
コンポーネント(ヒントが付くタブ、バー、ボタン、選択肢、リスト)内でレンダリングされる場合
af:panelTabbed
: タブおよびオーバーフロー・インジケータ
af:panelAccordion
: 公開リンクおよびオーバーフロー・インジケータ
宛先を指定してアクションを起動しないコンポーネントに、この動作を構成できません。これらのコンポーネントの例には、次のものが含まれます。
af:goLink
af:goImageLink
af:commandNavigationItem
(ここでは、destination
属性に値を指定し、action
属性に値を指定しません)
アプリケーションのweb.xml
ファイルのoracle.adf.view.rich.ACTION_LINK_BROWSER_CONTEXT_SUPPRESSION
コンテキスト・パラメータの値をno
に設定します。
開始する前に:
この機能をどのコマンド・コンポーネントに構成するかを理解します。詳細は、コマンド・リンクに対するブラウザのポップアップ・メニューの構成に関する項を参照してください。
コマンド・リンクにブラウザのポップアップ・メニューを構成する手順:
アプリケーション・ナビゲータで、「web.xml」をダブルクリックし、ファイルを開きます。
デフォルトでは、JDeveloperは概要エディタのweb.xml
ファイルを開きます。
コンテキスト初期化パラメータ・テーブルに、oracle.adf.view.rich.ACTION_LINK_BROWSER_CONTEXT_SUPPRESSION
パラメータのエントリを追加し、これをno
に設定します。
変更を保存して、web.xml
ファイルを閉じます。
コマンド・リンクに対するブラウザのポップアップ・メニューの構成に関する項で説明された手順を実行すると、例18-1に示すように、JDeveloperではweb.xml
ファイルに値が書き込まれます。
例18-1 ブラウザのポップアップ・メニューを構成するためのコンテキスト・パラメータ
<context-param> <param-name>oracle.adf.view.rich.ACTION_LINK_BROWSER_CONTEXT_SUPPRESSION</param-name> <param-value>no</param-value> </context-param>
アプリケーションのweb.xml
ファイルのADF Faces構成オプションの詳細は、web.xmlでの構成に関する項を参照してください。
コマンド・リンクに対するブラウザのポップアップ・メニューの構成に関する項で説明されているように、エンド・ユーザーは、実行時に特定のコンポーネントによってレンダリングされたリンク上で右クリックして、ブラウザのポップアップ・メニューを起動できます。
ナビゲーションにコマンド・コンポーネントを使用するのに加え、ADF Facesには、アクション・イベントの起動時に特定の機能を実行するためにコマンド・コンポーネントとともに使用できるリスナー・タグも含まれています。次に、ADF Facesに含まれるリスナー・タグを示します。
exportCollectionActionListener
: ADF FacesアプリケーションからExcelのスプレッドシートにデータをエクスポートするために使用します。詳細は、10.11項「表、ツリーまたはツリー表からのデータのエクスポート」を参照してください。
fileDownloadActionListener
: サーバーからローカル・コンピュータへのファイルのダウンロードを開始するために使用します。詳細は、18.4.1項「ファイルをダウンロードするためのコマンド・コンポーネントの使用方法」を参照してください。
resetActionListener
: 送信した値をリセットするために使用します。ただし、データ・モデルの状態は変更されません。詳細は、18.4.2項「入力フィールドをリセットするためのコマンド・コンポーネントの使用方法」を参照してください。入力コンポーネントを以前の状態、つまりサーバーへの部分的または完全な送信が成功している状態にリセットする場合は、「リセット」ボタンを使用できます。詳細は、9.2.3項「formへの「リセット」ボタンの追加方法」を参照してください。
コマンド・ボタンなどのアクション・コンポーネントを作成し、fileDownloadActionListener
タグに関連付けることで、ユーザーがファイルをダウンロードする機能を作成できます。ユーザーがアクション・コンポーネントを選択またはクリックすると、図18-3に示すように、ユーザーが異なるダウンロード・オプションを選択できるポップアップ・ダイアログが表示されます。
コマンド・ボタン、コマンド・リンクまたはメニュー項目などのアクション・コンポーネントにより、プログラムを使用してファイルのコンテンツがユーザーに送信されるよう、fileDownloadActionListener
タグは宣言的に使用します。特定のコンテンツ・タイプまたはファイル名を宣言することもできます。ファイルのダウンロードは、XMLHttp AJAX
リクエストではなく通常のリクエストで処理する必要があるため、サポートされている場合は、親コンポーネントのpartialSubmit
属性をfalse
に設定する必要があります。
コンテンツがブラウザに送信された後、そのコンテンツが表示または保存される方法は、ダイアログで選択したオプションにより異なります。プログラムで開くオプションを選択した場合、そのファイル・タイプに関連付けられているアプリケーションが起動されてコンテンツが表示されます。たとえば、テキスト・ファイルの場合はメモ帳アプリケーションが起動されます。ディスクに保存オプションを選択した場合は、ブラウザによっては、ファイル名およびコンテンツを格納する場所を選択するためのポップアップ・ダイアログが表示されます。
例18-2に、ユーザーにファイル・コンテンツ「Hi there!
」をダウンロードするためにfileDownloadActionListener
タグを使用するコマンド・ボタンのタグを示します。
例18-2 コマンド・ボタンおよびfileDownloadActionListenerタグを使用したファイルのダウンロード
<af:commandButton value="Say Hello"> <af:fileDownloadActionListener filename="hello.txt" contentType="text/plain; charset=utf-8" method="#{bean.sayHello}"/> </af:commandButton>
例18-3に、ファイルのダウンロード処理に使用されるマネージドBeanメソッドを示します。
例18-3 ファイルのダウンロード処理に使用されるマネージドBeanメソッド
public void sayHello(FacesContext context, OutputStream out) throws IOException{ OutputStreamWriter w = new OutputStreamWriter(out, "UTF-8"); w.write("Hi there!"); . . . }
ファイルのダウンロード・メカニズムを作成する手順:
コンポーネント・パレットからページにアクション・コンポーネントをドラッグ・アンド・ドロップします(アクション・コンポーネントの詳細は、18.2項「ボタンおよびリンクのナビゲーション目的での使用」を参照してください)。
コンポーネント・パレットの「操作」セクションを開き、ファイルのダウンロード・アクション・リスナー・タグをアクション・コンポーネントの子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタで次の属性を設定します。
contentType
: text/plain
、text/csv
、application/pdf
など、ファイルのMIMEタイプを指定します。
filename
: オブジェクトの選択したファイル名を指定します。ファイル名を指定すると、通常は「ファイルの保存」ダイアログが表示されますが、最終的にはブラウザにより異なります。名前を指定しない場合、通常、コンテンツはブラウザにインライン表示されます(可能な場合)。
method
: ファイル・コンテンツのダウンロードに使用されるメソッドを指定します。methodには、FacesContext
オブジェクトおよびOutputStream
オブジェクトの2つの引数を指定できます。OutputStream
オブジェクトは自動的に閉じられるため、このmethodの唯一の目的は、すべてのバイトをOutputStream
オブジェクトに書き込むことです。
たとえば、コマンド・ボタンのコードは次のようになります。
<af:commandButton text="Load File"> <af:fileDownloadActionListener contentType="text/plain" filename="MyFile.txt" method="#(mybean.LoadMyFile"/> </af:commandButton>
resetActionListener
タグとコマンド・コンポーネントを組み合せて使用すると、入力値をリセットできます。すべての値は、nullまたは空に戻されます。入力コンポーネントを以前の状態、つまりサーバーへの部分的または完全な送信が成功している状態にリセットする場合は、「リセット」ボタンを使用する必要があります。詳細は、9.2.3項「formへの「リセット」ボタンの追加方法」を参照してください。
リセット・タグを使用する手順:
18.2項「ボタンおよびリンクのナビゲーション目的での使用」の説明に従い、コマンド・コンポーネントを作成します。
コンポーネント・パレットからリセット・アクション・リスナーをコマンド・コンポーネントの子としてドラッグ・アンド・ドロップします。
注意: アプリケーションにADFコントローラを含むFusionテクノロジ・スタックが使用されている場合は、ADFタスク・フローおよび |
アプリケーションはツリー式階層に関連付けて編成されたページで構成されます。ユーザーは、リンクのパスをドリルダウンして、ページ上の特定の情報にアクセスします。たとえば、図18-4に、トップレベルのHomeノードの下に3レベルのノードを持つ単純なページ階層を示します。トップレベルのノードは、ルート親ページを表します。第1レベルのノードのBenefitsおよびEmployee Dataは、第2レベルの子ノード(InsuranceやView Employeeなど)の一般情報を含む親ページを表します。この子ノードには、より具体的な情報が含まれます。その中のInsuranceノードは、第3レベルの子ノードのHealthおよびDentalの一般情報を含む親ノードでもあります。ページ階層の各ノード(ルートHomeノードは除く)は、同時に親ノードでもあり、子ノードでもあります。ページ階層の各ノードはページに対応しています。
ページ階層のナビゲーションは、親子のリンクに従います。たとえば、Healthの情報を表示するには、ユーザーはBenefitsページからドリルダウンを開始し、2つの選択肢(一方がHealth)が用意されているInsuranceページに移動します。「Home」から始まり、「Health」で終わる選択済リンクのパスは、ツリーのフォーカス・パスと呼ばれます。
直接の親子のナビゲーションのみでなく、レベル間または親間のナビゲーションも可能です。たとえば、Dentalページから、ユーザーは第2レベルのPaid Time Offページに移動することも、第1レベルのBenefitsページまたはEmployee Dataページに移動することもできます。
図18-4に示すように、階層内のどのノードにもリンクされていないが、トップレベルのHomeノードと同じレベルにあるHelpノードは、グローバル・ノードです。グローバル・ノードは、階層内のどのページからもアクセスできるグローバル・ページ(「ヘルプ」ページなど)を表します。
ページ階層のWebユーザー・インタフェースで使用される一般的なウィジェットは、タブ、バー、グローバル・リンクで、すべてnavigationPane
コンポーネントを使用して作成できます。図18-5に、navigationPane
およびその他のコンポーネントを使用してレンダリングされた図18-4の階層を示します。
図18-5に示すように、通常、タブは第1レベルのノードとして使用されます。ここでは、BenefitsおよびEmployee Detailページのタブがあります。InsuranceおよびPaid Time Offなどの第2レベルのノードはバーとして、HealthおよびDentalなどの第3レベルのノードはリストとしてレンダリングされます。ただし、タブは、第1および第2レベルのノードの両方に使用できます。(グローバル・ノードを表す)グローバル・リンクは、テキスト・リンクとしてレンダリングされます。図18-5で、Homeおよび「ヘルプ」グローバル・リンクはテキスト・リンクとしてレンダリングされています。
第1、第2、第3レベルのノードまたはグローバル・ノードのいずれであるかにかかわらず、1つのnavigationPane
コンポーネントは、1レベルのノードに対応します。ナビゲーション・アイテムのタイプに関係なく、navigationPane
コンポーネントはレベルに対してレンダリングするよう構成されており、navigationPane
コンポーネント内の各項目を表すには、必ずcommandNavigationItem
コンポーネントを使用します。
navigationPane
コンポーネントは、ナビゲーション用のタブ、バー、リストおよびグローバル・リンクをレンダリングするだけです。図18-10や図18-11に示されているような、位置指定やページ背景のビジュアルなスタイル設定を行うには、decorativeBox
コンポーネントを第1レベルのnavigationPane
コンポーネントの親として使用します。decorativeBox
コンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。たとえば、デフォルトのテーマを使用する場合、decorativeBox
コンポーネント本体は白、枠は青で、左上隅は丸くなります。ミディアム・テーマを使用する場合、本体は中間色の青になります。テーマおよびスキンの使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ヒント: ページ階層を作成するには、階層内の各ページで同じレイアウトおよびルック・アンド・フィールを使用する必要があるため、ナビゲーション・コンポーネントの配置場所やスタイルを決定するためにテンプレートの使用を検討してください。詳細は、19.3項「ページ・テンプレートの使用」を参照してください。 |
より単純な階層の各ページのために一連のnavigationPane
コンポーネントを使用し、階層の各レベルを表します。次に、各レベルの各リンクに、commandNavigationItem
コンポーネントをnavigationPane
コンポーネントの直接の子として追加します。たとえば、図18-5に示すように、Health insuranceページを作成するには、まず、ページに表示された各レベルに対してnavigationPaneコンポーネントを使用します。この場合、使用するのは、グローバル・リンク、第1レベルのノード、第2レベルのノード、第3レベルのノードの4つのレベルです。個々のリンクを表示するには、各navigationPane
コンポーネントにcommandNavigationItem
コンポーネントを子として追加する必要があります。図18-6に示すように、Benefitsページを作成していた場合、3つのnavigationPane
コンポーネント(グローバル、第1、第2レベルの3つのレベル)のみを作成します。次に、このページから表示されるリンク用にcommandNavigationItem
コンポーネントを作成します。
大規模な階層では、このプロセスは非常に時間がかかり、ミスも発生しやすくなります。大規模な階層の場合は、各ページに別々のcommandNavigationItem
コンポーネントをそれぞれ作成するのではなく、XMLMenuModel
実装およびマネージドBeanを使用して、ページのナビゲーション・アイテムを動的に生成することをお薦めします。メタデータ・ファイルとともに使用するXMLMenuModel
クラスには、各ページに適切な数の階層レベルを生成するためのすべての情報と、各レベルに属するナビゲーション・アイテムが含まれます。navigationPane
コンポーネント内に複数のcommandNavigationItem
コンポーネントを使用し、各ページで現在の項目を選択済としてマーキングするかわりに、各navigationPane
コンポーネントを宣言的に同じXMLMenuModel
実装にバインドし、nodeStamp
ファセットにcommandNavigationItem
コンポーネントを1つ使用してナビゲーション・アイテムを指定します。commandNavigationItem
コンポーネントは、navigationPane
コンポーネントのスタンプとして機能し、XMLMenuModel
オブジェクトに保持されている(各レベルの)ノードのナビゲーション・アイテムにスタンプを設定します。デフォルトのActionListener
メカニズムを使用したJSFナビゲーション・モデルを使用して、ユーザーがナビゲーション・アイテムを選択した時のナビゲート先のページが選択されます。メニュー・モデルの詳細は、18.6項「メニュー・モデルを使用したページ階層の作成」を参照してください。
どのページでも、ユーザーの現在の位置をページ階層全体との関連で表示するには、一連のcommandNavigationItem
コンポーネントまたは1つのcommandNavigationItem
コンポーネントを含むbreadCrumbs
コンポーネントをnodeStamp
として使用し、現在のページ(フォーカス・パスの現在のノード)からルート・ページへ戻るリンクのパスを指定します。
XMLMenuModel
を使用したナビゲーション階層の作成の詳細は、18.6項「メニュー・モデルを使用したページ階層の作成」を参照してください。ナビゲーション階層の手動による作成の詳細は、18.7項「単純なナビゲーション階層の作成」を参照してください。
注意: アプリケーションの変更の反映に使用できるメニュー(「Open」および「Delete」コマンドが含まれる「File」メニューなど)を作成する場合は、第14章「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。 |
注意: アプリケーションにFusionテクノロジ・スタックまたはADFコントローラが使用されている場合は、ADFタスク・フローおよび |
18.5項「ページ階層用のナビゲーション・アイテムの使用」に、複数のcommandNavigationItem
子コンポーネントを含むnavigationPane
コンポーネントを使用して、非常に単純なページ階層用のナビゲーション・メニューを作成する方法が説明されています。より複雑なページ階層で同じ方法を使用すると時間がかかり、ミスが起こりやすくなります。ナビゲーションを可能にするすべての項目を作成するために、複数のJSFページのnavigationPane
およびbreadCrumbs
コンポーネントに個々のcommandNavigationItem
コンポーネントを手動で挿入し構成するのは、非効率的で単調な作業です。各項目について正確なselectedステータスを管理したり、現在のページからルート・ページに戻るブレッドクラム・リンクをたどって追跡するのも困難です。
より複雑なページ階層の場合(および単純なページ階層の場合でも)、ナビゲーション・メニューを作成するより効率的な方法は、メニュー・モデルを使用することです。メニュー・モデルは、特別な種類のツリー・モデルです。ツリー・モデルは、行キーで索引付けされた行のコレクションです。ツリーでは、現在行に子の行を含めることができます(ツリー・モデルの詳細は、10.5項「ツリーへのデータの表示」を参照してください)。メニュー・モデルは、現在フォーカス(フォーカス・ノード)があるノードのrowKey
を取得できるツリー・モデルです。メニュー・モデルにはページ・ナビゲーションの特別な情報はなく、ツリーにアクセスするノードに対する要件もありません。
XMLMenuModel
クラスは、ナビゲーション・ツリー・モデルからメニュー・モデルを作成します。ただし、XMLMenuModel
クラスには、XMLメタデータにナビゲーションの階層ツリーを定義できる追加のメソッドがあります。(他のADF Facesのメニュー・モデル・クラスの1つを使用している場合のように)Javaクラスを作成し多数のマネージドBeanを構成してメニュー・モデルを定義および作成するかわりに、XMLMenuModel
クラスでメニュー・モデルを作成する際に必要なすべてのノード情報を含む1つ以上のXMLMenuModel
メタデータ・ファイルを作成します。
パフォーマンスのヒント: メニュー・モデルを含む |
メニュー・モデルを使用してページ階層を作成する手順:
ページ階層のJSFナビゲーション・ルールおよびナビゲーション・ケースを作成し、XMLMenuModel
メタデータを作成します。18.6.1項「メニュー・モデル・メタデータの作成方法」を参照してください。
XMLMenuModel
クラスにマネージドBeanを構成します。このマネージドBeanは、アプリケーションにより階層の作成に使用されます。この構成は、JDeveloperで「ADFメニュー・モデルの作成」ダイアログを使用してXMLMenuModel
メタデータ・ファイルを作成する際に、自動的に行われます。18.6.2項「ADFメニュー・モデルの作成ウィザードを使用する場合の処理」を参照してください。
各階層ノード(グローバル・ノードも含む)にJSFページを作成します。
ヒント: 通常、各レベルの項目(グローバル項目およびブレッドクラムを含む)に対するファセットが含まれるページ・テンプレートを使用して、各JSFページを作成します。たとえば、グローバル項目を表す |
各ページで、navigationPane
およびbreadCrumbs
コンポーネントをXMLMenuModel
クラスにバインドします。18.6.3項「JSFページでのXMLMenuModelへのバインド方法」および18.6.4項「breadCrumbsコンポーネントの使用方法」を参照してください。
XMLMenuModel
メタデータ・ファイルは、XML形式によるページ階層用のナビゲーション・メニューの表現です。XMLMenuModel
メタデータ・ファイルでは、ページ階層全体が、ファイルのルート要素であるmenu
要素内に説明されています。各XMLMenuModel
メタデータ・ファイルにはmenu
要素が必要で、使用できるmenu
要素は1つのみです。
階層の残りのノードは、項目ノード、グループ・ノードおよび共有ノードで構成されています。項目ノードは、階層のナビゲート可能なノード(またはページ)を表します。たとえば、図18-7に示すような階層を作成するとします。
階層の各ノードにユーザーがナビゲートできる独自のページを作成する場合は、各ページのメタデータに項目ノードを作成します。親ノードに子ノードをネストさせて階層を作成します。ただし、Employee Dataノードにはページが必要ないが、ユーザーが直接View Employeeページにナビゲートできるようにするとします。次に、グループ・ノードを使用して、Employee Dataページを表し、グループ・ノードのidref
属性を使用して、エンド・ユーザーがEmployee Dataタブをクリックしたときに開くページ(View Employeeページ)を参照します。グループ・ノードを使用すると、単に子ノードの集約であるノード用にページを作成せずに階層を維持できます。
共有ノードを使用して、メニュー・モデルをネストすることもできます。この方法は、ページ階層が維持しやすくなるため、階層にサブツリー(たとえば、Benefitsツリーなど)がある場合にお薦めします。たとえば、アプリケーション全体で再利用できるように、Benefitsツリー全体を独自のモデルとして作成するとします。それぞれに使用するためにノードを作成するかわりに、別のメニューとして一度ノードを作成し、異なる階層内で、共有ノードを使用すると、Benefitsメニュー・モデルを参照できます。
例18-4に、図18-7に示されているページ階層を定義するための、XMLMenuModel
メタデータ・ファイルを示します。
例18-4 XMLMenuModelメタデータ・ファイルのサンプル
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu"> <itemNode id="Home" focusViewId="/home.jspx" label="Home" action="goHome"> <itemNode id="benefits" focusViewId="/benefits.jspx" action="goBene" label="Benefits"> <itemNode id="insurance" focusViewId="/insurance.jspx" action="goIns" label="Insurance"> <itemNode id="health" focusViewId="/health.jspx" action="goHealth" label="Health"/> <itemNode id="dental" focusViewId="/dental.jspx" action="goDental" label="Dental"/> </itemNode> <itemNode id="pto" focusViewId="/pto.jspx" action="goPto" label="Paid Time Off"> <itemNode id="vacation" focusViewId="/vacation.jspx" action="goVacation" label="Vacation"/> <itemNode id="sick" focusViewId="/sick.jspx" action="goSick" label="Sick Pay"/> </itemNode> </itemNode> <groupNode id="empData" idref="newEmp" label="Employee Data"> <itemNode id="newEmp" focusViewId="/createemp.jspx" action="goCreate" label="Create New Employee"/> <itemNode id="viewdata" focusViewId="/viewdata.jspx" action="goView" label="View Data"/> </groupNode> </itemNode> <itemNode id="Help" focusViewId="/globalhelp.jspx" action="goHelp" label="Help"/> <itemNode id="Preferences" focusViewId="/preferences.jspx" action="goPref" label="Preferences"/> </menu>
ルートのmenu
要素内において、グローバル・ノードは、menu
要素の直接の子である任意のタイプのノードです。つまり、menu
要素の下の第1レベルの要素はグローバル・ノードです。たとえば、例18-4のコードに、Home、HelpおよびPreferencesの3つのグローバル・ノードが示されています。第1レベルの子ノード内に、ノードをネストさせて、さらに多くのレベルのナビゲーションを提供できます。たとえば、例18-4のコードでは、Homeの下にBenefitsとEmployee Dataの2つの第2レベルのノードが示されています。Benefits内では、InsuranceおよびPaid Time Offの2つの第3レベルのノードとその他のノードがあります。
JDeveloperでは、ADFメニュー・モデルの作成ウィザードを提供することで、XMLMenuModel
クラス用のメタデータの作成が簡略化されています。
XMLMenuModelメタデータを作成する手順:
ページ階層のすべてのノードのナビゲーション・ケースが含まれるグローバルなJSFナビゲーション・ルールを1つ作成します。
たとえば、図18-4に示されているページ階層には、グローバルのHelpノードを含む10のノードがあります。この場合、例18-5に示すように、faces-config.xml
ファイルの1つのグローバル・ナビゲーション・ルール内に10のナビゲーション・ケースを作成します。
各ナビゲーション・ケースに、一意の結果文字列と、指定された文字列に一致する結果値がナビゲーション・システムによって返された場合に表示するJSFページへのパスを指定します。
例18-5 faces-config.xml内のページ階層のグローバル・ナビゲーション・ルール
<navigation-rule> <navigation-case> <from-outcome>goHome</from-outcome> <to-view-id>/home.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHelp</from-outcome> <to-view-id>/globalhelp.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goEmp</from-outcome> <to-view-id>/empdata.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goBene</from-outcome> <to-view-id>/benefits.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goIns</from-outcome> <to-view-id>/insurance.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goPto</from-outcome> <to-view-id>/pto.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goView</from-outcome> <to-view-id>/viewdata.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goCreate</from-outcome> <to-view-id>/createemp.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHealth</from-outcome> <to-view-id>/health.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goDental</from-outcome> <to-view-id>/dental.jspx</to-view-id> </navigation-case> ... </navigation-rule>
JDeveloperにおけるナビゲーション・ケースの作成方法の詳細は、2.3項「ページ・フローの定義」を参照してください。
アプリケーション・ナビゲータで、XMLMenuModel
メタデータ・ファイルを作成するプロジェクトを探します。プロジェクトの「Webコンテンツ - WEB-INF」フォルダで、faces-config.xml
ファイルを右クリックし、ポップアップ・メニューから「ADFメニューの作成」を選択します。
注意: アプリケーションでADFコントローラが使用されている場合は、このメニュー・オプションを使用できません。かわりに、バインド・タスク・フローを使用して階層を作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「ページ階層の作成」を参照してください。 |
「ADFメニュー・モデルの作成」ダイアログで、XMLMenuModel
メタデータ・ファイルのファイル名(root_menu
など)を入力します。
メタデータ・ファイルのディレクトリを入力します。JDeveloperにより、デフォルトで、アプリケーションのWEB-INF
ディレクトリにXMLMenuModel
メタデータ・ファイルが保存されます。
「OK」をクリックすると、JDeveloperにより自動的に次の操作が行われます。
手順3で指定した名前がマネージドBean名として使用され、faces-config.xml
ファイルにモデルのマネージドBeanが作成されます。
マネージドBeanのsource
マネージド・プロパティの値が、手順3で指定した/WEB-INF/root_menu.xml
などのXMLMenuModel
メタデータ・ファイルに設定されます。
例18-6に示すように、ソース・ファイル(/WEB-INF/root_menu.xml
)が、空のXMLMenuModel
メタデータ・ファイルとしてソース・エディタに表示されます。
例18-6 空のXMLMenuModelメタデータ・ファイル
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu"></menu>
JDeveloperにより自動的に追加されるマネージドBean構成の詳細は、18.6.2項「ADFメニュー・モデルの作成ウィザードを使用する場合の処理」を参照してください。
構造ウィンドウでmenuノードを選択し、プロパティ・インスペクタに適切な情報を入力します。
表18-1に、menu
要素に指定できる属性を示します。
表18-1 menu要素の属性
属性 | 説明 |
---|---|
|
オプション。これは、実行時のナビゲーション・アイテムのラベル(表示されるテキスト)に使用するためのリソース・バンドルです。たとえば、 |
|
リソース・バンドルを使用している場合は、ナビゲーション・アイテム・ラベルのEL式のバンドルの参照に使用するIDを指定します。 |
|
必須。 |
例18-7に、ナビゲーション・アイテムのラベルのリソース・バンドルにアクセスするためにEL式を使用する、サンプルのXMLMenuModel
メタデータ・コードを示します。
例18-7 リソース・バンドルを使用したXMLMenuModel
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu" resourceBundle="org.apache.myfaces.demo.xmlmenuDemo.resource.MenuBundle" var="bundle"> <itemNode id="in1" label="#{bundle.somelabel1}" ../> <itemNode id="in2" label="#{bundle.somelabel2}" ../> </menu>
注意:
|
リソース・バンドルの使用方法の詳細は、第21章「ページの国際化およびローカライズ」を参照してください。
構造ウィンドウで、必要に応じてitemNode
、groupNode
またはsharedNode
を使用して、階層のノードに必要な要素を追加します。まず、menuを右クリックして「menuの中に挿入」を選択し、図18-8に示されているように、ポップアップ・メニューから必要な要素を選択します。
要素は次のいずれかです。
itemNode
: ユーザーによる選択時にナビゲーションを実行するノードを指定します。
groupNode
: 子コンポーネントをグループ化します。groupNode
自体にナビゲーション機能はありません。子ノードは、itemNode
または他のgroupNode
です。
たとえば、Employee Dataノードにはページが必要ないが、ユーザーが直接View Employeeページにナビゲートできるようにするとします。その場合は、グループ・ノードを使用し、目的の子ノードのid
属性をグループ・ノードのidref
属性として指定することによって、Employee Dataページを表します。グループ・ノードを使用すると、単に子ノードの集約であるノード用にページを作成せずに階層を維持できます。
sharedNode
: 他のXMLMenuModel
インスタンスを参照します。sharedNode
要素は真のノードではなく、ナビゲーションの実行もノード自体へのレンダリングも行われません。
sharedNode
要素は、階層内の任意の場所に挿入できます。たとえば、例18-8に示されているコードでは、sharedNode
要素によりグローバル・ノードと同じレベルにサブメニューが追加されています。
XMLMenuModel
メタデータ・ファイルを作成すると、図18-9に示すように、メニュー・メタデータのインデント・レベルが構造ウィンドウに表示されるツリー構造に正確に反映されます。
ノードの作成に使用されている各要素に、プロパティ・インスペクタでプロパティを設定します。itemNode
要素は表18-2に、groupNode
要素は表18-3に、sharedNode
要素は表18-4に説明されています。
表18-2 itemNode要素の属性
属性 | 説明 |
---|---|
|
結果文字列、または結果文字列を返すELメソッド・バインディング式を指定します。どちらの場合も、結果文字列は、 |
|
ノードが選択されたときにナビゲートするページのURIを指定します(例: または、そのURIに評価されるELメソッド式を指定します。
|
|
必須。ノードのナビゲーション結果に一致するページのURI。つまり、 たとえば、ノードのアクション結果が(
|
|
必須。ノードの一意の識別子を指定します。 例18-4に示されているように、各 |
|
ノードに表示するラベル・テキストを指定します。 |
groupNode
要素には、直接ナビゲーションを実行するaction
またはdestination
属性はありませんが、(action
またはdestination
属性のある)子のitemNode
を直接示すか、itemNode
要素に到達するまで、子ノードのいずれかを示す子のgroupNode
を間接的に示すことにより、アクション結果または宛先のURIを含む子ノードを示します。ナビゲーションは、その後、アクション結果またはそのitemNode
要素の宛先のURIから決定されます。
例18-9に示されているgroupNode
のコードを例にとります。実行時にユーザーがgroupNode id="gn1"
、groupNode id="gn11"
またはitemNode id="in1"
をクリックすると、最初に到達したitemNode
(itemNode id="id1"
)で指定されているように、ナビゲーションの結果は"goToSubTabOne
"になります。表18-3に、groupNode
要素を使用する際に指定する必要のある属性を示します。
例18-9 groupNode要素
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns:"http://myfaces.apache.org/trinidad/menu"> <groupNode id="gn1" idref="gn11" label="GLOBAL_TAB_0"> <groupNode id="gn11" idref="in1" label="PRIMARY_TAB_0"> <itemNode id="in1" label="LEVEL2_TAB_0" action="goToSubTabOne" focusViewId="/menuDemo/subtab1.jspx"/> <itemNode id="in2" label="LEVEL2_TAB_1" action="goToSubTabTwo" focusViewId="/menuDemo/subtab2.jspx"/> </groupNode> <itemNode id="in3" label="PRIMARY_TAB_1" focusViewId="/menuDemo/tab2.jspx" destination="/faces/menuDemo/tab2.jspx"/> </groupNode> <itemNode id="gin1" label="GLOBAL_TAB_1" action="goToGlobalOne" focusViewId="/menuDemo/global1.jspx"/> <itemNode id="gin2" label="GLOBAL_TAB_2" destination="/faces/menuDemo/global2.jspx" focusViewId="/menuDemo/global2.jspx"/> </menu>
表18-3 groupNode要素の属性
属性 | 説明 |
---|---|
|
グループ・ノードの一意の識別子。 例18-4に示されているように、各 |
|
子ノードのID(
|
|
グループ・ノードに表示するラベル・テキストを指定します。リソース・バンドルの文字列へのEL式( |
ADFメニュー・モデルの作成ウィザードを使用してXMLMenuModel
メタデータ・ファイルを作成する場合、マネージドBean名として指定したメタデータ・ファイル名を使用して、JDeveloperによりfaces-config.xml
ファイルのメタデータ・ファイルにマネージドBeanが自動的に構成されます。
例18-10に、XMLMenuModel
メタデータ・ファイルの構成が1つ含まれるfaces-config.xml
ファイルの一部を示します。JDeveloperでは、デフォルトで、oracle.adf.view.rich.model.MDSMenuModel
クラスがマネージドBeanクラスとして使用され、必須で変更できないrequest
はマネージドBeanスコープとして使用されます。
例18-10 faces-config.xml内のXMLMenuModelのマネージドBean構成
<managed-bean> <managed-bean-name>root_menu</managed-bean-name> <managed-bean-class>oracle.adf.view.rich.model. MDSMenuModel</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>createHiddenNodes</property-name> <value>false</value> </managed-property> <managed-property> <property-name>source</property-name> <property-class>java.lang.String</property-class> <value>/WEB-INF/root_menu.xml</value> </managed-property> </managed-bean>
また、各XMLMenuModel
のマネージドBeanに、次のマネージド・プロパティが追加されます。
createHiddenNodes
: true
の場合、コンポーネントのrendered
属性がfalse
の場合でも、階層ノードを作成する必要があることを指定します。createHiddenNodes
値は、取得されて、ソース・メニュー・メタデータ・ファイルが開かれて解析されると使用可能になります。これにより、実際のコンポーネントをレンダリングする必要がない場合でも、階層全体を作成できます。
createHiddenNodes
プロパティは、source
プロパティの前に配置する必要があります。JDeveloperによってマネージドBeanが自動的に設定される際は、このように配置されます。source
マネージド・プロパティからメニューのXMLメタデータを適切に解析および作成するには、この値がXMLMenuModel
マネージドBeanに事前に設定されている必要があります。
source
: 使用するソース・メタデータ・ファイルを指定します。
ウィザードを使用してプロジェクトに作成される各XMLMenuModel
メタデータ・ファイルに対して、JDeveloperではfaces-config.xml
ファイルにマネージドBeanが構成されます。たとえば、XMLMenuModel
でsharedNode
要素を使用して、別のXMLMenuModel
メタデータ・ファイルを使用する場合(例18-8を参照)、2つのメタデータ・ファイルを作成します。JDeveloperにより、faces-config.xml
ファイルに2つのマネージドBean構成が追加されます。例18-11に示すように、1つはメイン(ルート)のメニュー・モデル用で、もう1つのマネージドBeanは共有(参照)メニュー・モデル用です。
例18-11 faces-config.xml内の共有メニュー・モデルのマネージドBean
<!-- managed bean for referenced, shared menu model --> <managed-bean> <managed-bean-name>shared_menu</managed-bean-name> <managed-bean-class> <managed-bean-class>oracle.adf.view. rich.model.MDSMenuModel</managed-bean-class> </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>createHiddenNodes</property-name> <value>true</value> </managed-property> <managed-property> <property-name>source</property-name> <property-class>java.lang.String</property-class> <value>/WEB-INF/shared_menu.xml</value> </managed-property> </managed-bean>
つまり、XMLMenuModel
メタデータ・ファイルに共有ノードを使用すると、faces-config.xml
ファイルには、ルート・メニュー・モデルのマネージドBeanと、共有ノードを介して参照される任意のメニュー・モデル用のメニュー・モデルのマネージドBeanが含まれます。
ページ階層の各ノードは1つのJSFページに対応します。各ページで、グローバル・アイテムを含め、XMLMenuModel
メタデータ・ファイルで定義済の各レベルのナビゲーション・アイテムにnavigationPane
コンポーネントを1つ使用します。レベルはゼロベースの索引の番号によって定義されます。メタデータ・ファイルのグローバル・ノード(すなわち、例18-4で示されているように、menu要素の下の直接の子ノード)から始まり、level属性値は0(ゼロ)で、次のレベル(通常はタブ)は1、その次のレベル(通常はバー)は2、などのように続きます。たとえば、図18-7および例18-4に示すようなページ階層がある場合、(Homeノードの下の3つのレベルのナビゲーションに)Homeなどのページで3つのnavigationPane
コンポーネントを使用し、グローバル・ノードにnavigationPane
コンポーネントをもう1つ使用します。
ヒント: メニュー・モデルにより、動的に階層(各 コードが似ているため、 |
18.7.1項「単純なページ階層の作成方法」で説明されているように、各階層レベルに使用するナビゲーション・アイテムのタイプ(buttons
、tabs
またはbar
など)を指定するにはhint
属性を使用します。ただし、複数のcommandNavigationItem
コンポーネントを手動で追加してナビゲーション・アイテムを指定するのではなく、例18-12に示すように、各navigationPane
コンポーネントをXMLMenuModel
マネージドBeanにバインドし、各navigationPane
コンポーネントのnodeStamp
ファセットにcommandNavigationItem
コンポーネントを1つのみ挿入します。
例18-12 XMLMenuModelマネージドBeanにバインドされたnavigationPaneコンポーネント
<af:navigationPane var="menuNode" value="#{root_menu}" level="1" hint="tabs"> <f:facet name="nodeStamp"> <af:commandNavigationItem text="#{menuNode.label}" action="#{menuNode.doAction}" icon="#{menuNode.icon}" destination="#{menuNode.destination}" visible="#{menuNode.visible}" rendered="#{menuNode.rendered}"/> </f:facet> </af:navigationPane>
XMLMenuModel
マネージドBeanとともに使用するnodeStamp
ファセットと単一のcommandNavigationItem
コンポーネントにより、次の操作が実行されます。
レベル内のナビゲーション・アイテムの適切な数がスタンプ設定されます。
正しいラベル・テキストとその他のプロパティが、メタデータに定義されているとおりに表示されます。たとえば、EL式#{menuNode.label}
によりナビゲーション・アイテムに使用する適切なラベル・テキストが取得され、#{menuNode.doAction}
は同じ項目に定義されているアクション結果に評価されます。
フォーカス・パスの現在の項目が選択済とマークされます。commandNavigationItem
コンポーネントにselected
属性を指定する必要はありません。
注意: 特定の階層レベル(第3レベルのリストなど)の |
XMLMenuModelマネージドBeanにバインドする手順:
メニュー・タブのスタイルを設定する場合は、コンポーネント・パレットのレイアウト・セクションから装飾ボックスをJSFページにドラッグ・アンド・ドロップして、decorativeBox
コンポーネントを作成します。テーマを設定して、タブの表示方法を決定します。有効な値は次のとおりです。
default
: 本体は白で、枠は青です。左上隅は丸くなります。
light
: 本体は薄い青です。左上隅は丸くなります。
medium
: 本体は中間色の青です。左上隅は丸くなります。
dark
: 本体は濃い青です。左上隅は丸くなります。
テーマの表示方法は変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
コンポーネント・パレットからJSFページにナビゲーション・ペインをドラッグ・アンド・ドロップして、navigationPane
コンポーネントを作成します。階層の各レベルにnavigationPane
コンポーネントを追加します。
ヒント: ナビゲーション・ペイン・コンポーネントは、コンポーネント・パレットのレイアウト・ペインにあります。 |
たとえば、図18-5の階層のようなページを作成するには、navigationPane
コンポーネントを4つドラッグ・アンド・ドロップします。
プロパティ・インスペクタで「共通」セクションを開き、各navigationPane
コンポーネントのhint
属性を次に示すナビゲーション・アイテムのいずれかのタイプに設定して、navigationPane
で次のものをどのように表示するかを決定します。
bar: バーで分割されたナビゲーション・アイテムを表示します。図18-11のInsuranceおよびPaid Time Offリンクなどがこれに当たります。
buttons: グローバル領域のバーで分割されたナビゲーション・アイテムを表示します。図18-11のHomeおよび「ヘルプ」リンクなどがこれに当たります。
choice: 関連付けられたドロップダウン・アイコンがクリックされたときに、ポップアップ・リストにナビゲーション・アイテムを表示します。navigationPane
コンポーネントのicon
属性に値を含める必要があります。これにより、title
属性を使用して、ラベルをドロップダウン・リストを関連付けることができます。
list: ナビゲーション・アイテムを箇条書きリストで表示します。図18-11のHealthおよびDentalリンクなどがこれに当たります。
tabs: ナビゲーション・アイテムをタブで表示します。図18-11のBenefitsおよびEmployee Dataタブなどがこれに当たります。
XMLMenuModel
メタデータ・ファイルの適切なレベルのメタデータを指すように、level
属性を設定します。level
属性はゼロベースの索引の番号によって定義されます。メタデータ・ファイルのグローバル・ノード(すなわち、例18-4で示されているように、menu
要素の下の直接の子ノード)から始まり、level
属性値は0
(ゼロ)で、次のレベル(通常はタブ)は1
、その次のレベル(通常はバー)は2
、などのように続きます。
commandNavigationItem
コンポーネントは、親navigationPane
コンポーネントのlevel
属性を介して、メタデータ・ファイルからそのメタデータを取得できます。level
属性値を指定しない場合は、デフォルトで0
(ゼロ)が使用されます。これは、navigationPane
コンポーネントでは、commandNavigationItem
コンポーネントによってレンダリングされるmenu
要素の下の第1レベルからメタデータが取得されるということです。
プロパティ・インスペクタで、「データ」セクションを開きます。value
属性を、faces-config.xml
ファイルのルートXMLMenuModel
クラスに構成されているメニュー・モデルのマネージドBeanに設定します。
注意:
|
var
属性を、メニュー・モデルから必要なデータを取得するためにcommandNavigationItem
コンポーネントで使用するテキストに設定します。
実行時に階層が作成されて各ノードにスタンプが設定されると、EL式を使用して特定可能なvar
属性に現在のノードのデータがコピーされます。var
プロパティを使用して、このプロパティに使用する名前をEL式に指定します。
ヒント: ページまたはアプリケーションのすべての |
navigationPane
コンポーネントのnodeStamp
ファセットに、コンポーネント・パレットから「ナビゲーション・アイテム」をドラッグ・アンド・ドロップします。
(必要な情報が含まれるメタデータを持つ)メニュー・モデルを参照するEL式を使用して、対応する値がメタデータに保持される残りの属性に値を設定します。手順6で、値がメタデータで保持されている対応するitemNode
要素の名前とともに、親のnavigationPane
コンポーネントに設定したvar
属性の値を使用してこれらの値にアクセスします。表18-5に、対応する値がメタデータにあるナビゲーション・アイテムの属性を示します。
表18-5 ナビゲーション・アイテムの属性および関連付けられたメニュー・モデルの属性
ナビゲーション・アイテムの属性 | 関連付けられたメニュー・モデル要素の属性 |
---|---|
text |
label |
action |
doAction |
icon |
icon |
destination |
destination |
visible |
visible |
rendered |
rendered |
たとえば、親のnavigationPane
コンポーネントのvar
属性をmenuNode
に設定した場合、action
属性の値のEL式として#{menuNode.doAction}
コンポーネントを使用します。これは、各ノードのメタデータに設定されているactionプロパティに解決されます。例18-13に、HRの例のメニュー・モデルにバインドするためのJSFコードを示します。
例18-13 XMLモデルへのバインド
<af:form> <af:navigationPane hint="buttons" level="0" value="#{root_menu}" var="menuNode"> <f:facet name="nodeStamp"> <af:commandNavigationItem text="#{menuNode.label}" action="#{menuNode.doAction}" icon="#{menuNode.icon}" destination="#{menuNode.destination}"/> </f:facet> </af:navigationPane> <af:navigationPane hint="tabs" level="1" value="#{root_menu}" var="menuNode"> <f:facet name="nodeStamp"> <af:commandNavigationItem text="#{menuNode.label}" action="#{menuNode.doAction}" icon="#{menuNode.icon}" destination="#{menuNode.destination}"/> </f:facet> </af:navigationPane> <af:navigationPane hint="bar" level="2" value="#{root_menu}" var="menuNode"> <f:facet name="nodeStamp"> <af:commandNavigationItem text="#{menuNode.label}" action="#{menuNode.doAction}" icon="#{menuNode.icon}" destination="#{menuNode.destination}"/> </f:facet> </af:navigationPane> <af:navigationPane hint="list" level="3" value="#{root_menu}" var="menuNode"> <f:facet name="nodeStamp"> <af:commandNavigationItem text="#{menuNode.label}" action="#{menuNode.doAction}" icon="#{menuNode.icon}" destination="#{menuNode.destination}"/> </f:facet> </af:navigationPane> </af:form>
メニュー・モデルを使用したブレッドクラムの作成は、ページ階層の作成に似ています。commandNavigationItem
コンポーネントにスタンプを設定するnodeStamp
ファセットを含むbreadCrumbs
コンポーネントは、モデルのデータとともに使用します。
ブレッドクラムを作成する手順:
コンポーネント・パレットからJSFページにブレッド・クラム・コンポーネントをドラッグ・アンド・ドロップして、breadCrumbs
コンポーネントを作成します。
デフォルトでは、ブレッドクラム・リンクは水平に表示されます。レイアウトが垂直になるように変更するには、プロパティ・インスペクタで、「共通」セクションを開き、orientation
属性をvertical
に設定します。
プロパティ・インスペクタで、「データ」セクションを開きます。faces-config.xml
ファイルに構成されているように、value
属性をルート・メニュー・モデルのマネージドBeanに設定します。これが、navigationPane
コンポーネントがバインドされるのと同じBeanです。
注意:
|
var
属性を、メニュー・モデルから必要なデータを取得するためにcommandNavigationItem
コンポーネントで使用するテキストに設定します。
実行時に階層が作成されて各ノードにスタンプが設定されると、EL式を使用して特定可能なvar
属性に現在のノードのデータがコピーされます。var
プロパティを使用して、このプロパティに使用する名前をEL式に指定します。
ヒント: ページまたはアプリケーションの |
コンポーネント・パレットから「ナビゲーション・アイテム」をドラッグ・アンド・ドロップし、breadCrumbs
コンポーネントのnodeStamp
ファセットに、子としてcommandNavigationItem
コンポーネントを1つ追加します。
注意:
|
(必要な情報が含まれるメタデータを持つ)メニュー・モデルを参照するEL式を使用して、対応する値がメタデータに保持される残りの属性に値を設定します。手順4で、値がメタデータで保持されている対応するitemNode
要素の名前とともに、親のbreadCrumbs
コンポーネントに設定したvar
属性の値を使用してこれらの値にアクセスします。表18-5に、対応する値がメタデータにあるナビゲーション・アイテムの属性を示します。
たとえば、breadCrumbs
コンポーネントのvar属性をmenuNode
に設定した場合、action
属性の値のEL式として#{menuNode.doAction
コンポーネントを使用します。これは、各ノードのメタデータに設定されているactionプロパティに解決されます。
navigationPane
コンポーネントのvalue
属性は、XMLMenuModel
要素のマネージドBeanを参照します。そのマネージドBeanがリクエストされると、次の処理が実行されます。
faces-config.xml
ファイルのmanaged-property
要素に指定されているように、XMLMenuModel
クラスのsetSource()
メソッドが、モデルのメタデータの場所を使用してコールされます。
パーサー(SAXParser)が、メタデータへのInputStream
オブジェクトを使用できるようになります。ナビゲーション・アイテムのメタデータが解析され、MenuContentHandler
メソッドへのコールが実行されます。
MenuContentHandler
により、次のようにして、ナビゲーション・メニューのツリー構造がList
オブジェクトとして作成されます。
メタデータ内のノードの処理が開始される際に、startElement()
メソッドがコールされます。
ノードの処理の終了時に、endElement()
メソッドがコールされます。
各ノードが処理されると、メニュー・モデルのページ階層を構成するナビゲーション・メニュー・ノードのList
が作成されます。
ナビゲーション・メニュー・ノードのリストから、TreeModel
オブジェクトが作成されます。
TreeModel
オブジェクトからXMLMenuModel
オブジェクトが作成されます。
groupNode
要素のidref
属性に複数の子IDがある場合は、次の処理が実行されます。
IDはリストされている順序で処理されます。現在のIDで子ノードが検出されない場合は次のIDが使用され、これが繰り返されます。
idref
リストの現在のIDに一致する子ノードが検出されると、そのノードでは、rendered
属性がtrue
に設定されていること、disabled
属性がfalse
に設定されていること、readOnly
属性がfalse
に設定されていること、およびvisible
属性がtrue
に設定されていることが確認されます。条件のいずれかが一致しない場合は、idref
リストの次のIDが使用され、これが繰り返されます。
条件に一致する最初の子ノードは、アクション結果または宛先のURIの取得に使用されます。条件に一致する子ノードが検出されない場合は、エラーが記録されます。ただし、UIにはエラーは表示されません。
条件に一致する最初の子ノードが別のgroupNode
要素の場合、処理はその子に続行されます。処理は、action
またはdestination
属性を含むitemNode
要素が出現すると止まります。
itemNode
要素にaction
属性がある場合は、ユーザーの選択によりPOST
アクションが開始され、アクション結果を介してナビゲーションが実行されます。itemNode
要素にdestination
属性がある場合は、ユーザーの選択によりGET
アクションが開始され、destination
値を使用して直接ナビゲーションが実行されます。
XMLMenuModel
クラスには、ナビゲーション・メニュー・システムを使用してナビゲートすると、ナビゲーション・メニューの項目(タブやバーなど)が適切に強調表示および有効にされるモデルがあります。モデルはlabel
、doAction
、およびナビゲーション・アイテムの動的な生成に使用されるその他のプロパティの値でもインスタンス化されます。
XMLMenuModel
クラスではレンダリングは行われません。navigationPane
コンポーネントでは、コールからgetFocusRowKey()
メソッドへの戻り値を使用して、レベルのナビゲーション・メニュー・アイテムがページにレンダリングされます。
navigationPane
コンポーネントのnodeStamp
ファセットの中のcommandNavigationItem
コンポーネントは、各ナビゲーション・アイテムのラベル・テキストおよびアクション結果を提供します。nodeStamp
ファセットにスタンプが設定されるたびに、現在のナビゲーション・アイテムのデータが、ELに到達可能なプロパティにコピーされます。このプロパティの名前は、nodeStamp
ファセットを含むnavigationPane
コンポーネントのvar
属性によって定義されます。nodeStamp
は、ELに到達可能なプロパティから詳細なプロパティを取得して、各アイテムのデータを表示します。ナビゲーション・メニューがレンダリングを完了すると、このプロパティは削除されます(または元の値に戻されます)。ユーザーがナビゲーション・アイテムを選択すると、デフォルトのJSF actionListener
メカニズムで、アクション結果文字列または宛先URIを使用して、ページ・ナビゲーションを処理します。
XMLMenuModel
クラスは、nodeStamp
ファセットとともに、ナビゲーション・アイテムを選択済としてレンダリングするかどうかを制御します。前述のように、XMLMenuModel
オブジェクトは、各ノードのviewId
属性情報が含まれたツリー・モデルから作成されます。XMLMenuModel
クラスには、getFocusRowKey()
メソッドがあります。このメソッドは、フォーカスされているページを判別し、ノードがフォーカス・パスにあれば選択済として自動的にノードをレンダリングします。最も単純な形式のgetFocusRowKey()
メソッドは、次のような処理を実行します。
現在のviewId
属性が取得されます。
重複するviewId
値の解決に使用される内部マップのID、およびメニュー・モデルの作成時にツリーをトラバースすることにより作成されたviewIdFocusPathMap
オブジェクトのIDと、viewId
属性の値が比較されます。
現在のviewId
属性があるノードへのフォーカス・パスが返されるか、現在のviewId
属性値が検出されない場合にはnull
が返されます。
ノードのviewId
属性は、フォーカスrowKey
オブジェクトの特定に使用されます。モデルの各項目には、現在のrowKey
オブジェクトに基づいてスタンプが設定されます。ユーザーがナビゲートして現在のviewId
属性が変更されると、モデルのフォーカス・パスも変更されて、新しいナビゲーション・アイテムのセットがアクセスされます。
作成したカスタム属性を表示できるのはitemNode
要素のみです。itemNode
要素を追加してカスタム属性の値にアクセスできるようにするには、次のようにしてメニュー・モデルからツリーを取得する必要があります。
メニュー・モデルのgetWrappedData()
メソッドをコールします。
getFocusRowKey()
メソッドをコールして、現在のフォーカス・パスを取得します。
このフォーカス・パスを使用してツリーをトラバースし、フォーカス・パスのノードのリストを返します。
getCustomProperty()
APIをコールし、カスタム属性に関してこれらのノードを1つ以上テストします。
例18-15に、必要なコードの例を示します。
例18-15 XMLMenuModelからのカスタム属性へのアクセス
/** * Returns the nodes corresponding to a focus path * * @param tree * @param focusPath */ public List getNodesFromFocusPath(TreeModel tree, ArrayList focusPath) { if (focusPath == null || focusPath.size() == 0) return null; // Clone the focusPath cause we remove elements ArrayList fp = (ArrayList) focusPath.clone(); // List of nodes to return List nodeList = new ArrayList<Object>(fp.size()); // Convert String rowkey to int and point to the // node (row) corresponding to this index int targetNodeIdx = Integer.parseInt((String)fp.get(0)); tree.setRowIndex(targetNodeIdx); // Get the node Object node = tree.getRowData() // put the Node in the List nodeList.add(node); // Remove the 0th rowkey from the focus path // leaving the remaining focus path fp.remove(0); // traverse into children if ( fp.size() > 0 && tree.isContainer() && !tree.isContainerEmpty() ) { tree.enterContainer(); // get list of nodes in remaining focusPath List childList = getNodesFromFocusPath(tree, fp); // Add this list to the nodeList nodeList.addAll(childList); tree.exitContainer(); } return nodeList; } public String getElementLabel(XMLMenuModel model, Object myVal, String myProp) { TreeModel tree = model.getWrappedData(); Object node = findNodeByPropertyValue(tree, myVal, myProp); FacesContext context = FacesContext.getCurrentInstance(); PropertyResolver resolver = context.getApplication().getPropertyResolver(); String label = (String) resolver.getValue(node, _LABEL_ATTR); return label; } public Object findNodeByPropertyValue(TreeModel tree, Object myVal, String myProp) { FacesContext context = FacesContext.getCurrentInstance(); PropertyResolver resolver = context.getApplication().getPropertyResolver(); for ( int i = 0; i < tree.getRowCount(); i++) { tree.setRowIndex(i); // Get a node Object node = tree.getRowData(); // Get the value of the attribute of the node Obect propVal = resolver.getValue(node, myProp); if (propVal == myVal) { return node; } if (tree.isContainer() && !tree.isContainerEmpty()) { tree.enterContainer(); node = findNodeByPropertyValue(tree, myVal, myProp); if (node != null) return node; tree.exitContainer(); }guap } return null; }
図18-10および図18-11に、navigationPane
コンポーネントおよび個々のcommandNavigationItem
コンポーネントを使用して、図18-4に示すページ階層のビューを作成した場合に、ユーザー・インタフェースがどのように表示されるかの例を示します。
手動で階層を作成する場合には、各ページのフォーカス・パス(ページが存在する階層内の正確な場所)を確認し、各ページに必要なnavigationPanes
とcommandNavigationItem
コンポーネントの正確な数、ならびにユーザーがページを表示した際に各コンポーネントを選択済として構成する必要があるかどうかを決定する必要があります。たとえば、Employee Dataページが表示されている図18-10では、必要なものはEmployee Dataの子のバーのみで、Employee Dataタブは選択済としてレンダリングされています。
Healthページを表示している図18-11でも同様に、Benefitsでは子のバーのみが必要であり、Benefitsタブを選択済として構成する必要があります。このページではさらに、Insuranceの下に子ノードを作成します。これは、ページの横に垂直のリストとして表示されます。ページのコンテンツが中央に(垂直のリストの右側)に表示されます。
使用するナビゲーション・アイテムのタイプ(タブやバーなど)に関係なく、各navigationPane
コンポーネント内の一連のcommandNavigationItem
子コンポーネントにより、実際のナビゲーション・アイテムが提供されます。たとえば、図18-11では、Employee Dataタブへの実際のリンク、InsuranceとPaid Time Offバー、およびリストのHealthとDentalリンクは、それぞれcommandNavigationItem
コンポーネントによって表されています。
ナビゲーション階層に含まれるページ数が少なく、階層があまり深くない場合は、手動で作成することを選択できます。これには、ナビゲーション・メタデータの作成、navigationPane
コンポーネントを使用した階層の作成、およびcommandNavigationItem
コンポーネントを使用したリンクの作成が含まれます。
手動でナビゲーション階層を作成する手順:
ページ階層のすべてのノード(ページ)のナビゲーション・ケースが含まれるグローバルなJSFナビゲーション・ルールを1つ作成します。
たとえば、図18-4に示されているページ階層には、グローバルのHelpノードを含む10のノードがあります。この場合、例18-16に示すように、faces-config.xml
ファイルの1つのグローバル・ナビゲーション・ルール内に10のナビゲーション・ケースを作成します。
各ナビゲーション・ケースに、一意の結果文字列と、指定された文字列に一致する結果値がナビゲーション・システムによって返された場合に表示するJSFページへのパスを指定します。
例18-16 faces-config.xml内のページ階層のグローバル・ナビゲーション・ルール
<navigation-rule> <navigation-case> <from-outcome>goHome</from-outcome> <to-view-id>/home.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHelp</from-outcome> <to-view-id>/globalhelp.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goEmp</from-outcome> <to-view-id>/empdata.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goBene</from-outcome> <to-view-id>/benefits.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goIns</from-outcome> <to-view-id>/insurance.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goPto</from-outcome> <to-view-id>/pto.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goView</from-outcome> <to-view-id>/viewdata.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goCreate</from-outcome> <to-view-id>/createemp.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHealth</from-outcome> <to-view-id>/health.jspx</to-view-id> </navigation-case> <navigation-case> <from-outcome>goDental</from-outcome> <to-view-id>/dental.jspx</to-view-id> </navigation-case> </navigation-rule>
JDeveloperにおけるナビゲーション・ケースの作成方法の詳細は、2.3項「ページ・フローの定義」を参照してください。
メニュー・タブのスタイルを設定する場合は、コンポーネント・パレットのレイアウト・セクションから装飾ボックスをJSFページにドラッグ・アンド・ドロップして、decorativeBox
コンポーネントを作成します。テーマを設定して、タブの表示方法を決定します。有効な値は次のとおりです。
default
: 本体は白で、枠は青です。左上隅は丸くなります。
light
: 本体は薄い青です。左上隅は丸くなります。
medium
: 本体は中間色の青です。左上隅は丸くなります。
dark
: 本体は濃い青です。左上隅は丸くなります。
テーマの表示方法は変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
コンポーネント・パレットのレイアウト・セクションからナビゲーション・ペインをdecorativeBox
コンポーネントの子としてドラッグ・アンド・ドロップして、navigationPane
コンポーネントを作成します。階層の各レベルにnavigationPane
コンポーネントを追加します。
たとえば、図18-11のようなHealthページを作成するには、4つのnavigationPane
コンポーネントをドラッグ・アンド・ドロップします。Healthページでは、すでにページのルック・アンド・フィールを作成するためのレイアウト・コンポーネントが含まれているテンプレートの特定の領域に、コンポーネントをドロップします。
プロパティ・インスペクタで「共通」セクションを開き、各navigationPane
コンポーネントのhint
属性を次に示すナビゲーション・アイテムのいずれかのタイプに設定して、navigationPane
コンポーネントをどのように表示するかを決定します。
bar: バーで分割されたナビゲーション・アイテムを表示します。図18-11のInsuranceおよびPaid Time Offリンクなどがこれに当たります。
buttons: グローバル領域のバーで分割されたナビゲーション・アイテムを表示します。図18-11のHomeおよび「ヘルプ」リンクなどがこれに当たります。
choice: 関連付けられたドロップダウン・アイコンがクリックされたときに、ポップアップ・リストにナビゲーション・アイテムを表示します。navigationPane
コンポーネントのicon
属性に値を含める必要があります。これにより、title
属性を使用して、ラベルをドロップダウン・リストを関連付けることができます。
list: ナビゲーション・アイテムを箇条書きリストで表示します。図18-11のHealthおよびDentalリンクなどがこれに当たります。
tabs: ナビゲーション・アイテムをタブで表示します。図18-11のBenefitsおよびEmployee Dataタブなどがこれに当たります。
コンポーネント・パレットの「共通コンポーネント」セクションから「ナビゲーション・アイテム」をドラッグ・アンド・ドロップし、異なるリンクを表示するために必要なcommandNavigationItem
コンポーネントを、各navigtaionPane
コンポーネントに追加します。必要な各リンクのnavigationPane
コンポーネントの子として、「ナビゲーション・アイテム」をドロップします。
たとえば、図18-11のようなHealthページを作成するには、各navigationPane
コンポーネントに2つずつ、合計6つのcommandNavigationItem
コンポーネントを使用します。
パフォーマンスのヒント: 実行時、使用可能なブラウザの領域が、ナビゲーション・ペインのタブやバーのコンテンツ、またはブレッドクラムのコンテンツの表示に必要な領域より少ない場合、表示されていない項目をユーザーが選択して表示できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。 |
各commandNavigationItem
コンポーネントで、ナビゲーションを必要なページに設定します。プロパティ・インスペクタで、「共通」セクションを開き、アクションの静的な結果文字列を指定するか、EL式を使用し、action
プロパティを介してアクション・メソッドを参照します。文字列を使用する場合は、手順1で作成したページのナビゲーション・ルールに設定されたナビゲーション・メタデータに一致する必要があります。メソッドを参照する場合は、必要な文字列がそのメソッドにより返される必要があります。
プロパティ・インスペクタで、「動作」セクションを開いてselected
属性を設定します。ページが最初にレンダリングされれたときに、commandNavigationItem
コンポーネントを選択済として表示するには、この属性をtrue
にします。表示しない場合は、false
にします。
実行時に、ユーザーがナビゲーション・アイテムを選択すると、コンポーネントのselected
属性が選択済に変更され、ユーザーに、アイテムが選択済であることを示すために、表示が変更されます。たとえば、図18-11で、Benefitsタブ、Insuranceバー、Healthリスト・アイテムが、背景の色またはフォント・スタイルのいずれかの変更によって、選択済として表示されます。選択済ステータスを示すコードを記述する必要はありません。この属性値がtrue
になると、このアイテムに対する、commandNavigationItem
コンポーネントのselected
属性によって、選択済ステータスが有効になります。
図18-17に、現在のページがHealthの場合に使用可能なナビゲーション・アイテムの生成に使用されるコードを示します。HealthページはBenefitsページを経由してInsuranceページからアクセスされているため、これらの3つのリンクのcommandNavigationItem
コンポーネントではselected="true"
です。
例18-17 1つのページに個々のナビゲーション・アイテムを使用したサンプル・コード
<af:navigationPane hint="buttons"> <af:commandNavigationItem text="Home" action="goHome"/> <af:commandNavigationItem text="Help" action="goHelp"/> </af:navigationPane> . . . <af:navigationPane hint="tabs"> <af:commandNavigationItem text="Benefits" action="goBene" selected="true"/> <af:commandNavigationItem text="Employee Data" action="goEmp"/> </af:navigationPane> . . . <af:navigationPane hint="bar"> <af:commandNavigationItem text="Insurance" action="goIns" selected="true"/> <af:commandNavigationItem text="Paid Time Off" action="goPto"/> </af:navigationPane> . . . <af:navigationPane hint="list"> <af:commandNavigationItem text="Health" action="goHealth" selected="true"/> <af:commandNavigationItem text="Dental" action="goDental"/> </af:navigationPane>
図18-10および図18-11の両方で、ページ階層におけるユーザーの現在の位置は、現在のページからルート・ページに戻るリンクのパスで示されています。ブレッドクラムとも呼ばれるリンクのパスは、2番目のバーの下、垂直のリスト(存在する場合)の上に表示されます。そのようなリンクのパスを作成するには、一連のcommandNavigationItem
コンポーネントを子として含むbreadCrumbs
コンポーネントを使用します。
ブレッドクラムを作成する手順:
コンポーネント・パレットからJSFページにブレッド・クラム・コンポーネントをドラッグ・アンド・ドロップして、breadCrumbs
コンポーネントを作成します。
デフォルトでは、ブレッドクラム・リンクは水平に表示されます。レイアウトが垂直になるように変更するには、プロパティ・インスペクタで、「共通」セクションを開き、orientation
属性をvertical
に設定します。
ブレッドクラムの各リンクに、コンポーネント・パレットからbreadCrumbs
コンポーネントの子として「ナビゲーション・アイテム」をドラッグ・アンド・ドロップし、commandNavigationItem
コンポーネントを作成します。最後の項目が現在のページを表します。
ヒント: レンダラまたはクライアントのデバイス・タイプによっては、ブレッドクラムの最後のリンクが表示されない場合がありますが、 |
各commandNavigationItem
コンポーネント(最後を除く)で、ナビゲーションを必要なページに設定します。プロパティ・インスペクタで、「共通」セクションを開き、アクションの静的な結果文字列を指定するか、EL式を使用し、action
プロパティを介してアクション・メソッドを参照します。文字列を使用する場合は、手順1で作成したページのナビゲーション・ルールに設定されたナビゲーション・メタデータに一致する必要があります。メソッドを参照する場合は、必要な文字列がそのメソッドにより返される必要があります。
たとえば、図18-11のHealthページのようにブレッドクラムを作成するには、例18-18に示すように、4つのnavigationPane
コンポーネントをドラッグ・アンド・ドロップします。
例18-18 個々の子commandNavigationItemのあるbreadCrumbsコンポーネント
<af:breadCrumbs> <af:commandNavigationItem text="Home" action="goHome"/> <af:commandNavigationItem text="Benefits" action="goBene"/> <af:commandNavigationItem text="Insurance" action="goIns"/> <af:commandNavigationItem text="Health"/> </af:breadCrumbs>
注意: 同様に、個々の |
個々のタブを閉じられるように、hint
属性の値がtabs
であるnavigationPane
コンポーネントを構成できます。このコンポーネントは、すべてのタブを閉じる、最後のタブを除いてすべて閉じる、またはタブを閉じないように設定できます。ナビゲーション・タブが削除されるように構成された場合、マウス・カーソルがタブの上に置かれると、「閉じる」アイコン(たとえば、Xなど)が各タブの端に表示されます。
hint="tabs"
を設定した場合にnavigationPane
コンポーネントでタブの削除を有効にするには、次の手順を実行する必要があります。
navigationPane hint="tabs"
のitemRemoval
属性をall
またはallExceptLast
に設定します。allExceptLast
に設定すると、1つのタブ以外すべてのタブを閉じることができます。これは、ユーザーがタブを閉じると、タブが1つしか残っていない場合は、その最後のタブは閉じることができません。
タブの削除を実行するハンドラを実装します。ユーザーがタブを閉じると、タイプremove
のItemEvent
が起動されます。コードでは、このイベント、タブの削除および他の必要な機能(たとえば、警告ダイアログの表示や子コンポーネントの処理など)を処理する必要があります。イベントの詳細は、第5章「イベントの処理」を参照してください。ポップアップ・ダイアログおよびウィンドウの使用の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
commandNavigationItem
コンポーネントのitemListener
属性をEL式に設定します。この式は、例18-19に示すように、実際のタブの削除を処理するハンドラ・メソッドに解決されます。
例18-19 タブ・アイテムを削除するためにitemListenerを使用
JSF Page Code -----> <af:navigationPane hint="tabs" itemRemoval="all"> <af:commandNavigationItem text="Benefits" partialSubmit="true" itemListener="#{closebean.handleCloseTabItem}"/> . . . </af:navigationPane> Managed Bean Code -----> import oracle.adf.view.rich.event.ItemEvent; ... public void handleCloseTabItem(ItemEvent itemEvent) { if (itemEvent.getType().equals(ItemEvent.Type.remove)) { Object item = itemEvent.getSource(); if (item instanceof RichCommandNavigationItem) { RichCommandNavigationItem tabItem = (RichCommandNavigationItem) item; tabItem.setVisible(false); // do other desired functionality here ... } } }
navigationPane
コンポーネントによってレンダリングされたナビゲーション・タブが圧縮レイアウトのアプリケーション・ウィンドウに表示される場合は、組込みのオーバーフロー・インジケータが表示されます。これは、アプリケーション・ウィンドウにすべてのナビゲーション・タブを表示するだけの十分な幅がないということです。図18-12に示すように、ユーザーは、このようなオーバーフロー・インジケータによってレンダリングされたドロップダウン・リストで、移動先のナビゲーション・アイテムを選択できます。
オーバーフロー・インジケータを表示(デフォルトの動作)するかわりに、図18-12に示すように、navigationPane
コンポーネントの-tr-layout-type
スキニング・キーを構成して、ユーザーが左右にスクロールして現在非表示になっているタブを表示できるコンベア・ベルトをコンポーネントでレンダリングするようにできます。また、-tr-layout-type
スキニング・キーを構成すると、図18-13に示すように、すべてのナビゲーション・タブが1つのドロップダウン・リストにレンダリングされます。この構成は、navigationPane
コンポーネントのhint
属性がtabs
に設定されている場合にのみ有効です。navigationPane
コンポーネントのhint
属性が別の値に設定されている場合は、-tr-layout-type
スキニング・キーをデフォルト値(overflow
)に設定してください。
例18-20に、アプリケーションのADFスキン・ファイルの-tr-layout-type
スキニング・キーを構成して、navigationPane
およびpanelTabbed
コンポーネントにコンベア・ベルトをレンダリングする方法を示します。スキニングの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
例18-20 -tr-layout-typeスキニング・キーの構成によるコンベア・ベルトのレンダリング
af|panelTabbed, af|navigationPane { -tr-layout-type: conveyor; }
図18-13に、圧縮レイアウトでコンベア・ベルトをレンダリングするnavigationPane
コンポーネントを示します。
注意: アプリケーションにFusionテクノロジ・スタックまたはADFコントローラが使用されている場合は、ADFタスク・フローを使用して、アプリケーションのページ階層にナビゲーション・システムを作成します。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「トレインの作成」を参照してください。 |
ユーザーが特定の順序で表示する必要のある一連のページがある場合は、各ページにtrain
コンポーネントを使用して、マルチステップ・プロセスをガイドする一連のナビゲーション・アイテムを表示することを検討してください。図18-14に、レンダリングされたtrain
コンポーネントがページでどのように表示されるかの例を示します。trainはマルチステップ・プロセスのステップ数を表示するだけでなく、プロセス全体との関連における現在のステップの位置も示します。
train
コンポーネントにより、トレイン・ストップとして表示される構成済の各ステップがレンダリングされます。すべてのストップは線で結ばれています。各トレイン・ストップには下にラベルのあるイメージ(四角いブロックなど)があります。
各トレイン・ストップは、マルチステップ・プロセスの1つのステップまたは1つのページに対応します。ユーザーは、イメージやラベルをクリックして、トレイン・ストップをナビゲートします。これによって、新しいページが表示されます。通常、トレイン・ストップは順に表示する必要があります。すなわち、ユーザーは、ステップ1から開始して、ステップ2、ステップ3へと移動する必要があり、ステップ2に移動していない場合は、ステップ3に移動できません。
図18-14に示すように、train
コンポーネントは、トレイン・ストップに少なくとも4つのスタイルを提供します。ユーザーが表示している現在のストップは、トレイン・ストップのラベルでは太字のフォント・スタイルで示され、そのストップに異なるイメージが使用されます。現在のストップの前に表示したストップは、異なるラベルのフォント色とイメージ色で示されます。現在のストップのすぐ後に表示される次のストップは表示が有効になり、まだ表示されていない他のストップはグレー表示になっています。
トレイン・ストップはサブトレインを含むことができます。すなわち、コマンド・コンポーネント(たとえば、commandButton
コンポーネントなど)を構成して、親ストップから子のマルチステップ・プロセスを開始し、サブプロセスの終了後、適切な親ストップに戻ります。4番目のストップに3つのストップを含むサブプロセス・トレインがあるとします。ユーザーがサブプロセス・トレインの最初のストップに移動すると、図18-15に示すように、ADF Facesにより、サブプロセス・トレインの前後に親トレインを表すアイコンが表示されます。
train
コンポーネントにtrainButtonBar
コンポーネントを使用して、図18-16に示すように、「戻る」および「次へ」ボタンという形で、trainに追加のナビゲーション・アイテムを指定できます。これらの「戻る」および「次へ」ボタンを使用した場合、ユーザーは現在のストップから前後のトレイン・ストップにのみナビゲートできます。trainButtonBar
コンポーネントは、train
コンポーネントなしでも使用できます。たとえば、表示されないストップがある場合、いくつかの条件付きロジックに基づいて、ストップを表示せずに「戻る」および「次へ」ボタンのみを表示することが必要な場合があります。
どちらのtrainコンポーネントも、value
属性をタイプorg.apache.myfaces.trinidad.model.MenuModel
のトレイン・モデルにバインドすることで機能します。トレイン・メニュー・モデルには、次の処理に必要な情報が含まれています。
特定のトレイン動作の制御(トレインによりユーザーがどのようにトレイン・ストップを前進してマルチステップ・プロセスを完了するか)
トレイン・ストップ・ラベルを含むトレイン・ストップおよび各ストップのステータスの動的な生成(現在ストップは選択、完了、未完了または無効のいずれの状態であるか)
注意: ADFモデル・レイヤーおよびADFコントローラを使用しているアプリケーションでは、このナビゲーションおよび表示は異なる方法で設定および処理されています。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「トレインの作成」を参照してください。 |
つまり、トレインのメニュー・モデルは、続いてTreeModel
クラスを拡張するMenuModel
抽象クラスを拡張することで実装されます(詳細は、第10章「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照)。MenuModel
オブジェクトは、ページやアプリケーションのメニュー構造を表すことも、ページの階層やフローに含まれるストップを表すこともあります。
MenuModel
クラスのインスタンスは特別な種類のTreeModel
オブジェクトなので、TreeModel
オブジェクトのノードはトレインのストップを表すことができます。trainコンポーネント内でトレイン・ストップを表すノード・インスタンスはTrainStopModel
タイプにすることができます。また、TrainStopModel
オブジェクトと同じEL構造を提供するかぎり、任意のオブジェクトにすることもできます。ただし、TrainStopModel
クラスでは、ストップのラベルやimmediate
、disabled
およびvisited
属性の状態だけでなく、結果を取得するメソッドも公開されます。
MenuModel
クラスは、ツリーのどの部分で現在のトレイン・ストップ(ページ)がフォーカスされているかを示すこともできます。MenuModel
クラスのgetFocusRowKey()
メソッドは、現在のviewId
のフォーカス・ページのrowKey
オブジェクトを返します。トレインのメニュー・モデル実装には、org.apache.myfaces.trinidad.model.ProcessMenuModel
クラスを拡張することで作成できる固有のトレイン動作も必要です。トレイン動作は、現在のトレイン・ストップを表示している間に、ユーザーがトレインのどのストップを表示できるかを制御します。
トレイン・ストップ・モデルを作成するには、TrainStopModel
抽象クラスを拡張して抽象メソッドを実装するか、同じメソッド・シグネチャを使用して独自のクラスを作成することができます。作成するクラスではrowData
オブジェクトを返す必要があります。
トレイン・メニュー・モデルへのtrainコンポーネントのバインドは、XMLMenuModel
クラスへのnavigationPane
コンポーネントのバインドに似ています(詳細は、18.6.3項「JSFページでのXMLMenuModelへのバインド方法」で説明されています)。ただし、TrainStopModel
の実装でrowData
オブジェクトが戻される場合は、各ストップにcommandNavigationItem
コンポーネントを提供する必要はありません。ADF Facesにより、実行時にnodeStamp
ファセットおよびcommandNavigationItem
コンポーネントが動的に作成され、トレイン・ストップ・モデルのメソッドがcommandNavigationItem
コンポーネントの適切なプロパティに自動的にバインドされます。例18-21に、トレインの簡略化されたバインディングを示します。
ヒント: 様々な場所のトレイン・ストップの情報を照合する必要がある場合は、nodeStampファセットおよびそれらのトレイン・ストップを表す個々の |
トレイン・モデルのMenuModel
実装には、特定のトレイン動作が必要です。トレイン動作は、現在表示されているページに基づいてユーザーがアクセスできるページをどのように制御するかを定義します。ADF Facesでは、Plus OneおよびMax Visitedという2つのトレイン動作がサポートされています。
トレインに5つのページまたは5つのストップがあり、ユーザーはページ1からページ4まで順番にナビゲート済であるとします。ページ4でユーザーはページ2に戻ります。ここでは、トレイン・モデルで使用されているトレイン動作に応じて、ユーザーは次に進むことができます。
Max Visitedでは、ユーザーは現在のページ2からページ1に戻ることも、ページ3に進むことも、ページ4に移動することもできます。つまり、Max Visitedを使用すると、ユーザーは前のページに戻ることも、すでに表示した最も先のページまで進むこともできます。ページ5はまだ表示されていないため、ユーザーはページ2からページ5に移動することはできません。
同じ状況で、Plus One動作の場合には、ユーザーはページ3に進むかページ1に戻ることしかできません。つまり、Plus Oneを使用すると、ユーザーは前のページに戻るか、現在のストップの1つ先のストップに進むことができます。ページ4がすでに表示されている場合でも、ユーザーはページ4に移動することはできません。
マルチステップ・プロセスのすべてのページにトレインを定義および使用する手順:
トレインにJSFナビゲーション・ルールおよびナビゲーション・ケースを作成します。トレインのナビゲーション・ルールおよびナビゲーション・ケースの作成方法は、単純なページ階層の作成方法と同様です。ここで、トレインのすべてのトレイン・ストップに対してナビゲーション・ケースを含むグローバル・ナビゲーション・ルールを1つ作成します。
注意: 各トレイン・ストップが個々のページであり、クライアントのブラウザのURLがそれぞれの新しいページを参照する場合、JSFナビゲーション・ルール内で定義する各ナビゲーション・ケースに対して、 |
特定のトレイン動作を実装するトレイン・モデルを作成し、スタンプを設定するためのトレイン・ストップ項目を指定します。これには、トレイン・ストップ・モデル・クラスおよびメニュー・モデル・クラスの作成が含まれます。詳細は、18.8.1項「トレイン・モデルの作成方法」を参照してください。
トレイン・モデルにマネージドBeanを構成します。詳細は、18.8.2項「トレイン・モデルへのマネージドBeanの構成方法」を参照してください。
各トレイン・ストップにJSFページを作成します。
各ページで、トレイン・モデルにtrain
コンポーネントをバインドします。18.8.3項「JSFページでのトレイン・モデルへのバインド方法」を参照してください。レインに追加のナビゲーション・ボタンを指定する場合は、オプションで、同じトレイン・モデルにtrainButtonBar
コンポーネントをバインドします。
トレイン・メニュー・モデルを定義するには、次のものを作成します。
トレイン・ストップをレンダリングするためのデータを提供するトレイン・ストップ・モデル
特に、現在のトレイン・ストップを表示している間にユーザーがトレインのどのストップを表示できるか、どのストップを無効にする必要があるか、またはトレインを順番にナビゲートする必要があるかを制御する特定のトレイン動作(Max VisitedまたはPlus One)が指定されたMenuModel
実装
ADF Facesを使用すると、次のような追加のpublicクラスが用意されているため、トレイン・メニュー・モデルの定義がより簡単になります。
トレイン・ストップ・モデルを実装するための抽象クラスTrainStopModel
トレイン・モデルのトレイン動作を実装するためのクラスProcessMenuModel
およびProcessUtils
トレイン・モデル・クラスの例として、ADF Facesデモ・アプリケーションのoracle.adfdemo.view.nav.rich
パッケージを参照してください。
トレイン・モデルを作成する手順:
トレイン・ストップ・モデル・クラスを作成します。トレイン・ストップ・モデル・オブジェクトには、各トレイン・ストップにスタンプを設定するための行データが保持されます。作成するトレイン・ストップ・モデル実装では、トレインの各ストップのプロパティを設定および取得し、トレイン・ストップのレンダリングに必要なメソッドを定義する必要があります。トレイン・ストップのプロパティは、commandNavigationItem
コンポーネントのプロパティに対応します。このため、例18-21に示すように、簡略化されたバインディングを使用できます。
または、抽象クラスTrainStopModel
を拡張して、サブクラスの抽象メソッドを実装できます。
ELにより自動的にバインドされるcommandNavigationItem
コンポーネントのプロパティを次に示します。
action
: 静的なアクション結果、またはアクション結果を返すアクション・メソッドへの参照。結果は、JSFのデフォルトのActionListener
メカニズムを介して、ページ・ナビゲーションに使用されます。
disabled
: トレイン・ストップが非対話型である必要があるかどうかを示すブール値。使用するトレイン動作が、このプロパティ値に影響することに注意してください。詳細は、手順2を参照してください。
immediate
: データ検証を実行する必要があるかどうかを決定するブール値。使用するトレイン動作が、このプロパティ値に影響することに注意してください。詳細は、手順2を参照してください。
messageType
: トレイン・ストップ・イメージ上のメッセージ・アラート・アイコンを指定する値。使用可能な値は、none
、error
、warning
、info
およびcomplete
です。メッセージの詳細は、第17章「ヒント、メッセージおよびヘルプの表示」を参照してください。
shortDesc
: クライアント・ユーザー・エージェントにより、トレイン・ストップのツールチップ・ヘルプ・テキストの表示に一般的に使用される値。
showRequired
: 必要な値がそのトレイン・ストップ・ページに含まれていることを示すために、トレイン・ストップの隣にアスタリスクを表示するかどうかを決定するブール値。
textAndAccessKey
: トレイン・ストップに表示するラベル・テキストと、使用するアクセス・キーの両方を設定する単一の値。
visited
: トレイン・ストップがすでに表示済であるかどうかを示すブール値。使用するトレイン動作が、このプロパティ値に影響することに注意してください。詳細は、手順2を参照してください。
MenuModel
クラスに基づいてクラスを作成し、トレイン・モデルの構成を簡略化します。
トレイン・モデルのMenuModel
実装には、特定のトレイン動作が必要です。org.apache.myfaces.trinidad.model
パッケージのProcessMenuModel
クラスは、Plus OneおよびMax Visitedという2つのトレイン動作をサポートするMenuModel
クラスの参照実装です。トレイン・モデルにトレイン動作を実装するには、ProcessMenuModel
クラスを拡張するか独自のクラスを作成できます。
トレイン・モデル・クラスで、getFocusRowKey()
メソッド(MenuModel
クラスを参照)をオーバーライドし、トレイン動作(ProcessMenuModel
クラスおよびProcessUtils
クラスを参照)を実装します。
ProcessMenuModel
クラスに指定されているトレイン動作は、commandNavigationItem
コンポーネントのvisited
、immediate
、およびdisabled
プロパティに影響があります。
visited
属性をtrue
に設定するのは、トレインのそのページが表示済の場合のみです。ProcessMenuModel
クラスでは、visited
属性の値の決定に次のロジックが使用されます。
Max Visited: max visitedストップは、現在のセッションでユーザーが表示した最も先のストップです。max visitedストップの前にあるか、max visitedストップ自体である場合、visited
はすべてのストップに対してtrue
に設定されます。
Plus One: plus oneストップは、表示した最も先のストップを追跡しません。現在のストップ、または現在のストップの前のストップでは、visited
属性がtrue
に設定されます。
現在のページのデータを検証する必要がない場合は、immediate
属性をtrue
に設定する必要があります。前述のPlus One動作のページ4に、検証が必要なデータがあるとします。ページ4に進んでページ2に戻った場合、ページ5に進むためにユーザーは後からページ4に戻る必要があります。これは、ページ4からページ1、2または3に戻る場合はページ4のデータを検証する必要はないが、ページ5に進む場合にはデータを検証する必要があることを意味します。immediate
属性がどのように機能するかの詳細は、4.2項「immediate属性の使用」を参照してください。
ProcessMenuModel
クラスでは、immediate
属性の値の決定に次のロジックが使用されます。
Plus One: immediate
属性は、前のステップに対してはtrue
に設定され、それ以外に対してはfalse
に設定されます。
Max Visited: 現在のページと、表示した最大ページが同じである場合、動作はPlus Oneシナリオと同じです。現在のページが表示された最大ページよりも前にある場合、immediate
属性はfalse
に設定されます。
注意: ADFモデル・レイヤーを使用するアプリケーションでは、ページ定義ファイルの |
disabled
属性をtrue
に設定するのは、現在のページからそのページに移動できない場合のみです。ProcessMenuModel
クラスでは、disabled
属性の値の決定に次のロジックが使用されます。
Plus One: 次に使用可能なページより先のページでは、disabled
属性がtrue
になります。
Max Visited: 現在のストップと、表示した最大ページが同じである場合、動作はPlus One動作と同じです。現在のページが表示された最大ページよりも前にある場合、表示された最大ページより先のページではdisabled
がtrue
に設定されます。
ADF Facesでは、トレイン・モデルにnull以外のmaxPathKey
値が渡されると、動作をサポートするために作成するマネージドBeanで決定されているとおりに、デフォルトで、Max Visited動作が使用されます(詳細は、18.8.2項「トレイン・モデルへのマネージドBeanの構成方法」を参照してください)。maxPathKey
値がnull
の場合には、Plus One動作が使用されます。
トレイン・モデルのマネージドBeanを使用して、個々のトレイン・ストップをArraylist
オブジェクトにまとめます。これは、トレイン・モデルを作成するためにメニュー・モデルに組み込まれるツリー・モデルになります。モデルに組み込むために適切な値を含むBeanをインスタンス化し、トレインの各トレイン・ストップまたはページにマネージドBeanを構成する必要があります。
トレイン・モデルにマネージドBeanを構成する手順:
インストール時に設定する必要のあるプロパティ値が含まれるマネージドBeanをトレインの各ストップに構成し、ArrayList
に渡すトレイン・ストップを作成します。
トレイン・ストップに子のサブプロセス・トレインがある場合は、各サブプロセス・トレイン・ストップにもマネージドBeanが必要です。
各Beanは、18.8.1項「トレイン・モデルの作成方法」で作成したトレイン・ストップ・モデル・クラスのインスタンスである必要があります。例18-22に、faces-config.xml
ファイルのトレイン・ストップのサンプルのマネージドBeanコードを示します。
例18-22 すべてのトレイン・ストップのマネージドBean
<!-- First train stop --> <managed-bean> <managed-bean-name>train1</managed-bean-name> <managed-bean-class>project1.DemoTrainStopModel</managed-bean-class> <managed-bean-scope>none</managed-bean-scope> <managed-property> <property-name>viewId</property-name> <value>/train.jspx</value> </managed-property> <managed-property> <property-name>outcome</property-name> <value>guide.train</value> </managed-property> <managed-property> <property-name>label</property-name> <value>First Step</value> </managed-property> <managed-property> <property-name>model</property-name> <value>trainMenuModel</value> </managed-property> </managed-bean> <!-- Second train stop --> <managed-bean> <managed-bean-name>train2</managed-bean-name> <managed-bean-class>project1.DemoTrainStopModel</managed-bean-class> <managed-bean-scope>none</managed-bean-scope> <managed-property> <property-name>viewId</property-name> <value>/train2.jspx</value> </managed-property> <managed-property> <property-name>outcome</property-name> <value>guide.train2</value> </managed-property> <managed-property> <property-name>label</property-name> <value>Second Step</value> </managed-property> <managed-property> <property-name>model</property-name> <value>trainMenuModel</value> </managed-property> </managed-bean> <!-- And so on --> . . .
マネージド・プロパティにより、トレイン・ストップ・モデル・オブジェクト(18.8.1項「トレイン・モデルの作成方法」の手順1で作成されたクラス)に値が設定されます。
viewId
値は、ユーザーがトレイン・ストップをクリックした場合にナビゲートされるページへのパスおよびファイル名です。
outcome
プロパティ値は、JSFナビゲーション・ケースに一致するアクション結果文字列です。デフォルトのJSF ActionListener
メカニズムは、トレイン・ストップが選択された際のナビゲート先のビューとしてトレイン・ストップに関連付けられたページの選択に使用されます。
label
プロパティ値は、トレイン・ストップ・イメージの下に表示されるトレイン・ストップのラベル・テキストです。値は静的にすることも、リソース・バンドルの文字列に評価されるEL式にすることもできます。
model
プロパティ値は、トレイン・モデルのマネージドBean名です(例18-26を参照)。
トレイン・ストップに子のサブプロセス・トレインがある場合には、例18-23に示すように、マネージドBean構成にも、値式(#{train4a}
など)でサブプロセス・トレイン・ストップのマネージドBean名をリストするプロパティ(children
など)を指定する必要があります。
例18-23 子のサブプロセス・トレインを含むトレイン・ストップのマネージドBean
<managed-bean> <managed-bean-name>train4</managed-bean-name> <managed-bean-class>project1.DemoTrainStopModel</managed-bean-class> <managed-bean-scope>none</managed-bean-scope> <managed-property> <property-name>viewId</property-name> <value>/train4.jspx</value> </managed-property> <managed-property> <property-name>outcome</property-name> <value>guide.train4</value> </managed-property> <managed-property> <property-name>label</property-name> <value>Fourth Step</value> </managed-property> <managed-property> <property-name>children</property-name> <list-entries> <value-class>project1.DemoTrainStopModel</value-class> <value>#{train4a}</value> <value>#{train4b}</value> <value>#{train4c}</value> </list-entries> </managed-property> <managed-property> <property-name>model</property-name> <value>trainMenuModel</value> </managed-property> </managed-bean>
ArrayList
オブジェクトのインスタンスであるマネージドBeanを構成し、トレイン・ツリー・モデルに渡すトレイン・ストップのリストを作成します。
例18-24に、トレイン・ストップのリストを作成するためのサンプルのマネージドBeanコードを示します。
例18-24 トレイン・リストのマネージドBean
<managed-bean> <managed-bean-name>trainList</managed-bean-name> <managed-bean-class> java.util.ArrayList </managed-bean-class> <managed-bean-scope> none </managed-bean-scope> <list-entries> <value-class>project1.DemoTrainStopModel</value-class> <value>#{train1}</value> <value>#{train2}</value> <value>#{train3}</value> <value>#{train4}</value> <value>#{train5}</value> </list-entries> </managed-bean>
list-entries
要素には、トレインにストップが表示される順序でリストされた値式(#{train1}
など)のトレイン・ストップ(サブプロセス・トレイン・ストップを除く)のマネージドBean名が含まれます。
マネージドBeanを構成して、トレイン・リストからトレイン・ツリー・モデルを作成します。
トレイン・ツリー・モデルは、サブプロセス・トレインのリストも含む、トレイン・リスト全体をラップします。トレイン・モデルのマネージドBeanは、子のサブプロセス・トレインのリストを表すプロパティ名と同一であるchildProperty
値を使用して、インスタンス化する必要があります(例18-23を参照)。
例18-25 トレイン・ツリー・モデルのマネージドBean
<managed-bean> <managed-bean-name>trainTree</managed-bean-name> <managed-bean-class> org.apache.myfaces.trinidad.model.ChildPropertyTreeModel </managed-bean-class> <managed-bean-scope>none</managed-bean-scope> <managed-property> <property-name>childProperty</property-name> <value>children</value> </managed-property> <managed-property> <property-name>wrappedData</property-name> <value>#{trainList}</value> </managed-property> </managed-bean>
childProperty
プロパティには、サブプロセス・トレインのある各トレイン・ストップの子のリスト・エントリの取得に使用するプロパティ名を定義します。
wrappedData
プロパティ値は、ステップ2でマネージドBeanにより作成された、ラップするトレイン・リスト・インスタンスです。
マネージドBeanを構成して、トレイン・ツリー・モデルからトレイン・モデルを作成します。
これが、各ページのtrain
コンポーネントがバインドされるBeanです。トレイン・モデルは、トレイン・ツリー・モデルをラップします。トレイン・モデルのマネージドBeanは、トレイン・ストップに関連付けられたページを表すプロパティ名と同一であるviewIdProperty
値を使用して、インスタンス化する必要があります。
例18-26に、トレイン・モデルのサンプルのマネージドBeanコードを示します。
例18-26 トレイン・モデルのマネージドBean
<managed-bean> <managed-bean-name>trainMenuModel</managed-bean-name> <managed-bean-class> org.apache.myfaces.trinidad.model.ProcessMenuModel </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>viewIdProperty</property-name> <value>viewId</value> </managed-property> <managed-property> <property-name>wrappedData</property-name> <value>#{trainTree}</value> </managed-property> <!-- to enable plusOne behavior instead, comment out the maxPathKey property --> <managed-property> <property-name>maxPathKey</property-name> <value>TRAIN_DEMO_MAX_PATH_KEY</value> </managed-property> </managed-bean>
viewIdProperty
プロパティ値は、ユーザーがトレイン・ストップをクリックした場合にナビゲートされるページの指定に使用されるプロパティに設定されます。
wrappedData
プロパティ値は、ステップ3でマネージドBeanにより作成された、ラップするトレイン・ツリー・インスタンスです。
maxPathKey
プロパティ値は、Max Visitedトレイン動作を使用するためにトレイン・モデルに渡される値です。ADF Facesでは、トレイン・モデルにnull以外のmaxPathKey
値が渡されるとMax Visited動作が使用されます。maxPathKey
値がnull
の場合には、Plus One動作が使用されます。
トレインの各ストップは、1つのJSFページに対応します。各ページに、train
コンポーネント、およびオプションでtrainButtonBar
コンポーネントを1つずつ使用し、ユーザーがトレインを移動できるようにするボタンを作成します。
トレイン・コンポーネントをトレイン・モデルにバインドする手順:
コンポーネント・パレットからJSFページに「トレイン」をドラッグ・アンド・ドロップして、train
コンポーネントを作成します。オプションで、「トレイン・ボタン・バー」をドラッグ・アンド・ドロップします。
コンポーネントをバインドします。トレイン・モデルのMenuModel
実装により、public抽象クラスoracle.adf.view.rich.model.TrainStopModel
に似たrowData
オブジェクトが返される場合は、次のコードに示すように、trainコンポーネントにトレイン・バインディングの簡略化されたフォームを使用できます。
<af:train value="#{trainMenuModel}"/> <af:trainButtonBar value="#{trainMenuModel}"/>
EL式のtrainMenuModel
は、トレイン・モデルのマネージドBean名です(例18-26を参照)。
簡略化されたバインディングを使用できない場合は、トレイン値をトレイン・モデルBeanにバインドし、トレインにnodeStamp
ファセットを手動で追加する必要があります。さらに、例18-27に示すように、そのトレインにcommandNavigationItem
コンポーネントを追加します。