29 ADF階層ビューア・コンポーネントの使用

この章では、ADF階層ビューア・コンポーネントを使用してデータを表示する方法、および階層表示のカスタマイズ・オプションについて説明します。

この章に含まれる項は次のとおりです。

29.1項「階層ビューアの概要」
29.2項「階層ビューアのデータ要件」
29.3項「階層ビューアのナビゲート」
29.4項「階層ビューアでのノードの管理」
29.5項「階層ビューア・コンポーネントへの対話性の追加」
29.6項「パネル・カードの使用」
29.7項「階層ビューアの外観のカスタマイズ」

ADF階層ビューアのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。

29.1 階層ビューアの概要

階層ビューア・コンポーネントは階層データの視覚表示に使用できます。階層データにはデータ内にマスター/ディテール関係が含まれています。たとえば、組織内の従業員間の関係に関する情報が含まれるデータ・コレクションから、組織図をレンダリングする階層ビューア・コンポーネントを作成することもできます。

29.1.1 階層ビューア・コンポーネントの理解

JDeveloperでは、コンポーネント・ギャラリからJSFページにコンポーネントをドラッグ・アンド・ドロップする場合、または『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、「階層ビューアの作成」ダイアログを使用して階層ビューア・コンポーネントを作成する場合、JSFページに次の要素が生成されます。

dvt:hierarchyViewer

この要素はdvt:node要素およびdvt:link要素をラップします。
dvt:node

ノードは階層のデータを参照する形状です（たとえば、組織の従業員またはネットワークのコンピュータ）。表示するデータを参照するdvt:node要素の子要素を構成します。dvt:node要素は、様々なズーム・レベル（100%、75%、50%および25%）でコンテンツを表示する1つ以上のf:facet要素の使用をサポートします。f:facet要素は、ADFデータ視覚化dvt:panelCardコンポーネントに加えてaf:outputText、af:imageおよびaf:panelGroupLayoutなどの多数のADF Facesコンポーネントの使用をサポートします。

実行時に、ノードにはユーザーにノード間のナビゲートを可能にし、デフォルトで他のノードを表示または非表示にできるコントロールが含まれます。ノード・コンテンツの指定とズーム・レベルの定義の詳細は、29.4.1項「ノード・コンテンツの指定方法」を参照してください。
dvt:link

1つのノードを別のノードに接続するdvt:link要素の属性の値を設定します。

dvt:panelCard

f:facet要素では、dvt:panelCard要素の使用がサポートされています。dvt:panelCard要素には、1つ以上のaf:showDetailItem要素を含めることができ、コンテンツの複数のセットの定義に使用できます。実行時に、エンド・ユーザーはaf:showDetailItem要素が参照するコンテンツを動的に切り替えるノードのコントロールを使用します。詳細は、29.6項「パネル・カードの使用方法」を参照してください。

注意:

他の要素とは異なり、dvt:panelCard要素は、「階層ビューアの作成」ダイアログを使用してデフォルトのクイック・レイアウト・オプションを選択すると生成されません。

29.1.2 階層ビューアの要素と用語

図29-1に、コントロール・パネル、ノードの数およびノードを接続するリンクを含む実行時の階層ビューア・コンポーネントのセグメントを示します。

図29-1 コントロール・パネルとノードが表示された階層ビューア・コンポーネント

コントロール・パネルでは、ユーザーが実行時に階層ビューア・コンポーネントの位置と外観を操作できるコントロールが提供されます。デフォルトで、図29-2に示すとおり、階層ビューア・コンポーネントの左上隅に非表示状態で表示されます。

図29-2 非表示状態のコントロール・パネル

コントロール・パネルが別の場所に表示されるように構成することはできません。ユーザーは、図29-2に示すコントロール・パネルを非表示または表示するボタンをクリックして、コントロール・パネルを非表示または表示します。図29-3に、展開されたコントロール・パネルを示します。

図29-3 表示状態のコントロール・パネル

実行時にコントロール・パネルがユーザーに表示されないように階層ビューア・コンポーネントを構成できます。詳細は、29.7.3項「コントロール・パネルの表示の構成方法」を参照してください。

