| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
前 |
次 |
この章では、ADF階層ビューア・コンポーネントを使用してデータを表示する方法、および階層表示のカスタマイズ・オプションについて説明します。
この章では、次の項目について説明します。
ADF階層ビューアのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。
階層ビューア・コンポーネントは階層データの視覚表示に使用できます。階層データにはデータ内にマスター/ディテール関係が含まれています。たとえば、組織内の従業員間の関係に関する情報が含まれるデータ・コレクションから、組織図をレンダリングする階層ビューア・コンポーネントを作成することもできます。
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.3.1項「ノード・コンテンツの指定方法」を参照してください。
dvt:link
1つのノードを別のノードに接続するdvt:link要素の属性の値を設定します。リンクの外観のカスタマイズ方法とラベルの追加方法の詳細は、29.7.4項「リンクとラベルの表示の構成方法」を参照してください。
dvt:panelCard
パネル・カード要素には、アニメーションを使用して(コンテンツを横にスライドしたり、ノードを反転したりするなど)ノード要素ごとに複数のコンテンツ参照セットを動的に切り替えるメソッドがあります。
各ズーム・レベルのf:facetタグは、指定したズーム・レベルで表示するようにコンテンツを定義する1つ以上のaf:showDetailItem要素を含むdvt:panelCard要素の使用をサポートします。実行時に、エンド・ユーザーはaf:showDetailItem要素が参照するコンテンツを動的に切り替えるノードのコントロールを使用します。詳細は、29.6項「パネル・カードの使用」を参照してください。
|
注意: 他の要素とは異なり、コンポーネント・ギャラリを使用して階層ビュータを作成するときにデフォルトのクイック・レイアウト・オプションを選択した場合、 |
階層ビューア・コンポーネントでは、af:panelGroupLayout、af:spacer、af:separatorなどの要素を使用して、ノードでのコンテンツの表示方法を定義します。例29-1に、コンポーネント・パレットから挿入してコンポーネントを作成する場合に生成されるコードを示します。この例では、階層ビューア要素に関連するコードが強調表示されています。
例29-1 階層ビューアのサンプル・コード
<dvt:hierarchyViewer id="hierarchyViewer1" layout="hier_vert_top"inlineStyle="width:100%;height:600px;"><dvt:link linkType="orthogonalRounded" id="l1"/><dvt:node width="233" height="330" id="n1"><f:facet name="zoom100"><af:panelGroupLayout layout="vertical" inlineStyle="width:100%;height:100%;padding:5px" id="pgl2"> <af:panelGroupLayout layout="horizontal" id="pgl3"> <af:panelGroupLayout inlineStyle="width:85px;height:120px" id="pgl4"> <af:image id="i1"/> </af:panelGroupLayout> <af:spacer width="5" height="5" id="s2"/> <af:panelGroupLayout layout="vertical" id="pgl1"> <af:outputText value=" attribute value1 " inlineStyle="font-weight:bold;font-size:20px;color:#383A47" id="ot5"/> <af:outputText value=" attribute value2" inlineStyle="font-size:20px;color:#383A47" id="ot9"/> <af:outputText value=" attribute value3" inlineStyle="font-size:11px;font-style:italic;color:#383A47" id="ot2"/> </af:panelGroupLayout> </af:panelGroupLayout> <af:spacer height="5" id="s1"/> <af:separator id="s4"/> <af:spacer height="5" id="s3"/><dvt:panelCard effect="slide_horz"inlineStyle="border-width:1px;border-color:#CCCCCC;font-size:16px;font-weight:bold;color:#5a6a7a"id="pc1"><af:showDetailItem text="first group title "inlineStyle="font-weight:bold;font-size:16px;color:#5a6a7a"id="sdi1"><af:panelFormLayout inlineStyle="width:100%;height:100%;padding:5px" id="pfl1"> <af:panelLabelAndMessage label="attribute label4" labelStyle="font-size:14px;color:#5A6A7A" id="plam2"> <af:outputText value="attribute value4" inlineStyle="font-size:14px;color:#383A47" id="ot3"> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label5" labelStyle="font-size:14px;color:#5A6A7A" id="plam6"> <af:outputText value="attribute value5" inlineStyle="font-size:14px;color:#383A47" id="ot8"> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label6" labelStyle="font-size:14px;color:#5A6A7A" id="plam5"> <af:outputText value="attribute value6" inlineStyle="font-size:14px;color:#383A47" id="ot6"> </af:panelLabelAndMessage> </af:panelFormLayout> </af:showDetailItem><af:showDetailItem text="second group title "inlineStyle="font-weight:bold; font-size:16px;color:#5a6a7a" id=sd12"> <af:panelFormLayout inlineStyle="width:100%;height:100%;padding:5px" id="pfl2"> <af:panelLabelAndMessage label="attribute label7" labelStyle="font-size:14px;color:#5A6A7A" id="plam3"> <af:outputText value="attribute value7" inlineStyle="font-size:14px;color:#383A47" id="ot7"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label8" labelStyle="font-size:14px;color:#5A6A7A"id="plam4"> <af:outputText value="attribute value8" inlineStyle="font-size:14px;color:#383A47" id="ot1"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label9" labelStyle="font-size:14px;color:#5A6A7A" id="plam1"> <af:outputText value="attribute value9" inlineStyle="font-size:14px;color:#383A47" id="ot4"/> </af:panelLabelAndMessage> </af:panelFormLayout></af:showDetailItem></dvt:panelCard></af:panelGroupLayout></f:facet></dvt:node></dvt:hierarchyViewer>
階層ビューアは、階層データおよびマスター/ディテール関係を視覚的に表示します。図29-1に、コントロール・パネル、複数のノード、およびノードをつなぐリンクを含む実行時の階層ビューア・コンポーネントのセグメントを示します。
コントロール・パネルでは、ユーザーが実行時に階層ビューア・コンポーネントの位置と外観を操作できるコントロールが提供されます。デフォルトで、図29-2に示すとおり、階層ビューア・コンポーネントの左上隅に非表示状態で表示されます。
コントロール・パネルが別の場所に表示されるように構成することはできません。ユーザーは、図29-2に示すコントロール・パネルを非表示または表示するボタンをクリックして、コントロール・パネルを非表示または表示します。図29-3に、展開されたコントロール・パネルを示します。
実行時にコントロール・パネルがユーザーに表示されないように階層ビューア・コンポーネントを構成できます。手順の詳細は、29.7.3項「コントロール・パネルの表示の構成方法」を参照してください。
表29-1では、コントロール・パネルのコントロールでユーザーに提供される機能を説明します。パネル・セレクタは、階層ビューア・コンポーネントのノードに、1つ以上のaf:showDetailItem要素を持つdvt:panelCard要素が含まれていると自動的に有効になります。階層ビューア・コンポーネントで次のいずれかのレイアウトが使用されていると、レイアウト・セレクタが自動的に表示されます。
垂直方向、上から下
水平方向、左から右
ツリー
放射
円
階層ビューア・コンポーネントのレイアウトの詳細は、29.1.3項「使用可能な階層ビューアのレイアウト・オプション」を参照してください。
表29-1 コントロール・パネルの要素
| コントロール | 名前 | 説明 |
|---|---|---|
 |
