この章では、ADF Facesのナビゲーション・コンポーネントを使用してWebユーザー・インタフェースをナビゲーション可能にする方法を説明します。ページ階層の作成方法に加えて、ボタンやリンクを使用してナビゲートや機能の呼出しを行う方法についても説明します。この章では、train
コンポーネントを使用してマルチステップ・プロセスの中をナビゲートする方法についても説明します。
この章では、次の項目について説明します。
ナビゲーション・コンポーネントを使用すると、より詳細な情報のドリルダウン、関連ページまたはウィンドウへの移動、およびデータへの特定アクションの実行と同時のナビゲーションが可能になります。ナビゲーション・コンポーネントの一般的な形式はボタンやリンクで、その多くはそれのみで使用できますが、その他のコンポーネントと組み合せないと使用できないものもあります。
一部のコンポーネントは、階層ページをナビゲートし、ページ階層内でのユーザーの現在の場所を追跡するためのタブやブレッドクラムなどの項目をレンダリングします。リンクとボタンをレンダリングするコンポーネントは2つあり、特に、ユーザーに順を追ってマルチステップ・タスクを説明するために使用します。また、button
コンポーネントやlink
コンポーネントを使用して、部分ページ・リクエストを起動することや、ポップアップ・ダイアログおよびセカンダリ・ウィンドウを実装することもできます(ADF Facesのその他のタグやコンポーネントと組み合せます)。ナビゲーション・コンポーネントは、サーバー側のアクション付きで作成することも、アクションなしで作成することもできます。
図20-1に、ナビゲーションの提供に使用される様々なADF Facesコンポーネントを示します。
ナビゲーション・コンポーネントの一般的な用途は、別のページやウィンドウにナビゲートする、データに対するアクションを実行する、またはアクションとナビゲートを同時に実行するためのボタンやリンクを作成することです。たとえば、図20-2に示すFile Explorerアプリケーションのメイン・ページにあるbutton
コンポーネントは、スキンの選択後にクリックするとページの表示が更新されるようになっており、link
コンポーネントをクリックするとポップアップ・ウィンドウが開きます。
File Explorerアプリケーションの上部右端には、4つのグローバル・アプリケーション・リンクがあります。link
コンポーネントを使用すればリンク先にナビゲートできますが、このFile Explorerアプリケーションでは、navigationPane
コンポーネントと子のcommandNavigationItem
コンポーネントを使用してリンクを表示しています。これらのリンクは、別の場所に直接ナビゲートするか、ナビゲートの結果としてアクションを実行するようになっています。
また、navigationPane
コンポーネントは、アプリケーション・コンテンツを意味のある構造に編成することが可能で、ユーザーが様々な機能を実行するために、アプリケーションのあらゆるコンテンツ領域内を移動するためのナビゲーション方法も提供します。たとえば、シンプルなHRアプリケーションには、図20-3に示すように、従業員が会社の給付金を確認できるページや、従業員データを表示および作成する管理ページがあります。navigationPane
コンポーネントは、タブ、バー、リストなどを含む構造を表示し、子のcommandNavigationItem
コンポーネントはナビゲーション・リンクを表示します。
navigationPane
コンポーネントも、コンポーネントがメニュー・モデル・マネージドBeanにバインドされるメニュー・モデルとともに使用できます。フレームワークにより、各ページの構造に適切な数のナビゲーション・アイテムが生成され、選択対象として表示されるアイテムも追跡されるため、複雑なページ階層の場合は、メニュー・モデルを使用するとより効果的です。
menuBar
コンポーネントもメニュー・モデルにバインドし、ページ階層内の様々なレベルをナビゲートするためのメニューやサブメニューを実装できます。Webのショッピング・サイトのほとんどは、体系的なメニューを使用してショッピング領域を分類し、1クリックで階層内の特定のサブカテゴリまたは商品に移動できるようになっています。図20-4に示すように、メニュー・バーにメニュー項目の最初のレベルが一目でわかるように表示されています。メニューの上にマウス・カーソルを置くと、参照および選択するより多くのアイテムのサブメニューがユーザーに表示されます。一般的に、3レベルを超えるメニュー項目は実装しません。
ページ階層の作成にnavigationPane
とmenuBar
(メニュー・モデルにバインド)のどちらを使用するかに関係なく、breadCrumbs
コンポーネントと一連の子のcommandNavigationItem
コンポーネントを使用して、ページ階層内でのユーザーの現在の場所を視覚的に示すことができます。図20-5に示すように、breadCrumbs
コンポーネントには、ルート・ページから始まり現在のページ(常に最後のリンク)までの一行のテキスト・リンクが表示されます。メニュー・モデルを使用してページ階層を作成した場合、breadCrumbs
コンポーネントを同じメニュー・モデル・マネージドBeanにバインドし、フレームワークによりリンクが動的に生成されるようにすることが可能です。
train
コンポーネントを使用すると、ユーザーは、マルチステップ・プロセスのどの段階であるかを簡単に確認し、そのプロセス全体をナビゲートすることもできるようになります。図20-6に示すように、trainButtonBar
コンポーネントは、「Back」および「Next」ボタンの形式で、trainプロセスに追加のナビゲーションを提供します。
ナビゲーション・コンポーネントを実装する前に、ADF Facesのその他の機能を理解しておくと役に立ちます。また、ページにこれらのコンポーネントを追加してから、アクセシビリティやローカライゼーションなどの機能の追加が必要なことに気が付く場合もあります。次に、ナビゲーション・コンポーネントで使用できるその他の機能へのリンクを示します。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。
イベント: コンポーネントはサーバー側とクライアント側両方のイベントを起動します。アプリケーションでは、これらへの応答としてなんらかのロジックを実行できます。詳細は、第6章「イベントの処理」を参照してください。
部分ページ・レンダリング: ADF Facesのナビゲーション・コンポーネントを使用して、ページ上のコンポーネントの部分レンダリングをトリガーできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
アクセシビリティ: ナビゲーション・コンポーネントをアクセス可能にできます。詳細は、第33章「アクセス可能なADF Facesページの開発」を参照してください。
ローカライゼーション: ラベルに直接テキストを入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、テキスト文字列の翻訳を管理できます。詳細は、第32章「ページの国際化およびローカライズ」を参照してください。
スキン: スキンを変更することで、ナビゲーション・コンポーネントのルック・アンド・フィールドを変更できます。詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
JSFアプリケーション同様、ADF Facesコンポーネントを使用するアプリケーションには、(それのみ、またはその他のナビゲーション・コンポーネント内で使用される)ボタンやリンクがクリックされた場合に、次に表示するページを選択する一連のルールがあります。ルールは、アプリケーションの構成リソース・ファイル(faces-config.xml
)にJSFナビゲーション・ルールおよびケースを追加することで定義します。
JSFでは、結果の文字列は、ページ・ナビゲーションの実行に使用するナビゲーション・ルールの選択に使用されます。javax.faces.component.ActionSource
インタフェースを実装するADF Facesのナビゲーション・コンポーネントでは、ユーザーがコンポーネントをアクティブ化するとActionEvent
イベントが生成されます。JSF NavigationHandler
およびデフォルトのActionListener
メカニズムでは、アクティブ化されたコンポーネントの結果文字列を使用して、一連のナビゲーション・ルールで一致するものが検出されます。JSFで一致が検出されると、対応するページが選択され、レスポンスのレンダリング・フェーズで選択したページがレンダリングされます。JSFライフサイクルの詳細は、第5章「ADF FacesでのJSFライフサイクルの使用」を参照してください。また、ADF Facesアプリケーションでのナビゲーションでは部分ページ・レンダリングも使用できます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
ADF Facesにはbutton
コンポーネントとlink
コンポーネントがあり、これらをナビゲーションに使用できます。実際のユースケースに応じて、別の場所に直接ナビゲートする、リクエストを送信する、およびActionEvent
イベントを起動するように、これらのコンポーネントを構成できます。
button
コンポーネントとlink
コンポーネントに加えて、ADF Facesにはメニュー内部で使用するための特殊なコンポーネントもあります(goMenuItem
とcommandMenuItem
)。詳細は、第16章「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。
button
コンポーネントとlink
コンポーネントではイメージをレンダリングでき、さらにテキストを表示することもできます(図20-7および図20-8を参照)。iconPosition
属性に値を設定することで、オプションのテキストに対するイメージの位置を決定できます。また、ユーザーがアイコンにカーソルを置いた場合、またはアイコンが押された場合や無効化された場合のために、別々のアイコンを設定できます。使用するイメージを指定するには、icon
属性の値を設定します。button
コンポーネントとlink
コンポーネントは、コンポーネント内にレンダリングするよう指定されたイメージを収容するのに必要なピクセル数まで拡張します。イメージが指定されていない場合は、Webアプリケーションのスキン内でそのコンポーネントに対して指定された最小サイズを使用してコンポーネントがレンダリングされます。
図20-7に、button
コンポーネントに対して構成可能な様々なオプションを示します。
図20-8に、link
コンポーネントに対して構成可能な様々なオプションを示します。
ADF Facesのtoolbar
コンポーネントを使用すると、さらに機能を追加できます。たとえば、popup
ファセットを使用して、button
コンポーネントからポップアップ・メニューを開きます。詳細は、16.3項「ツールバーの使用方法」を参照してください。
button
コンポーネントおよびlink
コンポーネントの動作は、印刷または電子メール用にページを簡略化モードで出力するときは異なります。link
コンポーネントは印刷や電子メールのモードでも表示されますが、リンクは機能しません。button
コンポーネントは、印刷または電子メールのための簡略化モードでページを出力するときはレンダリングされません。電子メールおよび印刷の出力モードの詳細は、第37章「異なる出力モードの使用方法」を参照してください。
リンクをレンダリングするアクション・コンポーネントが右クリックされたときにブラウザのコンテキスト・メニューを起動できるように、アプリケーションを構成できます。アクション・コンポーネントによってレンダリングされたリンクを右クリックしたエンド・ユーザーがブラウザのコンテキスト・メニューを使用して実行するアクションは、開発者の観点からは実行してほしくないものである可能性があります(たとえば、リンクを新しいウィンドウで開く)。詳細は、20.4項「リンクに対するブラウザのコンテキスト・メニューの構成」を参照してください。
エンド・ユーザーがページから移動しようとしたが、そのページでのデータがまだコミットされていない場合に、警告メッセージを表示することができます。checkUncommittedDataBehavior
コンポーネントを、immediate
属性がtrue
に設定されているアクション・コンポーネントに子として追加します。ユーザーがナビゲートしないことを選択すると、子イベントは取り消されます。checkUncommittedDataBehavior
コンポーネントを、af:button
コンポーネントやaf:link
コンポーネントに子として追加できます。エンド・ユーザーに警告メッセージを表示するには、9.2.5項「documentタグの構成方法」で説明されているように、ページにコミットされていないデータが含まれていて、document
タグのuncommittedDataWarning
属性がon
に設定されている必要があります。
注意: コミットされていないデータについて別の方法で警告メッセージを表示するには、 |
一般的に、button
やlink
のようなアクション・コンポーネントは、ページ・ナビゲーションを実行するため、およびサーバー側処理を実行するために使用します。
始める前に:
アクション・コンポーネントの属性が機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.3項「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
アクション・コンポーネントを作成して使用する手順:
「コンポーネント」ウィンドウの「一般コントロール」パネルから、使用するアクション・コンポーネントをJSFページにドラッグ・アンド・ドロップします。具体的には、次のいずれかをドラッグ・アンド・ドロップします。
ボタン: button
コンポーネントを作成する場合。
リンク: link
コンポーネントを作成する場合。
「プロパティ」ウィンドウの「共通」セクションを開いて、次のとおりに設定します。
テキスト: 表示するテキストを指定します。
ヒント: かわりに、 |
Icon: イメージ・ファイルのURIに設定します(コンポーネントの内側にアイコンをレンダリングする場合)。アイコンをレンダリングする場合は、「外観」セクションのhoverIcon
、disabledIcon
、depressedIcon
およびiconPosition
の値も設定します。
ヒント:
|
IconPosition: アイコンを指定した場合は、テキストを基準としてアイコンの位置を指定できます。指定するには、ドロップダウン・リストから値を選択します。
<default> (leading): アイコンをテキストの前にレンダリングします。
trailing: アイコンをテキストの後にレンダリングします。
top: アイコンをテキストの上にレンダリングします。
bottom: アイコンをテキストの下にレンダリングします。
選択済: true
に設定すると、ページがレンダリングされたときにこのコンポーネントは選択された状態で表示されます。
アクション: 結果文字列に設定するか、メソッド式に設定します。この式で参照するバッキングBeanアクション・メソッドから、論理結果のString
が返されるようにしてください。ページ間のナビゲーションを構成する方法の詳細は、3.3項「ページ・フローの定義」を参照してください。
デフォルトのJSF ActionListener
メカニズムでは、結果の文字列を使用して適切なJSFナビゲーション・ルールが選択され、レスポンスのレンダリング・フェーズに使用するページがJSF NavigationHandler
に通知されます。マネージドBeanメソッドを使用してダイアログを開く方法の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。JSFアプリケーションでの結果文字列およびナビゲーションの詳細は、Java EE 6のチュートリアル(http://docs.oracle.com/javaee/index.html
)を参照してください。
ヒント: 結果を返すハンドラにバインドされている場合は、ナビゲーションに たとえば、File Explorerアプリケーションの「検索」パネルの「検索」ボタンにはナビゲート先はありません。かわりに、検索が実行されます。 actionListener="#{explorer.navigatorManager.searchNavigator. searchForFileItem}" この式は、実際に検索を実行するメソッドに評価されます。 |
「動作」セクションを開き、次の設定を行います。
Disabled: ドロップダウン・リストからtrue
を選択すると、コンポーネントは非対話型のボタンまたはリンクとして表示されます。
PartialSubmit: ドロップダウン・リストからtrue
を選択すると、コンポーネントがアクティブ化されるたびに部分ページ要求が発行されます。詳細は、8.2項「部分トリガーの使用」を参照してください。
Immediate: ドロップダウン・リストからtrue
を選択すると、処理の検証とモデル更新のフェーズはスキップされます。コンポーネントのアクション・リスナー(存在する場合)およびデフォルトのJSF ActionListener
ハンドラは、JSFライフサイクルのリクエスト値の適用フェーズの最後に実行されます。詳細は、5.2項「immediate属性の使用」を参照してください。
immediate
属性をtrue
に設定した場合は(手順3を参照)、af:checkUncommittedDataBehavior
コンポーネントをアクション・コンポーネントに子として追加すると、ページ上のデータがコミットされていないときにユーザーへの警告メッセージを表示できます。「コンポーネント」ウィンドウの「操作」パネルで、「動作」グループから「未コミット・データの確認動作」をドラッグし、手順1で追加したアクション・コンポーネントの子としてドロップします。
ボタンやリンクを使用してセカンダリ・ウィンドウを開くこともできます。それには、属性useWindow
、windowHeight
、windowWidth
、launchListener
およびreturnListener
を使用します。セカンダリ・ウィンドウを開く方法の詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のADF Facesのダイアログ・フレームワークをバインド・タスク・フローのかわりに使用する方法に関する項を参照してください。
ボタンやリンクを使用して、JavaScriptコードを書かずにポップアップを起動する方法は、15.3項「ポップアップの宣言的な呼出し」を参照してください。
button
コンポーネントやlink
コンポーネントを使用して、ActionEvent
イベントを配信せずに直接ページ・ナビゲーションを実行することができます。
始める前に:
button
コンポーネントおよびlink
コンポーネントの属性が機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.3項「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
ActionEventを配信せずにナビゲートするボタンおよびリンクを作成する手順:
「コンポーネント」ウィンドウの「一般コントロール」パネルから、使用するコンポーネントをJSFページにドラッグ・アンド・ドロップします。具体的には、次のいずれかをドラッグ・アンド・ドロップします。
ボタン: button
コンポーネントを作成する場合。
リンク: link
コンポーネントを作成する場合。
「プロパティ」ウィンドウの「共通」セクションを開いて、次のとおりに設定します。
テキスト: 表示するテキストを指定します。
ヒント: かわりに、 |
Icon: イメージ・ファイルのURIに設定します(コンポーネントの内側にアイコンをレンダリングする場合)。アイコンをレンダリングする場合は、「外観」セクションのhoverIcon
、disabledIcon
、depressedIcon
およびiconPosition
の値も設定します。
ヒント:
|
IconPosition: アイコンを指定した場合は、テキストを基準としてアイコンの位置を指定できます。指定するには、ドロップダウン・リストから値を選択します。
<default> (leading): アイコンをテキストの前にレンダリングします。
trailing: アイコンをテキストの後にレンダリングします。
top: アイコンをテキストの上にレンダリングします。
bottom: アイコンをテキストの下にレンダリングします。
選択済: true
に設定すると、ページがレンダリングされたときにこのコンポーネントは選択された状態で表示されます。
宛先: ナビゲート先のページのURIに設定します。
たとえば、OracleのWebサイトにナビゲートするには次のとおりに設定します。
destination="http://www.oracle.com"
TargetFrame: 新しいページを表示する場所を指定する値を、ドロップダウン・リストから選択します。
_blank: リンクにより、ドキュメントは新しいウィンドウに開かれます。
_parent: リンクにより、ドキュメントは親ウィンドウに開かれます。たとえば、リンクがダイアログに表示された場合、結果のページは親ウィンドウにレンダリングされます。
_self: リンクにより、ドキュメントは同じページまたはリージョンに開かれます。
_top: リンクにより、ページ全体が置き換えられて、ドキュメントはウィンドウ全体に開かれます。
「動作」セクションを開いて「Disabled」ドロップダウン・リストからtrue
を選択すると、コンポーネントは非対話型のボタンまたはリンクとして表示されます。
8.5項「部分ページ・ナビゲーションの使用について」で説明されているように、部分ページ・レンダリング・リクエストを使用してナビゲーションがトリガーされるように、ADF Facesアプリケーションを構成できます。部分ページ・ナビゲーションが有効化されていると、次のコンポーネントで、GET
リクエストの部分ページ・ナビゲーションが自動的にサポートされます。
af:button
af:link
af:goMenuItem
(af:menu
およびaf:menuBar
内で使用)
af:commandNavigationItem
(af:navigationPane
内で使用)
唯一の要件は、サポートされているコンポーネントのdestination
属性の値が、アプリケーション・コンテキスト・ルートの相対URLであり、/
で始まっていることです。たとえば/faces/myPage.jsf
で、faces
はweb.xml
内で定義されているアプリケーションのサーブレットにマッピングされているURL、myPage.jsf
はナビゲート先のページです。部分ページ・ナビゲーションでURLのハッシュ(#)部分が使用されるため、ページ内のアンカーへのナビゲーションにはハッシュ部分を使用できません。
サポートされているコンポーネントのtargetFrame
属性が、新しいウィンドウでリンクを開くように設定されている場合、フレームワークは自動的にページ全体のナビゲーションに戻ります。
実行時にリンクをレンダリングするアクション・コンポーネントを使用して、エンド・ユーザーにアクションを起動させることができます。さらに、ADF Facesフレームワークで、そのアクション・コンポーネントのコンテキスト・メニューがエンド・ユーザーのブラウザにレンダリングされるように、アプリケーションを構成することもできます。デフォルトでは、ADF Facesフレームワークではこのコンテキスト・メニューは無効化されます。destination属性の値が設定されていないときに、ADF Facesフレームワークによってこのコンテキスト・メニューが無効化されるのは、アクション・コンポーネントで指定されたものとは異なるアクションがコンテキスト・メニューのメニュー・オプションによって起動される可能性があるからです(たとえば、リンクを新しいウィンドウで開く)。この動作を構成できるコンポーネントは次のとおりです。
af:link
af:commandMenuItem
(af:menuBar
コンポーネント内で使用)
af:commandNavigationItem
(destination
属性に値が指定されていない場合、ADF Facesフレームワークにより、次のシナリオでブラウザのコンテキスト・メニューが有効化されます)
af:train
コンポーネント内で、af:commandNavigationItem
によってレンダリングされる2つのアンカーの場合
af:breadCrumbs
コンポーネント内で、af:commandNavigationItem
によってレンダリングされる場合
af:navigationPane
コンポーネント(タブ、バー、ボタン、選択、リストなど、任意のヒント)内で、af:commandNavigationItem
によってレンダリングされる場合
af:panelTabbed
: タブおよびオーバーフロー・インジケータ
af:panelAccordion
: 公開リンクおよびオーバーフロー・インジケータ
移動先を指定し、アクションを起動しないコンポーネントには、この動作を構成できません。たとえば、af:commandNavigationItem
コンポーネントのdestination
属性に値を指定し、action
属性には指定しない場合です。
アプリケーションのweb.xml
ファイルにあるoracle.adf.view.rich.ACTION_LINK_BROWSER_CONTEXT_SUPPRESSION
コンテキスト・パラメータの値をno
に設定します。
始める前に:
どのアクション・コンポーネントに対してこの機能を構成できるかを理解していると役に立ちます。詳細は、20.4項「リンクに対するブラウザのコンテキスト・メニューの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
コマンド・リンクにブラウザ・コンテキスト・メニューを構成する手順:
「アプリケーション」ウィンドウで、WEB-INFノードを開いてweb.xmlをダブルクリックします。
概要エディタで、「アプリケーション」ナビゲーション・タブをクリックしてから、「コンテキスト初期化パラメータ」表の横にある「追加」アイコンをクリックしてoracle.adf.view.rich.ACTION_LINK_BROWSER_CONTEXT_SUPPRESSION
パラメータのエントリを追加し、このパラメータをno
に設定します。
変更を保存して、web.xml
ファイルを閉じます。
20.4.1項「コマンド・リンクへのブラウザのコンテキスト・メニューの構成方法」に説明されている手順に従った場合、例20-1に示すように、JDeveloperにより、web.xml
ファイルに値が記述されます。
例20-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の構成オプションの詳細は、A.2項「web.xmlでの構成」を参照してください。
実行時に、エンド・ユーザーは、特定のコンポーネントによってレンダリングされたリンクを右クリックすると、ブラウザのコンテキスト・メニューを起動できます(20.4項「リンクに対するブラウザのコンテキスト・メニューの構成」を参照)。
アクション・コンポーネントをナビゲーションに使用する機能に加えて、ADF Facesはリスナー・タグも備えており、アクション・コンポーネントとともに使用してアクション・イベントの起動時に特定の機能を実行することができます。次に、ADF Facesに含まれるリスナー・タグを示します。
exportCollectionActionListener
: table
、tree
およびtreeTable
コンポーネントから、Excelスプレッドシートにデータをエクスポートするために使用します。詳細は、12.12項「表、ツリーまたはツリー表からのデータのエクスポート」を参照してください。
fileDownloadActionListener
: サーバーからローカル・ハード・ドライブへのファイルのダウンロードを開始するために使用します。詳細は、20.5.1項「ファイルをダウンロードするためのアクション・コンポーネントの使用方法」を参照してください。
resetListener
: 送信した値をリセットするために使用します。ただし、データ・モデルの状態は変更されません。詳細は、20.5.2項「入力フィールドをリセットするためのアクション・コンポーネントの使用方法」を参照してください。入力コンポーネントがポップアップ内にレンダリングされる場合は、15.7項「ポップアップの入力フィールドのリセット」を参照してください。
入力コンポーネントを以前の状態、つまりサーバーへの部分的または完全な送信が成功している状態にリセットする場合は、「リセット」ボタンを使用できます。詳細は、11.2.3項「フォームをリセットするためのボタンの追加方法」を参照してください。
ユーザーがファイルをダウンロードできるようにするには、ボタンなどのアクション・コンポーネントを作成し、fileDownloadActionListener
タグに関連付けます。ユーザーがそのコンポーネントを選択またはクリックすると、ポップアップ・ダイアログが表示され、ここでユーザーがダウンロードの様々なオプションを選択できます(図20-9を参照)。
fileDownloadActionListener
タグを使用すると、アクション・コンポーネント(たとえば、ボタン、リンク、メニュー項目)からエンド・ユーザーにファイルの内容を送信できるようになります。このタグを使用すると、コンテンツ・タイプまたはファイル名を指定することもできます。fileDownloadActionListener
タグを使用すると、アクション・コンポーネントのpartialSubmit
属性に設定した値は、レンダリング時に無視されます。fileDownloadActionListener
タグは、コンテキストに基づいて、アクション・コンポーネントが起動する送信のタイプを決定します。アプリケーションのJSFポートレット内でfileDownloadActionListener
タグを使用すると、アクション・コンポーネントにより部分送信(partialSubmit="true"
)が起動されます。ADF Facesサーブレットを使用するアプリケーション内にfileDownloadActionListener
タグを使用すると、アクション・コンポーネントにより完全送信(partialSubmit="false"
)が起動されます。
コンテンツがブラウザに送信された後、そのコンテンツが表示または保存される方法は、エンド・ユーザーがダイアログで選択したオプションにより異なります。エンド・ユーザーが「次で開く」オプションを選択した場合、そのファイル・タイプに関連付けられているアプリケーションが起動されてコンテンツが表示されます。たとえば、テキスト・ファイルの場合はメモ帳アプリケーションが起動されます。エンド・ユーザーがディスクに保存オプションを選択した場合は、ブラウザによっては、ファイル名およびコンテンツを格納する場所を選択するためのポップアップ・ダイアログが表示されます。
例20-2に示すボタンのタグでは、fileDownloadActionListener
タグを使用して、hello.txt
という名前のファイルをユーザーにダウンロードします。
例20-2 ボタンおよびfileDownloadActionListenerタグを使用したファイルのダウンロード
<af:button value="Say Hello"> <af:fileDownloadActionListener filename="hello.txt" contentType="text/plain; charset=utf-8" method="#{bean.sayHello}"/> </af:button>
例20-3に、ファイルのダウンロード処理に使用されるマネージドBeanメソッドを示します。
例20-3 ファイルのダウンロード処理に使用されるマネージドBeanメソッド
public void sayHello(FacesContext context, OutputStream out) throws IOException{ OutputStreamWriter w = new OutputStreamWriter(out, "UTF-8"); w.write("Hi there!"); . . . }
アプリケーションのJSFポートレット内からfileDownloadActionListener
タグを使用すると、表20-1に説明されているパラメータを、アプリケーションのweb.xml
ファイルにオプションで追加し、ファイルのサイズや一時的な場所のオプションをダウンロード中に構成できます。
表20-1 ポートレット内にfileDownloadActionListenerを使用するためにweb.xmlファイルに追加するパラメータ
パラメータ名 | データ型 | 説明 |
---|---|---|
|
Integer |
セッション中に
|
|
Integer |
|
|
String |
ダウンロード時にファイルを格納する一時的な場所を指定します。値を指定しない場合は、デフォルトで、 |
web.xml
ファイルの構成の詳細は、A.2項「web.xmlでの構成」を参照してください。JSFポートレットの作成方法の詳細は、『Oracle Fusion Middleware Oracle WebCenter開発者ガイド』を参照してください。
始める前に:
コンポーネントの属性が機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.5項「ボタンまたはリンクの機能の呼出し目的での使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
次のタスクを完了する必要があります。
ファイルのダウンロード・メカニズムを作成する手順:
「コンポーネント」ウィンドウの「操作」パネルの「リスナー」グループから、「ファイル・ダウンロード・アクション・リスナー」をアクション・コンポーネントに子としてドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで次の属性を設定します。
ContentType: ファイルのMIMEタイプを指定します。たとえば、text/plain
、text/csv
、application/pdf
などです。
Filename: オブジェクトに対して提案するファイル名を指定します。ファイル名を指定すると、通常は「ファイルの保存」ダイアログが表示されますが、最終的にはブラウザにより異なります。名前を指定しない場合、通常、コンテンツはブラウザにインライン表示されます(可能な場合)。
Method: ファイルの内容をダウンロードするメソッドを指定します。methodには、FacesContext
オブジェクトおよびOutputStream
オブジェクトの2つの引数を指定できます。OutputStream
オブジェクトは自動的に閉じられるため、このmethodの唯一の目的は、すべてのバイトをOutputStream
オブジェクトに書き込むことです。
たとえば、button
コンポーネントでfileDownloadActionListener
タグを使用する場合のJSFページ内のエントリは、次のようになります。
<af:button text="Load File"> <af:fileDownloadActionListener contentType="text/plain" filename="MyFile.txt" method="#(mybean.LoadMyFile"/> </af:button>
resetListener
タグをアクション・コンポーネントと組み合せて使用すると、入力値をリセットできます。エンド・ユーザーがアクション・コンポーネントを起動したときに、すべての入力値がnullまたは空にリセットされます。入力コンポーネントを以前の状態、つまりサーバーへの部分的または完全な送信が成功している状態にリセットする場合は、「リセット」ボタンを使用する必要があります。詳細は、11.2.3項「フォームをリセットするためのボタンの追加方法」を参照してください。
resetListener
タグを使用して、ポップアップにレンダリングされる入力コンポーネントをリセットする場合は、popup
コンポーネントのresetEditableValues
プロパティの値も設定する必要があります。このユースケースの詳細は、15.7項「ポップアップの入力フィールドのリセット」を参照してください。
始める前に:
アクション・コンポーネントの属性が機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.5項「ボタンまたはリンクの機能の呼出し目的での使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
次のタスクを完了する必要があります。
リセット・リスナー・タグを使用する手順:
「コンポーネント」ウィンドウの「操作」パネルの「リスナー」グループから、リセット・リスナーをドラッグし、作成済のアクション・コンポーネントの中にドロップします。
「リセット・リスナーの挿入」ダイアログで、どのタイプのイベントへの応答としてresetListener
タグをアクティブにするかを指定します。たとえば、action
と入力すると、resetListener
タグはアクション・コンポーネントのactionListener
属性によって返されたactionEvent
に反応します。
「リセット・リスナーの挿入」ダイアログで「ヘルプ」をクリックして、サポートされる値のリストを表示します。
注意: アプリケーションでFusionテクノロジ・スタックをADF Controllerとともに使用する場合は、ADFタスク・フローと |
アプリケーションはツリー式階層に関連付けて編成されたページで構成されます。ユーザーは、リンクのパスをドリルダウンして、ページ上の特定の情報にアクセスします。たとえば、図20-10は、トップレベル・ノードであるHomeの下に3つのレベルのノードがある単純なページ階層を示しています。トップレベル・ノードは、ルートの親ページを表しています。第1レベルのノードであるBenefitsおよびEmployee Dataは、より詳細な情報を含む第2レベルの子ノード(InsuranceやView Employeeなど)に関する汎用情報が含まれる親ページを表しています。Insuranceノードも親ノードで、第3レベルの子ノードであるHealthとDentalに関する汎用情報が含まれています。ページ階層の各ノード(ルートのHomeノードを除く)は、同時に親ノードにも子ノードにもなることができ、ページ階層の各ノードは1つのページに対応しています。
ページ階層のナビゲーションは、親子のリンクに従います。たとえば、Healthの情報を表示するには、ユーザーはBenefitsページからドリルダウンを開始し、2つの選択肢(一方がHealth)が用意されているInsuranceページに移動します。Homeから始まり、Healthで終わる選択したリンクのパスは、ツリーのフォーカス・パスと呼ばれます。
直接の親子のナビゲーションのみでなく、レベル間または親間のナビゲーションも可能です。たとえば、Dentalページから、ユーザーは第2レベルのPaid Time Offページに移動することも、第1レベルのBenefitsページまたはEmployee Dataページに移動することもできます。
図20-10に示すように、階層内のどのノードにもリンクされていないが、トップレベルのHomeノードと同じレベルにあるHelpノードは、グローバル・ノードです。グローバル・ノードは、階層内のどのページからもアクセスできるグローバル・ページ(「ヘルプ」ページなど)を表します。
ページ階層をナビゲートするためのWebユーザー・インタフェースで使用される一般的なウィジェットは、タブ、バー、リスト、グローバル・リンクで、すべてnavigationPane
コンポーネントを使用して作成できます。図20-11は、図20-10に示した階層をnavigationPane
およびその他のコンポーネントを使用してレンダリングする方法の例です。
「Benefits」および「Employee Data」ページのタブがある図20-11に示すように、第1レベルのノードとして、一般的にタブが使用されます。InsuranceおよびPaid Time Offなどの第2レベルのノードはバーとして、HealthおよびDentalなどの第3レベルのノードはリストとしてレンダリングされます。ただし、タブは、第1および第2レベルのノードの両方に使用できます。(グローバル・ノードを表す)グローバル・リンクは、テキスト・リンクとしてレンダリングされます。図20-11で、Homeおよび「ヘルプ」グローバル・リンクはテキスト・リンクとしてレンダリングされています。
第1、第2、第3レベルのノードまたはグローバル・ノードのいずれであるかにかかわらず、1つのnavigationPane
コンポーネントは、1レベルのノードに対応します。navigationPane
コンポーネントがレベルにレンダリングするように構成されているアイテムのタイプに関係なく、必ずcommandNavigationItem
コンポーネントを使用してレベル内のアイテムを表します。
navigationPane
コンポーネントは、ナビゲーション用のタブ、バー、リストおよびグローバル・リンクをレンダリングするだけです。図20-16や図20-17に示すような、位置指定やページ背景のビジュアルなスタイル設定を行うには、decorativeBox
コンポーネントを第1レベルのnavigationPane
コンポーネントの親として使用します。decorativeBox
コンポーネントは、テーマおよびスキニング・キーを使用して、その様々なファセットの枠および色を制御します。たとえば、デフォルトのテーマを使用する場合、decorativeBox
コンポーネント本体は白、枠は青で、左上隅は丸くなります。ミディアム・テーマを使用する場合、本体は中間色の青になります。テーマおよびスキンの使用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ヒント: ページ階層を作成するには、階層内の各ページで同じレイアウトおよびルック・アンド・フィールを使用する必要があるため、ナビゲーション・コンポーネントの配置場所やスタイルを決定するためにテンプレートの使用を検討してください。詳細は、10.3項「ページ・テンプレートの使用」を参照してください。 |
単純な階層の各ページで、まず一連のnavigationPane
コンポーネントを使用して階層の各レベルを表します。その後、各レベルのそれぞれのリンクに対して、navigationPane
コンポーネントの直接の子として、commandNavigationItem
コンポーネントを追加します。たとえば、図20-11に示されているような健康保険のページを作成するには、まず、ページに表示されている各レベルにnavigationPane
コンポーネントを使用します。この場合は、グローバル・リンク、第1レベルのノード、第2レベルのノード、第3レベルのノードにそれぞれ1つずつです。その後、個々のリンクを表すために、commandNavigationItem
コンポーネントをnavigationPane
コンポーネントのそれぞれに対して子として追加する必要があります(たとえば、第3レベルのnavigationPane
コンポーネントにcommandNavigationItem
子コンポーネントを2つ追加して、第3レベルのリスト・アイテム2つを表します)。図20-12に示すように「Benefits」ページを作成した場合は、navigationPane
コンポーネントを3つ(グローバル、第1、第2の各レベルに1つずつ)のみ追加し、このページに表示されるリンクにcommandNavigationItem
コンポーネントのみを追加します。
大規模なページ階層では、このプロセスは非常に時間がかかり、ミスも発生しやすくなります。大規模な階層の場合は、各ページに別々のcommandNavigationItem
コンポーネントをそれぞれ作成するのではなく、XMLMenuModel
実装およびマネージドBeanを使用して、ページのナビゲーション・アイテムを動的に生成することをお薦めします。メタデータ・ファイルとともに使用するXMLMenuModel
クラスには、各ページに適切な数の階層レベルを生成するためのすべての情報と、各レベルに属するナビゲーション・アイテムが含まれます。
navigationPane
コンポーネント内に複数のcommandNavigationItem
コンポーネントを使用し、各ページで現在の項目を選択済としてマーキングするかわりに、各navigationPane
コンポーネントを宣言的に同じXMLMenuModel
実装にバインドし、nodeStamp
ファセットにcommandNavigationItem
コンポーネントを1つ使用してナビゲーション・アイテムを指定します。commandNavigationItem
コンポーネントは、navigationPane
コンポーネントのスタンプとして機能し、XMLMenuModel
オブジェクトに保持されている(各レベルの)ノードのナビゲーション・アイテムにスタンプを設定します。
また、menuBar
コンポーネントをXMLMenuModel
実装とともに使用し、ページ階層をナビゲートするためにメニュー項目にスタンプを設定することもできます。
注意: アプリケーションの変更の反映に使用できるメニュー(「Open」および「Delete」コマンドが含まれる「File」メニューなど)を作成する場合は、第16章「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。 |
どのページでも、ユーザーの現在の位置をページ階層全体との関連で表示するには、一連のcommandNavigationItem
コンポーネントまたは1つのcommandNavigationItem
コンポーネントを含むbreadCrumbs
コンポーネントをnodeStamp
として使用し、現在のページ(フォーカス・パスの現在のノード)からルート・ページへ戻るリンクのパスを指定します。
XMLMenuModel
を使用したナビゲーション階層の作成の詳細は、20.7項「メニュー・モデルを使用したページ階層の作成」を参照してください。ナビゲーション階層の手動による作成の詳細は、20.8項「単純なナビゲーション階層の作成」を参照してください。
ページ階層へのナビゲーション・アイテムの作成にメニュー・モデルを使用するか、手動でナビゲーション・アイテムを作成するかに関係なく、JSFナビゲーション・モデルは、デフォルトのActionListener
メカニズムを介し、ユーザーがナビゲーション・アイテムを選択する際に、ナビゲート先のページの選択に使用されます。
始める前に:
ナビゲーション・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
ページ階層用にナビゲーション・ケースを作成する手順:
「アプリケーション」ウィンドウで、WEB-INFノードを展開し、faces-config.xmlをダブルクリックします。
ページ階層のすべてのノードのナビゲーション・ケースが含まれるグローバルなJSFナビゲーション・ルールを1つ作成します。
たとえば、図20-10に表示されているページ階層には、10個のノードがあります(これにはグローバルのHelpノードも含まれます)。この場合、例20-4に示すように、faces-config.xml
ファイルの1つのグローバル・ナビゲーション・ルール内に10のナビゲーション・ケースを作成します。
各ナビゲーション・ケースに、一意の結果文字列と、指定された文字列に一致する結果値がナビゲーション・システムによって返された場合に表示するJSFページへのパスを指定します。
例20-4 faces-config.xml内のページ階層のグローバル・ナビゲーション・ルール
<navigation-rule> <navigation-case> <from-outcome>goHome</from-outcome> <to-view-id>/home.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHelp</from-outcome> <to-view-id>/globalhelp.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goEmp</from-outcome> <to-view-id>/empdata.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goBene</from-outcome> <to-view-id>/benefits.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goIns</from-outcome> <to-view-id>/insurance.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goPto</from-outcome> <to-view-id>/pto.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goView</from-outcome> <to-view-id>/viewdata.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goCreate</from-outcome> <to-view-id>/createemp.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHealth</from-outcome> <to-view-id>/health.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goDental</from-outcome> <to-view-id>/dental.jsf</to-view-id> </navigation-case> </navigation-rule>
JDeveloperにおけるナビゲーション・ケースの作成方法の詳細は、3.3項「ページ・フローの定義」を参照してください。
注意: アプリケーションでFusionテクノロジ・スタックまたはADF Controllerを使用する場合は、ADFタスク・フローと |
20.6項「ページ階層用のナビゲーション・アイテムの使用」に、複数のcommandNavigationItem
子コンポーネントを含むnavigationPane
コンポーネントを使用して、非常に単純なページ階層用のナビゲーション・アイテムを作成する方法が説明されています。より複雑なページ階層で同じ方法を使用すると時間がかかり、ミスが起こりやすくなります。ナビゲーションを可能にするすべての項目を作成するために、複数のJSFページのnavigationPane
およびbreadCrumbs
コンポーネントに個々のcommandNavigationItem
コンポーネントを手動で挿入し構成するのは、非効率的で単調な作業です。各項目について正確なselectedステータスを管理したり、現在のページからルート・ページに戻るブレッドクラム・リンクをたどって追跡するのも困難です。
より複雑なページ階層の場合(および単純なページ階層の場合でも)、ナビゲーション・システムを作成するより効率的な方法は、メニュー・モデルを使用することです。メニュー・モデルは、特別なツリー・モデルです。ツリー・モデルは、行キーで索引付けされた行のコレクションです。ツリーでは、現在行に子の行を含めることができます(ツリー・モデルの詳細は、12.6項「ツリーへのデータの表示」を参照してください)。メニュー・モデルは、現在フォーカス(フォーカス・ノード)があるノードのrowKey
を取得できるツリー・モデルです。メニュー・モデルにはページ・ナビゲーションの特別な情報はなく、ツリーにアクセスするノードに対する要件もありません。
XMLMenuModel
クラスは、ナビゲーション・ツリー・モデルからメニュー・モデルを作成します。ただし、XMLMenuModel
クラスには、XMLメタデータにナビゲーションの階層ツリーを定義できる追加のメソッドがあります。(他のADF Facesのメニュー・モデル・クラスの1つを使用している場合のように)Javaクラスを作成し多数のマネージドBeanを構成してメニュー・モデルを定義および作成するかわりに、XMLMenuModel
クラスでメニュー・モデルを作成する際に必要なすべてのノード情報を含む1つ以上のXMLMenuModel
メタデータ・ファイルを作成します。
ヒント:
|
メニュー・モデルを使用してページ階層を作成する手順:
ページ階層にJSFナビゲーション・ルールおよびナビゲーション・ケースを作成します。20.6.1項「ページ階層用のナビゲーション・ケースの作成方法」を参照してください。
XMLMenuModel
メタデータを作成します。20.7.1項「メニュー・モデル・メタデータの作成方法」を参照してください。
XMLMenuModel
クラスにマネージドBeanを構成します。このマネージドBeanは、アプリケーションにより階層の作成に使用されます。この構成は、JDeveloperで「ADFメニュー・モデルの作成」ダイアログを使用してXMLMenuModel
メタデータ・ファイルを作成する際に、自動的に行われます。20.7.2項「ADFメニュー・モデルの作成ウィザードを使用する場合の処理」を参照してください。
各階層ノード(グローバル・ノードも含む)にJSFページを作成します。
ヒント: 通常、各レベルの項目(グローバル項目およびブレッドクラムを含む)に対するファセットが含まれるページ・テンプレートを使用して、各JSFページを作成します。たとえば、グローバル項目を表す |
各ページで、navigationPane
およびbreadCrumbs
コンポーネントをXMLMenuModel
クラスにバインドします。20.7.3項「メニュー・モデルへのnavigationPaneコンポーネントのバインド方法」および20.7.4項「メニュー・モデルでのbreadCrumbsコンポーネントの使用方法」を参照してください。menuBar
コンポーネントをバインドするには、20.7.5項「メニュー・モデルでのmenuBarコンポーネントの使用方法」を参照してください。
XMLMenuModel
メタデータ・ファイルは、XML形式によるページ階層用のナビゲーション・メニューの表現です。1つ以上のXMLMenuModel
メタデータ・ファイルを使用して、ページ階層全体を表すことが可能です。XMLMenuModel
メタデータ・ファイルでは、ページ階層が、ファイルのルート要素であるmenu
要素内に説明されています。各XMLMenuModel
メタデータ・ファイルにはmenu
要素が必要で、各ファイルで使用できるmenu
要素は1つのみです。
XMLMenuModel
メタデータ・ファイルまたは階層のその他の要素は、項目ノード、グループ・ノードおよび共有ノードで構成されています。項目ノードは、階層のナビゲート可能なノード(またはページ)を表します。たとえば、図20-13に示すような階層を作成するとします。
階層の各ノードにユーザーがナビゲートできる独自のページを作成する場合は、各ページのメタデータ・ファイルに項目ノードを作成します。親ノードに子ノードをネストさせて階層を作成します。ただし、Employee Dataノードにはページが必要ないが、ユーザーが直接View Employeeページにナビゲートできるようにするとします。グループ・ノードを使用して「Employee Data」ページを表し、グループ・ノードのidref
属性を使用して、エンド・ユーザーが「Employee Data」タブをクリックすると開かれるページ(「View Employee」ページ)を参照します。グループ・ノードを使用すると、単に子ノードの集約であるノード用にページを作成せずに階層を維持できます。
例20-5に示すXMLMenuModel
メタデータ・ファイルでは、図20-13に示すページ階層全体を、主に項目ノードを使用し、グループ・ノードも1つ使用して定義しています。
例20-5 XMLMenuModelメタデータ・ファイルのサンプル1
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu"> <itemNode id="in01" focusViewId="/home.jsf" label="Home" action="goHome"> <itemNode id="in1" focusViewId="/benefits.jsf" action="goBene" label="Benefits"> <itemNode id="in11" focusViewId="/insurance.jsf" action="goIns" label="Insurance"> <itemNode id="in111" focusViewId="/health.jsf" action="goHealth" label="Health"/> <itemNode id="in112" focusViewId="/dental.jsf" action="goDental" label="Dental"/> </itemNode> <itemNode id="in12" focusViewId="/pto.jsf" action="goPto" label="Paid Time Off"> <itemNode id="in121" focusViewId="/vacation.jsf" action="goVacation" label="Vacation"/> <itemNode id="in122" focusViewId="/sick.jsf" action="goSick" label="Sick Pay"/> </itemNode> </itemNode> <groupNode id="gn2" idref="newEmp" label="Employee Data"> <itemNode id="in21" focusViewId="/createemp.jsf" action="goCreate" label="Create New Employee"/> <itemNode id="in22" focusViewId="/viewdata.jsf" action="goView" label="View Data"/> </groupNode> </itemNode> <itemNode id="in02" focusViewId="/globalhelp.jsf" action="goHelp" label="Help"/> <itemNode id="in03" focusViewId="/preferences.jsf" action="goPref" label="Preferences"/> </menu>
ルートのmenu
要素内では、menu
要素の直接の子であればどのノードでもグローバル・ノードになります。たとえば、例20-5のコードには、Home、Help、Preferencesの3つのグローバル・ノードが示されています。
共有ノードを使用して、メニュー・モデルをネストさせることも可能です。階層内にサブ・ツリー(たとえば「Benefits」ツリー)がある場合にこの方法を使用すると、ページ階層の保守が容易になります。たとえば、(例20-6に示すように)Benefitsツリー全体を独自のメニュー・モデル・メタデータ・ファイルとして作成できるため、アプリケーション全体でメニュー・モデルを再利用できます。
例20-6 Benefits XMLMenuModelメタデータ・ファイル
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu"> <itemNode id="in1" focusViewId="/benefits.jsf" action="goBene" label="Benefits"> <itemNode id="in11" focusViewId="/insurance.jsf" action="goIns" label="Insurance"> <itemNode id="in111" focusViewId="/health.jsf" action="goHealth" label="Health"/> <itemNode id="in112" focusViewId="/dental.jsf" action="goDental" label="Dental"/> </itemNode> <itemNode id="in12" focusViewId="/pto.jsf" action="goPto" label="Paid Time Off"> <itemNode id="in121" focusViewId="/vacation.jsf" action="goVacation" label="Vacation"/> <itemNode id="in122" focusViewId="/sick.jsf" action="goSick" label="Sick Pay"/> </itemNode> </itemNode> </menu>
独立したメニュー・モデルとしてノードを作成したら、そのれらのノードを使用する必要がある別のノード内で共有ノードを使用して、Benefitsメニュー・モデルを参照します。
例20-7に示すXMLMenuModel
メタデータ・ファイルでは、図20-13に示したのと同じページ階層を、項目ノード、共有ノード1個およびグループ・ノード1個を使用して定義しています。
例20-7 XMLMenuModelメタデータ・ファイルのサンプル2
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu"> <itemNode id="in01" focusViewId="/home.jsf" label="Home" action="goHome"> <sharedNode ref="#{benefits_menu}/> <groupNode id="gn2" idref="newEmp" label="Employee Data"> <itemNode id="in21" focusViewId="/createemp.jsf" action="goCreate" label="Create New Employee"/> <itemNode id="in22" focusViewId="/viewdata.jsf" action="goView" label="View Data"/> </groupNode> </itemNode> <itemNode id="in02" focusViewId="/globalhelp.jsf" action="goHelp" label="Help"/> <itemNode id="in03" focusViewId="/preferences.jsf" action="goPref" label="Preferences"/> </menu>
sharedNode
要素は、Benefits XMLMenuModel
メタデータ・ファイル用に構成されているマネージドBeanを参照します。「ADFメニュー・モデルの作成」ウィザードを使用してメタデータ・ファイルを作成する場合はいつでも、JDeveloperにより、マネージドBean構成が自動的に追加されます。
始める前に:
ナビゲーション・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.7項「メニュー・モデルを使用したページ階層の作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
XMLMenuModelメタデータを作成する手順:
「アプリケーション」ウィンドウで、どのプロジェクトのXMLMenuModel
メタデータ・ファイルを作成するかを選択します。WEB-INFノードを開き、faces-config.xmlを右クリックして「ADFメニュー・モデルの作成」を選択します。
注意: アプリケーションでADFコントローラが使用されている場合は、このメニュー・オプションを使用できません。かわりに、バインド・タスク・フローを使用して階層を作成できます。『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のタスク・フローを使用したページ階層の作成に関する項を参照してください。 |
「ADFメニュー・モデルの作成」ダイアログで、XMLMenuModel
メタデータ・ファイルのファイル名(root_menu
など)を入力します。
ヒント: 複数の |
メタデータ・ファイルのディレクトリを入力します。JDeveloperのデフォルトでは、XMLMenuModel
メタデータ・ファイルはアプリケーションのWEB-INFノードに保存されます。
例20-8に示すように、「OK」をクリックすると、JDeveloperにより、空のXMLMenuModel
メタデータ・ファイルがソース・エディタに表示されます。
例20-8 空のXMLMenuModelメタデータ・ファイル
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu"></menu>
JDeveloperによって自動的にfaces-config.xml
に追加されるマネージドBean構成の詳細は、20.7.2項「ADFメニュー・モデルの作成ウィザードを使用する場合の処理」を参照してください。
「構造」ウィンドウでmenuノードを選択し、「プロパティ」ウィンドウで情報を入力します。
表20-2に、menu
要素に指定できる属性を示します。
表20-2 menu要素の属性
属性 | 説明 |
---|---|
|
オプション。実行時にナビゲーション・アイテムのラベル(表示可能なテキスト)に使用するリソース・バンドルです。 |
|
リソース・バンドルを使用している場合は、ナビゲーション・アイテム・ラベルのEL式のバンドルの参照に使用するIDを指定します。 |
|
必須。 |
例20-9に、ナビゲーション・アイテムのラベルのリソース・バンドルにアクセスするためにEL式を使用する、サンプルのXMLMenuModel
メタデータ・コードを示します。
例20-9 リソース・バンドルを使用した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>
注意:
|
リソース・バンドルの使用方法の詳細は、第32章「ページの国際化およびローカライズ」を参照してください。
「構造」ウィンドウで、menuを右クリックして「menuの中に挿入」を選択してから、目的の要素(itemNode
、groupNode
またはsharedNode
)をポップアップ・メニューから選択して(図20-14を参照)階層内のノードに追加します。
要素は次のいずれかです。
itemNode: ユーザーによる選択時にナビゲーションを実行するノードを指定します。
groupNode: グループの子コンポーネントで、groupNode
自体はナビゲーションを行いません。子ノードは、itemNode
または別のgroupNode
にすることができます。
たとえば、Employee Dataノードにはページが必要ないが、ユーザーが直接View Employeeページにナビゲートできるようにするとします。必要な子ノードのid
属性をグループ・ノードのidref
属性の値として指定することで、グループ・ノードを使用して「Employee Data」ページを表します。グループ・ノードを使用すると、単に子ノードの集約であるノード用にページを作成せずに階層を維持できます。
sharedNode: 別のXMLMenuModel
インスタンスを参照します。sharedNode
要素は真のノードではなく、ナビゲーションの実行もノード自体へのレンダリングも行われません。
sharedNode
要素は、階層内の任意の場所に挿入できます。たとえば、例20-10に示されているコードでは、sharedNode
要素により、第1レベルのEmployee Dataノードと同じレベルにサブメニューが追加されています。
例20-10 sharedNodeのサンプル・コード
<?xml version="1.0" encoding="windows-1252" ?> <menu xmlns="http://myfaces.apache.org/trinidad/menu" <itemNode id="in0" label="Home" ..> <sharedNode ref="#{shared_menu}"/> <itemNode id="in1" label="Employee Data" ../> </itemNode> <itemNode id="in01" label="Help" ../> </menu>
XMLMenuModel
メタデータ・ファイルを作成すると、図20-15に示すように、メニュー・メタデータのインデント・レベルが構造ウィンドウに表示されるツリー構造に正確に反映されます。
ノードの作成に使用されている各要素のプロパティを「プロパティ」ウィンドウで設定します。itemNode
要素は表20-3、groupNode
要素は表20-4、sharedNode
要素は表20-5の説明を参照してください。
表20-3 itemNode要素の属性
属性 | 説明 |
---|---|
|
結果文字列、または結果文字列を返すELメソッド・バインディング式を指定します。どちらの場合も、結果文字列は、 |
|
ノードが選択されたときにナビゲートするページのURIを指定します(例: または、そのURIに評価されるELメソッド式を指定します。
|
|
必須。ノードのナビゲーション結果に一致するページのURI。つまり、 たとえば、ノードのアクション結果が
|
|
必須。ノードの一意の識別子を指定します。 例20-5に示されているように、各 |
|
ノードに表示するラベル・テキストを指定します。 |
groupNode
要素には、直接ナビゲーションを実行するaction
またはdestination
属性はありませんが、(action
またはdestination
属性のある)子のitemNode
を直接示すか、itemNode
要素に到達するまで、子ノードのいずれかを示す子のgroupNode
を間接的に示すことにより、アクション結果または宛先のURIを含む子ノードを示します。ナビゲーションは、その後、アクション結果またはそのitemNode
要素の宛先のURIから決定されます。
例20-11に示されているgroupNode
のコードを例にとります。実行時、ユーザーがgroupNode id="gn1"
、groupNode id="gn11"
またはitemNode id="in1"
をクリックすると、到達した最初のitemNode
(つまり、itemNode id="id1"
)に指定されているように、ナビゲーション結果はgoToSubTabOne
になります。表20-4に、groupNode
要素を使用する際に指定する必要のある属性を示します。
例20-11 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.jsf"/> <itemNode id="in2" label="LEVEL2_TAB_1" action="goToSubTabTwo" focusViewId="/menuDemo/subtab2.jsf"/> </groupNode> <itemNode id="in3" label="PRIMARY_TAB_1" focusViewId="/menuDemo/tab2.jsf" destination="/faces/menuDemo/tab2.jsf"/> </groupNode> <itemNode id="gin1" label="GLOBAL_TAB_1" action="goToGlobalOne" focusViewId="/menuDemo/global1.jsf"/> <itemNode id="gin2" label="GLOBAL_TAB_2" destination="/faces/menuDemo/global2.jsf" focusViewId="/menuDemo/global2.jsf"/> </menu>
表20-4 groupNode要素の属性
属性 | 説明 |
---|---|
|
グループ・ノードの一意の識別子。 例20-11に示されているように、各 |
|
子ノードのID (
|
|
グループ・ノードに表示するラベル・テキストを指定します。リソース・バンドルの文字列へのEL式( |
「ADFメニュー・モデルの作成」ウィザードを使用してXMLMenuModel
メタデータ・ファイルを作成する場合、マネージドBean名として指定したメタデータ・ファイル名を使用して、JDeveloperによりfaces-config.xml
ファイルのメニュー・メタデータ・ファイルにマネージドBeanが自動的に構成されます。
例20-12に、XMLMenuModel
メタデータ・ファイルの構成が1つ含まれるfaces-config.xml
ファイルの一部を示します。JDeveloperでは、デフォルトで、oracle.adf.view.rich.model.MDSMenuModel
クラスがマネージドBeanクラスとして使用され、必須で変更できないrequest
はマネージドBeanスコープとして使用されます。
例20-12 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
値は、取得されて、メニュー・メタデータ・ソース・ファイルが開かれて解析されると使用可能になります。これにより、実際のコンポーネントをレンダリングする必要がない場合でも、階層全体を作成できます。
source
: 使用するメニュー・メタデータ・ソース・ファイル(/WEB-INF/root_menu.xml
など)を指定します。
注意:
|
ウィザードを使用してプロジェクトに作成する各XMLMenuModel
メタデータ・ファイルに対し、JDeveloperにより、faces-config.xml
ファイルにマネージドBeanが構成されます。たとえば、(例20-10に示すように)別のXMLMenuModel
メタデータ・ファイルを参照するために、XMLMenuModel
にsharedNode
要素を使用すると、2つのメタデータ・ファイルが作成されます。また、例20-13に示すように、JDeveloperにより、faces-config.xml
ファイルに2つのマネージドBean構成(1つ目はメイン(ルート)メニュー・モデル用、2つ目のマネージドBeanは共有(参照)メニュー・モデル用)が追加されています。
例20-13 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>false</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つ使用します。レベルは、ゼロから始まるインデックスの番号によって決定されます。メタデータ・ファイルのグローバル・ノード(つまり、例20-5に示すように、menu要素の直接の子ノード)で始まり、level属性値は0 (ゼロ)で、次のレベル(通常はタブ)は1、その次のレベル(通常はバー)は2というように続きます。たとえば、図20-13と例20-5に示すようなページ階層の場合は、3つのnavigationPane
コンポーネントをHomeなどのページで使用し(Homeノードの下の3レベルのナビゲーション用)、さらに1つのnavigationPane
コンポーネントをグローバル・ノード用に使用します。
ヒント: メニュー・モデルにより、動的に階層(各 コードが似ているため、 |
20.8.1項「単純なページ階層の作成方法」で説明しているように、hint
属性を使用して、各階層レベルに使用するナビゲーション・アイテムのタイプ(buttons
、tabs
、bar
など)を指定します。ただし、複数のcommandNavigationItem
コンポーネントを手動で追加してナビゲーション・アイテムを指定するのではなく、例20-14に示すように、各navigationPane
コンポーネントをXMLMenuModel
マネージドBeanにバインドし、各navigationPane
コンポーネントのnodeStamp
ファセットにcommandNavigationItem
コンポーネントを1つのみ挿入します。
例20-14 XMLMenuModelマネージドBeanにバインドされたnavigationPaneコンポーネント
<af:navigationPane var="menuNode" value="#{root_menu}" level="0" hint="buttons"> <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レベルのリストなど)の |
ナビゲーション・アイテムのスタイルを設定する場合は、decorativeBox
コンポーネントを作成します。作成するには、「コンポーネント」ウィンドウの「レイアウト」パネルから「装飾ボックス」をJSFページにドラッグ・アンド・ドロップします。テーマを設定して、タブの表示方法を決定します。有効な値は次のとおりです。
default
light
medium
dark
値はそれぞれ、コンポーネントのテーマ値が指定されたときにADFスキンによってアプリケーションに適用されるルック・アンド・フィールを表します。テーマをどのように表示するかを変更できます。詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
始める前に:
ナビゲーション・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.7項「メニュー・モデルを使用したページ階層の作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
メニュー・モデルにnavigationPaneコンポーネントをバインドする手順:
階層のレベルごとに、「コンポーネント」ウィンドウの「レイアウト」パネルの「対話型コンテナおよびヘッダー」グループから、「ナビゲーション・ペイン」をJSFページにドラッグ・アンド・ドロップします。
たとえば、図20-13の階層のようなページを作成するには、JSFページにnavigationPane
コンポーネントを4つドラッグ・アンド・ドロップします。
navigationPane
コンポーネントのそれぞれについて、「プロパティ」ウィンドウの「共通」セクションを開いて、次に示すナビゲーション・アイテムのタイプの1つを「ヒント」ドロップダウン・リストで選択します。これによって、navigationPane
をどのように表示するかが決まります。
bar: バーで分割されたナビゲーション・アイテムを表示します。図20-17の「Insurance」および「Paid Time Off」リンクなどがこれに当たります。
buttons: グローバル領域のバーで分割されたナビゲーション・アイテムを表示します。図20-17の「Home」および「Help」リンクなどがこれに当たります。
choice: 関連付けられたドロップダウン・アイコンがクリックされると、ポップアップ・リストにナビゲーション・アイテムが表示されます。navigationPane
コンポーネントのicon
属性に値を含める必要があり、title
属性を使用してドロップダウン・リストにラベルを関連付けることができます。
list: ナビゲーション・アイテムが箇条書きリストで表示されます。図20-17の「Health」および「Dental」リンクなどがこれに当たります。
tabs: ナビゲーション・アイテムがタブで表示されます。図20-17の「Benefits」および「Employee Data」タブなどがこれに当たります。
「レベル」フィールドに、XMLMenuModel
メタデータ・ファイルでのメタデータのレベルを表す数値を入力します。level
属性は、ゼロから始まるインデックスの番号です。メタデータ・ファイルのグローバル・ノード(つまり、例20-5に示すように、menu
要素の直接の子ノード)で始まり、level
属性値は0
(ゼロ)で、次のレベル(通常はタブ)は1
、その次のレベル(通常はバー)は2
というように続きます。
commandNavigationItem
コンポーネントは、親のnavigationPane
コンポーネントのlevel
属性を介して、メタデータ・ファイルからメタデータを取得することができます。デフォルトでは、level
属性の値を指定しない場合は0
(ゼロ)が使用されます。つまり、navigationPane
コンポーネントのメタデータはmenu
要素の下の最初のレベルから取得され、これがcommandNavigationItem
コンポーネントによるレンダリングに使用されます。
「プロパティ」ウィンドウの「データ」セクションを開いて、次のとおりに設定します。
Value: faces-config.xml
ファイル内でルートXMLMenuModel
クラスに対して構成されている、メニュー・モデル・マネージドBeanに設定します。
注意:
|
Var: commandNavigationItem
コンポーネントに必要なデータをメニュー・モデルから取得するのに使用するテキストを設定します。
実行時に階層が作成されて各ノードにスタンプが設定されると、EL式を使用して特定可能なvar
属性に現在のノードのデータがコピーされます。var
プロパティを使用して、このプロパティに使用する名前をEL式に指定します。
ヒント: ページまたはアプリケーションのすべての |
「コンポーネント」ウィンドウの「レイアウト」パネルの「対話型コンテナおよびヘッダー」グループから、「ナビゲーション・アイテム」をnavigationPane
コンポーネントのnodeStamp
ファセットにドラッグ・アンド・ドロップします。
(必要な情報が含まれるメタデータを持つ)メニュー・モデルを参照するEL式を使用して、対応する値がメタデータに保持される残りの属性に値を設定します。手順4で、値がメタデータで保持されている対応するitemNode
要素の名前とともに、親のnavigationPane
コンポーネントに設定したvar
属性の値を使用してこれらの値にアクセスします。表20-6に、対応する値がメタデータにあるナビゲーション・アイテムの属性を示します。
表20-6 ナビゲーション・アイテムの属性および関連付けられたメニュー・モデルの属性
ナビゲーション・アイテムの属性 | 関連付けられたメニュー・モデル要素の属性 |
---|---|
text |
label |
action |
doAction |
icon |
icon |
destination |
destination |
visible |
visible |
rendered |
rendered |
たとえば、親のnavigationPane
コンポーネントのvar
属性をmenuNode
に設定した場合、action
属性の値のEL式として#{menuNode.doAction}
を使用します。これは、各ノードのメタデータに設定されているactionプロパティに解決されます。例20-15に、4レベルの階層ノードがあるメニュー・モデルにバインドするためのJSFコードを示します。
例20-15 XMLMenuModelへのバインド
<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
コンポーネントは、モデルのデータとともに使用します。
始める前に:
ナビゲーション・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.7項「メニュー・モデルを使用したページ階層の作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
メニュー・モデルを使用したブレッドクラムの作成手順:
「コンポーネント」ウィンドウの「一般コントロール」パネルの「位置」グループから、「ブレッドクラム」をJSFページにドラッグ・アンド・ドロップします。
デフォルトでは、ブレッドクラム・リンクは横に並べて表示されます。レイアウトを縦に変更するには、「プロパティ」ウィンドウの「共通」セクションを開いて「向き」ドロップダウン・リストからvertical
を選択します。
「プロパティ」ウィンドウの「データ」セクションを開いて、次のとおりに設定します。
Value: faces-config.xml
ファイル内で構成されている、ルートXMLMenuModel
マネージドBeanに設定します。これが、navigationPane
コンポーネントがバインドされるのと同じBeanです。
注意:
|
Var: commandNavigationItem
コンポーネントに必要なデータをメニュー・モデルから取得するのに使用するテキストを設定します。
実行時に階層が作成されて各ノードにスタンプが設定されると、EL式を使用して特定可能なvar
属性に現在のノードのデータがコピーされます。var
プロパティを使用して、このプロパティに使用する名前をEL式に指定します。
ヒント: ページまたはアプリケーションの |
「コンポーネント」ウィンドウの「レイアウト」パネルの「対話型コンテナおよびヘッダー」グループから、「ナビゲーション・アイテム」をドラッグしてbreadCrumbs
コンポーネントのnodeStamp
ファセットの中にドロップします。
注意:
|
(必要な情報が含まれるメタデータを持つ)メニュー・モデルを参照するEL式を使用して、対応する値がメタデータに保持される残りの属性に値を設定します。手順3で、値がメタデータで保持されている対応するitemNode
要素の名前とともに、親のbreadCrumbs
コンポーネントに設定したvar
属性の値を使用してこれらの値にアクセスします。表20-6に、対応する値がメタデータにあるナビゲーション・アイテムの属性を示します。
たとえば、breadCrumbs
コンポーネントのvar
属性をmenuNode
に設定した場合、action
属性の値のEL式として#{menuNode.doAction}
を使用します。これは、各ノードのメタデータに設定されているactionプロパティに解決されます。
第16章「メニュー、ツールバーおよびツールボックスの使用方法」で説明されているように、menuBar
およびmenu
コンポーネントは、通常、アプリケーションで変更やアクションを実行するためにユーザーがクリックするメニューの編成および作成に使用されます。可能な場合は、menuBar
コンポーネントをXMLMenuModel
実装やマネージドBeanとともに使用し、ページ階層を作成します。breadCrumbs
またはnavigationPane
コンポーネント同様、menuBar
がルートXMLMenuModel
マネージドBeanにバインドされている場合は、nodeStamp
ファセットにcommandNavigationItem
コンポーネントを1つ使用して、ページ階層をナビゲートするためのメニュー項目を動的に作成します。
Webサイトのページ階層を表すのに、タブ・ナビゲーション・システム(navigationPane
コンポーネントまたはpanelTabbed
コンポーネントを使用)では不十分である場合は、menuBar
コンポーネントを使用してナビゲーション・バーにメニューおよびサブメニューを表示します。たとえば、ユーザーが参照するショッピング・カテゴリが多数あるWebストア・アプリケーションでは、すべてのカテゴリやサブカテゴリをタブ、サブタブ、バーおよびリストにレンダリングするのではなく、トップレベルのメニューをバーに横方向に配置することをお薦めします。menuBar
がメニュー・モデルにバインドされている場合、サブメニューは、ユーザーがトップレベルのメニューまたはサブメニュー項目にカーソルを置いた場合にのみ表示されます。この配置により画面の表示領域を削減できるだけでなく、ユーザーも階層のトップから最も下のレベルまで、ワンクリックで簡単にナビゲートできます。
メニュー・モデルにバインドされていないmenuBar
コンポーネントとは異なり、メニュー・モデルにバインドされているmenuBar
は連結の解除ができず、ツールバーに使用することもできません。また、menuBar
が同じページのメニュー・モデルにバインドされているナビゲーション・タブを使用しないでください。どちらも使用する必要がある場合は、menuBar
コンポーネントを必ずナビゲーション・タブの上に配置してください。ただし、breadCrumbs
コンポーネントが、ブレッドクラム・リンクを表示するページの同じモデルにバインドされている場合は、メニュー・モデルにバインドされているmenuBar
を使用できます。
メニュー・バーのスタイルを設定する場合は、decorativeBox
コンポーネントを作成します。作成するには、「コンポーネント」ウィンドウの「レイアウト」パネルから「装飾ボックス」をJSFページにドラッグ・アンド・ドロップします。テーマを設定して、タブの表示方法を決定します。有効な値は次のとおりです。
default
light
medium
dark
値はそれぞれ、コンポーネントのテーマ値が指定されたときにADFスキンによってアプリケーションに適用されるルック・アンド・フィールを表します。テーマをどのように表示するかを変更できます。詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
始める前に:
ナビゲーション・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.7項「メニュー・モデルを使用したページ階層の作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
メニュー・モデルを使用した横方向のメニュー・バーを作成する手順:
「コンポーネント」ウィンドウの「メニューおよびツールバー」パネルから、「メニュー・バー」をJSFページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、「メニュー・モデル」セクションを開いて次の値を設定します。
Value: faces-config.xml
ファイル内で構成されている、ルートXMLMenuModel
マネージドBeanに設定します。これが、breadCrumbs
コンポーネントがバインドされるのと同じBeanです。
注意:
|
Var: commandNavigationItem
コンポーネントに必要なデータをメニュー・モデルから取得するのに使用するテキストを設定します。
実行時に階層が作成されて各ノードにスタンプが設定されると、EL式を使用して特定可能なvar
属性に現在のノードのデータがコピーされます。var
プロパティを使用して、このプロパティに使用する名前をEL式に指定します。
ヒント: ページまたはアプリケーションの |
「コンポーネント」ウィンドウの「レイアウト」パネルの「対話型コンテナおよびヘッダー」グループから、「ナビゲーション・アイテム」をmenuBar
コンポーネントのnodeStamp
ファセットにドラッグ・アンド・ドロップします。
注意:
|
(必要な情報が含まれるメタデータを持つ)メニュー・モデルを参照するEL式を使用して、対応する値がメタデータに保持される残りの属性に値を設定します。手順2で、値がメタデータで保持されている対応するitemNode
要素の名前とともに、親のmenuBar
コンポーネントに設定したvar
属性の値を使用してこれらの値にアクセスします。表20-6に、対応する値がメタデータにあるナビゲーション・アイテムの属性を示します。
たとえば、menuBar
コンポーネントのvar
属性をmenuNode
に設定した場合、action
属性の値のEL式として#{menuNode.doAction}
を使用します。これは、各ノードのメタデータに設定されているactionプロパティに解決されます。
メニュー・モデルにバインドされたコンポーネント(navigationPane
、breadCrumbs
またはmenuBar
)の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
クラスではレンダリングは行われません。モデルにバインドされたコンポーネントでは、コールからgetFocusRowKey()
メソッドへの戻り値を使用して、レベルのナビゲーション・メニュー項目がページにレンダリングされます。
メニュー・モデルにバインドされたコンポーネントのnodeStamp
ファセットに格納されたcommandNavigationItem
コンポーネントは、各ナビゲーション・アイテムのラベル・テキストおよびアクション結果を表示します。nodeStamp
ファセットがスタンプ設定されるたびに、現在のナビゲーション・アイテムのデータが到達可能なELプロパティにコピーされます。その名前は、nodeStamp
ファセットを格納するnavigationPane
コンポーネントのvar
属性によって定義されます。nodeStamp
は、到達可能なELプロパティからさらにプロパティを取得して、各アイテムのデータを表示します。ナビゲーション・メニューがレンダリングを完了すると、このプロパティは削除されます(または元の値に戻されます)。ユーザーがナビゲーション・アイテムを選択すると、デフォルトのJSF actionListener
メカニズムでは、アクション結果文字列または宛先URIを使用してページ・ナビゲーションを処理します。
nodeStamp
ファセットとともに、XMLMenuModel
クラスも、ナビゲーション・アイテムを選択されたものとしてレンダリングするかどうかを制御します。前述のように、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つ以上テストします。
例20-18に、必要なコードの例を示します。
例20-18 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; }
注意: アプリケーション階層が複雑で、深くネストされたページが含まれている場合は、メニュー・モデルを使用したナビゲーション・システムの作成がより効率的です。詳細は、20.7項「メニュー・モデルを使用したページ階層の作成」を参照してください。 |
20.6項「ページ階層へのナビゲーション・アイテムの使用」では、トップレベルのルート・ノードであるHomeの下に3つのレベルのリンクがある単純なページ階層について説明しています。図20-16および図20-17は、navigationPane
コンポーネントおよび個々のcommandNavigationItem
コンポーネントを使用して図20-10に示すページ階層のビューを作成した場合に、ユーザー・インタフェースがどのように表示されるかを表す例です。
手動で階層を作成する場合には、各ページのフォーカス・パス(ページが存在する階層内の正確な場所)を確認し、各ページに必要なnavigationPane
とcommandNavigationItem
コンポーネントの正確な数、ならびにユーザーがページを表示した際に選択済として構成する必要があるコンポーネントを確認します。たとえば、「View Employee」ページが表示されている図20-16では、navigationPane
コンポーネントが3つ必要です。第1レベルのタブに加え、「Employee Data」の第2レベルの子のバーのみが必要で、「Employee Data」タブおよび「View Employee」バーのみが選択済としてレンダリングされます。
同様に、「Health」ページが表示されている図20-17では、「Benefits」の子のバーのみが必要で、「Benefits」タブと「Insurance」バーを選択済として構成する必要があります。また、このページには、「Insurance」の下に子ノードを作成しますが、ページの端に縦方向のリストとして表示させることが可能です。縦方向のリストにある「Health」アイテムは選択済として構成され、「Health」ページのコンテンツは、縦方向のリストの右側である中央部分に表示されます。
使用するナビゲーション・アイテムのタイプ(タブ、バー、リストなど)に関係なく、navigationPane
コンポーネントを使用して階層リンクの1レベルを表し、各navigationPane
コンポーネント内の一連のcommandNavigationItem
子コンポーネントにより、実際のナビゲーション・アイテムが提供されます。たとえば、図20-17において、第1レベルのタブ(「Benefits」と「Employee Data」)の実際のリンク、第2レベルのバー(「Insurance」と「Paid Time Off」)、およびリストの「Health」と「Dental」のリンクはそれぞれ、commandNavigationItem
コンポーネントにより表示されます。バーの下に、現在のページのフォーカス・パスを示すブレッドクラム・リンクを表示するには、必要な数のcommandNavigationItem
子コンポーネントを含むbreadCrumbs
コンポーネントを使用します。
ナビゲーション階層に含まれるページ数が少なく、階層があまり深くない場合は、階層を手動で作成することもできます。これには、ナビゲーション・ルールおよびナビゲーション・ケースの作成、navigationPane
コンポーネントを使用した階層の作成、およびcommandNavigationItem
コンポーネントを使用したリンクの作成が含まれます。
始める前に:
ナビゲーション・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.8項「単純なナビゲーション階層の作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
手動でナビゲーション階層を作成する手順:
「アプリケーション」ウィンドウで、WEB-INFノードを展開し、faces-config.xmlをダブルクリックします。
ソース・エディタで、グローバルなJSFナビゲーション・ルールを1つ作成し、この中で、ページ階層のすべてのノード(つまりページ)のナビゲーション・ケースを指定します。
たとえば、図20-10に表示されているページ階層には、10個のノードがあります(これにはグローバルのHelpノードも含まれます)。この場合、例20-19に示すように、faces-config.xml
ファイルの1つのグローバル・ナビゲーション・ルール内に10のナビゲーション・ケースを作成します。
各ナビゲーション・ケースに、一意の結果文字列と、指定された文字列に一致する結果値がナビゲーション・システムによって返された場合に表示するJSFページへのパスを指定します。
例20-19 faces-config.xml内のページ階層のグローバル・ナビゲーション・ルール
<navigation-rule> <navigation-case> <from-outcome>goHome</from-outcome> <to-view-id>/home.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHelp</from-outcome> <to-view-id>/globalhelp.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goEmp</from-outcome> <to-view-id>/empdata.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goBene</from-outcome> <to-view-id>/benefits.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goIns</from-outcome> <to-view-id>/insurance.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goPto</from-outcome> <to-view-id>/pto.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goView</from-outcome> <to-view-id>/viewdata.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goCreate</from-outcome> <to-view-id>/createemp.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goHealth</from-outcome> <to-view-id>/health.jsf</to-view-id> </navigation-case> <navigation-case> <from-outcome>goDental</from-outcome> <to-view-id>/dental.jsf</to-view-id> </navigation-case> </navigation-rule>
JDeveloperにおけるナビゲーション・ケースの作成方法の詳細は、3.3項「ページ・フローの定義」を参照してください。
すべての階層ノードにJSFページを作成します。ナビゲーション・タブのスタイルを設定する場合は、decorativeBox
コンポーネントを作成します。作成するには、「コンポーネント」ウィンドウの「レイアウト」パネルから「装飾ボックス」を各ページにドラッグ・アンド・ドロップします。テーマを設定して、タブの表示方法を決定します。有効な値は次のとおりです。
default
light
medium
dark
値はそれぞれ、コンポーネントのテーマ値が指定されたときにADFスキンによってアプリケーションに適用されるルック・アンド・フィールを表します。テーマをどのように表示するかを変更できます。詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。ページ・テンプレートを使用してJSFページの位置設定やビジュアルなスタイル設定を行うには、10.3項「ページ・テンプレートの使用」を参照してください。
「コンポーネント」ウィンドウの「レイアウト」パネルの「対話型コンテナおよびヘッダー」グループから、「ナビゲーション・ペイン」を各ページにドラッグ・アンド・ドロップします。navigationPane
コンポーネントを、ページの階層の各レベルにドラッグ・アンド・ドロップします。
たとえば、図20-17のような「Health」ページを作成するには、navigationPane
コンポーネントを4つドラッグ・アンド・ドロップします。Healthページでは、すでにページのルック・アンド・フィールを作成するためのレイアウト・コンポーネントが含まれているテンプレートの特定の領域に、コンポーネントをドロップします。
navigationPane
コンポーネントのそれぞれについて、「プロパティ」ウィンドウの「共通」セクションを開いて、次に示すナビゲーション・アイテムのタイプの1つを「ヒント」ドロップダウン・リストで選択します。これによって、navigationPane
コンポーネントをどのように表示するかが決まります。
bar: バーで分割されたナビゲーション・アイテムを表示します。図20-17の「Insurance」および「Paid Time Off」リンクなどがこれに当たります。
buttons: グローバル領域のバーで分割されたナビゲーション・アイテムを表示します。図20-17の「Home」および「Help」リンクなどがこれに当たります。
choice: 関連付けられたドロップダウン・アイコンがクリックされると、ポップアップ・リストにナビゲーション・アイテムが表示されます。navigationPane
コンポーネントのicon
属性に値を含める必要があり、title
属性を使用してドロップダウン・リストにラベルを関連付けることができます。
list: ナビゲーション・アイテムが箇条書きリストで表示されます。図20-17の「Health」および「Dental」リンクなどがこれに当たります。
tabs: ナビゲーション・アイテムがタブで表示されます。図20-17の「Benefits」および「Employee Data」タブなどがこれに当たります。
navigationPane
コンポーネントのそれぞれについて、様々なリンクを表すのに必要な数のcommandNavigationItem
コンポーネントを追加します。追加するには、「コンポーネント」ウィンドウの「レイアウト」パネルにある「対話型コンテナおよびヘッダー」グループから、「ナビゲーション・アイテム」をドラッグ・アンド・ドロップします。必要な各リンクのnavigationPaneコンポーネントの子として、「ナビゲーション・アイテム」
をドロップします。
たとえば、図20-17のような「Health」ページを作成するには、各navigationPane
コンポーネントに2つずつ、合計8つのcommandNavigationItem
コンポーネントを使用します。
パフォーマンスのヒント: 実行時、使用可能なブラウザの領域が、ナビゲーション・ペインのタブやバーのコンテンツ、またはブレッドクラムのコンテンツの表示に必要な領域より少ない場合、表示されていない項目をユーザーが選択して表示できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。 |
各commandNavigationItem
コンポーネントで、ナビゲーションを必要なページに設定します。「プロパティ」ウィンドウで、「共通」セクションを開き、「アクション」フィールドで、アクションの静的な結果文字列を指定するか、EL式を使用してアクション・メソッドを参照します。文字列を使用する場合は、手順2で作成したページのナビゲーション・ルールに設定されたナビゲーション・メタデータに一致する必要があります。メソッドを参照する場合は、必要な文字列がそのメソッドにより返される必要があります。
「プロパティ」ウィンドウの「動作」セクションを開きます。ページがレンダリングされた直後にcommandNavigationItem
コンポーネントを選択された状態で表示するには、「選択済」ドロップダウン・リストからtrue
を選択し、そのようにしない場合はfalse
を選択します。
実行時、ナビゲーション・アイテムがユーザーに選択されている場合は、そのコンポーネントのselected
属性がselected="true"
に変更され、外観を変更してアイテムが選択済であることをユーザーに示します。たとえば、図20-17では、「Benefits」タブ、「Insurance」バー、および「Health」リスト・アイテムが、背景色またはフォント・スタイルの変更によって選択済として表示されます。選択済のステータスを表示するためにコードを記述する必要はありません。属性値がtrue
の場合は、アイテムのcommandNavigationItem
コンポーネントのselected
属性により、選択済のステータスの有効化が処理されます。
例20-20に、現在のページが「Health」の場合に使用可能なナビゲーション・アイテムの生成に使用されるコードを示します。HealthページはBenefitsページを経由してInsuranceページからアクセスされているため、これらの3つのリンクのcommandNavigationItem
コンポーネントではselected="true"
です。
例20-20 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>
選択済の状態をプログラムで変更するには、バッキングBeanメソッドを記述してアクション・イベントを処理する必要があります。その後、例20-21に示すように、commandNavigationItem
コンポーネントのactionListener
属性のメソッドを参照します。
例20-21 選択済の状態を変更するためのactionListenerの使用
<!-- JSF Page Code -----> <af:navigationPane hint="tabs"> <af:commandNavigationItem text="Benefits" actionListener="#{myBean.navigationItemAction}" partialSubmit="true"../> . </af:navigationPane> <!-- Managed Bean Code -----> public void navigationItemAction(ActionEvent event) { UIComponent actionItem = event.getComponent(); UIComponent parent = actionItem.getParent(); while (! (parent instanceof UIXNavigationHierarchy) ) { parent = parent.getParent(); if (parent == null) { System.err.println( "Unexpected component hierarchy, no UIXNavigationHierarchy found."); return; } } List<UIComponent> children = parent.getChildren(); for (UIComponent child : children) { FacesBean childFacesBean = ((UIXComponent) child).getFacesBean(); FacesBean.Type type = childFacesBean.getType(); PropertyKey selectedKey = type.findKey("selected"); if (selectedKey != null) { childFacesBean.setProperty(selectedKey, child==actionItem); } } RequestContext adfContext = RequestContext.getCurrentInstance(); adfContext.addPartialTarget(parent); }
図20-16および図20-17の両方で、ページ階層におけるユーザーの現在の位置は、現在のページからルート・ページに戻るリンクのパスで示されています。ブレッドクラムとも呼ばれるリンクのパスは、2番目のバーの下、垂直のリスト(存在する場合)の上に表示されます。そのようなリンクのパスを作成するには、一連のcommandNavigationItem
コンポーネントを子として含むbreadCrumbs
コンポーネントを使用します。
始める前に:
ナビゲーション・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.8項「単純なナビゲーション階層の作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
手動でブレッドクラムを作成する手順:
「コンポーネント」ウィンドウの「一般コントロール」パネルの「位置」グループから、「ブレッドクラム」をJSFページにドラッグ・アンド・ドロップします。
デフォルトでは、ブレッドクラム・リンクは水平に表示されます。レイアウトを縦に変更するには、「プロパティ」ウィンドウの「共通」セクションを開いて「向き」ドロップダウン・リストからvertical
を選択します。
ブレッドクラム内のリンクごとに、commandNavigationItem
コンポーネントを作成します。作成するには、「コンポーネント」ウィンドウの「レイアウト」パネルにある「対話型コンテナおよびヘッダー」グループから「ナビゲーション・アイテム」をbreadCrumbs
コンポーネントに子としてドラッグ・アンド・ドロップします。最後の項目が現在のページを表します。
ヒント: レンダラまたはクライアントのデバイス・タイプによっては、ブレッドクラムの最後のリンクが表示されない場合がありますが、 |
各commandNavigationItem
コンポーネント(最後を除く)で、ナビゲーションを必要なページに設定します。「プロパティ」ウィンドウで、「共通」セクションを開き、「アクション」フィールドで、アクションの静的な結果文字列を指定するか、EL式を使用してアクション・メソッドを参照します。文字列を使用する場合は、手順2で作成した、ページのナビゲーション・ルール内で設定されているナビゲーション・メタデータに一致している必要があります(20.8.1項「単純なページ階層の作成方法」を参照)。メソッドを参照する場合は、必要な文字列をそのメソッドが返す必要があります。
たとえば、図20-17の「Health」ページに表示されているブレッドクラムを作成するには、commandNavigationItem
コンポーネントを4つドラッグ・アンド・ドロップします(例20-22を参照)。
例20-22 個々の子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つのみ残ると、その最後の1つのタブは閉じられないことを意味します。
タブの削除を実行するにはハンドラを実装します。ユーザーがタブを閉じると、タイプがremove
のItemEvent
が起動されます。このイベントの処理と実際のタブの削除、およびその他の必要な機能(警告ダイアログの表示や子コンポーネントの処理方法など)には、開発者が作成するコードで行う必要があります。イベントの詳細は、第6章「イベントの処理」を参照してください。ポップアップ・ダイアログおよびウィンドウの使用方法の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
commandNavigationItem
コンポーネントのitemListener
属性で、解決結果がハンドラ・メソッドとなるEL式を設定します。このハンドラ・メソッドが、実際のタブの削除を処理します(例20-23を参照)。
例20-23 タブ・アイテムを削除するための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
コンポーネントのhint
属性の値がtabs
に設定されている場合にこのコンポーネントによってレンダリングされるタブのサイズは、ラベルとして使用されているテキストの長さによって決まります。このようなタブのサイズを設定するには、次に示すnavigationPane
コンポーネントの属性を構成します。
maxTabSize
: サイズをピクセル単位で設定します。タブのサイズがこれよりも大きくなることはありません。
minTabSize
: サイズをピクセル単位で設定します。タブのサイズがこれよりも小さくなることはありません。
truncationStyle
: ellipsis
に設定すると、maxTabSize
に基づいて収まらないテキストを切り捨てた後に、省略記号が表示されます。none
に設定した場合は、テキストがタブに収まらないときにテキストの切捨てのみが行われます。
内蔵のオーバーフロー・インジケータが表示されるのは、アプリケーション・ウィンドウが圧縮レイアウトの場合です。つまり、アプリケーション・ウィンドウの幅は、すべてのナビゲーション・タブを表示するのに十分ではありません。図20-18に示すように、ユーザーは、このようなオーバーフロー・インジケータによってレンダリングされたドロップダウン・リストで、移動先のナビゲーション・アイテムを選択できます。
図20-18に示すようにオーバーフロー・インジケータを表示する(デフォルトの動作)かわりに、navigationPane
コンポーネントの-tr-layout-type
スキニング・キーを構成すると、コンポーネントによってコンベア・ベルトがレンダリングされるようになります。ユーザーはこのベルトを左右にスクロールすると、非表示になっているタブを表示できます。また、-tr-layout-type
スキニング・キーを構成すると、すべてのナビゲーション・タブが1つのドロップダウン・リストの中にレンダリングされます(図20-19を参照)。この構成は、navigationPane
コンポーネントのhint
属性がtabs
に設定されている場合にのみ有効です。navigationPane
コンポーネントのhint
属性が別の値に設定されている場合は、-tr-layout-type
スキニング・キーをデフォルト値(overflow
)に設定してください。
例20-24に、アプリケーションのADFスキン・ファイルの-tr-layout-type
スキニング・キーを構成して、navigationPane
およびpanelTabbed
コンポーネントにコンベア・ベルトをレンダリングする方法を示します。スキニングの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
例20-24 -tr-layout-typeスキニング・キーの構成によるコンベア・ベルトのレンダリング
af|panelTabbed, af|navigationPane { -tr-layout-type: conveyor; }
図20-19に、圧縮レイアウトでコンベア・ベルトをレンダリングするnavigationPane
コンポーネントを示します。
注意: アプリケーションでFusionテクノロジ・スタックまたはADF Controllerを使用する場合は、ADFタスク・フローを使用してアプリケーションのページ階層のナビゲーション・システムを作成してください。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のバインド・タスク・フローでのトレイン・コンポーネントの使用に関する項を参照してください。 |
ユーザーが特定の順序で表示する必要のある一連のページがある場合は、各ページにtrain
コンポーネントを使用して、マルチステップ・プロセスをガイドする一連のナビゲーション・アイテムを表示することを検討してください。図20-20に、ページ上でレンダリングされたtrain
コンポーネントの外観の例を示します。train
コンポーネントはマルチステップ・プロセスのステップ数を表示するだけでなく、プロセス全体との関連における現在のステップの位置も示します。
train
コンポーネントは、トレイン・ストップとして表される構成済の各手順を、すべてのストップが線でつながった状態でレンダリングします。各トレイン・ストップにはイメージ(四角いブロックなど)があり、そのイメージの下にラベルがあります。
各トレイン・ストップは、マルチステップ・プロセスの1つの手順または1ページに対応します。ユーザーは、イメージまたはラベルをクリックして新しいページを表示し、トレイン・ストップをナビゲートします。一般的に、トレイン・ストップは順番にたどる必要があります。つまり、ユーザーは最初に手順1にアクセスし、手順2に移動し、次に手順3というように移動します。ユーザーがまだ手順2に到達していないときに手順3にジャンプすることはできません。また、トレイン・ストップは、エンド・ユーザーがストップを順番に表示しなくてもよいように構成することも可能です。トレイン・ストップをこの方法で構成する場合は、直接表示できるすべてのトレイン・ストップが有効化されます。
図20-20に示すように、train
コンポーネントには、トレイン・ストップ用に少なくとも4つのスタイルが用意されています。ユーザーが表示している現在のストップは、トレイン・ストップのラベルが太字フォント・スタイルで示され、ストップには異なるイメージが使用されます。現在のストップより前の表示済のストップは、ラベルのフォントとイメージが異なる色で示されます。現在のストップの直後のストップは、有効化されて表示されます。表示されていないその他のストップは、グレー表示されます。
トレイン・ストップにはサブトレインを入れることができます。つまり、アクション・コンポーネント(たとえばbutton
コンポーネント)によって子のマルチステップ・プロセスを親ストップから開始し、サブプロセスの完了後に正しい親ストップに戻るように構成することができます。3番目のストップに2つのストップを含むサブプロセス・トレインがあるとします。ユーザーがサブプロセス・トレインの1番目のストップにナビゲートすると、図20-21に示すように、ADF Facesにより、サブプロセス・トレインの前後に親トレインを表すアイコンが表示されます。
train
コンポーネントにtrainButtonBar
コンポーネントを使用して、図20-22に示すように、「Back」および「Next」ボタンという形で、trainに追加のナビゲーション・アイテムを指定できます。これらの「Back」および「Next」ボタンを使用した場合、ユーザーは現在のストップから前後のトレイン・ストップにのみナビゲートできます。trainButtonBar
コンポーネントは、train
コンポーネントなしでも使用できます。たとえば、表示されないストップがある場合、いくつかの条件付きロジックに基づいて、ストップを表示せずに「Back」および「Next」ボタンのみを表示することが必要な場合があります。
どちらのtrainコンポーネントも、value
属性をタイプorg.apache.myfaces.trinidad.model.MenuModel
のトレイン・モデルにバインドすることで機能します。トレイン・メニュー・モデルには、次の処理に必要な情報が含まれています。
特定のトレイン動作の制御(トレインによりユーザーがどのようにトレイン・ストップを前進してマルチステップ・プロセスを完了するか)
トレイン・ストップ・ラベルを含むトレイン・ストップおよび各ストップのステータスの動的な生成(現在ストップは選択、完了、未完了または無効のいずれの状態であるか)
注意: ADFモデル・レイヤーおよびADFコントローラを使用しているアプリケーションでは、このナビゲーションおよび表示は異なる方法で設定および処理されています。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のバインド・タスク・フローでのトレイン・コンポーネントの使用に関する項を参照してください。 |
つまり、トレインのメニュー・モデルは、MenuModel
抽象クラスを拡張することによって実装され、この抽象クラスはTreeModel
クラスを拡張します(詳細は、第12章「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照)。MenuModel
オブジェクトは、ページやアプリケーションのメニュー構造を表すことも、ページの階層やフローに含まれるストップを表すこともあります。
MenuModel
クラスのインスタンスは特殊なTreeModel
オブジェクトであるため、TreeModel
オブジェクト内のノードはトレイン・ストップを表すことができます。trainコンポーネント内のトレイン・ストップを表すノード・インスタンスは、タイプTrainStopModel
にすることも、任意のオブジェクト(TrainStopModel
オブジェクトと同じEL構造を提供する場合)にすることもできます。ただし、TrainStopModel
クラスは、結果、およびストップのラベルやimmediate
、disabled
、visited
属性の状態を取得するために、関連するすべてのメソッドを公開する便利なインタフェースです。
MenuModel
クラスは、ツリーのどの部分で現在のトレイン・ストップ(ページ)がフォーカスされているかを示すこともできます。MenuModel
クラスのgetFocusRowKey()
メソッドは、現在のviewId
のフォーカス・ページのrowKey
オブジェクトを返します。trainのメニュー・モデル実装にも固有のトレイン動作があります。この動作は、MenuModel
抽象クラス、または便利なProcessMenuModel
クラスを拡張することで実装できます。これらのどちらのクラスも次のパッケージから派生しています。
org.apache.myfaces.trinidad.model
トレイン動作は、現在のトレイン・ストップを表示している間に、ユーザーがトレインのその他のどのストップを表示できるかを制御します。
トレイン・ストップ・モデルを作成するには、TrainStopModel
抽象クラスを拡張して抽象メソッドを実装することも、同じメソッド・シグネチャを使用して独自のクラスを作成することもできます。作成するクラスではrowData
オブジェクトを返す必要があります。このクラスのインスタンスは、(MenuModel
実装の)基礎となるコレクションのrowData
オブジェクトを表します。
メニュー・モデルへのtrainコンポーネントのバインドは、value
属性を使用して、XMLMenuModel
クラスにnavigationPane
コンポーネントをバインドするのに似ています(20.7.3項「メニュー・モデルへのnavigationPaneコンポーネントのバインド方法」で説明されています)。ただし、TrainStopModel
実装がrowData
オブジェクトを表している場合は、トレイン・ストップの作成に、nodeStamp
ファセットとそのcommandNavigationItem
コンポーネントを使用する必要はありません。ADF Facesにより、実行時にnodeStamp
ファセットおよびcommandNavigationItem
コンポーネントが動的に作成され、トレイン・ストップ・モデルのメソッドがcommandNavigationItem
コンポーネントの適切なプロパティに自動的にバインドされます。例20-25に、トレインの簡略化されたバインディングを示します。
ヒント: 様々な場所のトレイン・ストップの情報を照合する必要がある場合は、 |
トレイン・モデルのMenuModel
実装には、特定のトレイン動作が必要です。トレイン動作は、現在表示されているページに基づいてユーザーがアクセスできるページをどのように制御するかを定義します。ADF Facesでは、Plus OneおよびMax Visitedという2つのトレイン動作がサポートされています。
トレインに5つのページまたは5つのストップがあり、ユーザーはページ1からページ4まで順番にナビゲート済であるとします。ユーザーは現在、ページ4を表示しています。ここでは、トレイン・モデルに実装されているトレイン動作に応じて、ユーザーは次に進むことができます。
Plus One動作: ユーザーはページ3またはページ5に移動できます。
Max Visited動作: ユーザーはページ1から3(前に表示済)と、順序の次のページであるページ5を表示できます。ユーザーがページ2に移動した場合、ユーザーが表示できる次のページは、ページ1、3、または4です。順序の中で表示された最大のトレイン・ストップはページ4であるため、ユーザーはページ5を表示できません。
マルチステップ・プロセスのすべてのページにトレインを定義および使用する手順:
トレインにJSFナビゲーション・ルールおよびナビゲーション・ケースを作成します。トレインのナビゲーション・ルールおよびそのナビゲーション・ケースの作成方法は、20.8.1項「単純なページ階層の作成方法」に似ています。グローバル・ナビゲーション・ルールを1つ作成し、この中で、トレイン内のすべてのトレイン・ストップのナビゲーション・ケースを指定します。
注意: 各トレイン・ストップが個別のページで、クライアント・ブラウザのURLがそれぞれの新しいページを参照するように設定する場合は、JSFナビゲーション・ルール内に定義する各ナビゲーション・ケースの |
特定のトレイン動作を実装するトレイン・モデルを作成し、スタンプを設定するためのトレイン・ストップ項目を指定します。これには、トレイン・ストップ・モデル・クラスおよびメニュー・モデル・クラスの作成が含まれます。詳細は、20.9.1項「トレイン・モデルの作成方法」を参照してください。
トレイン・モデルにマネージドBeanを構成します。詳細は、20.9.2項「トレイン・モデルへのマネージドBeanの構成方法」を参照してください。
各トレイン・ストップにJSFページを作成します。
各ページで、トレイン・モデルにtrain
コンポーネントをバインドします。20.9.3項「JSFページでのトレイン・モデルへのバインド方法」を参照してください。trainButtonBar
コンポーネントを同じトレイン・モデルにバインドすることもでき、このようにするとトレイン用のナビゲーション・ボタンをさらに表示できます。
トレイン・メニュー・モデルを定義するには、次のものを作成します。
トレイン・ストップをレンダリングするためのデータを提供するトレイン・ストップ・モデル
特に、現在のトレイン・ストップを表示している間にユーザーがトレインのどのストップを表示できるか、どのストップを無効にする必要があるか、またはトレインを順番にナビゲートする必要があるかを制御する特定のトレイン動作(Max VisitedまたはPlus Oneなど)が指定されたMenuModel
実装
ADF Facesを使用すると、次のような追加のpublicクラスが用意されているため、トレイン・メニュー・モデルの定義がより簡単になります。
トレイン・ストップ・モデルを実装するための抽象クラスTrainStopModel
。
Max VisitedおよびPlus One動作を実装するクラスProcessMenuModel
およびProcessUtils
。
ユーザーは、MenuModel
をオーバーライドして独自のカスタム・トレイン動作を実装することも、既存のProcessMenuModel
を拡張して特殊な動作を作成することもできます。
トレイン・モデル・クラスの例として、ADF Facesデモ・アプリケーションのoracle.adfdemo.view.nav.rich
パッケージを参照してください。
始める前に:
トレイン・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.9項「trainコンポーネントを使用したマルチステップ・プロセス用のナビゲーション・アイテムの作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
トレイン・モデルを作成する手順:
トレイン・ストップ・モデル・クラスを作成します。トレイン・ストップ・モデル・オブジェクトには、各トレイン・ストップにスタンプを設定するための行データが保持されます。作成するトレイン・ストップ・モデル実装では、トレインの各ストップのプロパティを設定および取得し、トレイン・ストップのレンダリングに必要なメソッドを定義する必要があります。トレイン・ストップのプロパティは、commandNavigationItem
コンポーネントのプロパティに対応します。このため、例20-25に示すように、簡略化されたバインディングを使用できます。
または、抽象クラスTrainStopModel
を拡張して、サブクラスの抽象メソッドを実装できます。
ELにより自動的にバインドされるcommandNavigationItem
コンポーネントのプロパティを次に示します。
action
: 静的なアクション結果、またはアクション結果を返すアクション・メソッドへの参照。結果は、JSFのデフォルトのActionListener
メカニズムを介して、ページ・ナビゲーションに使用されます。
disabled
: トレイン・ストップを非対話型とするかどうかを示すブール値。使用するトレイン動作が、このプロパティ値に影響することに注意してください。詳細は、手順2を参照してください。
immediate
: データ検証を実行する必要があるかどうかを決定するブール値。使用するトレイン動作が、このプロパティ値に影響することに注意してください。詳細は、手順2を参照してください。
messageType
: トレイン・ストップ・イメージ上のメッセージ・アラート・アイコンを指定する値。使用可能な値は、none
、error
、warning
、info
およびcomplete
です。メッセージの詳細は、第19章「ヒント、メッセージおよびヘルプの表示」を参照してください。
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ストップとは、現在のセッション内でユーザーがアクセス済のストップのうち、最も先にあるものです。visited
属性は、ストップがmax visitedストップよりも前であるか、max visitedストップそのものである場合にtrue
に設定されます。
Plus One: Plus Oneストップでは、表示された最も進んでいるストップは追跡されません。現在のストップ、または現在のストップの前のストップでは、visited
属性がtrue
に設定されます。
現在のページのデータを検証する必要がない場合は、immediate
属性をtrue
に設定する必要があります。前述のPlus One動作のページ4に、検証が必要なデータがあるとします。ページ4に進んでページ2に戻った場合、ページ5に進むためにユーザーは後からページ4に戻る必要があります。これは、ページ4からページ1、2または3に戻る場合はページ4のデータを検証する必要はないが、ページ5に進む場合にはデータを検証する必要があることを意味します。immediate
属性がどのように機能するかの詳細は、5.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のデフォルトでは、Max Visited動作が使用されるのはnull以外のmaxPathKey
値がトレイン・モデルに渡されたときです。これは、この動作をサポートするために開発者が作成するマネージドBeanによって決定されます(詳細は、20.9.2項「トレイン・モデルへのマネージドBeanの構成方法」を参照してください)。maxPathKey
値がnull
の場合には、Plus One動作が使用されます。
Arraylist
オブジェクトに個々のトレイン・ストップを収集するには、トレイン・モデルにマネージドBeanを使用しますが、これはtrainコンポーネントのvalue
属性にバインドするためにメニュー・モデルに挿入されるツリー・モデルになります。モデルへの挿入に適切な値でBeanをインスタンス化し、トレイン内の各トレイン・ストップまたはページにマネージドBeanも構成する必要があります。
始める前に:
トレイン・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.9項「trainコンポーネントを使用したマルチステップ・プロセス用のナビゲーション・アイテムの作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
トレイン・モデルにマネージドBeanを構成する手順:
インストール時に設定する必要のあるプロパティ値が含まれるマネージドBeanをトレインの各ストップに構成し、ArrayList
に渡すトレイン・ストップを作成します。
トレイン・ストップに子のサブプロセス・トレインがある場合は、各サブプロセス・トレイン・ストップにもマネージドBeanが必要です。
各Beanは、20.9.1項「トレイン・モデルの作成方法」で作成されたトレイン・ストップ・モデル・クラスのインスタンスである必要があります。例20-26に、faces-config.xml
ファイル内のトレイン・ストップのためのサンプルのマネージドBeanコードを示します。
例20-26 すべてのトレイン・ストップのマネージド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.jsf</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.jsf</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 --> ...
マネージド・プロパティにより、トレイン・ストップ・モデル・オブジェクト(20.9.1項「トレイン・モデルの作成方法」の手順1で作成されたクラス)に値が設定されます。
viewId
値は、ユーザーがトレイン・ストップをクリックした場合にナビゲートされるページへのパスおよびファイル名です。
outcome
プロパティ値は、JSFナビゲーション・ケースに一致するアクション結果文字列です。デフォルトのJSF ActionListener
メカニズムは、トレイン・ストップが選択された際のナビゲート先のビューとしてトレイン・ストップに関連付けられたページの選択に使用されます。
label
プロパティ値は、トレイン・ストップ・イメージの下に表示されるトレイン・ストップのラベル・テキストです。値は静的にすることも、リソース・バンドルの文字列に評価されるEL式にすることもできます。
model
プロパティ値は、トレイン・モデルのマネージドBean名です(例20-30を参照)。
トレイン・ストップに子のサブプロセス・トレインがある場合には、例20-27に示すように、マネージドBean構成にも、値式(#{train4a}
など)でサブプロセス・トレイン・ストップのマネージドBean名をリストするプロパティ(children
など)を指定する必要があります。
例20-27 子のサブプロセス・トレインを含むトレイン・ストップのマネージド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.jsf</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を構成し、トレイン・ツリー・モデルに渡すトレイン・ストップのリストを作成します。
例20-28に、トレイン・ストップのリストを作成するためのサンプルのマネージドBeanコードを示します。
例20-28 トレイン・リストのマネージド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
値を使用して、インスタンス化する必要があります(例20-27を参照)。
例20-29 トレイン・ツリー・モデルのマネージド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
値を使用して、インスタンス化する必要があります。
例20-30に、トレイン・モデルのサンプルのマネージドBeanコードを示します。
例20-30 トレイン・モデルのマネージド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つずつ使用し、ユーザーがトレインを移動できるようにするボタンを作成します。
始める前に:
トレイン・コンポーネントの属性が、機能にどのように影響するかを理解しておくと役に立ちます。詳細は、20.9項「trainコンポーネントを使用したマルチステップ・プロセス用のナビゲーション・アイテムの作成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、20.1.2項「ナビゲーション・コンポーネントのその他の機能」を参照してください。
トレイン・コンポーネントをトレイン・モデルにバインドする手順:
「コンポーネント」ウィンドウの「一般コントロール」パネルの「位置」グループから、「トレイン」をJSFページにドラッグ・アンド・ドロップします。オプションで、「トレイン・ボタン・バー」をドラッグ・アンド・ドロップします。
コンポーネントをバインドします。トレイン・モデルのMenuModel
実装が、public抽象クラスoracle.adf.view.rich.model.TrainStopModel
と同様にrowData
オブジェクトを返す場合は、簡略化された形態のトレイン・バインディングをtrainコンポーネントで使用できます(例20-31を参照)。
例20-31 メニュー・モデルにバインドされたtrainコンポーネントの簡略化された実装
<af:train value="#{trainMenuModel}"/> <af:trainButtonBar value="#{trainMenuModel}"/>
trainMenuModel
EL式は、トレイン・モデルのマネージドBean名です(例20-30を参照)。
簡略化されたバインディングを使用できない場合は、トレイン値をトレイン・モデルBeanにバインドし、トレインにnodeStamp
ファセットを手動で追加する必要があります。さらに、例20-32に示すように、そのトレインにcommandNavigationItem
コンポーネントを追加します。