表29-1では、コントロール・パネルのコントロールでユーザーに提供される機能を説明します。パネル・セレクタは、階層ビューア・コンポーネントのノードに、1つ以上のaf:showDetailItem要素を持つdvt:panelCard要素が含まれていると自動的に有効になります。階層ビューア・コンポーネントで次のいずれかのレイアウトが使用されていると、レイアウト・セレクタが自動的に表示されます。

垂直方向、上から下
水平方向、左から右
ツリー

階層ビューア・コンポーネントのレイアウトの詳細は、29.1.3項「使用可能な階層ビューアのレイアウト・オプション」を参照してください。

表29-1 コントロール・パネルの要素

コントロール	名前	説明
	パン制御	ユーザーはビューポート内の階層ビューア・コンポーネントを再配置できます。
	ズームしてあわせる	ユーザーはビューポート内にすべてのノードが表示されるように、階層ビューア・コンポーネントにズームできます。
	ズーム制御	ユーザーは、階層ビューア・コンポーネントにズームできます。
	非表示/表示	コントロール・パネルを表示または非表示にします。
	パネル・セレクタ	定義したノード・パネルのリストが表示されます。ユーザーはパネル・セレクタを使用して、すべてのノードを同じパネルに一度に表示できます。
	レイアウト・セレクタ	レイアウトの選択を可能にします。ユーザーは階層ビューア・コンポーネントのレイアウトを階層ビューア・コンポーネントによって提示されるレイアウト・オプションの1つに定義したレイアウトから変更できます。詳細は、29.1.3項「使用可能な階層ビューアのレイアウト・オプション」を参照してください。

29.1.3 使用可能な階層ビューアのレイアウト・オプション

階層ビューア・コンポーネントには次のいずれかのレイアウトを選択できます。

垂直方向、上から下
垂直方向、下から上
水平方向、左から右
水平方向、右から左
ツリー
放射

29.2 階層ビューアのデータ要件

階層ビューア・コンポーネントには、1つ以上のディテール・コレクションと1つのマスター・ディテール・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションが必要です。階層ビューア・コンポーネントでは、ADF Faces treeコンポーネントと同じデータ・モデルが使用されます。データ・コレクションをまずADF Faces treeコンポーネントにバインドすることによって、データ・コレクションを階層ビューア・コンポーネントにバインドできるかどうかテストできます。ADF Faces treeコンポーネントを使用してデータ・コレクションをナビゲートできれば、階層ビューア・コンポーネントにバインドすることができます。

JSFページに階層ビューア・コンポーネントを追加すると、JDeveloperによりJSFページのページ定義ファイルにツリー・バインディングが追加されます。ツリー・バインディングでノードにデータを移入する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のマスター/ディテール・オブジェクトの表示にツリーを使用する方法に関する項を参照してください。

ユーザーが階層ビューア・コンポーネントのルート・ノードから下方向にナビゲートできるようにするには、階層ビューア・コンポーネントでノードにバインドするデータ・コレクションに再帰的アクセッサが含まれている必要があります。階層ビューア・コンポーネントのナビゲートの詳細は、29.3項「階層ビューアのナビゲート」を参照してください。

29.3 階層ビューアのナビゲート

デフォルトで、階層ビューア・コンポーネントのルート・ノードと内部ノードには下方向へのナビゲーションが構成されています。階層ビューア・コンポーネントで上方向へのナビゲーションを行い、ユーザーが同じレベルのノード間をナビゲートしたときに表示されるノードの数を決定できるように構成することができます。

ノード・タイプの詳細は、29.4項「階層ビューアでのノードの管理」を参照してください。

29.3.1 階層ビューアでの上方向へのナビゲーションの構成方法

階層ビューア・コンポーネントで上方向へのナビゲーションを構成するには、階層ビューア・コンポーネントのnavigateUpListenerプロパティの値を構成します。

階層ビューア・コンポーネントの上方向へのナビゲーションを構成する手順:

