| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
前 |
次 |
この章では、ADFデータ視覚化hierarchyViewerコンポーネントを使用して、階層ビューアでデータを表示する方法について説明します。アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して階層ビューアを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。
この章では、次の項目について説明します。
階層ビューアは、階層データを視覚的に表示するために使用されます。階層データにはデータ内にマスター/ディテール関係が含まれています。たとえば、組織内の従業員間の関係に関する情報が含まれるデータ・コレクションから、組織図をレンダリングする階層ビューアを作成することもできます。
階層ビューアでは、ノードと呼ばれる形状を使用して、階層内のデータを参照します。ノードの形状およびコンテンツは、ノードの視覚的レイアウトと同様に、構成可能です。ノードは1つのパネル・カード内に複数のビューを表示できます。
ADFデータ視覚化階層ビューア・コンポーネントには、パンおよびズーム、レイアウト・ビューの変更など、エンド・ユーザー向けの一連の機能が用意されています。また、ノードの形状の変更、線およびラベルなどの一連のプレゼンテーション機能も備わっています。
コンポーネントをページに挿入する際、データ・コレクションを階層ビューア・コンポーネントにバインドする場合はデータ・コントロールから、コンポーネントを挿入し後からデータにバインドする場合はコンポーネント・パレットから、階層ビューアの初期レイアウトを定義できます。階層ビューア内のノードのレイアウトは構成可能で、レイアウトには次のタイプがあります。
実行時に、ノードにはユーザーにノード間のナビゲートを可能にし、デフォルトで他のノードを表示または非表示にできるコントロールが含まれます。
実行時に、エンド・ユーザーはaf:showDetailItem要素が参照するコンテンツを動的に切り替えるノードのコントロールを使用します。
実行時に、ユーザーがsetAnchorListenerプロパティに指定された値を持つ別のノードをダブルクリックすると、そのノードがアンカー・ノードになります。
実行時、76%未満のズーム・レベルでノード上にカーソルを置いても、ズーム・レベル100%でノード・コンテンツを表示するホバー・ウィンドウが自動的に表示されるため、ズーム・レベルに関係なく情報をすべて表示できます。ホバー・ウィンドウ上のコントロールはアクティブです。
有効な場合、大量のノードがある階層ビューアを一度に1ページ目を通すかわりに、ユーザーはティルト・パン効果を開始して、階層ビューアをアニメーション化することで、階層ビューアのノードからノードへと飛んでいくように見ることができます。ビューの端に向かう動きに設定すると、効果は端にある最後のノードに到達するまで自動的に継続します。図27-5に、ビューの端に到達したティルト・パン効果を示します。
ティルト・パン効果を使用するには、まずノードのコンテンツのビューが満足できるものになるように、階層ビューでのズーム・レベルを調整する必要があります。次のどの方法でも、効果を開始できます。
コントロール・パネルでパン・コントロールを使用するときにクリック・アンド・ドラッグして、短期間の通常パンの後にティルト・パンを開始します。
ビューをビューポートの幅の3分の1までクリック・アンド・ドラッグします。
ビューの端の近くでカーソルをクリック・アンド・ホールドして、その方向へのティルト・パンを開始します。
ティルト・パン効果が開始されると、ビュー内でマウスを移動させて、ビューでのパンの方向を変更できます。ティルト・パンを終了するには、マウス・ボタンを放します。
階層ビューアのコントロール・パネルには、ユーザーが実行時に階層ビューア・コンポーネントの位置および外観を操作するためのツールがあります。デフォルトで、図27-6に示すとおり、階層ビューア・コンポーネントの左上隅に非表示状態で表示されます。
ユーザーは、図27-6に示すコントロール・パネルの非表示または表示ボタンをクリックして、コントロール・パネルを非表示にするか開きます。図27-7に、展開されたコントロール・パネルを示します。
表27-1では、コントロール・パネルのコントロールでユーザーに提供される機能を説明します。階層ビューア・コンポーネントのノードに、af:showDetailItem要素(追加データを表示する)を持つパネル・カードが含まれていると、パネル・セレクタは自動的に有効になります。階層ビューア・コンポーネントで次のいずれかのレイアウトが使用されていると、レイアウト・セレクタが自動的に表示されます。
上から下の垂直方向
左から右の水平方向
ツリー
放射
円
表27-1 コントロール・パネルの要素
| コントロール | 名前 | 説明 |
|---|---|---|
 |
パン制御 |
ユーザーはビューポート内の階層ビューア・コンポーネントを再配置できます。 |
 |