パン制御 |
ユーザーはビューポート内の階層ビューア・コンポーネントを再配置できます。 |
 |
ズームしてあわせる |
ユーザーはビューポート内にすべてのノードが表示されるように、階層ビューア・コンポーネントにズームできます。 |
 |
ズーム制御 |
ユーザーは、階層ビューア・コンポーネントにズームできます。 |
 |
非表示/表示 |
コントロール・パネルを表示または非表示にします。 |
 |
パネル・セレクタ |
定義したノード・パネルのリストが表示されます。ユーザーはパネル・セレクタを使用して、すべてのノードを同じパネルに一度に表示できます。 |
 |
レイアウト・セレクタ |
レイアウトの選択を可能にします。ユーザーは階層ビューア・コンポーネントのレイアウトを、階層ビューア・コンポーネントによって提示されるレイアウト・オプションの1つに定義したレイアウトから変更できます。詳細は、29.1.3項「使用可能な階層ビューアのレイアウト・オプション」を参照してください。 |
階層ビューアは、ノードの選択、展開、横方向移動に関する状態管理をサポートします。ユーザーがノードを選択または展開したり、同じ親内で左または右に移動して、次のノード・セットを表示する場合、タブ付パネルのように、移動後にページに戻ると、その状態は維持されます。状態管理は、disclosedRowKeys、selectedRowKeys、lateralNavigationRowKeysなどの階層ビューア属性でサポートされます。
階層ビューアは、ノード・コンテンツ、検索パネル、および検索結果の表示で双方向テキストをサポートします。双方向テキストは、両方向のテキスト(右から左(RTL)および左から右(LTR))のテキストを含むテキストです。これは、通常、アラビア語やヘブライ語のスクリプトなどの各種アルファベットが含まれるテキストです。階層ビューアは、あるノード・ビューから次のノード・ビューへのパネル・カードの反転用の双方向サポートも提供します。
階層ビューアは、コンポーネントのtype属性で指定される次のレイアウトを使用できます。
hier_vert_top: 上から下への垂直方向
hier_vert_bottom: 下から上への垂直方向
hier_horz_left: 左から右への水平方向
hier_horz_right: 右から左への水平方向
hier_horz_start: 水平方向。ロケールによって向きが決まります。
hier_horz_end: 水平方向。ロケールによって向きが決まります。
tree: ツリー。インデントされたツリー
radial: 放射状。ルート・ノードが中央に配置され、後続の子レベルがそれぞれの親ノードから外側に向かって放射状に広がります。
circle: 円。ルート・ノードが中央に配置され、すべてのリーフ・ノードが同心円に配置されるレイアウト。親ノードは円の内側に配置されます。
図29-4に、階層ビューア・コンポーネントの円レイアウトの例を示します。
ページにコンポーネントを挿入する際(データ・コントロール・パネルからデータ・コレクションと階層ビューア・コンポーネントをバインドするか、コンポーネント・パレットからコンポーネントを挿入して後からデータにバインドする)、階層ビューアの初期レイアウトを定義できます。使用可能なレイアウトは、図29-5に示すように、コンポーネント・ギャラリの「階層ビューア・タイプ」領域に表示されます。
|
注意: 円レイアウトは、コンポーネント・ギャラリでは使用できません。円レイアウトで階層ビューアを作成するには、プロパティ・インスペクタで |
図29-5に示す選択のように、コンポーネント・ギャラリの「クイック・スタート・レイアウト」領域では、ノードの複数のコンテンツ・セットをサポートするdvt:panelCard要素の生成を選択することもできます。
デフォルトでは、階層ビューア・コンポーネントはFlash Playerでレンダリングします。Flash 10以上がクライアントで使用できない場合や印刷が目的の場合、階層ビューアはHTMLでレンダリングされます。HTMLレンダリングはFlashレンダリングにできるかぎり細かく従いますが、いくつかの相違があります。次の例外を除き、ほとんどの場合、階層ビューアの表示と機能はサポートされます。
分離ノードおよびリストア・ノードは使用できません。
ノードの形状は長方形に制限されます。
リンクの場合、リンクの終点コネクタはサポートされません。リンク・タイプは直交に制限され、リンク・スタイルは実線に制限されます。
コントロール・パネルの場合、パネル・カードはすべて切り替えることができません。パンはスクロール・バーに制限され、ズームおよびズーム・フィットは4つのズーム・ファセットに制限されます。
検索はサポートされません。
メール可能なページはサポートされません。
ノードの詳細を示すホバー・ウィンドウはサポートされません。
階層ビューア・コンポーネントには、1つ以上のディテール・コレクションと1つのマスター・ディテール・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションが必要です。階層ビューア・コンポーネントでは、ADF Faces treeコンポーネントと同じデータ・モデルが使用されます。データ・コレクションをまずADF Faces treeコンポーネントにバインドすることによって、データ・コレクションを階層ビューア・コンポーネントにバインドできるかどうかテストできます。ADF Faces treeコンポーネントを使用してデータ・コレクションをナビゲートできれば、階層ビューア・コンポーネントにバインドすることができます。
JSFページに階層ビューア・コンポーネントを追加すると、JDeveloperによりJSFページのページ定義ファイルにツリー・バインディングが追加されます。ツリー・バインディングでノードにデータを移入する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のマスター/ディテール・オブジェクトの表示にツリーを使用する方法に関する項を参照してください。
ユーザーが階層ビューア・コンポーネントのルート・ノードから下方向にナビゲートできるようにするには、階層ビューア・コンポーネントでノードにバインドするデータ・コレクションに再帰的アクセッサが含まれている必要があります。階層ビューア・コンポーネントのナビゲートの詳細は、29.4項「階層ビューアのナビゲート」を参照してください。
ノードは、実行時に階層ビューア・コンポーネントの個々の要素を示す形状です。階層ビューア・コンポーネントの個々の要素の例には、組織図の従業員またはネットワーク・ダイアグラムのコンピュータが含まれます。デフォルトで、階層ビューア・コンポーネントの各ノードには、ユーザーが次のことを実行できるコントロールが含まれています。
階層ビューア・コンポーネントの他のノードへのナビゲート
各ノードの上部には、親ノードを表示するか、階層ビューアのアンカー・ノードとして選択するリストア・ボタンまたは分離ボタンが1つあります。例外は階層ビューア・コンポーネントの最上部のノードで、理由はこのノードには親ノードがなく分離できないからです。
階層ビューア・コンポーネントで現在選択されているノードの子ノードの表示または非表示
リーフ・ノードではないすべてのノードの下部には、「表示」または「非表示」ボタンが表示されます。ユーザーがこれらのアイコンのいずれかをクリックすると、コンポーネントによりRowDisclosureEventイベントが生成されます。このイベントに対応する処理を実行するには、 af:treeコンポーネントと同じ方法でカスタムのrowDisclosureListenerメソッドを登録します。詳細は、10.5.4項「プログラムを使用したノードの開閉について」を参照してください。
パネル・カードを使用して、階層ビューア・コンポーネントが参照するノードの様々な情報セットを表示する場合、ノードの下部にあるコントロールにより、アクティブ・ノードの情報セットを変更できます。詳細は、29.6項「パネル・カードの使用」を参照してください。
図29-6に、エンド・ユーザーがアンカー・ノードとしてノードを分離し、子ノードを表示して、アクティブ・ノードの様々な情報セットを表示するようにノードを変更できるコントロールを含むノード例を示します。ノードのコントロールの構成方法の詳細は、29.3.2項「ノードのコントロールの構成方法」を参照してください。
基本的なノード・タイプは4つあります。
ルート・ノードは、階層ビューア・コンポーネントで表示可能な最上ノードです。ルート・ノードは、常にツリー・コンポーネントから返される階層のルートになります。通常、一度に表示されるルート・ノードは1つのみです。ただし、実装するユース・ケースによって、複数のルート・ノードが表示される場合もあります(ファミリ・ツリーの場合など)。
アンカー・ノードは、階層ビューア・コンポーネントがレンダリングされると必ずフォーカスされるノードです。表示されるアンカー・ノードは常に1つのみです。
ツリー・ノードに子ノードが定義されていて、階層ビューア・コンポーネントのdisplayLevelsAncestorプロパティが0に等しい場合は、アンカー・ノードはルート・ノードと同じになります。実行時に、ユーザーがsetAnchorListenerプロパティに指定された値を持つ別のノードをダブルクリックすると、そのノードがアンカー・ノードになります。子ノードがあるかどうかによって、アンカー・ノードも内部ノードまたはリーフ・ノードにすることができます。アンカー・ノードの指定方法の詳細は、29.3.4項「ノード定義と特定のデータ行セットを関連付ける方法」を参照してください。
アンカー・ノードより上に、1つ以上の祖先レベルを指定できます。詳細は、29.3.5項「アンカー・ノードの祖先レベルの指定方法」を参照してください。
内部ノードは、子ノードを持つノードです。
リーフ・ノードは、子ノードを持たないノードです。
図29-7に、階層ビューア・コンポーネントのレイアウトによって、ノードを別のタイプにする方法を示します。
ノードには、ノードにナビゲートして、ノードを表示または非表示にできるコントロールがデフォルトで含まれますが、階層ビューア・コンポーネントを作成するときに、クイック・スタート・レイアウトを使用した場合を除き、ノードにコンテンツはデフォルトで含まれません。実行時にノードによってレンダリングされるコンテンツを定義する必要があります。『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、データ・バインディングと階層ビューア・コンポーネントを関連付けると、ノード・コンテンツを指定できます。
デフォルトで、作成する階層ビューア・コンポーネントにはズーム・レベル100%のファセット要素を1つ持つノードが1つ作成されます。
<f:facet name="zoom100"/>
次のズーム・レベルを使用して、さらに3つのファセット要素のインスタンスを階層ビューア・コンポーネントに挿入できます。
25%: zoom25
50%: zoom50
75%: zoom75
階層ビューアをズーム・アウトして、表示するノードを増やし、各ノードで利用可能な表示領域を減らす場合、これらのズーム・レベル定義を使用すると、ノード・コンテンツの読みやすさが向上します。1つ以上のファセット要素内で使用可能なデータ・コレクションのサブセットを定義できます。たとえば、名前、場所および数など、会社の部署に関するデータを参照するノード属性を持つデータ・コレクションがある場合、部署の名前と数のノード属性を参照する、ズーム・レベル50%のファセット要素を指定できます。
実行時、どのズーム・レベルでノード上にカーソルを置いても、ズーム・レベル100%でノード・コンテンツを表示するホバー・ウィンドウが自動的に表示されるため、ズーム・レベルに関係なく情報をすべて表示できます。ノードが階層ビューアで選択されている場合、ホバー・ウィンドウ上のコントロールはアクティブです。
挿入する各ファセット要素は、他のコンポーネントの参照に使用できます。次のコンポーネントから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.3項「ポップアップ・ウィンドウを起動するための階層ビューアの構成方法」を参照してください。
af:spacer
dvt:panelCard
dvt:panelCardコンポーネントの使用方法の詳細は、29.6項「パネル・カードの使用」を参照してください。
|
注意: サポートされないコンポーネントは、設計時に反転されます。 |
階層ビューア・コンポーネントにノードを追加する手順:
構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「dvt:hierarchyViewerの中に挿入」→「ノード」を選択します。
次のエントリがJSFページに表示されます。
<dvt:node> <f:facet name="zoom100"/> </dvt:node>
構造ウィンドウでdvt:nodeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、適切なプロパティを構成します。
たとえば、ノード・コンポーネントとアクセッサを関連付けるには、typeプロパティに値を設定します。
<dvt:node type="model.rootEmp model.HvtestView"/>
詳細は、29.3.3項「アクセッサのノード定義の指定方法」を参照してください。
ノード・コンポーネント(dvt:node)では、リストア、分離、表示または非表示などのコントロールを実行時に表示するかどうかを決定できる多くのプロパティが公開されます。実行時のノードのサイズと形状を決定するプロパティも公開されます。
ノードにコントロールを構成する手順:
構造ウィンドウでdvt:nodeコンポーネントを右クリックし、「プロパティに移動」を選択します。
表29-2に説明されているとおり、プロパティ・インスペクタの「外観」セクションでdvt:nodeコンポーネントのプロパティを構成します。
表29-2 ノード構成プロパティ
| 実行する手順 | プロパティに設定する値 |
|---|---|
|
表示または非表示コントロールをノードに表示するかしないかを構成します。 |
コントロールを非表示にするには、 |
|
リストアまたは分離コントロールをノードに表示するかしないかを構成します。 |
ノードでこれらのコントロールを非表示にするには、
|
|
ノードの高さと幅を構成します。 |
|
|
ノードの形状を選択します。 |
「図形」ドロップダウン・リストから値を選択します。使用可能な値は次のとおりです。
|
プロパティ・インスペクタの「スタイル」セクションのプロパティの構成の詳細は、20.4項「コンポーネントのスタイル・プロパティの変更」を参照してください。
ホバー・ウィンドウは、ノード上にカーソルを置くと自動的に表示され、そのノードに設定されるshape属性が反映されます。たとえば、ノードのshape属性がroundedRectの場合、図29-8に示すように、ホバー・ウィンドウの属性も同じになります。
デフォルトで、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、「階層ビューアの作成」ダイアログを使用して、階層ビューア・コンポーネントを作成する場合は、ノード・コンポーネントをアクセッサと関連付けます。「階層ビューアの作成」ダイアログでは、ノード・コンポーネントのtypeプロパティが特定のアクセッサに設定されます。
ノード・コンポーネントのtypeプロパティを構成して、指定された1つ以上のアクセッサを使用できます。あるいは、29.3.4項「ノード定義と特定のデータ行セットを関連付ける方法」での説明のとおり、アクセッサ間でノード定義を使用するようにノード・コンポーネントのrenderedプロパティを構成できます。階層ビューア・コンポーネントで特定のデータ行にどのノード定義を使用するかを決定する場合、最初にtypeプロパティの一致があるかどうかを確認します。
typeプロパティと一致し、renderedプロパティの値がtrue(デフォルト)の場合、階層ビューア・コンポーネントでノード定義が使用されます。
typeプロパティと一致しない場合、階層ビューア・コンポーネントではrenderedプロパティの値がtrueと評価されるかどうかが確認されます。renderedプロパティの評価の結果は、typeには影響しません。
ノード・コンポーネントのrenderedプロパティを使用して、ノードを特定のデータ行セットまたは単一データ行と関連付けることができます。renderedプロパティでは、ブール値を使用して、trueまたはfalseに評価してノード定義に関連付けるデータ行を決定するEL式を記述できます。たとえば、肩書に基づくデータをノードに表示するとします。ノード・コンポーネントのrenderedプロパティに対して、肩書が指定した値(この例ではCEO)と一致する場合にtrueと評価する次の疑似EL式のようなEL式を記述します。
rendered="#{node.title == 'CEO'}"
ノード・コンポーネントのrenderedプロパティをこのように使用する場合は、そのノード・コンポーネントのtypeプロパティの値は定義しません。
階層ビューア・コンポーネントのアンカー・ノードは、ツリー・バインディングによって返される階層のルートです。ユース・ケースによって、複数のルート・ノードにすることができます(1人以上のマネージャのいる組織図をレンダリングする階層ビューア・コンポーネントなど)。実行時に階層ビューア・コンポーネントをレンダリングすると、フォーカスのあるノードがアンカー・ノードになります。実行時に、ユーザーがsetAnchorListenerプロパティに指定された値を持つ別のノードをダブルクリックすると、そのノードがアンカー・ノードになります。
アンカー・ノードの上のレベル(祖先レベル)を1つ以上表示するように階層ビューアを構成できます。たとえば、企業の従業員を検索する場合、従業員の上の管理チェーンを表示できます。displayLevelsAncestorプロパティを使用して、祖先レベルを指定します。
アンカー・ノードの祖先レベル数を指定する手順:
構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「共通」セクションを開きます。
実行時に、アンカー・ノードの上に表示する祖先ノードのレベル数をdisplayLevelsAncestorプロパティで指定します。
たとえば、アンカー・ノードの祖先レベルの数に2を入力すると、JSFページに次のエントリが表示されます。
displayLevelsAncestor="2"
JSFページへの変更を保存します。
デフォルトで、階層ビューア・コンポーネントのルート・ノードと内部ノードには下方向へのナビゲーションが構成されています。階層ビューア・コンポーネントで上方向へのナビゲーションを行い、ユーザーが同じレベルのノード間をナビゲートしたときに表示されるノードの数を決定できるように構成することができます。
ノード・タイプの詳細は、29.3項「階層ビューアでのノードの管理」を参照してください。
階層ビューア・コンポーネントの上方向ナビゲーションを構成する場合、階層ビューア・コンポーネントのnavigateUpListenerプロパティの値を構成します。
階層ビューア・コンポーネントの上方向へのナビゲーションを構成する手順:
構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「動作」セクションを開きます。ユーザーが新しいアンカー・ノードにナビゲートしたときに、新しいアンカー・ノードを参照するようにデータ・モデルを更新するメソッドを指定する階層ビューア・コンポーネントのnavigateUpListenerの値を記述します。
「OK」をクリックします。
階層ビューア・コンポーネントのノード間の同レベル・ナビゲーションはデフォルトで有効にされています。階層ビューア・コンポーネントを構成して、一度に表示するノードの数を決定できます。これを行うと、ユーザーに次のナビゲートを可能にするコントロールが表示されます。
左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート
階層ビューア・コンポーネントの同レベル・ナビゲーションを構成する手順:
構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「共通」セクションを開き、実行時に表示するノードの数をレベルごとのノード数フィールド(levelFetchSize)で指定します。
たとえば、ノードの数に3を入力すると、JSFページに次のエントリが表示されます。
levelFetchSize="3"
「OK」をクリックします。
実行時に、階層ビューア・コンポーネントのlevelFetchSizeプロパティの値として指定したノードの数が、階層ビューア・コンポーネントによってレンダリングされます。階層ビューア・コンポーネントは、ユーザーが次のことを実行できるコントロールもレンダリングします。
左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート
図29-9に、levelFetchSize="3"の場合の実行時の例を示します。図29-9の丸で囲まれている領域に示すように、ユーザーがコントロール上にマウスを移動させると、ユーザーにノードの最後のセットへのナビゲートを可能にするコントロールが表示されます。
階層ビューア・コンポーネントを構成して、ポップアップ・ウィンドウを起動し、機能およびOracle Fusion Webアプリケーションの他のページからのデータが示されたメニューを表示します。
デフォルトでは、階層ビューアのパンは、コンポーネントをクリックおよびドラッグしてビューを再配置するか、コントロール・パネルのパン制御を使用することで行われます。ノードの数が多い階層ビューアでは、階層ビューアで一度に1ページを参照するのではなく、階層ビューアにアニメーションを使用して階層ビューア・ノードから視覚的に進む3Dティルト・パン効果を開始できます。その効果は、ビューのエッジ方向に開始すると、エッジのノードの終端に達するまで自動的に持続します。図29-10に、ビューのエッジに達したティルト・パン効果を示します。
ティルト・パン効果を使用するには、まずノードのコンテンツの受入れ可能なビューについて、階層ビューでズーム・レベルを調整する必要があります。次の方法で効果を開始できます。
定期的なパンを短時間行った後、コントロール・パネルのパン制御でクリックおよびドラッグして、ティルト・パンを開始します。
ビュー・ポート全域のビューの1/3の距離をクリックおよびドラッグします。
ビューのエッジ近くでカーソルをクリックしたまま、その方向でティルト・パンを開始します。
ティルト・パン効果が開始すると、ビュー内でカーソルを移動して、ビューからパンの方向を変更できます。ビューのノードを選択してティルト・パンを終了します。
階層ビューアの3Dティルト・パン効果を構成するには、panningプロパティをtiltに設定します。
デフォルトでは、実行時に階層ビューアのノードをクリックすると、そのノードが選択されます。この相互作用をカスタマイズするには、dvt:nodeコンポーネントのclickBehavior属性を設定します。このプロパティの有効な値は次のとおりです。
focus: ノードはフォーカスを受け入れ、クリックすると選択されます(デフォルト)。
expandCollapse: 子ノードの要素の展開または折りたたみが、その現在の展開状態に応じて行われます。
isolateRestore: ノードは、その現在の状態に応じて分離またはリストアされます。
none: ノードをクリックしても何も行われません。
階層ビューア・ノードからポップアップ・ウィンドウを起動するには、af:showPopupBehaviorタグの値を指定して、コマンド・コンポーネント(af:commandButtonなど)からポップアップ･ウィンドウを起動します。階層ビューア・コンポーネントのノードのf:facet要素内で、ポップアップを起動するコマンド・コンポーネントをネストする必要があります。このシナリオで使用されるaf:showPopupBehaviorタグのtriggerTypeプロパティでは、次の値のみがをサポートされます。
action
mouseHover
たとえば、図29-11に、ノードのHR Detailリンクから起動するモーダル・ポップアップを示します。例29-2に、ポップアップを作成するサンプル・コードを示します。例29-3に、コマンド・コンポーネントからポップアップを起動するサンプル・コードを示します。簡潔にするために<af:panelGroupLayout>、<af:spacer>および<af:separator>などの要素は、サンプル・コードには含まれません。
例29-2 ポップアップを作成するサンプル・コード
<af:popup id="popupDialog" contentDelivery="lazyUncached" eventContext="launcher"
launcherVar="source">
<af:setPropertyListener from="#{source.currentRowData}"
to="#{myBean.selectedEmployee}" type="popupFetch"/>
<af:dialog title="Employee HR Detail">
<af:panelFormLayout>
<af:panelLabelAndMessage label="Name" >
<af:outputText value="#{myBean.selectedEmployee.firstName}
#{myBean.selectedEmployee.lastName}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="Offical Title" >
<af:outputText value="#{myBean.selectedEmployee.officalTitle}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="HR Manager Id" >
<af:outputText value="#{myBean.selectedEmployee.hrMgrPersonId}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="HR Rep Id" >
<af:outputText value="#{myBean.selectedEmployee.hrRepPersonId}"/>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:dialog>
</af:popup>
例29-3 コマンド・コンポーネントからポップアップを起動するサンプル・コード
<f:facet name="zoom100"> ... <dvt:panelCard effect="slide_horz" ... <af:showDetailItem text="Contact " ...<af:commandLink text="Show HR Detail" inlineStyle="font-size:14px;color:#383A47" ><af:showPopupBehavior popupId="::popupDialog" triggerType="action"align="endAfter" alignId="pg1" /></af:commandLink></showDetailItem> </dvt:panelCard> </f:facet>
af:showPopupBehaviorタグの使用の詳細は、13.4項「ポップアップ要素の起動」を参照してください。
階層ビューア内でノード・コンポーネント(dvt:node)を構成し、af:menuコンポーネントを使用することによってメニューを起動させることができます。af:menuコンポーネントには1つ以上のaf:commandMenuItem要素を構成できます。階層ビューア・コンポーネント内のノードでは、af:menuコンポーネントのネストはサポートされていません。図29-12に、ノードと関連付けられるコンテキスト・メニューを示します。
例29-4に、コンテキスト・メニューを作成するサンプル・コードを示します。
例29-4 コンテキスト・メニューのサンプル・コード
<af:popup id="popupDialog" contentDelivery="lazyUncached" >
<af:menu>
<af:commandMenuItem text="Send an IM"/>
<af:commandMenuItem text="Look at details"/>
</af:menu>
</af:popup>
af:menuコンポーネントの使用方法の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用」を参照してください。
パネル・カード・コンポーネントを階層ビューア・コンポーネントとともに使用して、階層ビューア・コンポーネントが参照するノードに異なった情報のセットを保持できます。パネル・カード・コンポーネントは、ノード要素の内側の領域で、1つ以上のaf:showDetailItem要素を含めることができます。
各af:showDetailItem要素がコンテンツの1セットを参照します。たとえば、組織図をレンダリングする階層ビューア・コンポーネントに組織内の従業員のノードを含めることができます。このノードには、1つのaf:showDetailItem要素、および給与情報を参照するもう1つのaf:showDetailItem要素を使用して連絡先情報を参照するパネル・カード・コンポーネントを含めることができます。
パネル・カード・コンポーネントには、実行時に1つのaf:showDetailItem要素によって参照されるコンテンツが表示されます。パネル・カード・コンポーネントによって、ナビゲーション・ボタン、およびユーザーがaf:showDetailItem要素によって参照されるデータのセット間の切替えを行えるようにする他のコントロールがレンダリングされます。ユーザーがデータの異なったセット間で切替えを行えるようにするコントロールは、オプションの遷移効果を使用して構成できます。たとえば、パネル・カードがaf:showDetailItem要素によって参照されるデータのセットと、別のaf:showDetailItem要素によって参照される別のデータのセットとの間を水平にスライドするように構成できます。
パネル・カード・コンポーネントは、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要素のプロパティを構成します。
実行時に、ノードが表示され、パネル・カード・コンポーネントが1つ表示されます。ユーザーは、パネル・カードの下部にあるナビゲーション・ボタンをクリックして、パネル・カードのaf:showDetailItem子要素のいずれかによって参照されるコンテンツの次のセットにナビゲートできます。
図29-13に、2つの異なる子要素af:showDetailItemが情報の異なるセット(ContactおよびAddress)を参照する場合のパネル・カード・コンポーネントを含むノードを示します。例のコントロールには、パネル・カードをスライドする矢印と、表示するパネル・カードを直接選択するボタンがあります。両方のコントロール・オプションのツールチップの表示。
階層ビューアのコンポーネントのサイズや外観をカスタマイズできます。たとえば、イメージの追加、コントロール・パネルの表示の構成、リンクおよびラベルのカスタマイズなどです。
階層ビューア・コンポーネントの外観は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」での説明のとおり、スキンおよびコンポーネント・スタイル属性を変更することによって変更できます。
階層ビューア・コンポーネントのサイズは、プロパティ・インスペクタを使用して、階層ビューア・コンポーネントの属性の数に値を設定することによって調整できます。
階層ビューアのサイズを調整する手順:
階層ビューア・コンポーネントを含むJSFページの構造ウィンドウで、dvt:hierarchyViewerノードを選択します。
プロパティ・インスペクタで、InlineStyleプロパティに次の値を記述します。
width
パーセント(%)またはピクセル(px)で値を記述します。widthのデフォルト値は100%です。
height
パーセント(%)またはピクセル(px)で値を記述します。heightのデフォルト値は600pxです。
InlineStyleプロパティに入力する最終値には、次の例に示す構文を使用する必要があります。
width:100%;height:600px;
JSFページへの変更を保存します。
実行時に階層ビューア・コンポーネントのノードがイメージに表示されるように階層ビューア・コンポーネントを構成できます。これは、組織図に画像を表示するような場合に便利です。目的のイメージのURLにバインドされるソース属性を含むaf:imageコンポーネントを挿入します。次のコード例では、イメージがレンダリングされます。
<af:panelGroupLayout>
<af:image source="/person_id=#{node.PersonId}"
inlineStyle="width:64px;height:90px;"/>
</af:panelGroupLayout>
af:panelGroupLayoutコンポーネントの詳細は、8.12.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。
実行時に階層ビューア・コンポーネントによってレンダリングされる場合、コントロール・パネルが次のように機能するように、29.1.2項「階層ビューアの要素と用語」で説明されているとおり、階層ビューア・コンポーネントを構成できます。
開いたまたは表示状態での表示
閉じたまたは非表示状態での表示
ユーザーに対して非表示
コントロール・パネルの表示を構成する手順:
構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
「外観」セクションを開き、ControlPanelBehaviorドロップダウン・リストから次の値のいずれかを選択します。
hidden
実行時にコントロール・パネルを表示しない場合は、この値を選択します。
initCollapsed
これがデフォルト値です。コントロール・パネルは、実行時に閉じたまたは非表示状態で表示されます。
initExpanded
実行時にコントロール・パネルを開いたまたは表示状態で表示する場合は、この値を選択します。
JSFページへの変更を保存します。
階層ビューアでは、ノード間の関係はノードをつなぐ線で表されます。リンクは、ラベルを含めるように構成できます。図29-14に、階層ビューアのリンクとラベルを示します。
リンクとラベルの外観をカスタマイズするには、階層ビューアのdvt:link要素のプロパティを設定します。図29-15に、linkStype属性に値dashDotが設定されたリンクを示します。
リンクとラベルの表示のカスタマイズ手順:
構造ウィンドウでdvt:linkノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、次の属性を設定して、階層ビューアのノード間のリンクの外観を必要に応じてカスタマイズします。
linkStyle: リンクのスタイルを設定します(点線や破線など)。
linkColor: リンクの色を設定します。
linkWidth: リンクの幅をピクセル単位で設定します。
linkType: リンクのタイプを設定します。1つの直角に適合する直線やなめらかな曲線など。
endConnectorType: リンク接続の終端のスタイルをnone(デフォルト)またはarrowOpenに設定します。
プロパティ・インスペクタで、labelプロパティのリンクに関連付けられるラベルのテキストも入力します。
あるいは、子ノードに基づいてリンク・ラベルをスタンプ・アウトするEL式を指定します。たとえば、ノードのvar属性が、リンクに関連付けられる子ノードを参照する次のようなEL式を記述します。
label="{node.relationship}"
必要に応じて、プロパティ・インスペクタで、renderedプロパティを使用して、ノード間の特定の関係のリンクをスタンプします。リンクが関係を表すかどうかを判別するためにtrueまたはfalseに評価されるEL式を記述できるように、プロパティはブール値を受け入れます。たとえば、レポート作成の関係に基づいて表示するリンクがあるとします。ノード・コンポーネントのrenderedプロパティに対して、関係が指定した値(この例では(CONSULTANT)と一致する場合にtrueと評価する次の疑似EL式のようなEL式を記述します。
rendered="#{node.relationship == "CEO"}
階層ビューアの検索機能は、階層ビューアのデータ構造を調べて、スクロール可能なリストで一致を提供します。検索結果をダブルクリックすると、一致するノードを階層ビューアのアンカー・ノードとして表示できます。有効な場合、検索パネルが階層ビューアの右上隅に表示され、結果は検索パネルの下に表示されます。図29-16に、検索パネルのサンプルを示します。
図29-17に、検索結果のサンプルを示します。
検索を有効にするには、dvt:hierarchyViewerタグの子タグとしてdvt:searchタグを追加し、結果の処理方法を指定するには、dvt:searchの子タグとしてdvt:searchResultsを追加します。
階層ビューアでの検索の構成手順:
構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「dvt:hierarchyViewerの中に挿入」→dvt:searchを選択します。
プロパティ・インスペクタで、次の属性を設定して検索機能を構成します。
value: 検索テキストを保持する変数を指定します。
actionListener: 検索を実行する場合に呼び出されるリスナーを入力します。
initialBehavior: 検索パネルが最初に表示される方法を指定します。有効な値は、最初に折りたたむ場合はinitCollapsed、最初に展開する場合はinitExpanded、ビューから完全に非表示にする場合はhiddenになります。
必要に応じて、値がname="end"のf:facetを追加して、階層ビューア･コンポーネントの外部の高度な検索を起動するコンポーネントを指定します。このファセットには、データ・セットの広範囲な検索を起動するコンポーネント(af:commandLinkなど)を1つのみ含める必要があります。詳細は、12.4項「問合せコンポーネントの使用」を参照してください。
構造ウィンドウでdvt:searchノードを右クリックし、「dvt:searchの中に挿入」→dvt:searchResultsを選択します。
プロパティ・インスペクタで、次の属性を設定して検索結果の表示を構成します。
value: 検索結果のデータ・モデルを指定します。これは、oracle.adf.view.faces.bi.model.DataModelのインスタンスにする必要があります。
var: 階層ビューアのコレクションの各要素を参照するために使用するEL変数の名前を入力します。このコンポーネントのレンダリングが完了すると、この変数は削除されます(またはその前の値に戻ります)。
varStatus: varStatus情報を参照するために使用するEL変数の名前を入力します。このコンポーネントのレンダリングが完了すると、この変数は削除されます(またはその前の値に戻ります)。
resultListener: 検索結果の行の選択後に呼び出されるアクション・リスナーの参照を指定します。
emptyText: 結果が戻されない場合に表示するテキストを指定します。
fetchSize: 一度にフェッチする結果行の数を指定します。
構造ウィンドウでdvt:searchResultsノードを右クリックし、「dvt:searchResultsの中に挿入」→「ADF Faces」→af:setPropertyListenerと選択します。
プロパティ・インスペクタで、次の属性を設定して、結果モデルの検索結果ノードを、対応する階層ビューア・モデルにマップします。
from: 値のソースを、定数またはEL式で指定します。
to: 値のターゲットを指定します。
type: actionを値として選択します。
構造ウィンドウでdvt:searchResultsノードを右クリックし、「dvt:searchResultsの中に挿入」→f:facet(値はname="content")と選択します。
構造ウィンドウでf:facet contentノードを右クリックし、次の手順を実行して、検索結果をスタンプ・アウトするコンポーネントを指定します。
ADF Facesのaf:panelGroupLayout要素を挿入して、検索結果の出力をラップします。
ADF Facesの出力コンポーネントを挿入して、検索結果を表示します。次に例を示します。
<af:outputText value="#{resultRow.Lastname} " id="ot1"
inlineStyle="color:blue;"/>
<af:outputText value="#{resultRow.Firstname}" id="ot2"/>
スタンプされたそれぞれの行は、dvt:searchResultsタグのvar属性を使用して現在の行を参照します。
例29-5に、階層ビューアで検索を構成するサンプル・コードを示します。
例29-5 階層ビューアの検索のサンプル・コード
<dvt:hierarchyViewer>
<dvt:search id="searchId" value="#{bindings.lastNameParam.inputValue}"
actionListener="#{bindings.ExecuteWithParams1.execute}">
<f:facet name="end">
<af:commandLink text="Advanced">
<af:showPopupBehavior popupId="::mypop" triggerType="action"/>
</af:commandLink>
</f:facet>
<dvt:searchResults id="searchResultId"
emptyText="#{bindings.searchResult1.viewable ? 'No match.' : 'Access
Denied.'}"
fetchSize="25"
value="#{bindings.searchResult1.collectionModel}"
resultListener="#{bindings.ExecuteWithParams.execute}"
var="resultRow">
<af:setPropertyListener from="#{resultRow.Id}"
to="#{bindings.employeeId.inputValue}"
type="action"/>
<f:facet name="content">
<af:panelGroupLayout inlineStyle="width:110px;height:20px;">
<af:outputText value="#{resultRow.Lastname} " id="ot1"
inlineStyle="color:blue;"/>
<af:outputText value="#{resultRow.Firstname}" id="ot2"/>
</af:panelGroupLayout>
</f:facet>
</dvt:searchResults>
</dvt:search>
</dvt:hierarchyViewer>