構造ウィンドウで、dvt:hierarchyViewerを選択してプロパティ・インスペクタを開きます。
プロパティ・インスペクタの「動作」セクションを開きます。ユーザーが新しいアンカー・ノードにナビゲートしたときに、新しいアンカー・ノードを参照するように、データ・モデルを更新するメソッドを指定する階層ビューア・コンポーネントのNavigate Upプロパティ（navigateUpListener）の値を記述します。
「OK」をクリックします。

29.3.2 階層ビューアでの同レベル・ナビゲーションの構成方法

階層ビューア・コンポーネントのノード間の同レベル・ナビゲーションはデフォルトで有効にされています。階層ビューア・コンポーネントを構成して、一度に表示するノードの数を決定できます。これを行うと、ユーザーに次のナビゲートを可能にするコントロールが表示されます。

左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート

階層ビューア・コンポーネントの同レベル・ナビゲーションを構成する手順:

構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「共通」セクションを開き、実行時に表示するノードの数をレベルごとのノード数フィールド（levelFetchSize）で指定します。

たとえば、ノードの数に3を入力すると、JSFページに次のエントリが表示されます。

levelFetchSize="3"
「OK」をクリックします。

29.3.3 階層ビューアで同レベル・ナビゲーションを構成する場合の処理

実行時に、階層ビューア・コンポーネントのlevelFetchSizeプロパティの値として指定したノードの数が、階層ビューア・コンポーネントによってレンダリングされます。階層ビューア・コンポーネントは、ユーザーが次のことを実行できるコントロールもレンダリングします。

左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート

図29-4に、levelFetchSize="3"の場合の実行時の例を示します。図29-4の丸で囲まれている領域に示すように、ユーザーがコントロール上にマウスを移動させると、ユーザーにノードの最後のセットへのナビゲートを可能にするコントロールが表示されます。

図29-4 同レベル・ナビゲーションを使用した階層ビューア・コンポーネント

29.4 階層ビューアでのノードの管理

ノードは、実行時に階層ビューア・コンポーネントの個々の要素を示す形状です。階層ビューア・コンポーネントの個々の要素の例には、組織図の従業員またはネットワーク・ダイアグラムのコンピュータが含まれます。デフォルトで、階層ビューア・コンポーネントの各ノードには、ユーザーが次のことを実行できるコントロールが含まれています。

階層ビューア・コンポーネントの他のノードへのナビゲート

各ノードの上部には、1つのボタン（リストアまたは分離）が含まれています。例外は階層ビューア・コンポーネントの最上部のノードで、理由はこのノードには親ノードがなく分離できないからです。
階層ビューア・コンポーネントで現在選択されているノードの子ノードの表示または非表示

各ノードの下部に表示される表示または非表示ボタンは、リーフ・ノードではありません。

図29-5に、エンド・ユーザーが別のノードにナビゲートしたり、アクティブなノードの子ノードを非表示にできるコントロールが表示されたノードの例を示します。ノードのコントロールの構成方法の詳細は、29.4.2項「ノードのコントロールの構成方法」を参照してください。

図29-5 ノード・コントロール

基本的なノード・タイプは4つあります。

ルート・ノードは、階層ビューア・コンポーネントで表示可能な最上ノードです。ルート・ノードは、常にツリー・コンポーネントから返される階層のルートになります。通常、一度に表示されるルート・ノードは1つのみです。ただし、実装するユース・ケースによって、複数のルート・ノードが表示される場合もあります（ファミリ・ツリーの場合など）。
アンカー・ノードは、階層ビューア・コンポーネントがレンダリングされると必ずフォーカスされるノードです。表示されるアンカー・ノードは常に1つのみです。

ツリー・ノードに子ノードが定義されていて、階層ビューア・コンポーネントの displayLevelsAncestorプロパティが0より大きい場合は、アンカー・ノードをルート・ノードと同じにできます。実行時に、ユーザーがsetAnchorListenerプロパティに指定された値を持つ別のノードをダブルクリックすると、そのノードがアンカー・ノードになります。子ノードがあるかどうかによって、アンカー・ノードも内部ノードまたはリーフ・ノードにすることができます。アンカー・ノードの指定方法の詳細は、29.4.5項「アンカー・ノードの祖先レベルの指定」を参照してください。

