| Oracle® Fusion Middleware Oracle WebCenter Portal開発者ガイド 11g リリース1 (11.1.1.7.0) B72084-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle WebCenter Portal開発者ガイド 11g リリース1 (11.1.1.7.0) B72084-02 |
|
前 |
次 |
この章では、WebCenter Portal: Frameworkアプリケーションに定義されたナビゲーション・モデルを取得して、そのモデルをポータルのページに公開する方法を示します。
この章には次の項が含まれます:
WebCenter Portal: Frameworkアプリケーションのナビゲーションの概要については、第10項「ポータル用のナビゲーション・モデルの構築」を参照してください。
ポータルにナビゲーション・モデルを定義する方法については、第10.2項「ナビゲーション・モデルの作成」および第10.3項「ナビゲーション・モデルへのリソースの追加」を参照してください。
ナビゲーションの視覚化により、ナビゲーションがポータルにどのように表示されるかが決まります。たとえば、ナビゲーションを各ページの上部に一連のタブとして、あるいはページの横にツリー構造として表示できます。あるいは、ナビゲーションの視覚化として、マスター/ディテール・ナビゲーションを表示する方法も一般的です。たとえば、ページの上部にタブがあり、各タブには、ページの横にツリー構造で表示される追加のナビゲーションがあります。
通常、ページ・テンプレートにナビゲーションの視覚化を追加するため、これを1箇所で定義してポータル全体に一貫して伝播させることができます。ただし、個々のページにナビゲーションの視覚化を追加することもできます。
WebCenter Portalには、ナビゲーションを視覚化するためにポータルのページ・テンプレートに追加できる組込みのナビゲーション・タスクが複数あります。詳細は、第13.2項「組込みナビゲーション・タスク・フローのページ・テンプレートへの追加」を参照してください。
組込みナビゲーション・タスク・フローにより、ナビゲーション・モデルをすばやくテストできますが、ナビゲーションの視覚化はかなり簡単になります。さらに高度な視覚化が必要になる場合も多くあります。これを行うには、ADFナビゲーション・コンポーネントとWebCenter PortalナビゲーションのAPIを使用して、各自のナビゲーションUIを作成する必要があります。詳細は、第13.3項「ナビゲーションのページ・テンプレートへのプログラムによる追加」を参照してください。
いずれかの組込みナビゲーション・タスク・フローをリソース・パレットからテンプレートの適切な場所にドラッグすることで、ナビゲーションをページ・テンプレートに追加できます。
WebCenter Portalには、ポータル・ナビゲーションの視覚化に役立つ3つのナビゲーション・タスク・フローがあります。これらは次のとおりです。
「ナビゲーション - ツリー」タスク・フロー - ツリー・ナビゲーションでは、ナビゲーション・リンクが階層構造で表示され、場合によっては複数レベルの階層が含まれます(図13-1)。ツリー・ナビゲーションでは、複雑な構造に比較的簡単にアクセスできます。通常、ツリースタイル・ナビゲーションは、ページの横に表示されます。
「ナビゲーション - メニュー」タスク・フロー - メニュー・ナビゲーションでは、一連のタブ、メニュー、バー、ボタン、選択肢、あるいはリストとしてナビゲーション・リンクが表示されます。通常は、ページの上部または下部に横並びに表示されます(図13-2)。ページやドキュメントへのリンクの場合は、メニュー・ナビゲーションが適しています。この場合、使用可能なすべてのオプションを表示するのに十分な余裕があるため、アイテムの数を把握できます。メニュー・ナビゲーションは、アプリケーションの上部にドロップダウン・メニューを表示する場合に役立ちます。
|
注意: 「ナビゲーション - メニュー」タスク・フローがレンダリングできるのは、2つのレベルのナビゲーションのみです。 |
「ナビゲーション - ブレッドクラム」タスク・フロー - ブレッドクラム・ナビゲーションでは、一連の水平リンクまたは垂直リンクが表示され、このリンクにより、ナビゲーション階層でのユーザーの現在位置がわかります(図13-3)。ブレッドクラムは、4つ以上のレベルなど階層が深い場合に特に役立つため、ユーザーは、階層の特定の場所に簡単にナビゲートできます。
追加のナビゲーション・タスク・フローは、Oracle Technology Networkからダウンロードして入手できます。
http://www.oracle.com/technetwork/middleware/webcenter/samples-196325.zip
zipファイルには、次のナビゲーション・タスク・フローが含まれます。
リスト・ナビゲーション - 垂直リスト形式でナビゲーション・モデルをレンダリングします。フォルダとそのアイテムは、ドロップダウン・メニューとしてレンダリングされます。空のフォルダはレンダリングされません。
リンク付きメニュー・ナビゲーション - 水平メニュー形式でナビゲーション・モデルをレンダリングします。最上位レベルのナビゲーション・アイテムの場合、フォルダはドロップダウン・メニューとしてレンダリングされ、子を持たないナビゲート可能リンクは最上位レベルのリンクとしてレンダリングされます。空のフォルダはレンダリングされません。
ツリー・ナビゲーション - 垂直折りたたみツリー形式でナビゲーション・モデルをレンダリングします。
zipファイルをダウンロードし、そのコンテンツをローカルで抽出します。第16.4.4項「リソース・マネージャを使用してリソースをアップロードする方法」の説明に従い、1つ以上のEARファイルをアプリケーションにアップロードできます。
この項には次のサブセクションが含まれます:
ナビゲーション・タスク・フローを追加する手順は、すべてのナビゲーション・タスク・フローで同じです。
ナビゲーション・タスク・フローを追加するには:
ナビゲーション・タスク・フローを追加するページ・テンプレートを開きます。
「リソース・パレット」で、「WebCenter Portal - サービス・カタログ」を展開します。「タスク・フロー」で、目的のナビゲーション・タスク・フローを選択して、そのフローをテンプレートの目的の場所にドラッグします。
表示されたメニューで、「リージョン」を選択して「タスク・フロー・バインディングの編集」ダイアログを開きます。
プロジェクトに「ナビゲーション・タスク・フロー」ライブラリを追加するように求められます。「ライブラリの追加」をクリックして確認します。
「タスク・フロー・バインディングの編集」ダイアログ(図13-4)で、タスク・フローのパラメータ値を必要に応じて指定します。詳細は、第13.2.2項「ナビゲーション・タスク・フローのパラメータ」を参照してください。
図13-4 「ナビゲーション - メニュー」タスク・フローの「タスク・フロー・バインディングの編集」ダイアログ
「OK」をクリックします。
表13-1では、「ナビゲーション - ツリー」タスク・フローに適用可能なタスク・フロー・バインディングのパラメータについて説明します。
表13-1 「ナビゲーション - ツリー」タスク・フロー・バインディングのパラメータ
表13-2では、「ナビゲーション - メニュー」タスク・フローに適用可能なタスク・フロー・バインディングのパラメータについて説明します。
表13-2 「ナビゲーション - メニュー」タスク・フロー・バインディングのパラメータ
表13-3では、「ナビゲーション - ブレッドクラム」タスク・フローに適用可能なタスク・フロー・バインディングのパラメータについて説明します。
表13-3 「ナビゲーション - ブレッドクラム」タスク・フロー・バインディングのパラメータ
WebCenter Portalには、タスク・フローの外観の変更に使用できる、ナビゲーション・タスク・フローごとのスタイル・クラスが用意されています。これらのスタイル・クラスを使用するには、アプリケーションで使用されるスキンCSSファイル(portal-skin.cssなど)にスタイル・クラスを追加します。
WCTreeNav - 「ナビゲーション - ツリー」タスク・フローの外観の変更に使用します。
WCMenuNav - 「ナビゲーション - メニュー」タスク・フローの外観の変更に使用します。
WCBreadcrumbNav - 「ナビゲーション - ブレッドクラム」タスク・フローの外観の変更に使用します。
例13-1に、「ナビゲーション - メニュー」タスク・フローの背景色を変更するために、スキンCSSファイルに追加する内容を示します。
スキンの詳細は、第14章「スキンの作成および管理」を参照してください。
組込みナビゲーション・タスク・フローが要件を満たさない場合、WebCenter Portalで提供されるAPIを使用して、ナビゲーション・モデル用の独自のUIを作成できます。
|
注意: ナビゲーション・モデルを使用してアプリケーション内でナビゲーションをトリガーするタスク・フローには、 <parent-action id="wcnav_parentAction"> <root-outcome>wcnav_outcome</root-outcome> </parent-action> |
WebCenter Portalには、ポータルにナビゲーションを追加するためのAPIが2セット用意されています。
式言語(EL)のAPI - EL式を使用して、ナビゲーション・モデルとナビゲーション・リソースを取得します。
REST API - 標準のHTTPメソッドを使用して、ナビゲーション・モデルとナビゲーション・リソースを指し示し、取得されたオブジェクトの標準表現を返します。REST APIは、クライアント側のプログラミング言語(JavaScript + HTMLなど)や環境(iPhoneなど)の利用時に使用できます。
この項には次のサブセクションが含まれます:
WebCenter Portalには、式言語(EL)の一連のAPIが用意されており、これらを使用すると、ナビゲーション・モデルを取得して、そのモデルを実行時モデルとして表すことができます。実行時モデルは、ADF Facesナビゲーション・コンポーネントに直接バインドできます。
使用可能なナビゲーションEL式は、第F.5項「ナビゲーションに関連するEL」にすべてリストされています。
この項には次のサブセクションが含まれます:
|
注意: この項では、ナビゲーションEL APIの使用方法について、いくつかの例を紹介します。完全な作業例については、WebCenter Portal: Frameworkアプリケーション・テンプレートを使用したアプリケーションの作成時に作成されるデフォルトのページ・テンプレート( |
ナビゲーション・コンテキストは、システム内のすべてのナビゲーション要素にアクセスするエントリ・ポイントです。具体的には、これを使用すると、プリファレンス、状態、直接参照を介してナビゲーション・モデルにアクセスでき、実際にリソースにナビゲートするカスタムUIを作成するフックが提供されます。
ナビゲーション・モデルへのアクセス
デフォルトのナビゲーション・モデル(プリファレンス) - これは、adf-config.xmlファイルのADFプリファレンスoracle.webcenter.portalapp.navigation.modelで指定されるモデルです。これを使用すると、アプリケーション全体で使用される一般的なモデルを定義でき、各ページやページ・テンプレートに移動して値を設定するのではなく、値を1箇所で変更できます。デフォルトのナビゲーション・モデルを取得するEL式は次のようになります。
#{navigationContext.defaultNavigationModel}
|
注意:
|
現在のナビゲーション・モデル(状態) - このモデルは、現在のビューへのナビゲートに使用されるものです。設定されない場合、デフォルトのナビゲーション・モデルを返します。アプリケーションには複数のナビゲーション・モデルを含めることができます。現在のナビゲーション・モデルを取得するEL式は次のようになります。
#{navigationContext.currentNavigationModel}
この式を使用すると、ページ・テンプレート内で単一の値を使用でき(ブレッドクラムを表示する場合など)、特定のナビゲーション・モデルを選択せずにその値で正しい値を表示できます。
ナビゲーション・モデルの直接アクセス(直接参照) - 特定のナビゲーション・モデルのXML定義のパスを渡して、そのモデルを選択することもできます。特定のナビゲーション・モデルを取得するEL式は次のようになります。
#{navigationContext.navigationModel['modelPath=path']
ここで、pathは、ナビゲーション・モデル定義ファイルのパスです。たとえば、次のようになります。
#{navigationContext.navigationModel['modelPath=/oracle/webcenter/portalapp/navigations/myNavigation']}
|
注意: ファイル名の拡張子 |
リソース・ナビゲーション
ナビゲーション・モデルをUIコンポーネントのactionListener属性にバインドするためのコアBean操作には次のELを使用します。例:
#{navigationContext.processAction}
例
例13-2では、現在のナビゲーション・モデルにアクセスして<af:outputText/>でツリーをレンダリングする、ナビゲーション・コンテキストを使用した簡単なツリーUIが作成されます。
例13-2 簡単なツリー・ナビゲーションUI
<af:tree var="node" value="#{navigationContext.currentNavigationModel.treeModel['startNode=/, includeStartNode=true, depth=1']}" id="t1"> <f:facet name="nodeStamp"> <af:outputText value="#{node.title}" id="ot1"/> </f:facet> </af:tree>
例13-3では、ナビゲーション・コンテキストのprocessActionリスナーを使用して、現在のノードをnodeというパラメータでactionListenerに属性として渡すADF commandImageLinkコンポーネントのナビゲーションを処理します。
例13-3 UIコンポーネントへのナビゲーション・モデルのバインド
<af:tree var="node" value="#{navigationContext.currentNavigationModel.treeModel['startNode=/, includeStartNode=true, depth=1']}" id="t1"> <f:facet name="nodeStamp"> <af:commandImageLink text="#{node.title}" id="sm_c1b" actionListener="#{navigationContext.processAction}" inlineStyle="#{node.selected ? 'font-weight:bold;' : ''}"> <f:attribute name="node" value="#{node}"/> </af:commandImageLink> </f:facet> </af:tree>
ナビゲーション実行時モデルは、基礎となるXML定義を実行時モデルとして公開し、個々のノードへの直接アクセスを提供します。実行時モデルは、セキュリティや可視性といった要因を考慮し、UIオブジェクトにバインドできる、セッションに固有の表現を作成します。
|
注意: ナビゲーションのコンテンツ、構造およびメタデータの定義のために作成するナビゲーション・モデルと、ナビゲーション・モデルの実行時の動作を決定するナビゲーション実行時モデルとの違いに注意してください。 |
デフォルトの実行時モデル(defaultTreeModel、defaultListModel、defaultMenuModelおよびdefaultSiteMap)を使用してモデル全体にアクセスしたり、実行時モデルの作成時に各種パラメータを使用して固有のサブツリーにアクセスできます。例:
#{navigationContext.defaultNavigationModel.menuModel['startNode=home,
includeStartNode=false, depth=2']}
基礎となるADF FacesのMenuModel、TreeModelおよびListModelの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』を参照してください。
モデルへのアクセス
次の実行時モデルは、基礎となる次のナビゲーション・モデルに基づいて作成できます。
UIモデル
ツリー・モデル
#{navigationContext.defaultNavigationModel.defaultTreeModel}
#{navigationContext.defaultNavigationModel.treeModel['parameters']}
メニュー・モデル
#{navigationContext.defaultNavigationModel.defaultMenuModel}
#{navigationContext.defaultNavigationModel.menuModel['parameters']}
リスト・モデル
#{navigationContext.defaultNavigationModel.defaultListModel}
#{navigationContext.defaultNavigationModel.listModel['parameters']}
検索エンジン・モデル
サイトマップ
#{navigationContext.defaultNavigationModel.defaultSiteMap}
#{navigationContext.defaultNavigationModel.siteMap['parameters']}
リソース(またはノード)へのアクセス
次のEL式を使用して、ナビゲーション・モデル内の特定のノードにアクセスできます。
#{navigationContext.defaultNavigationModel.currentSelection}
#{navigationContext.defaultNavigationModel.rootNode}
#{navigationContext.defaultNavigationModel.node['path']}
例
例13-4では、現在のナビゲーション・モデルのメニュー・モデルをブレッドクラムとしてレンダリングします。
例13-4 ナビゲーション・モデルのメニュー・モデルとしてのレンダリング
<af:breadCrumbs id="bc1"
var="node"
value="#{navigationContext.currentNavigationModel.defaultMenuModel}">
<f:facet name="nodeStamp">
<af:commandNavigationItem id="cni1"
text="#{node.title}"
actionListener="#{navigationContext.processAction}"
partialSubmit="true">
<f:attribute name="node" value="#{node}"/>
</af:commandNavigationItem>
</f:facet>
</af:breadCrumbs>
例13-5では、デフォルトのナビゲーション・モデルに基づき、アプリケーションのサイトマップを作成します。
例13-5 サイトマップの作成
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core">
<jsp:directive.page contentType="text/xml;charset=UTF-8" />
<f:view>
${navigationContext.defaultNavigationModel.defaultSiteMap}
</f:view>
</jsp:root>
サイトマップの詳細は、第13.4項「ポータル・ナビゲーションを使用したサイトマップの作成」を参照してください。
ナビゲーション・リソースは、ナビゲーション・モデル内の各ノードに対して個々のプロパティにアクセスできます。これらのプロパティは、次のカテゴリに分類されます。
属性 - ユーザーがナビゲーション要素に対して指定する共通のプロパティ。ページのノードのレンダリングに使用され、次の属性があります。
Title - ナビゲーション・モデルがページでレンダリングされるときにノードに表示されるタイトル。
AccessKey - ユーザーがマウスを使用せずにノードにアクセスする場合に入力できるキーのニーモニック(単一文字)。
Description - ノードの説明。
IconURI - ノードを視覚的に表すアイコン。これは、ナビゲーション・モデルがページにレンダリングされる際にタイトルの隣に表示されます。
Subject - ノードの検索を容易にするキーワード。
Target - ノードの選択時にそのノードが表示されるコンテナ・ページの場所。同じブラウザ・ウィンドウ内(_self)、新しいウィンドウ(_blank)、ポップアップ(_popup)、あるいはナビゲーションUIでサポートされる場所になります。
ToolTip - ユーザーがマウスをタイトル上に置いたときにノードに関する追加情報を提示するテキスト。
Modified - ノードの最終変更日。この属性は、サイトマップの作成に使用されます。
ChangeFrequency - ノードの変更が見込まれる頻度(常時、1時間に一度、毎日、週に一度、月に一度、年に一度、変更なし)。この属性は、サイトマップの作成に使用されます。
Significance - ナビゲーション・モデル内のその他のノードと比較した、該当リソースの優先度(0.0から1.0)。この属性は、サイトマップの作成に使用されます。
ExternalId - ページの静的リンクからナビゲーション・モデルの任意のノードへの直接参照を有効にするID。
Parameters - 各ノードに固有のユーザー定義プロパティ。これらは、名前と値のペアで、任意の値が含まれます。
State - 問合せが可能で、ノードへのナビゲートに使用できる組込みプロパティ。例:
ノードのタイプ。フォルダやセパレータなど
ノードがナビゲートできるかどうか
ノードのパス
親ノード、子ノードまたは兄弟ノードへのアクセス
ノードが、ナビゲーション・モデル内の現在選択されているノードかどうか、選択されているノードのパス上にあるかどうか
完全なリストについては、第F.5項「ナビゲーションに関連するEL」を参照してください。
例
例13-6では、ADF commandImageLinkコンポーネントを様々な属性でレンダリングします。
例13-6 属性によるcommandImageLinkのレンダリング
<af:commandImageLink text="#{node.title}" id="cil1" actionListener="#{navigationContext.processAction}" shortDesc="#{node.attributes['ToolTip']}" accessKey="#{node.attributes['AccessKey']}" inlineStyle="#{node.selected ? 'font-weight:bold;' : ''}"> <f:attribute name="node" value="#{node}"/> </af:commandImageLink>
例13-7では、パラメータを介して、リソースから対応するページに渡される値にアクセスします。
例13-7 ページ・パラメータへのノード値の引渡し
homePageDef.xml <pageDefinition xmlns="http://xmlns.oracle.com/adfm/uimodel" version="11.1.1.55.96" id="homePageDef" Package="oracle.webcenter.portalapp.pages"> <parameters> <parameter id="NavigationParameter" value="#{navigationContext.currentNavigationModel.currentSelection.parameters ['MyNavParam']}"/> </parameters>
例13-8では、ノードにナビゲートできるかどうかに基づき、ブレッドクラム・リンクを条件付きで表示します。これは、UIコンポーネントの基準をノードのタイプにも置いています。
例13-8 ナビゲーション・ノードの条件付き表示
<af:breadCrumbs id="bc1"
var="node"
value="#{navigationContext.currentNavigationModel.defaultMenuModel}">
<f:facet name="nodeStamp">
<af:switcher facetName="#{node.navigable}" id="swn1">
<f:facet name="true">
<af:commandNavigationItem id="cni1" text="#{node.title}"
actionListener="#{navigationContext.processAction}"
partialSubmit="true">
<f:attribute name="node" value="#{node}"/>
</af:commandNavigationItem>
</f:facet>
<f:facet name="false">
<af:outputText value="#{node.title}" rendered="#{!node.separator}" id="ot3"/>
</f:facet>
</af:switcher>
</f:facet>
</af:breadCrumbs>
ポータルのナビゲーションを視覚化するには、一般的な方法としてリンクのリストがあります。リンクをクリックすると、そのリンクに関連付けられたリソースにナビゲートします。
例13-9では、現在のナビゲーション・モデルのリスト・モデルを取得し、そのモデルをページに垂直にレンダリングします。コードは、各ノードをADF commandImageLinkコンポーネントに順にバインドしながら、ナビゲーション・モデルを反復します。ノードに子が含まれる場合、別のイテレータがページにその子をレンダリングします。ノードがナビゲートできない場合、そのノードはリンクとしてレンダリングされません。現在選択されているノードは太字で表示されます。
例13-9 リンクのリストとしてのナビゲーション
<af:panelGroupLayout id="pgl1" layout="vertical">
<af:spacer id="sp1" height="20px"/>
<af:iterator id="i1"
value="#{navigationContext.currentNavigationModel.listModel['startNode=/,
includeStartNode=false']}"
var="node">
<af:panelGroupLayout layout="vertical">
<af:commandImageLink id="cil2" text="#{node.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node.navigable}"
inlineStyle="#{node.onSelectedPath ? 'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node}"/>
</af:commandImageLink>
<af:iterator id="i2" value="#{node.children}" var="node2">
<af:panelList id="pl1">
<af:commandImageLink id="cil3" text="#{node2.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node2.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node2.navigable}"
inlineStyle="#{node2.onSelectedPath ? 'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node2}"/>
</af:commandImageLink>
</af:panelList>
</af:iterator>
</af:panelGroupLayout>
</af:iterator>
<af:spacer id="sp3" height="20px"/>
</af:panelGroupLayout>
ポータルのナビゲーションを視覚化するには、ツリー構造による方法もあります。ナビゲーション・ツリーは、通常、ページの横にリストされるため、ナビゲーション階層全体を表示するには便利な方法です。ユーザーは、ナビゲーションの任意のノードにすぐにナビゲートできます。ツリー構造を使用する場合、リンクの簡単なリストに比べて、ユーザーがナビゲーション・モデルの様々なノードの展開と折りたたみを行えるという利点があります。
ページ・テンプレートにツリー構造を含めるには、ADF Faces treeナビゲーション・コンポーネントをナビゲーション・モデルにバインドできます。この方法を例13-10に示します。
例13-10 ツリーとしてのナビゲーション
<af:panelGroupLayout id="pgl1" layout="vertical">
<af:spacer id="sp2" height="20px"/>
<af:tree id="tree1" var="node" initiallyExpanded="true"
value="#{navigationContext.currentNavigationModel.treeModel['includeStartNode=false']}">
<f:facet name="nodeStamp">
<af:commandImageLink id="cil2" text="#{node.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node.navigable}"
inlineStyle="#{node.onSelectedPath ? 'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node}"/>
</af:commandImageLink>
</f:facet>
</af:tree>
<af:spacer id="sp3" height="20px"/>
</af:panelGroupLayout>
ナビゲーションをメニューとしてレンダリングすることもできます。メニューには、最上位レベルのナビゲーションが表示されます。ユーザーが特定のノード上にマウスを置くと、そのノードが子を持つ場合、子はポップアップ・メニューで表示されます。
図13-4は、現在のナビゲーション・モデルのリスト・モデルを取得し、そのモデルをページに垂直にレンダリングしています。コードはナビゲーション・モデルを反復します。ノードに子が含まれる場合、別のイテレータがその子を反復します。子を持たないノードは、メニュー・アイテムとしてレンダリングされます。第2レベルのナビゲーション・モデルでは、いずれかのノードが子を持つ場合、また別のイテレータが実行されます。繰り返しになりますが、子を持たないノードは、メニュー・アイテムとしてレンダリングされます。第3レベルのナビゲーション・ノードでは、ノードはメニュー・アイテムとしてレンダリングされます。ナビゲートできないノードはリンクとしてレンダリングされません。現在選択されているノードは太字で表示されます。
例13-11 メニューとしてのナビゲーション
<af:panelGroupLayout id="pgl1" layout="vertical">
<af:spacer id="sp1" height="20px"/>
<af:menuBar id="mb1">
<af:iterator id="i1"
value="#{navigationContext.currentNavigationModel.listModel['startNode=/,
includeStartNode=false']}"
var="node">
<af:switcher id="s1"
facetName="#{empty node.children ? 'leafNode' : 'parentNode'}">
<f:facet name="parentNode">
<af:menu id="m1" text="#{node.title}"
inlineStyle="#{node.onSelectedPath ? 'font-weight:bold;' : ''}">
<af:iterator id="i2" value="#{node.children}"
var="node2">
<af:switcher id="s2"
facetName="#{empty node2.children ? 'leafNode' : 'parentNode'}">
<f:facet name="parentNode">
<af:menu id="m2" text="#{node2.title}"
inlineStyle="#{node2.onSelectedPath ? 'font-weight:bold;' : ''}">
<af:iterator id="i3" value="#{node2.children}"
var="node3">
<af:commandMenuItem id="cml3"
text="#{node3.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node3.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node3.navigable}"
inlineStyle="#{node3.onSelectedPath ?
'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node3}"/>
</af:commandMenuItem>
</af:iterator>
</af:menu>
</f:facet>
<f:facet name="leafNode">
<af:commandMenuItem id="cml1"
text="#{node2.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node2.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node2.navigable}"
inlineStyle="#{node2.onSelectedPath ?
'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node2}"/>
</af:commandMenuItem>
</f:facet>
</af:switcher>
</af:iterator>
</af:menu>
</f:facet>
<f:facet name="leafNode">
<af:commandMenuItem id="cml2" text="#{node.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node.navigable}"
inlineStyle="#{node.onSelectedPath ? 'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node}"/>
</af:commandMenuItem>
</f:facet>
</af:switcher>
</af:iterator>
</af:menuBar>
<af:spacer id="sp3" height="20px"/>
</af:panelGroupLayout>
ユーザーがポータル・ナビゲーション内で自身の位置をすばやく判断できるように、ページにブレッドクラムの証跡を提供できます。ブレッドクラムは、ポータル内の現在位置と、その位置に到達するまでのナビゲーション経由のパスを示します。ユーザーは、そのパスに従って任意のポイントにすぐに戻ることができます。ブレッドクラムは、通常、他のフォームのナビゲーションに加えてページ上で使用されます。
ページ・テンプレートにブレッドクラムを含めるには、ADF Faces breadCrumbsナビゲーション・コンポーネントをナビゲーション・モデルにバインドできます。この方法を例13-12に示します。
例13-12 ブレッドクラムとしてのナビゲーション
<af:panelGroupLayout id="pgl1" layout="vertical">
<af:spacer id="sp1" height="20px"/>
<af:breadCrumbs id="bc1" var="node"
value="#{navigationContext.currentNavigationModel.menuModel[
'includeStartNode=false']}">
<f:facet name="nodeStamp">
<af:commandNavigationItem id="cil1" text="#{node.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node.navigable}">
<f:attribute name="node" value="#{node}"/>
</af:commandNavigationItem>
</f:facet>
</af:breadCrumbs>
<af:spacer id="sp2" height="20px"/>
</af:panelGroupLayout>
ポータルでは、多くの場合、マスター/ディテール・ナビゲーションの視覚化が提供されます。たとえば、ページの上部にタブとして表示され、各タブにはページの横にツリー構造として表示される追加のナビゲーションがあります。
例13-13のマスター/ディテール・ナビゲーションでは、マスターおよびディテール・ナビゲーションに同じナビゲーション・モデルが使用されます。マスター・ナビゲーションは、最上位レベルのナビゲーション・モデルを、ページ上部のリンクのリストとしてレンダリングします。ディテール・ナビゲーションは、現在選択されている最上位レベルのノードの子をツリーとしてレンダリングします。
例13-13 単一のナビゲーション・モデルを使用したマスター/ディテール・ナビゲーション
<af:panelGroupLayout id="pgl1" layout="vertical">
<af:spacer id="sp1" height="20px"/>
<!-- Master -->
<af:navigationPane id="np1" var="node" hint="bar" level="1"
value="#{navigationContext.navigationModel[
'modelPath=/oracle/webcenter/portalapp/navigations/master-detail.xml']
.defaultMenuModel}">
<f:facet name="nodeStamp">
<af:commandNavigationItem id="cil1" text="#{node.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node.navigable}"
inlineStyle="#{node.onSelectedPath ? 'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node}"/>
</af:commandNavigationItem>
</f:facet>
</af:navigationPane>
<af:spacer id="sp2" height="20px"/>
<!-- Setup the parameters for detail query -->
<c:set value="startNode=/${navigationContext.navigationModel[
'modelPath=/oracle/webcenter/portalapp/navigations/master-detail.xml']
.currentSelection.prettyUrlPath[1]}, includeStartNode=false"
var="currSel" scope="session"/>
<!-- Detail -->
<af:tree id="tree1" var="node2" initiallyExpanded="true"
value="#{navigationContext.navigationModel[
'modelPath=/oracle/webcenter/portalapp/navigations/master-detail.xml']
.treeModel[currSel]}">
<f:facet name="nodeStamp">
<af:commandImageLink id="cil2" text="#{node2.title}"
actionListener="#{navigationContext.processAction}"
action="pprnav"
icon="#{node2.attributes[pageFlowScope.tnBean.iconKey]}"
disabled="#{not node2.navigable}"
inlineStyle="#{node2.onSelectedPath ? 'font-weight:bold;' : ''}">
<f:attribute name="node" value="#{node2}"/>
</af:commandImageLink>
</f:facet>
</af:tree>
<af:spacer id="sp3" height="20px"/>
</af:panelGroupLayout>
前述の例は、2つの異なるナビゲーション・モデル(マスター・ナビゲーション用とディテール・ナビゲーション用)を使用するように記述することもできます。例13-14にその方法を示します。
例13-14 複数のナビゲーション・モデルを使用したマスター/ディテール・ナビゲーション
<af:panelGroupLayout id="pgl1" layout="vertical"> <af:spacer id="sp1" height="20px"/> <!-- Master --> <af:navigationPane id="np1" var="node" hint="bar" level="1" value="#{navigationContext.navigationModel[ 'modelPath=/oracle/webcenter/portalapp/navigations/master.xml'] .defaultMenuModel}"> <f:facet name="nodeStamp"> <af:commandNavigationItem id="cil1" text="#{node.title}" actionListener="#{navigationContext.processAction}" action="pprnav" icon="#{node.attributes[pageFlowScope.tnBean.iconKey]}" disabled="#{not node.navigable}" inlineStyle="#{node.onSelectedPath ? 'font-weight:bold;' : ''}"> <f:attribute name="node" value="#{node}"/> </af:commandNavigationItem> </f:facet> </af:navigationPane> <af:spacer id="sp2" height="20px"/> <!-- Setup the parameters for detail query --> <c:set value="startNode=/${navigationContext.navigationModel[ 'modelPath=/oracle/webcenter/portalapp/navigations/master.xml'] .currentSelection.prettyUrlPath[1]}, includeStartNode=false" var="currSel" scope="session"/> <!-- Detail --> <af:tree id="tree1" var="node2" initiallyExpanded="true" value="#{navigationContext.navigationModel[ 'modelPath=/oracle/webcenter/portalapp/navigations/master.xml'] .treeModel[currSel]}"> <f:facet name="nodeStamp"> <af:commandImageLink id="cil2" text="#{node2.title}" actionListener="#{navigationContext.processAction}" action="pprnav" icon="#{node2.attributes[pageFlowScope.tnBean.iconKey]}" disabled="#{not node2.navigable}" inlineStyle="#{node2.onSelectedPath ? 'font-weight:bold;' : ''}"> <f:attribute name="node" value="#{node2}"/> </af:commandImageLink> </f:facet> </af:tree> <af:spacer id="sp3" height="20px"/> </af:panelGroupLayout>
Oracle WebCenter Portalには、アプリケーションのナビゲーション・モデルにアクセスしてそのモデルを操作するためのREST APIが用意されています。ナビゲーションREST APIを使用して、ナビゲーション・モデルを視覚化するための独自のインタフェースを作成します。RESTは、一般的にクライアント側でスクリプト化されるリッチ・インターネット・アプリケーションの作成時に使用され、サーバー側アプリケーションからのデータと対話する機能を必要とします。たとえば、WebCenter Portal iPhoneアプリケーションは、WebCenter PortalのREST APIを使用してWebCenter Portal: Spacesアプリケーションと対話します。
REST APIの概要は、第53章「Oracle WebCenter Portal REST APIの使用」を参照してください。
他のWebCenter PortalのREST APIと同様に、ナビゲーションREST APIを使用する開始ポイントとして、GETリクエストをリソース索引に送信します。
http://host:port/rest/api/resourceIndex
このリクエストに対するレスポンスにより、次のresourceTypeのリンク要素で識別される、ナビゲーションREST APIのエントリ・ポイントURI(href)が提供されます。
urn:oracle:webcenter:navigations
GETリクエストをこのエントリ・ポイントURIに送信すると、アプリケーション内にナビゲーション・モデルのリストが返されます。たとえば、次のようになります。
<sitestructure>
...
<navigation-list>
oracle/webcenter/siteresources/scopedMD/s8bba98ff_4cbb_40b8_beee_296c916a23ed/
navigations/default-navigation
</navigation-list>
<navigation-list>
oracle/webcenter/siteresources/scopedMD/s8bba98ff_4cbb_40b8_beee_296c916a23ed/
navigations/admin-navigation
</navigation-list>
<navigation-list>
oracle/webcenter/siteresources/scopedMD/s8bba98ff_4cbb_40b8_beee_296c916a23ed/
navigations/myNavigation
</navigation-list>
...
</sitestructure>
この情報を使用すると、表13-4にリストされるURIで、特定のナビゲーション・モデルとその中にあるリソースに関する情報の取得を開始できます。
表13-4 ナビゲーションのREST URIモデル
| REST URI | 戻り値 |
|---|---|
.../api/navigations |
アプリケーションのすべてのナビゲーション・モデル。 |
.../api/navigations/default-navigation-model |
デフォルトのナビゲーション・モデルのプロパティ。 |
.../api/navigations/pathToModel/modelId |
指定したナビゲーション・モデル( |
.../api/navigations/pathToModel/modelId/resources |
指定したナビゲーション・モデル( |
.../api/navigations/pathToModel/modelId/resources/pathToResource/resourceId |
指定したナビゲーション・モデル( |
...api/navigations/pathToModel/modelId/resources/pathToResource/resourceId/children |
指定したナビゲーション・モデル( |
.../api/navigations/pathToModel/modelId/resources/pathToResource/resourceId/children?depth=dep |
指定したナビゲーション・モデル( |
各ナビゲーション・リソースにはprettyURL要素があり、この要素を使用すると、ナビゲーション・モデル階層をさらにドリルダウンできます。
検索エンジンがWebサイトをクロールすると、標準リンクのHTML(<a href="url">text</a>など)を解析します。ただし、ADFベースのWebサイトでは、リンクがJavaScriptとして生成されます。このため、これらをブラウザで実行すると、ページの変更やナビゲーションが生じます。これらのJavaScriptリンクは、検索エンジンで解釈できません。
GoogleやBingなど、一般的な一部の検索エンジンではサイトマップがサポートされます。サイトマップは、サイトのURLと、各URLに関する追加メタデータ(たとえば、URLが最終更新された場合、通常のその変更頻度、サイトの他のURLと比較した重要度など)をリストするXMLファイルであるため、検索エンジンはさらに知的にサイトをクロールできます。サイトマップを検索エンジンに送信したり、robots.txtファイルで参照することで、索引用にページのリストを検索エンジンに送ることができます。
サイトマップの詳細を参照するには、次の場所に移動してください:
WebCenter Portalアプリケーションでは、サイトマップURLを指定できます。このURLを検索エンジンに登録すると、そのアプリケーションでページ・セットへの索引付けが行われます。検索エンジンのユーザー・エージェントが、ADFでサポートされるエージェントと一致するする場合、リクエストに対してJavaScriptではなくHTMLが返されます。
|
注意: 現在、ADFに登録されているユーザー・エージェントは、Googleのgooglebotのみです。 |
例13-15に示すように、アプリケーションのサイトマップは、ナビゲーション・モデルに基づき作成できます。