ズームしてあわせる |
ユーザーはビューポート内にすべてのノードが表示されるように、階層ビューア・コンポーネントにズームできます。 |
 |
ズーム制御 |
ユーザーは、階層ビューア・コンポーネントにズームできます。 |
 |
非表示/表示 |
コントロール・パネルを表示または非表示にします。 |
 |
パネル・セレクタ |
パネル・カードを構成した場合、定義済の |
 |
レイアウト・セレクタ |
レイアウトの選択を可能にします。ユーザーは階層ビューア・コンポーネントのレイアウトを、階層ビューア・コンポーネントによって提示される別のレイアウト・オプションに定義したレイアウトから変更できます。 |
階層ビューアでは、ノード・コンテンツでの双方向テキスト、検索パネルおよび検索結果の表示がサポートされています。双方向テキストとは、右から左(RTL)と左から右(LTR)の両方の方向性のテキストを含むテキストです。一般に、アラビア語やヘブライ語などの異なるタイプのアルファベットのテキストが含まれます。
階層ビューアでは、1つのノード・ビューから次のノード・ビューへパネル・カードをめくったり、コントロール・パネルと検索パネルの位置を入れ替えるための双方向サポートも提供されています(これらの要素が定義されている場合)。
階層ビューアのホバー・ウィンドウの表示、パンおよびズーム、レイアウトの変更、ノード詳細の表示、パネル・カードの同期化などのエンド・ユーザー機能は無効にできます。
デフォルトでは、初期表示での階層ビューアと選択された行キーの展開状態を指定します。
階層ビューアは、階層データおよびマスター/ディテール関係を視覚的に表示します。図27-8に、コントロール・パネル、多数のノードおよびノードを接続するリンクを含む実行時の階層ビューア・コンポーネントのセグメントを示します。ノードには、パネル・カードが含まれます。
階層ビューア・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったん階層ビューア・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。階層ビューア・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、階層ビューアをリフレッシュできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーは実行時に階層ビューアの表示方法を変更できますが、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: 階層ビューア・コンポーネントをアクセス可能にできます。詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。
コンテンツ配信: 階層ビューアを、contentDelivery属性を使用して、データ・ソースから特定の行数を一度にフェッチするように構成できます。詳細は、12.2.2項「コンテンツの配信」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされた階層ビューアを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。
|
注意: 最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。 |
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、イメージ形式、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、21.2項「データ視覚化コンポーネントの共通機能」を参照してください。
階層ビューア・コンポーネントには、1つ以上のディテール・コレクションと1つのマスター・ディテール・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションが必要です。階層ビューア・コンポーネントでは、ADF Faces treeコンポーネントと同じデータ・モデルが使用されます。データ・コレクションをまずADF Faces treeコンポーネントにバインドすることによって、データ・コレクションを階層ビューア・コンポーネントにバインドできるかどうかテストできます。ADF Faces treeコンポーネントを使用してデータ・コレクションをナビゲートできれば、階層ビューア・コンポーネントにバインドすることができます。
JSFページに階層ビューア・コンポーネントを追加すると、JDeveloperによりJSFページのページ定義ファイルにツリー・バインディングが追加されます。ツリー・バインディングでノードにデータを移入する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のマスター/ディテール・オブジェクトの表示にツリーを使用する方法に関する項を参照してください。
ユーザーが階層ビューア・コンポーネントのルート・ノードから下方向にナビゲートできるようにするには、階層ビューア・コンポーネントでノードにバインドするデータ・コレクションに再帰的アクセッサが含まれている必要があります。階層ビューア・コンポーネントのナビゲーションの詳細は、27.5項「階層ビューアでのナビゲーションの構成」を参照してください。
JDeveloperでは、コンポーネント・ギャラリからJSFページにコンポーネントをドラッグ・アンド・ドロップする場合、または『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、「階層ビューアの作成」ダイアログを使用して階層ビューア・コンポーネントを作成する場合、JSFページに次の要素が生成されます。
階層ビューア(hierarchyViewer): ノードおよびリンク要素をラップします。
ノード(node): ノードは階層のデータを参照する形状です(たとえば、組織の従業員またはネットワークのコンピュータ)。表示するデータを参照するnode要素の子要素を構成します。node要素は、様々なズーム・レベル(100%、75%、50%および25%)でコンテンツを表示する1つ以上のf:facet要素の使用をサポートします。f:facet要素は、ADFデータ視覚化panelCardコンポーネントに加えてaf:outputText、af:imageおよびaf:panelGroupLayoutなどの多数のADF Facesコンポーネントの使用をサポートします。
実行時に、ノードにはユーザーにノード間のナビゲートを可能にし、デフォルトで他のノードを表示または非表示にできるコントロールが含まれます。ノード・コンテンツの指定とズーム・レベルの定義の詳細は、27.3.1項「ノード・コンテンツの指定方法」を参照してください。
リンク(link): 1つのノードを別のノードに接続するlink要素の属性の値を設定します。リンクの外観のカスタマイズ方法およびラベルの追加方法の詳細は、27.6.4項「リンクおよびラベルの表示の構成方法」を参照してください。
パネル・カード(panelCard): ノード要素によって参照される複数セットのコンテンツを、たとえばコンテンツを水平にスライドしたり、ノードを反転したりするなど、アニメーションを使用して、動的に切り替える方法提供します。
ズーム・レベルごとのf:facetタグでは、コンテンツが指定したズーム・レベルで表示されるように定義する1つ以上のaf:showDetailItem要素を含むdvt:panelCard要素をサポートします。実行時に、エンド・ユーザーはaf:showDetailItem要素が参照するコンテンツを動的に切り替えるノードのコントロールを使用します。詳細は、27.4項「パネル・カードの使用方法」を参照してください。
|
注意: 他の要素とは異なり、 |
JSFページに階層ビューアを追加するには、コンポーネント・パレットを使用します。ページに階層ビューア・コンポーネントをドラッグ・アンド・ドロップすると、コンポーネント・ギャラリに使用可能な階層ビューア・レイアウトのカテゴリが説明とともに表示され、階層ビューアの作成時に視覚的に支援します。図27-9に、上から下の垂直方向レイアウト・タイプが選択された階層ビューアのコンポーネント・ギャラリを示します。
階層ビューア・レイアウトを選択して、ページに階層ビューアが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、階層ビューアに追加の表示属性を構成できます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図27-10に、階層ビューア・コンポーネントのAncestor Levels属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して階層ビューアを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。 |
始める前に:
階層ビューアの属性や階層の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、27.2.1項「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、27.1.3項「階層ビューア・コンポーネントの追加機能」を参照してください。
ページに階層ビューアを追加する手順:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「階層ビューア」パネルから「階層ビューア」をページにドラッグ・アンド・ドロップし、コンポーネント・ギャラリに「階層ビューアの作成」ダイアログを開きます。
ダイアログを使用して、階層ビューアのレイアウト・タイプを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、階層ビューアの属性を表示します。ヘルプ・ボタンを使用して、hierarchyViewerコンポーネントの完全なタグ・ドキュメントを表示します。
「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
Layout: 階層ビューアの階層のレイアウトを指定します。有効な値の説明と図は、27.1.1.1項「レイアウト」を参照してください。
祖先のレベル (サブメニューの表示): 初期レンダリングで表示する祖先レベルの数を指定するdisplayLevelsAncestor属性の設定に使用します。このプロパティはゼロから始まります。値0は、ルートの上の祖先レベルが表示されないことを意味します。デフォルト値は0です。
「構成」をクリックすれば、「祖先表示の構成」ダイアログが開き、使用する祖先データ・コレクションを指定できます。
子孫のレベル (サブメニューの表示): 初期レンダリングで表示する子孫レベルの数を指定するdisplayLevelsChildren属性の設定に使用します。このプロパティはゼロから始まります。値0は、ルートの下の子レベルが表示されず、ルート自体は表示されることを意味します。デフォルト値は1で、ルートおよび子の最初のレベルが表示されることを意味します。
レベル当たりのノード (サブメニューを表示): 展開された親ノードごとに一度にフェッチされ、表示される子ノードの数を指定するlevelFetchSize属性の設定に使用します。階層ビューアに表示される横方向のナビゲーション・コントロールを使用すれば、追加の子ノードをフェッチし、表示できます。デフォルト値は25です。
「階層ビューア・データ」セクションを開きます。このセクションを使用して、次の属性を設定します。
Value: 階層ビューアのデータ・モデルを指定し、javax.faces.TreeModelのインスタンスにすることができます。
Var: 階層ビューア・データ・コレクションの各要素の参照に使用される変数を指定します。このコンポーネントのレンダリングが完了すると、この変数は削除されるか、その前の値に戻ります。
「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。
Summary:階層ビューアの説明を入力します。この説明は、スクリーン・リーダーのユーザーがアクセスします。
EmptyText:階層ビューアにデータが表示されない場合に表示するテキストを指定します。
「動作」セクションを開きます。このセクションを使用して、次の属性を設定します。
ControlPanelBehavior:コントロール・パネルの動作を指定します。詳細は、27.6.3項「コントロール・パネルの表示の構成方法」を参照してください。
FeaturesOff: 階層ビューアでオフにするデフォルト機能の空白区切りのリストを指定します。有効な値は、pan、zoom、zoomToFit、changeLayout、cardSyncおよびnodeDetailです。
Panning: パンの動作を指定します。デフォルト値は、クリック・アンド・ドラッグ・パンに対するdefaultです。自動3Dティルト・パンが有効なクリック・アンド・ドラッグ・パンのティルト値も指定できます。
コンポーネント・ギャラリを使用して階層ビューア・コンポーネントをJSFページに挿入すると、階層ビューアのカスタマイズをサポートする子タグのセットが自動的に挿入されます。
階層ビューア・コンポーネントでは、af:panelGroupLayout、af:spacerおよびaf:separatorなどの要素を使用して、ノードでコンテンツをどのように表示するかを定義します。例27-1に、コンポーネント・パレットからの挿入によりコンポーネントを作成したときに生成されるコードを示します。例では、階層ビューアの要素関連のコードが強調表示されています。
例27-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>
デフォルトでは、階層ビューア・コンポーネントのレンダリングはFlash Playerで行われます。Flash 10以上はクライアントでは使用できず、印刷目的では、階層ビューアはHTMLでレンダリングされます。HTMLレンダリングはFlashレンダリングにできるだけ似るように行われますが、多少違いがあります。通例、階層ビューアの表示および機能は、次の例外を除いてサポートされます。
ノードの分離およびリストアは使用できません。
ノードの形状は、長方形に制限されます。
リンクの場合、リンク・エンド・コネクタはサポートされず、リンク・タイプは直交に制限され、リンク・スタイルは実線に制限されます。
コントロール・パネルの場合、すべてのパネル・カードを切り替えることができるとはかぎらず、パンはスクロール・バーに制限され、ズームおよびズームして合せる機能は4ズーム・ファセットに制限されます。
検索はサポートされません。
Eメール送信可能なページはサポートされません。
ノード詳細ホバー・ウィンドウはサポートされません。
ノードは、実行時に階層ビューア・コンポーネントの個々の要素を示す形状です。階層ビューア・コンポーネントの個々の要素の例には、組織図の従業員またはネットワーク・ダイアグラムのコンピュータが含まれます。デフォルトで、階層ビューア・コンポーネントの各ノードには、ユーザーが次のことを実行できるコントロールが含まれています。
階層ビューア・コンポーネントの他のノードへのナビゲート
各ノードの上部には、1つの「分離」ボタンまたは「リストア」ボタンが含まれています。「分離」ボタンを使用すると、階層範囲を選択ノードとその表示された子に一時的に縮小できます。「リストア」をクリックすると、階層が元の表示に戻ります。
階層ビューア・コンポーネントで現在選択されているノードの子ノードの表示または非表示
1つの「表示」ボタンまたは「非表示」ボタンが、各ノードの下部に表示されます。これらのアイコンの1つをクリックすると、そのノードに子が存在する場合、それらが表示されたり、非表示になったりします。
階層ビューア・コンポーネントで参照するノードの様々な情報セットを表示するためにパネル・カードを使用する場合、ノードの下部にあるコントロールにより、ユーザーはアクティブ・ノードで情報セットを変更できます。詳細は、27.4項「パネル・カードの使用方法」を参照してください。
図27-11に、エンド・ユーザーがアンカー・ノードとしてノードを分離し、子ノードを表示し、アクティブ・ノードで様々なセットの情報を表示するためにノードを変更することができるコントロール付きのノードの例を示します。ノードのコントロールの構成方法の詳細は、27.3.2項「ノードのコントロールの構成方法」を参照してください。
基本的なノード・タイプは4つあります。
ルート・ノードは、階層ビューア・コンポーネントで表示可能な最上ノードです。ルート・ノードは、常にツリー・コンポーネントから返される階層のルートになります。通常、一度に表示されるルート・ノードは1つのみです。ただし、実装するユース・ケースによって、複数のルート・ノードが表示される場合もあります(ファミリ・ツリーの場合など)。
アンカー・ノードは、階層ビューア・コンポーネントがレンダリングされると必ずフォーカスされるノードです。表示されるアンカー・ノードは常に1つのみです。
ツリー・ノードに子ノードが定義されていて、階層ビューア・コンポーネントのdisplayLevelsAncestorプロパティが0に等しい場合は、アンカー・ノードがルート・ノードと同じになる場合があります。実行時に、ユーザーがsetAnchorListenerプロパティに指定された値を持つ別のノードをダブルクリックすると、そのノードがアンカー・ノードになります。子ノードがあるかどうかによって、アンカー・ノードも内部ノードまたはリーフ・ノードにすることができます。アンカー・ノードの指定方法の詳細は、27.3.4項「ノード定義を特定のデータ行のセットに関連付ける方法」を参照してください。
アンカー・ノードより上に、1つ以上の祖先レベルを指定できます。詳細は、27.3.5項「アンカー・ノードの祖先レベルの指定方法」を参照してください。
内部ノードは、子ノードを持つノードです。
リーフ・ノードは、子ノードを持たないノードです。
図27-12に、階層ビューア・コンポーネントのレイアウトによって、ノードを別のタイプにする方法を示します。
ノードには、ノードにナビゲートして、ノードを表示また非表示にできるコントロールがデフォルトで含まれますが、階層ビューア・コンポーネントを作成するときに、クイック・スタート・レイアウトを使用していないかぎり、デフォルトでノードにコンテンツは含まれません。実行時にノードによってレンダリングされるコンテンツを定義する必要があります。『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、データ・バインディングと階層ビューア・コンポーネントを関連付けると、ノード・コンテンツを指定できます。
デフォルトで、作成する階層ビューア・コンポーネントにはズーム・レベル100%のファセット要素を1つ持つノードが1つ作成されます。
<f:facet name="zoom100"/>
次のズーム・レベルを使用して、さらに3つのファセット要素のインスタンスを階層ビューア・コンポーネントに挿入できます。
25%: zoom25
50%: zoom50
75%: zoom75
これらのズーム・レベル定義を使用して、階層ビューアがズーム・アウトされてより多くのノードが表示され、各ノードで使用可能な表示スペースが少ない場合に、ノード・コンテンツの読みやすさを改善します。1つ以上のファセット要素内で使用可能なデータ・コレクションのサブセットを定義できます。たとえば、名前、場所および番号など、会社の部署に関するデータを参照するノード属性を持つデータ・コレクションがある場合、部署の名前と番号のノード属性を参照する、ズーム・レベル50%のファセット要素を指定できます。
実行時、76%未満のズーム・レベルでノード上にカーソルを置いても、ズーム・レベル100%でノード・コンテンツを表示するホバー・ウィンドウが自動的に表示されるため、ズーム・レベルに関係なく情報をすべて表示できます。ホバー・ウィンドウ上のコントロールはアクティブです。
挿入する各ファセット要素は、他のコンポーネントの参照に使用できます。次のADF Facesコンポーネントから1つ以上を使用して、階層ビューア・コンポーネントのノードにコンテンツを定義できます。ノード・コンポーネント・ファセットでは、次のコンポーネントをサポートしています。
レイアウト・コンポーネントには、af:panelFormLayout、af:panelGroupLayout、af:separator、af:showDetailItemおよびaf:spacerがあります。これらのコンポーネントの使用方法の詳細は、第9章「Webページ上のコンテンツの編成」を参照してださい。
メニュー・コンポーネントには、af:menuとaf:menuItemがあります。これらのコンポーネントの詳細は、第16章「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。
出力コンポーネントには、af:outputFormattedとaf:outputTextがあります。これらのコンポーネントの詳細は、第18章「出力コンポーネントの使用」を参照してください。
メッセージ・コンポーネントaf:panelLabelAndMessage。このコンポーネントの詳細は、第19章「ヒント、メッセージおよびヘルプの表示」を参照してください。
ナビゲーション・コンポーネントには、af:commandButton、af:commandImageLink、af:commandLink、af:commandMenuItem、af:goButtonおよびaf:goLinkがあります。これらのコンポーネントの詳細は、第20章「ナビゲーション・コンポーネントの使用」を参照してください。
イメージ・コンポーネントaf:image。af:imageコンポーネントの使用方法の詳細は、27.6.2項「階層ビューアにイメージを含める方法」を参照してください。
af:showPopupBehavior:。af:showPopupBehaviorコンポーネントの使用方法の詳細は、27.7.2項「ポップアップ・ウィンドウを起動するための階層ビューアの構成」を参照してください。
階層ビューア子コンポーネントdvt:panelCard。dvt:panelCardコンポーネントの使用方法の詳細は、27.4項「パネル・カードの使用方法」を参照してください。
|
注意: サポートされていないコンポーネントには、設計時にフラグが付けられています。 |
デフォルトでは、階層ビューア・コンポーネントのレンダリングはFlash Playerで行われ、印刷目的ではHTMLで行われます。このため、ノード・コンテンツとして指定したADF Facesコンポーネントの一部のプロパティがサポートできないことから、コンポーネントは予想どおりにはレンダリングされません。
階層ビューア・コンポーネントにノードを追加する手順:
構造ウィンドウで「dvt:hierarchyViewer」ノードを右クリックし、「dvt:hierarchyViewerの中に挿入」→「ノード」を選択します。
次のエントリがJSFページに表示されます。
<dvt:node> <f:facet name="zoom100"/> </dvt:node>
構造ウィンドウで「dvt:node」を右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、適切なプロパティを構成します。
たとえば、ノード・コンポーネントをアクセッサと関連付けるには、typeプロパティの値を設定します。
<dvt:node type="model.rootEmp model.HvtestView"/>
詳細は、27.3.3項「アクセッサのノード定義の指定方法」を参照してください。
ノード・コンポーネント(node)では、リストア、分離、表示または非表示などのコントロールを実行時に表示するかどうかを決定できる多くのプロパティが公開されます。実行時のノードのサイズと形状を決定するプロパティも公開されます。
ノードにコントロールを構成する手順:
構造ウィンドウでdvt:nodeコンポーネントを右クリックし、「プロパティに移動」を選択します。
表27-2に説明されているとおり、プロパティ・インスペクタの「外観」セクションでdvt:nodeコンポーネントのプロパティを構成します。
表27-2 ノード構成プロパティ
| これを行うには: | プロパティに設定する値: |
|---|---|
|
表示または非表示コントロールをノードに表示するかしないかを構成します。 |
|
|
リストアまたは分離コントロールをノードに表示するかしないかを構成します。 |
ノードでこれらのコントロールを非表示にするには、 |
|
上へナビゲート・コントロールをノードに表示するかしないかを構成します。 |
ノードでこのコントロールを非表示にするには、
|
|
ノードの高さと幅を構成します。 |
|
|
ノードの形状を選択します。 |
「図形」ドロップダウン・リストから値を選択します。使用可能な値は次のとおりです。
|
プロパティ・インスペクタの「スタイル」セクションのプロパティの構成の詳細は、28.2項「コンポーネントのスタイル・プロパティの変更」を参照してください。
ユーザーが76%未満のズーム・レベルでマウスをノード上に移動すると、そのノードに対して設定されたshape属性を反映して、ホバー・ウィンドウが自動的に表示されます。たとえば、shape属性がroundedRectのノードでは、図27-13に示したものと同じ属性のホバー・ウィンドウが表示されます。
デフォルトで、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項での説明のとおり、「階層ビューアの作成」ダイアログを使用して、階層ビューア・コンポーネントを作成する場合は、ノード・コンポーネントをアクセッサと関連付けます。「階層ビューアの作成」ダイアログでは、ノード・コンポーネントのtypeプロパティが特定のアクセッサに設定されます。
ノード・コンポーネントのtypeプロパティを構成して、指定された1つ以上のアクセッサを使用できます。または、27.3.4項「ノード定義を特定のデータ行セットに関連付ける方法」での説明のとおり、アクセッサ全体にわたり1つのノード定義を使用するようにノード・コンポーネントの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ページへの変更を保存します。
パネル・カード・コンポーネントを階層ビューア・コンポーネントとともに使用して、階層ビューア・コンポーネントが参照するノードに異なる情報のセットを保持できます。パネル・カード・コンポーネントには、ノード要素内の領域で、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子要素のいずれかによって参照されるコンテンツの次のセットにナビゲートできます。
図27-14に、2つの異なるaf:showDetailItem子要素が異なる情報のセット(ContactとAddress)を参照するパネル・カード・コンポーネントのあるノードを示します。この例のコントロールには、パネル・カードの中をスライドするための矢印と、表示するパネル・カードを直接選択するためのボタンがあります。両方のコントロール・オプションにツールチップが表示されています。
デフォルトで、階層ビューア・コンポーネントのルート・ノードと内部ノードには下方向へのナビゲーションが構成されています。階層ビューア・コンポーネントで上方向へのナビゲーションを行い、ユーザーが同じレベルのノード間をナビゲートしたときに表示されるノードの数を決定できるように構成することができます。
ノード・タイプの詳細は、27.3項「階層ビューアでのノードの管理」を参照してください。
階層ビューア・コンポーネントの上方へのナビゲーションを構成する場合、階層ビューア・コンポーネントのnavigateUpListenerプロパティの値を構成します。
階層ビューア・コンポーネントの上方向へのナビゲーションを構成する手順:
構造ウィンドウで「dvt:hierarchyViewer」を選択し、「プロパティに移動」を選択します。
プロパティ・インスペクタの「動作」セクションを開き、ユーザーが新しいアンカー・ノードにナビゲートしたときに、新しいアンカー・ノードを参照するように、データ・モデルを更新するメソッドを指定する階層ビューア・コンポーネントのnavigateUpListenerプロパティの値を記述します。
「OK」をクリックします。
階層ビューア・コンポーネントのノード間の同レベル・ナビゲーションはデフォルトで有効にされています。階層ビューア・コンポーネントを構成して、一度に表示するノードの数を決定できます。これを行うと、ユーザーに次のナビゲートを可能にするコントロールが表示されます。
左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート
階層ビューア・コンポーネントの同レベル・ナビゲーションを構成する手順:
構造ウィンドウでdvt:hierarchyViewerノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「共通」セクションを開き、実行時に表示するノードの数をレベルごとのノード数フィールド(levelFetchSize)で指定します。
たとえば、ノードの数に3を入力すると、JSFページに次のエントリが表示されます。
levelFetchSize="3"
「OK」をクリックします。
実行時に、階層ビューア・コンポーネントのlevelFetchSizeプロパティの値として指定したノードの数が、階層ビューア・コンポーネントによってレンダリングされます。階層ビューア・コンポーネントは、ユーザーが次のことを実行できるコントロールもレンダリングします。
左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート
図27-15に、levelFetchSize="3"の場合の実行時の例を示します。図27-15の丸で囲まれている領域に示すように、ユーザーがコントロール上にマウスを移動させると、ユーザーにノードの最後のセットへのナビゲートを可能にするコントロールが表示されます。
階層ビューア・コンポーネントのサイズおよび外観(イメージの追加、コンロトール・パネルの表示の構成、リンクおよびラベルのカスタマイズなど)をカスタマイズできます。
階層ビューア・コンポーネントの外観は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」での説明のとおり、スキンおよびコンポーネント・スタイル属性を変更することによって変更できます。
階層ビューア・コンポーネントのサイズは、プロパティ・インスペクタを使用して、多数の階層ビューア・コンポーネントの属性に値を設定することによって調整できます。
階層ビューアのサイズを調整する手順:
階層ビューア・コンポーネントを含む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コンポーネントの詳細は、9.13.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。
コントロール・パネルを別の位置に表示されるように構成することはできませんが、階層ビューア・コンポーネントを実行時にレンダリングする際に次の動作を行うように構成することはできます。
開いたまたは表示状態での表示
閉じたまたは非表示状態での表示
ユーザーに対して非表示
コントロール・パネルの表示を構成する手順:
構造ウィンドウで「dvt:hierarchyViewer」を右クリックし、「プロパティに移動」を選択します。
「外観」セクションを開き、「ControlPanelBehavior」ドロップダウン・リストから次の値のいずれかを選択します。
hidden
実行時にコントロール・パネルを表示しない場合は、この値を選択します。
initCollapsed
これがデフォルト値です。コントロール・パネルは、実行時に閉じたまたは非表示状態で表示されます。
initExpanded
実行時にコントロール・パネルを開いたまたは表示状態で表示する場合は、この値を選択します。
JSFページへの変更を保存します。
階層ビューアでは、ノード間の関係がノードを結ぶ線によって表されます。リンクは、ラベルが含まれるように構成できます。図27-16に、階層ビューアでのリンクとラベルを示します。
リンクとラベルの外観は、階層ビューアでdvt:link要素のプロパティを設定することでカスタマイズできます。図27-17に、linkStyle属性に設定された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"}
階層ビューア・コンポーネントを構成して、ポップアップ・ウィンドウを起動し、機能およびOracle Fusion Webアプリケーションの他のページからのデータが示されたメニューを表示します。
デフォルトでは、階層ビューアのノードを実行時にクリックして、ノードを選択します。dvt:nodeコンポーネントでclickBehavior属性を設定することにより、この相互作用をカスタマイズできます。このプロパティの有効な値は次のとおりです。
focus - ノードはフォーカスされ、クリックすると選択されます(デフォルト)。
expandCollapse - 子ノード要素は、現在の展開状態に応じて、展開または縮小されます。
isolateRestore - ノードは、現在の状態に応じて、分離またはリストアされます。
none - ノードをクリックしても何も起こりません。
af:showPopupBehaviorタグの値を指定し、コマンド・コンポーネント(af:commandButtonなど)から起動することにより、階層ビューア・ノードからポップアップ・ウィンドウを起動できます。階層ビューア・コンポーネントのノードのf:facet要素内で、ポップアップを起動するコマンド・コンポーネントをネストする必要があります。このシナリオで使用されるaf:showPopupBehaviorタグのtriggerTypeプロパティは、次の値のみをサポートします。
action
mouseHover
たとえば、図27-18は、ノード内のHR Detailリンクから起動されたモーダル・ポップアップを示しています。
例27-2に、ポップアップを作成するためのサンプル・コードを示します。
例27-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>
例27-3に、階層ビューア・コンポーネントからポップアップを起動するためのサンプル・コードを示します。簡潔にするために、<af:panelGroupLayout>、<af:spacer>および<af:separator>などの要素は、サンプル・コードには含まれていません。
例27-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タグの使用方法の詳細は、15.3項「ポップアップの宣言的な呼出し」を参照してください。
階層ビューアの検索機能では、階層ビューアのデータ構造を調べ、スクロール可能なリストに一致を提示します。ユーザーは、検索結果をダブルクリックすると、一致するノードを階層ビューアのアンカー・ノードとして表示できます。有効な場合、階層ビューアの右上隅に検索パネルが表示され、結果は検索パネルの下に表示されます。図27-19に、検索パネルのサンプルを示します。
図27-20に、検索結果のサンプルを示します。
検索を有効にするには、dvt:searchタグをdvt:hierarchyViewerタグの子として追加し、結果の処理方法を指定するには、dvt:searchResultsをdvt:searchの子として追加します。
階層ビューアでの検索を構成する手段:
構造ウィンドウで「dvt:hierarchyViewer」ノードを右クリックし、「dvt:hierarchyViewerの中に挿入」→「ノード」を選択します。
プロパティ・インスペクタで、検索機能を構成するために次の属性を設定します。
value: 検索テキストを保持する変数を指定します。
actionListener: 検索を実行するためにコールされるリスナーを入力します。
initialBehavior: 検索パネルの初期表示を指定します。有効な値は、最初縮小された状態のinitCollapsed、最初開かれた状態のinitExpanded、またはビューから完全に隠すhiddenです。
オプションで、name="end"の値の入ったf:facetを追加して、階層ビューア・コンポーネントの外で拡張検索を開始するコンポーネントを指定します。このファセットには、データ・セットの包括的な検索を開始するために、コンポーネント(af:commandLinkなど)は1つしか含まれません。詳細は、14.4項「queryコンポーネントの使用方法」を参照してください。
構造ウィンドウで「dvt:search」ノードを右クリックし、「dvt:searchの中に挿入」→「dvt:searchResults」を選択します。
プロパティ・インスペクタで、検索結果の表示を構成するために次の属性を設定します。
value: 検索結果のデータ・モデルを指定します。これは、oracle.adf.view.faces.bi.model.DataModelのインスタンスである必要があります。
var: 階層ビューア・コレクションの各要素の参照に使用されるEL変数の名前を入力します。このコンポーネントのレンダリングが完了すると、この変数は削除されるか、その前の値に戻ります。
varStatus: varStatus情報の参照に使用されるEL変数の名前を入力します。このコンポーネントのレンダリングが完了すると、この変数は削除されるか、その前の値に戻ります。
resultListener: 検索結果の1行が選択された後コールされるアクション・リスナーに対する参照を指定します。
emptyText: 結果が返されなかった場合に表示されるテキストを指定します。
fetchSize: 一度にフェッチされる結果の行数を指定します。
構造ウィンドウで「dvt:searchResults」ノードを右クリックし、「dvt:searchResultsの中に挿入」→「ADF Faces」を選択してから「af:setPropertyListener」を選択します。
プロパティ・インスペクタで次の属性を設定し、検索結果ノードを結果モデルから対応する階層ビューア・モデルにマップします。
from: 値のソース(定数またはEL式)を指定します。
to: 値のターゲットを指定します。
type: actionを値として選択します。
構造ウィンドウで「dvt:searchResults」ノードを右クリックし、「dvt:searchResultsの中に挿入」→name="content"の値を持つ「f:facet」を選択します。
構造ウィンドウで「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属性を使用して、現在の行を参照します。
例27-4に、階層ビューアでの検索を構成するためのサンプル・コードを示します。
例27-4 階層ビューアの検索のサンプル・コード
<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>