アンカー・ノードより上に、1つ以上の祖先レベルを指定できます。詳細は、29.4.5項「アンカー・ノードの祖先レベルの指定」を参照してください。
内部ノードは、子ノードを持つノードです。
リーフ・ノードは、子ノードを持たないノードです。

図29-6に、階層ビューア・コンポーネントのレイアウトによって、ノードを別のタイプにする方法を示します。

図29-6 ノード・タイプおよび位置

29.4.1 ノード・コンテンツの指定方法

ノードには、ノードにナビゲートして、ノードを表示また非表示にできるコントロールがデフォルトで含まれますが、階層ビューア・コンポーネントを作成するときに、クイック・スタート・レイアウトを使用していないかぎり、ノードにコンテンツは含まれません。実行時にノードによってレンダリングされるコンテンツを定義する必要があります。『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、データ・バインディングと階層ビューア・コンポーネントを関連付けると、ノード・コンテンツを指定できます。データ・バインディングと関連付けることによって階層ビューア・コンポーネントを作成した後、コンポーネント・パレットを使用して階層ビューア・コンポーネントにノードを追加できます。

デフォルトで、作成する階層ビューア・コンポーネントにはズーム・レベル100%のファセット要素を1つ持つノードが1つ作成されます。

<f:facet name="zoom100"/>

次のズーム・レベルを使用して、さらに3つのファセット要素のインスタンスを階層ビューア・コンポーネントに挿入できます。

25%: zoom25
50%: zoom50
75%: zoom75

1つ以上のファセット要素内で使用可能なデータ・コレクションのサブセットを定義できます。たとえば、名前、数および場所など、会社の部署に関するデータを参照するノード属性を持つデータ・コレクションがある場合、部署の名前のノード属性を参照する、ズーム・レベル50%のファセット要素を指定できます。

挿入する各ファセット要素は、他のコンポーネントの参照に使用できます。次のコンポーネントから1つ以上を使用して、階層ビューア・コンポーネントのノードにコンテンツを定義できます。

af:commandButton
af:commandImageLink
af:commandLink
af:commandMenuItem
af:goButton
af:goLink
af:image

af:imageコンポーネントの使用方法の詳細は、29.7.2項「階層ビューアにイメージを含める方法」を参照してください。
af:menu
af:outputFormatted
af:outputText
af:panelFormLayout
af:panelGroupLayout

panelGroupLayoutコンポーネントの使用方法の詳細は、8.12.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。
af:panelLabelAndMessage
af:separator
af:showDetailItem
af:showPopupBehavior

af:showPopupBehaviorコンポーネントの使用方法の詳細は、29.5.1項「ポップアップ・ウィンドウを起動するための階層ビューアの構成」を参照してください。
af:spacer
dvt:panelCard

dvt:panelCardコンポーネントの使用方法の詳細は、29.6項「パネル・カードの使用方法」を参照してください。

階層ビューア・コンポーネントは、Flash Playerでのみレンダリングを行います。このため、ノード・コンテンツとして指定したADF Facesコンポーネントの一部のプロパティがサポートできないことから、コンポーネントは予期したとおりにレンダリングされません。

階層ビューア・コンポーネントにノードを追加する手順:

構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「dvt:hierarchyViewerの中に挿入」→「ノード」を選択します。

次のエントリがJSFページに表示されます。
```
<dvt:node>
<f:facet name="zoom100"/>
</dvt:node>
```
構造ウィンドウでdvt:nodeを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、適切なプロパティを構成します。

たとえば、ノードに特定のアクセッサを指定するtypeプロパティに値を記述します。

29.4.2 ノードのコントロールの構成方法

ノード・コンポーネント（dvt:node）では、リストア、分離、表示または非表示などのコントロールを実行時に表示するかどうかを決定できる多くのプロパティが公開されます。実行時のノードのサイズと形状を決定するプロパティも公開されます。

ノードにコントロールを構成する手順:

構造ウィンドウで、構成するdvt:nodeコンポーネントを選択します。

次の表に説明されているとおり、プロパティ・インスペクタの「外観」セクションでdvt:nodeコンポーネントのプロパティを構成します。

設定する構成	プロパティに設定する値
表示または非表示コントロールをノードに表示する構成。	`showExpandChildren`を`True`（デフォルト）に設定してコントロールを表示します。
リストアまたは分離コントロールをノードに表示する構成。	`showNavigateUp`プロパティおよび`showIsolate`プロパティを`True`（デフォルト）に設定して、ノードでこれらのコントロールを有効にします。 `showNavigateUp`プロパティを`True`に設定した場合は、29.3.1項「階層ビューアでの上方向へのナビゲーションの構成方法」での説明のとおり、階層ビューア・コンポーネントの`navigateUpListener`プロパティにも値を設定する必要があります。
ノードの高さと幅を構成します。	`width`プロパティおよび`height`プロパティの値を設定します。
ノードの形状を選択します。	「図形」ドロップダウン・リストから値を選択します。使用可能な値は次のとおりです。 `ellipse` `rect` `roundedRect`

プロパティ・インスペクタの「スタイル」セクションのプロパティの構成の詳細は、20.4項「コンポーネントのスタイル・プロパティの変更」を参照してください。

29.4.3 アクセッサのノード定義の指定

デフォルトで、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、「階層ビューアの作成」ダイアログを使用して、階層ビューア・コンポーネントを作成する場合は、ノード・コンポーネントをアクセッサと関連付けます。「階層ビューアの作成」ダイアログでは、ノード・コンポーネントのtypeプロパティが特定のアクセッサに設定されます。

ノード・コンポーネントのtypeプロパティを構成して、指定された1つ以上のアクセッサを使用できます。かわりに、29.4.4項「ノード定義と特定のデータ行のセットとの関連付け」での説明のとおり、ノードのコンポーネントのrenderedプロパティを構成して、アクセッサ全体でノード定義を使用できます。階層ビューア・コンポーネントによって特定のデータ行に使用するノード定義が決定される場合は、typeプロパティの一致が最初に確認されます。

typeプロパティと一致する場合、階層ビューア・コンポーネントではノード定義が使用されます。
typeプロパティと一致しない場合、階層ビューア・コンポーネントではrenderedプロパティの値がtrueと評価されるかどうかが確認されます。renderedプロパティの評価の結果は、typeには影響しません。

29.4.4 ノード定義と特定のデータ行のセットとの関連付け

ノード・コンポーネントのrenderedプロパティを使用して、ノードを特定のデータ行のセットまたは単一データ行と関連付けることができます。renderedプロパティでは、ブール値を使用して、trueまたはfalseに評価してノード定義に関連付けるデータ行を決定するEL式を記述できます。たとえば、肩書に基づくデータをノードに表示するとします。ノード・コンポーネントのrenderedプロパティに対して、肩書が指定した値（この例ではCEO）と一致する場合にtrueと評価する次の疑似EL式のようなEL式を記述します。

#{node.title == 'CEO'}

ノード・コンポーネントのrenderedプロパティをこのように使用する場合は、そのノード・コンポーネントのtypeプロパティの値は定義しません。

29.4.5 アンカー・ノードの祖先レベルの指定

階層ビューア・コンポーネントのアンカー・ノードは、ツリー・バインディングによって返される階層のルートです。ユース・ケースによって、複数のアンカー・ノードにすることができます（1人以上のマネージャのいる組織図をレンダリングする階層ビューア・コンポーネントなど）。実行時に階層ビューア・コンポーネントをレンダリングすると、フォーカスのあるノードがアンカー・ノードになります。ユーザーがsetActionListenerプロパティに値が指定された別のノードをクリックすると、そのノードがアンカー・ノードになります。

アンカー・ノードの祖先レベル数を指定できます。

アンカー・ノードの祖先レベル数を指定する手順:

構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「共通」セクションを開きます。
実行時に、アンカー・ノードの上に表示する祖先ノードのレベル数を祖先レベル・フィールド（displayLevelsAncestor）で指定します。

たとえば、アンカー・ノードの祖先レベルの数に2を入力すると、JSFページに次のエントリが表示されます。

displayLevelsAncestor="2"
JSFページへの変更を保存します。

29.5 階層ビューア・コンポーネントへの対話性の追加

階層ビューア・コンポーネントを構成して、ポップアップ・ウィンドウを起動し、機能およびOracle Fusion Webアプリケーションの他のページからのデータが示されたメニューを表示します。

29.5.1 ポップアップ・ウィンドウを起動するための階層ビューアの構成

af:showPopup動作タグの値を指定することによって、コマンド・コンポーネント（af:commandButtonなど）からポップアップ・ウィンドウを起動できます。階層ビューア・コンポーネントのノードのf:facet要素内で、ポップアップ・ウィンドウを起動するコマンド・コンポーネントをネストする必要があります。このシナリオで使用される af:showPopupBehaviorタグのtriggerTypeプロパティは、次の値のみをサポートすることに注意してください。

action
mouseHover

af:showPopupBehaviorタグの使用の詳細は、13.3項「ポップアップ要素を表示するためのコマンド・コンポーネントの使用方法」を参照してください。

29.5.2 メニューを起動するための階層ビューア・ノードの構成

階層ビューア内でノード・コンポーネント（dvt:node）を構成し、af:menuコンポーネントを使用することによってメニューを起動させることができます。af:menuコンポーネントには1つ以上のaf:commandMenuItem要素を構成できます。階層ビューア・コンポーネント内のノードでは、af:menuコンポーネントのネストはサポートされていません。

af:menuコンポーネントの使用方法の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

29.6 パネル・カードの使用

パネル・カード・コンポーネントを階層ビューア・コンポーネントとともに使用して、階層ビューア・コンポーネントが参照するノードに異なった情報のセットを保持できます。パネル・カード・コンポーネントには、ノード要素の内側の領域で、1つ以上のaf:showDetailItem要素を含めることができます。

各af:showDetailItem要素がコンテンツの1セットを参照します。たとえば、組織図をレンダリングする階層ビューア・コンポーネントに組織内の従業員のノードを含めることができます。このノードには、1つのaf:showDetailItem要素、および給与情報を参照するもう1つのaf:showDetailItem要素を使用して連絡先情報を参照するパネル・カード・コンポーネントを含めることができます。

パネル・カード・コンポーネントには、実行時に1つのaf:showDetailItem要素によって参照されるコンテンツが表示されます。パネル・カード・コンポーネントによって、ナビゲーション・ボタン、およびユーザーがaf:showDetailItem要素によって参照されるデータのセット間の切替えを行えるようにする他のコントロールがレンダリングされます。ユーザーがデータの異なったセット間で切替えを行えるようにするコントロールは、オプションの遷移効果を使用して構成できます。たとえば、パネル・カードがaf:showDetailItem要素によって参照されるデータのセットと、別のaf:showDetailItem要素によって参照される別のデータのセットとの間を水平にスライドするように構成できます。

29.6.1 パネル・カードの作成方法

パネル・カード・コンポーネントは、JSFページの構造ウィンドウでFacet zoom要素を選択した場合に表示されるポップアップ・メニューを使用して、階層ビューア・コンポーネントをレンダリングするJSFページに挿入できます。

パネル・カードを作成する手順:

構造ウィンドウで、パネル・カードを作成するノード内のズーム・レベルを右クリックします。

f:facet - zoom100などを選択します。
「f:facet -zoom100の中に挿入」→「パネル・カード」を選択します。
プロパティ・インスペクタを使用して、パネル・カード・コンポーネントのプロパティを構成します。

たとえば、パネル・カード・コンポーネントの「拡張」プロパティで、「効果」プロパティに値を設定します。有効な値は次のとおりです。
- Horizontal Slide（デフォルト）
- Panel Flip
- Node Flip
- No Animation
構造ウィンドウで「dvt:panelCard」を右クリックし、「dvt:panelCardの中に挿入」→「詳細項目の表示」を選択します。
必要に応じて、手順4を繰り返します。
プロパティ・インスペクタを使用して、挿入するaf:showDetailItem要素のプロパティを構成します。

29.6.2 実行時にパネル・カード・コンポーネントをレンダリングする場合の処理

実行時に、ノードが表示され、パネル・カード・コンポーネントが1つ表示されます。ユーザーはナビゲーション・ボタンをクリックして、パネル・カードのaf:showDetailItem子要素のいずれかによって参照されるコンテンツの次のセットにナビゲートできます。

図29-7に、パネル・カード・コンポーネントを使用したノードを示します。ここでは、2つの別々のaf:showDetailItem子要素が別々の情報のセット（連絡先および住所）を参照しています。ユーザーは、提供されたコントロールを使用して、別々の情報のセットの間をナビゲートできます。

図29-7 パネル・カードを使用した実行時のノードの表示

29.7 階層ビューアの外観のカスタマイズ

階層ビューア・コンポーネントのサイズと外観をカスタマイズできます。

階層ビューア・コンポーネントの外観は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」での説明のとおり、スキンおよびコンポーネント・スタイル属性を変更することによって変更できます。

29.7.1 階層ビューアのサイズの調整方法

階層ビューア・コンポーネントのサイズは、プロパティ・インスペクタを使用して、階層ビューア・コンポーネントの属性の数に値を設定することによって調整できます。

階層ビューアのサイズを調整する手順:

階層ビューア・コンポーネントを含むJSFページの構造ウィンドウで、dvt:hierarchyViewerノードを選択します。
次のリストで説明するように、プロパティ・インスペクタでInlineStyleプロパティの値を記述します。
- width
  
  パーセント（%）またはピクセル（px）で値を記述します。たとえば、widthのデフォルト値は100%です。
- height
  
  パーセント（%）またはピクセル（px）で値を記述します。たとえば、heightのデフォルト値は600pxです。
InlineStyleプロパティに入力する最終値には、次の例に示す構文を使用する必要があります。

width:100%;height:600px;
JSFページへの変更を保存します。

29.7.2 階層ビューアにイメージを含める方法

実行時に階層ビューア・コンポーネントのノードがイメージに表示されるように階層ビューア・コンポーネントを構成できます。これは、組織図に画像を表示するような場合に便利です。dvt:nodeコンポーネントによって参照されるaf:facetコンポーネント内にaf:panelGroupLayoutコンポーネントをラップします。次のコード例にaf:facetコンポーネント内からのaf:imageコンポーネントのインスタンスを参照するaf:panelGroupLayoutコンポーネントを示します。af:imageコンポーネントでは、node.PersonIdによって参照される人物のイメージがレンダリングされます。

<af:panelGroupLayout>
<af:image source="/render_image?person_id=#{node.PersonId}"
inlineStyle="width:64px;height:90px;"/>
</af:panelGroupLayout>

af:panelGroupLayoutコンポーネントの詳細は、8.12.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。

29.7.3 コントロール・パネルの表示の構成方法

実行時に階層ビューア・コンポーネントによってレンダリングされる場合、コントロール・パネルが次のように機能するように、29.1.2項「階層ビューアの要素と用語」で説明されているとおり、階層ビューア・コンポーネントを構成できます。

開いたまたは表示状態での表示
閉じたまたは非表示状態での表示
ユーザーに対して非表示

コントロール・パネルの表示を構成する手順:

構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
「外観」セクションを開き、「ControlPanelBehavior」ドロップダウン・リストから次の値のいずれかを選択します。
- hidden
  
  実行時にコントロール・パネルを表示しない場合は、この値を選択します。
- initCollapsed
  
  これがデフォルト値です。コントロール・パネルは、実行時に閉じたまたは非表示状態で表示されます。
- initExpanded
  
  実行時にコントロール・パネルを開いたまたは表示状態で表示する場合は、この値を選択します。
JSFページへの変更を保存します。