| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.2.1.1.0) E77398-02 |
|
 前 |
 次 |
hierarchyViewerコンポーネントを使用し、簡単なUI優先開発を使用して、階層ビューアでデータを表示する方法について説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して階層ビューアを作成することもできます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成」の章を参照してください。
この章の内容は次のとおりです。
階層ビューアは、階層データを表示するために使用されます。階層データにはデータ内にマスター/ディテール関係が含まれています。たとえば、組織内の従業員間の関係に関する情報が含まれるデータ・コレクションから、組織図をレンダリングする階層ビューアを作成することもできます。
階層ビューアでは、ノードと呼ばれる形状を使用して、階層内のデータを参照します。ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ノードは、1つのパネル・カード内に複数のビューを表示できます。
階層ビューアは、階層データおよびマスター/ディテール関係を視覚的に表示します。図31-1に、コントロール・パネル、多数のノードおよびノードを接続するリンクを含む実行時の階層ビューア・コンポーネントのセグメントを示します。ノードにはaf:showDetailItem要素を使用して複数セットのデータを表示するパネル・カードが含まれます。
図31-1 コントロール・パネルとノードが表示された階層ビューア・コンポーネント
ADFデータ視覚化階層ビューア・コンポーネントには、パンやズーム、レイアウト・ビューの変更など、エンド・ユーザー用の一連の機能が用意されています。また、ノード形状、線、ラベルの変更などの一連のプレゼンテーション機能も備わっています。
コンポーネントをページに挿入する際、データ・コレクションを階層ビューア・コンポーネントにバインドする場合はデータ・コントロールから、コンポーネントを挿入し後からデータにバインドする場合は「コンポーネント」ウィンドウから、階層ビューアの初期レイアウトを定義できます。
階層ビューア内のノードのレイアウトは構成可能で、レイアウトには次のタイプがあります。
上から下の垂直方向
図31-2に、上から下の垂直方向レイアウトの例を示します。
図31-2 階層ビューアの上から下の垂直方向レイアウト
下から上の垂直方向
左から右の水平方向
図31-3に、左から右の水平方向レイアウトの例を示します。
図31-3 階層ビューアの左から右の水平方向レイアウト
右から左の水平方向
ロケールによって方向が決まる水平方向
ツリー、インデントされたツリー
図31-4に、ツリー・レイアウトの例を示します。
図31-4 階層ビューアのツリー・レイアウト
ルート・ノードが中央に配置され、後続の子レベルがそれぞれの親ノードから外側に向かって広がる放射状
ルート・ノードが中央に配置され、すべてのリーフ・ノードが同心円に配置され、親ノードは円の内側に配置される円形
図31-5に、円形レイアウトの例を示します。
図31-5 階層ビューアの円形レイアウト
実行時に、ノードにはユーザーにノード間のナビゲートを可能にし、デフォルトで他のノードを表示または非表示にできるコントロールが含まれます。エンド・ユーザーはパネル・カードが参照するコンテンツを動的に切り替えるノードのコントロールを使用します。
実行時に、ユーザーがsetAnchorListenerプロパティに指定された値を持つ別のノードをダブルクリックすると、そのノードがアンカー・ノードになります。
実行時に、ユーザーがマウスを76%未満のズーム・レベルでノードに移動すると、100%のズーム・レベルでノードのコンテンツを表示するホバー・ウィンドウが自動的に表示され、ユーザーはズーム・レベルに関係なく、すべての情報を見ることができます。ホバー・ウィンドウ上のコントロールはアクティブです。
デフォルトでは、階層ビューアのパンは、コンポーネントをクリックおよびドラッグしてビューを再配置するか、コントロール・パネルのパン制御を使用することで行われます。
panningプロパティをnoneに設定することで、パン効果を無効化できます。
階層ビューアのコントロール・パネルには、ユーザーが実行時に階層ビューア・コンポーネントの位置および外観を操作するためのツールがあります。
デフォルトで、図31-6に示すとおり、階層ビューア・コンポーネントの左上隅に非表示状態で表示されます。
図31-6 非表示状態のコントロール・パネル
ユーザーは、図31-6に示すコントロール・パネルの非表示/表示ボタンをクリックして、コントロール・パネルを非表示にするか、展開します。図31-7に、展開されたコントロール・パネルを示します。
図31-7 表示状態のコントロール・パネル
表31-1では、コントロール・パネルのコントロールでユーザーに提供される機能を説明します。階層ビューア・コンポーネントに追加データを表示するaf:showDetailItem要素を持つパネル・カードが含まれている場合、パネル・セレクタは自動的に有効になります。階層ビューア・コンポーネントで次のいずれかのレイアウトが使用されていると、レイアウト・セレクタが自動的に表示されます。
上から下の垂直方向
左から右の水平方向
ツリー
放射
円
表31-1 コントロール・パネルの要素
| コントロール | 名前 | 説明 |
|---|---|---|
 |
パン制御 |
ユーザーはビューポート内の階層ビューア・コンポーネントを再配置できます。 |
 |
ズームして合せる |
ユーザーはビューポート内にすべてのノードが表示されるように、階層ビューア・コンポーネントにズームできます。 |
 |
ズーム制御 |
ユーザーは、階層ビューア・コンポーネントにズームできます。 |
|
非表示/表示 |
コントロール・パネルを表示または非表示にします。 |
 |
パネル・セレクタ |
パネル・カードを構成した場合は、定義した |
 |
レイアウト・セレクタ |
レイアウトの選択を可能にします。ユーザーは、階層ビューア・コンポーネントのレイアウトを定義したレイアウトからコンポーネントによって提示される別のレイアウト・オプションの1つに変更できます。 |
階層ビューアでは、ノード・コンテンツでの双方向テキスト、検索パネルおよび検索結果の表示がサポートされています。双方向テキストとは、右から左(RTL)と左から右(LTR)の両方の方向性のテキストを含むテキストです。一般に、アラビア語やヘブライ語などの異なるタイプのアルファベットのテキストが含まれます。
階層ビューアでは、1つのノード・ビューから次のノード・ビューへパネル・カードをめくったり、コントロール・パネルや検索パネルの要素が定義されている場合はそれらの位置を切り替えるのにも双方向が提供されています。
階層ビューア・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったん階層ビューア・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。
階層ビューア・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、階層ビューアをリフレッシュできます。詳細は、「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーは実行時の階層ビューアの表示方法を変更できます。アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: 階層ビューア・コンポーネントをアクセス可能にできます。詳細は、「アクセス可能なADF Facesページの開発」を参照してください。
コンテンツ配信: 階層ビューアを、contentDelivery属性を使用して、データ・ソースから特定の行数を一度にフェッチするように構成できます。詳細は、「コンテンツの配信」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、階層ビューアの外観をカスタマイズできます。詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされた階層ビューアを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成」の章を参照してください。
注意:
最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「プレースホルダ・データ・コントロールを使用したページの設計」の章を参照してください。
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、イメージ形式、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、「データ視覚化コンポーネントの共通機能」を参照してください。
階層ビューア・コンポーネントには、1つ以上のディテール・コレクションと1つのマスター・ディテール・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションが必要です。階層ビューア・コンポーネントでは、ADF Faces treeコンポーネントと同じデータ・モデルが使用されます。
データ・コレクションをまずADF Faces treeコンポーネントにバインドすることによって、データ・コレクションを階層ビューア・コンポーネントにバインドできるかどうかテストできます。ADF Faces treeコンポーネントを使用してデータ・コレクションをナビゲートできれば、階層ビューア・コンポーネントにバインドすることができます。
JSFページに階層ビューア・コンポーネントを追加すると、JDeveloperによりJSFページのページ定義ファイルにツリー・バインディングが追加されます。ツリー・バインディングを使用したマスター/ディテール・データの表示の詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のツリーを使用したマスター/ディテール・オブジェクトの表示に関する項を参照してください。
ユーザーが階層ビューア・コンポーネントのルート・ノードから下方向にナビゲートできるようにするには、階層ビューア・コンポーネントでノードにバインドするデータ・コレクションに再帰的アクセッサが含まれている必要があります。階層ビューア・コンポーネントのナビゲーションの詳細は、「階層ビューアでのナビゲーションの構成」を参照してください。
JDeveloperでは、「コンポーネント」ウィンドウからJSFページにコンポーネントをドラッグ・アンド・ドロップする場合、または『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた階層ビューア、ツリーマップ、およびサブバースト・コンポーネントの作成」の章での説明のとおり、「階層ビューアの作成」ダイアログを使用して階層ビューア・コンポーネントを作成する場合、JSFページに次の要素が生成されます。
階層ビューア(hierarchyViewer): ノードおよびリンク要素をラップします。
ノード(node): ノードは階層のデータを参照する形状です(たとえば、組織の従業員またはネットワークのコンピュータ)。表示するデータを参照するnode要素の子要素を構成します。node要素は、様々なズーム・レベル(100%、75%、50%および25%)でコンテンツを表示する1つ以上のf:facet要素の使用をサポートします。f:facet要素は、ADFデータ視覚化panelCardコンポーネントに加えてaf:outputText、af:imageおよびaf:panelGroupLayoutなどの多数のADF Facesコンポーネントの使用をサポートします。
実行時に、ノードにはユーザーにノード間のナビゲートを可能にし、デフォルトで他のノードを表示または非表示にできるコントロールが含まれます。ノード・コンテンツの指定とズーム・レベルの定義の詳細は、「ノード・コンテンツの指定方法」を参照してください。
リンク(link): 1つのノードを別のノードに接続するlink要素の属性の値を設定します。リンクの外観のカスタマイズ方法およびラベルの追加方法の詳細は、「リンクおよびラベルの表示の構成方法」を参照してください。
パネル・カード(panelCard): ノード要素によって参照される複数セットのコンテンツを、たとえばコンテンツを水平にスライドしたり、ノードを反転したりするなど、アニメーションを使用して、動的に切り替える方法を提供します。
ズーム・レベルごとのf:facetタグでは、コンテンツが指定したズーム・レベルで表示されるように定義する1つ以上のaf:showDetailItem要素を含むdvt:panelCard要素をサポートします。実行時に、エンド・ユーザーはaf:showDetailItem要素が参照するコンテンツを動的に切り替えるノードのコントロールを使用します。詳細は、「パネル・カードの使用方法」を参照してください。
注意:
他の要素とは異なり、dvt:panelCard要素は、「コンポーネント」ウィンドウを使用して階層ビューアを作成するときにデフォルトのクイック・レイアウト・オプションを選択すると生成されません。
JSFページに階層ビューアを追加するには、「コンポーネント」ウィンドウを使用します。ページに階層ビューア・コンポーネントをドラッグ・アンド・ドロップすると、「階層ビューアの作成」ダイアログがコンポーネント・ギャラリに使用可能な階層ビューア・レイアウトのカテゴリを説明とともに表示し、階層ビューアの作成時に視覚的に支援します。
図31-8に、上から下の垂直方向レイアウト・タイプが選択された階層ビューアの「階層ビューアの作成」ダイアログを示します。
図31-8 「階層ビューアの作成」ダイアログ
階層ビューア・レイアウトを選択して、ページに階層ビューアが追加されると、「プロパティ」ウィンドウを使用して、データ値を指定し、階層ビューアに追加の表示属性を構成できます。または、作成中にデータのバインドを選択し、「プロパティ」ウィンドウを使用して追加の表示属性を構成できます。
「プロパティ」ウィンドウで、プロパティ・フィールドにマウス・カーソルを合わせると表示されるアイコンをクリックすることで、プロパティの説明や編集オプションを表示できます。図31-9に、階層ビューア・コンポーネントのValue属性のドロップダウン・メニューを示します。
図31-9 階層ビューアのValue属性のドロップダウン・メニュー
注意:
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して階層ビューアを作成でき、バインドが行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成に関する項を参照してください
始める前に:
階層ビューアの属性や階層の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
次のタスクを実行する必要があります。
「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
ページに階層ビューアを追加する手順:
「階層ビューアの作成」ダイアログを使用して階層ビューア・コンポーネントをJSFページに挿入すると、階層ビューアのカスタマイズをサポートする子タグのセットが自動的に挿入されます。階層ビューア・コンポーネントでは、af:panelGroupLayout、af:spacerおよびaf:separatorなどの要素を使用して、ノードでコンテンツをどのように表示するかを定義します。
次の例に、「コンポーネント」ウィンドウから挿入してコンポーネントを作成する場合に生成されるコードを示します。例では、階層ビューアの要素関連のコードが強調表示されています。
<dvt:hierarchyViewer id="hv1" layout="hier_vert_top" styleClass="AFStretchWidth"> <dvt:link linkType="orthogonalRounded" id="l1"/> <dvt:node width="233" height="330" id="n1"> <f:facet name="zoom100"> <af:panelGroupLayout layout="vertical" styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding" id="pgl1"> <af:panelGroupLayout layout="horizontal" id="pgl2"> <af:panelGroupLayout styleClass="AFHVNodeImageSize" id="pgl3"> <af:image source="#{null}" styleClass="AFHVNodeImageSize" id="i1"/> </af:panelGroupLayout> <af:spacer width="5" height="5" id="s1"/> <af:panelGroupLayout layout="vertical" id="pgl4"> <af:outputText value=" attribute value1 styleClass="AFHVNodeTitleTextStyle" id="ot1"/> <af:outputText value=" attribute value2" styleClass="AFHVNodeSubtitleTextStyle" id="ot2"/> <af:outputText value=" attribute value3" styleClass="AFHVNodeTextStyle" id="ot3"/> </af:panelGroupLayout> </af:panelGroupLayout> <af:spacer height="5" id="s2"/> <af:separator id="s3"/> <af:spacer height="5" id="s4"/> <dvt:panelCard effect="slide_horz" styleClass="AFHVNodePadding" id="pc1"> <af:showDetailItem text="first group title " id="sdi1"> <af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding" id="pfl1"> <af:panelLabelAndMessage label="attribute label4" styleClass="AFHVPanelCardLabelStyle" id="plam1"> <af:outputText value="attribute value4" styleClass="AFHVPanelCardTextStyle" id="ot4"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label5" styleClass="AFHVPanelCardLabelStyle" id="plam2"> <af:outputText value="attribute value5" styleClass="AFHVPanelCardTextStyle" id="ot5"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label6" styleClass="AFHVPanelCardLabelStyle" id="plam3"> <af:outputText value="attribute value6" styleClass="AFHVPanelCardTextStyle" id="ot6"/> </af:panelLabelAndMessage> </af:panelFormLayout> </af:showDetailItem> <af:showDetailItem text="second group title " id="sdi2"> <af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding" id="pfl2"> <af:panelLabelAndMessage label="attribute label7" styleClass="AFHVPanelCardLabelStyle" id="plam4"> <af:outputText value="attribute value7" styleClass="AFHVPanelCardTextStyle" id="ot7"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label8" styleClass="AFHVPanelCardLabelStyle" id="plam5"> <af:outputText value="attribute value8" styleClass="AFHVPanelCardTextStyle" id="ot8"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label9" styleClass="AFHVPanelCardLabelStyle" id="plam6"> <af:outputText value="attribute value9" styleClass="AFHVPanelCardTextStyle" id="ot9"/> </af:panelLabelAndMessage> </af:panelFormLayout> </af:showDetailItem> </dvt:panelCard> </af:panelGroupLayout> </f:facet> </dvt:node> </dvt:hierarchyViewer>
デフォルトでは、階層ビューア・コンポーネントのレンダリングはHTML5で行われます。ブラウザでHTML5がサポートされておらず、クライアントでFlash 10以上が使用可能な場合、階層ビューアはFlash Playerでレンダリングされます。HTML5およびFlash10以上が使用できない場合、階層ビューアはHTML4でレンダリングされます。HTMLレンダリングはHTML5およびFlashレンダリングにできるかぎり細かく従いますが、いくつかの相違があります。
通例、階層ビューアの表示および機能は、次の例外を除いてサポートされます。
分離ノードおよびリストア・ノードは使用できません。
ノードの形状は長方形に制限されます。
リンクの場合、リンクの終点コネクタはサポートされません。リンク・タイプは直交に制限され、リンク・スタイルは実線に制限されます。
コントロール・パネルの場合、パネル・カードはすべて切り替えることができません。パンはスクロール・バーに制限され、ズームおよびズーム・フィットは4つのズーム・ファセットに制限されます。
検索はサポートされません。
メール可能なページはサポートされません。
ノードの詳細を示すホバー・ウィンドウはサポートされません。
ノードは、実行時に階層ビューア・コンポーネントの個々の要素を示す形状です。階層ビューア・コンポーネントの個々の要素の例には、組織図の従業員またはネットワーク・ダイアグラムのコンピュータが含まれます。
デフォルトで、階層ビューア・コンポーネントの各ノードには、ユーザーが次のことを実行できるコントロールが含まれています。
階層ビューア・コンポーネントの他のノードへのナビゲート。
各ノードの上部には、1つのボタン(「分離」または「リストア」)が含まれています。「分離」ボタンを使用すると、選択したノードと表示されている子への階層を一時的に減らすことができます。「リストア」をクリックすると階層が元の表示に戻ります。
階層ビューア・コンポーネントで現在選択されているノードの子ノードの表示または非表示。
各ノードの下部に、表示/非表示ボタンが表示されます。これらのアイコンの1つをクリックすると、ノードに子がある場合はそれが表示または非表示になり、コンポーネントはRowDisclosureEventイベントを生成します。このイベントに対応する処理を実行するには、 af:treeコンポーネントと同じ方法でカスタムのrowDisclosureListenerメソッドを登録します。詳細は、「プログラムを使用したノードの開閉について」を参照してください。
階層ビューア・コンポーネントで参照するノードの様々な情報セットを表示するためにパネル・カードを使用する場合、ノードの下部にあるコントロールにより、ユーザーはアクティブ・ノードで情報セットを変更できます。詳細は、「パネル・カードの使用方法」を参照してください。
図31-10に、エンド・ユーザーがアンカー・ノードとしてノードを分離し、子ノードを表示し、アクティブ・ノードで様々なセットの情報を表示するためにノードを変更することができるコントロール付きのノードの例を示します。ノードのコントロールの構成方法の詳細は、「ノードのコントロールの構成方法」を参照してください。
図31-10 階層ビューア・ノードのコントロール
ノードには、ノードにナビゲートして、ノードを表示また非表示にできるコントロールがデフォルトで含まれますが、階層ビューア・コンポーネントを作成するときに、クイック・スタート・レイアウトを使用していないかぎり、デフォルトでノードにコンテンツは含まれません。実行時にノードによってレンダリングされるコンテンツを定義する必要があります。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成」の章で説明されているように、データ・バインディングと階層ビューア・コンポーネントを関連付けると、ノード・コンテンツを指定できます。マネージドBeanに格納されているコンテンツを指定することもできます。
デフォルトで、作成する階層ビューア・コンポーネントにはズーム・レベル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があります。これらのコンポーネントの使用方法の詳細は、「Webページ上のコンテンツの編成」を参照してください。
メニュー・コンポーネントには、af:menuとaf:menuItemがあります。これらのコンポーネントの詳細は、 「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。
出力コンポーネントには、af:outputFormattedとaf:outputTextがあります。これらのコンポーネントの詳細は、「出力コンポーネントの使用」を参照してください。
メッセージ・コンポーネントaf:panelLabelAndMessage。このコンポーネントの詳細は、「ヒント、メッセージおよびヘルプの表示」を参照してください。
ナビゲーション・コンポーネントaf:button、af:linkおよびaf:commandMenuItem。これらのコンポーネントの詳細は、「ナビゲーション・コンポーネントの使用」を参照してください。
イメージ・コンポーネントaf:image。af:imageコンポーネントの使用方法の詳細は、「階層ビューアにイメージを含める方法」を参照してください。
af:showPopupBehavior:。af:showPopupBehaviorコンポーネントの使用方法の詳細は、「ポップアップ・ウィンドウを起動するための階層ビューアの構成」を参照してください。
階層ビューア子コンポーネントdvt:panelCard。dvt:panelCardコンポーネントの使用方法の詳細は、「パネル・カードの使用方法」を参照してください。
注意:
サポートされていないコンポーネントには、設計時にフラグが付けられています。
デフォルトでは、階層ビューア・コンポーネントのレンダリングはHTML5で行われます。HTML5が使用できない場合、階層ビューアはFlashまたはHTML4でレンダリングされ、ノード・コンテンツとして指定する特定のプロパティがサポートされない可能性があります。詳細は、「階層ビューアのレンダリングとイメージ形式に関する必知事項」を参照してください。
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
階層ビューア・コンポーネントにノードを追加する手順:
ノード・コンポーネント(node)では、リストア、分離、表示または非表示などのコントロールを実行時に表示するかどうかを決定できる多くのプロパティが公開されます。実行時のノードのサイズと形状を決定するプロパティも公開されます。
始める前に:
階層ビューアの属性や階層の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューア・ノードがあるはずです。ない場合は、この章の指示に従って階層ビューアにノードを追加します。詳細は、「ノード・コンテンツの指定方法」を参照してください。
ノードにコントロールを構成する手順:
ホバー・ディテール・ウィンドウは、ズーム・レベルが76%未満のときにノード上をカーソルが移動すると自動的に表示され、そのノードに設定されるshape属性が反映されます。たとえば、shape属性がroundedRectのノードでは、図31-11に示したものと同じ属性のホバー・ウィンドウが表示されます。
76-100%のズーム・レベルでないノードをホバーしているとき、ディテール・ウィンドウの表示を無効化できます。詳細は、「ホバー・ディテール・ウィンドウの無効化の方法」を参照してください。
図31-11 階層ビューア・ノードでのホバー・ウィンドウ
デフォルトで、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた階層ビューアの作成」の章での説明のとおり、「階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成」ダイアログを使用して、階層ビューア・コンポーネントを作成する場合は、ノード・コンポーネントをアクセッサと関連付けます。「階層ビューアの作成」ダイアログでは、ノード・コンポーネントのtypeプロパティが特定のアクセッサに設定されます。
ノード・コンポーネントのtypeプロパティを構成して、指定された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プロパティの値は定義しません。
注意:
階層ビューアでは、renderedプロパティがtrueと評価されるノードのうち最初のものを使用します。階層ビューアのノード定義の順序は重要です。
階層ビューア・コンポーネントのアンカー・ノードは、ツリー・バインディングによって返される階層のルートです。ユースケースによって、ルート・ノードを複数にすることができます(1人以上のマネージャのいる組織図をレンダリングする階層ビューア・コンポーネントなど)。実行時に階層ビューア・コンポーネントをレンダリングすると、フォーカスのあるノードがアンカー・ノードになります。実行時に、ユーザーがsetAnchorListenerプロパティに指定された値を持つ別のノードをダブルクリックすると、そのノードがアンカー・ノードになります。
階層ビューアを構成して、アンカー・ノードの上に1つ以上のレベル(祖先レベル)を表示することができます。たとえば、ある会社の従業員を検索する場合、その従業員の上の管理職の系統を表示できます。displayLevelsAncestorプロパティを使用して、祖先レベルを指定します。
始める前に:
階層ビューアの属性や階層の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアをページに追加します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
アンカー・ノードの祖先レベル数を指定する手順:
パネル・カード・コンポーネントを階層ビューア・コンポーネントとともに使用して、階層ビューア・コンポーネントが参照するノードに異なる情報のセットを保持できます。パネル・カード・コンポーネントには、ノード要素内の領域で、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ページに挿入できます。
始める前に:
階層ビューアの属性や階層の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
パネル・カードを作成する手順:
実行時に、ノードが表示され、パネル・カード・コンポーネントが1つ表示されます。ユーザーはパネル・カードの下部にあるナビゲーション・ボタンをクリックして、パネル・カードのaf:showDetailItem子要素のいずれかによって参照されるコンテンツの次のセットにナビゲートできます。
図31-12に、2つの異なるaf:showDetailItem子要素が異なる情報のセット(ContactとAddress)を参照するパネル・カード・コンポーネントのあるノードを示します。この例のコントロールには、パネル・カードの中をスライドするための矢印と、表示するパネル・カードを直接選択するためのボタンがあります。両方のコントロール・オプションにツールチップが表示されています。
図31-12 パネル・カードを使用した実行時のノードの表示
デフォルトで、階層ビューア・コンポーネントのルート・ノードと内部ノードには下方向へのナビゲーションが構成されています。階層ビューア・コンポーネントで上方向へのナビゲーションを行い、ユーザーが同じレベルのノード間をナビゲートしたときに表示されるノードの数を決定できるように構成することができます。
ノード・タイプの詳細は、「階層ビューアでのノードの管理」を参照してください。
階層ビューア・コンポーネントの上方へのナビゲーションを構成する場合、階層ビューア・コンポーネントのnavigateUpListenerプロパティの値を構成します。
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
階層ビューア・コンポーネントの上方向へのナビゲーションを構成する手順:
階層ビューア・コンポーネントのノード間の同レベル・ナビゲーションはデフォルトで有効にされています。階層ビューア・コンポーネントを構成して、一度に表示するノードの数を決定できます。
これを行うと、ユーザーに次のナビゲートを可能にするコントロールが表示されます。
左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
階層ビューア・コンポーネントの同レベル・ナビゲーションを構成する手順:
実行時に、階層ビューア・コンポーネントのlevelFetchSizeプロパティの値として指定したノードの数が、階層ビューア・コンポーネントによってレンダリングされます。階層ビューア・コンポーネントは、ユーザーが次のことを実行できるコントロールもレンダリングします。
左または右にナビゲートして、次のノードのセットを表示
使用可能なノードのコレクションで最初または最後のノードのセットにナビゲート
図31-13に、levelFetchSize="3"の場合の実行時の例を示します。図31-13の丸で囲まれている領域に示すように、ユーザーがコントロール上にマウスを移動させると、ユーザーにノードの最後のセットへのナビゲートを可能にするコントロールが表示されます。
図31-13 同レベル・ナビゲーションを使用した階層ビューア・コンポーネント
階層ビューア・コンポーネントのサイズおよび外観(イメージの追加、コンロトール・パネルとホバー・ディテール・ウィンドウの表示の構成、リンクとラベルのカスタマイズなど)をカスタマイズできます。
階層ビューア・コンポーネントの外観は、「スタイルおよびスキンを使用した外観のカスタマイズ」での説明のとおり、スキンおよびコンポーネント・スタイル属性を変更することによって変更できます。
inlineStyle属性とstyleClass属性を使用して、階層ビューアのサイズとスタイルを構成できます。どちらの属性も、dvt:hierarchyViewerあるいはdvt:nodeコンポーネントの「プロパティ」ウィンドウの「スタイル」セクションで使用可能です。これらの属性を使用して、フォント、境界線、およびバックグラウンド要素など、スタイルに関する機能をカスタマイズできます。
styleClass属性は、一連のインライン・スタイルのグループ化に使用されるCSSスタイル・クラス・セレクタです。スタイル・クラスは実行時にスタイル・クラスに評価されるEL式を使用して定義できます。ADFパブリック・スタイル・クラスを指定することもできます。たとえば、AFHVNodeImageSizeを使用して、階層ビューア内に合うようにイメージのサイズを設定できます。
inlineStyle属性は、セミコロンで区切られたCSSスタイルのリストで、個々のスタイル属性を設定できます。たとえば、color:blue;font-style:italicを指定してaf:outputTextコンポーネントの色とフォント・スタイルを変更できます。
styleClass属性とinlineStyle属性の使用方法の詳細は、「コンポーネントのスタイル・プロパティの変更」を参照してください。
階層ビューアを含むページには、サイズあるいはスタイルを変更する機能に制約のある場合があります。ページ・レイアウトの詳細は、「Webページ上のコンテンツの編成」を参照してください。
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
階層ビューアのサイズまたはスタイルを調整する手順:
実行時に階層ビューア・コンポーネントのノードがイメージに表示されるように階層ビューア・コンポーネントを構成できます。これは、組織図に画像を表示するような場合に便利です。
ソース属性を希望するイメージのURLにバインドしたaf:imageコンポーネントを挿入します。次のサンプル・コードでイメージをレンダリングします。
<af:panelGroupLayout>
<af:image source="/person_id=#{node.PersonId}"
shortDesc="Employee Image"
styleClass=AFHVNodeImageSize"/>
</af:panelGroupLayout>
af:panelGroupLayoutコンポーネントの詳細は、「panelGroupLayoutコンポーネントの使用方法」を参照してください。
コントロール・パネルを別の位置に表示されるように構成することはできませんが、階層ビューア・コンポーネントを実行時にレンダリングする際に次の動作を行うように構成することはできます。
開いたまたは表示状態での表示
閉じたまたは非表示状態での表示
ユーザーに対して非表示
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
コントロール・パネルの表示を構成する手順:
階層ビューアでは、ノード間の関係がノードを結ぶ線によって表されます。リンクは、ラベルが含まれるように構成できます。
図31-14に、階層ビューアでのリンクとラベルを示します。
図31-14 階層ビューアのリンクとラベル
リンクとラベルの外観は、階層ビューアでdvt:link要素のプロパティを設定することでカスタマイズできます。図31-15に、linkStyle属性に設定されたdashDot値とのリンクを示します。
図31-15 破線と点線のリンク・スタイルのリンク
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
リンクおよびラベルの表示をカスタマイズする手順:
デフォルトでは、ズーム・レベルが76%未満のとき、ホバー・ウィンドウが自動的に表示されます。ユーザーの階層ビューアがポップアップを使用している場合、ホバー・ウィンドウはそのポップアップ表示と干渉する可能性があります。階層ビューアのdetailWindow属性を使用して、ホバー・ウィンドウの表示を消すことができます。
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
階層ビューアのホバー・ウィンドウを無効化するには:
階層ビューアは、コンポーネントのトップ・レベルのみでなく、ノード、ボタンおよびリンクについても、色やフォント・スタイルをカスタマイズするためのスキニングもサポートします。さらに、スキニングを使用して、ユーザーがマウスを置いた場合やナビゲーション・ボタンを押したときの階層ビューアのスタイルを定義できます。
次の例に、ユーザーがパネル・カードのナビゲーション・ボタンを選択したときに枠の色を表示するように構成された階層ビューアのスキニング・キーを示します。
af|dvt-panelCard::navigation-button:active
{
-tr-border-color:#000000;
}
階層ビューアのスキニング・キーの完全なリストについては、Oracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・データ視覚化ツール・タグ・リファレンスを参照してください。スキンを使用したアプリケーションのカスタマイズの詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
階層ビューア・コンポーネントを構成して、ポップアップ・ウィンドウを起動し、機能およびOracle Fusion Webアプリケーションの他のページからのデータが示されたメニューの表示またはドラッグ・アンド・ドロップ機能のサポートを行います。
デフォルトでは、階層ビューアのノードを実行時にクリックして、ノードを選択します。dvt:nodeコンポーネントでclickBehavior属性を設定することにより、この相互作用をカスタマイズできます。
このプロパティの有効な値は次のとおりです。
focus: ノードはフォーカスされ、クリックすると選択されます(デフォルト)。
expandCollapse: 子ノード要素は、現在の展開状態に応じて、展開または縮小されます。
isolateRestore: ノードは、現在の状態に応じて、分離またはリストアされます。
none: ノードをクリックしても何も起こりません。
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
ノード選択アクションを構成する手順:
af:showPopupBehaviorタグの値を指定し、コマンド・コンポーネント(af:buttonなど)から起動することにより、階層ビューア・ノードからポップアップ・ウィンドウを起動できます。階層ビューア・コンポーネントのノードのf:facet要素内で、ポップアップを起動するコマンド・コンポーネントをネストする必要があります。
このシナリオで使用されるaf:showPopupBehaviorタグのtriggerTypeプロパティは、次の値のみをサポートします。
action
mouseHover
たとえば、図31-16は、ノード内のHR Detailリンクから起動されたモーダル・ポップアップを示しています。次の例に、ポップアップを作成するサンプル・コードを示します。
図31-16 階層ビューア・ノードのモーダル・ポップアップ
<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>
次の例に、階層ビューア・コンポーネントからポップアップを起動するサンプル・コードを示します。簡潔にするために、<af:panelGroupLayout>、<af:spacer>および<af:separator>などの要素は、サンプル・コードには含まれていません。
<f:facet name="zoom100">
...
<dvt:panelCard effect="slideHorz"
...
<af:showDetailItem text="Contact "
...
<af:button text="Show HR Detail"
inlineStyle="font-size:14px;color:#383A47"
id = bu1>
<af:showPopupBehavior popupId="::popupDialog" triggerType="action"
align="endAfter" alignId="bu1" />
</af:button>
</showDetailItem>
</dvt:panelCard>
</f:facet>
af:showPopupBehaviorタグの使用方法の詳細は、「ポップアップの宣言的な呼出し」を参照してください。
階層ビューアは、コンポーネント間の様々なドラッグ・アンド・ドロップのシナリオをサポートします。
階層ビューアは、次のドラッグ・アンド・ドロップのシナリオをサポートします。
階層ビューア内で、1つ以上のノードをドラッグ・アンド・ドロップします
階層ビューアから1つ以上のノードを別のコンポーネントにドラッグします
別のコンポーネントから階層ビューアに1つ以上のアイテムをドラッグします
図31-17に、その中でのドラッグ・アンド・ドロップを可能とするように構成した階層ビューアを示します。この例では、ノードをクリックすると、バックグラウンドにドラッグして階層内の別のルートにしたり、別のノードにドラッグしてそのノードの子として追加したりすることができます。
図31-17 ノード・ドラッグを示す階層ビューア
図31-18に、階層ビューアのバックグラウンドへのドラッグの結果を示します。Nancy Greenとその部下は、今は階層における新しいツリーとして示されます。
図31-18 バックグラウンドへのノード・ドラッグ後の階層ビューア
ノードを別のノードにドラッグすると、ドラッグされたノードとその子は、ターゲット・ノードの子となる。図31-19に、Nina Evansのデータを含むノードへのドラッグの結果を示します。Nancy Greenとその部下は、今はNina Evansの部下として示されます。
図31-19 別のノードへのノード・ドラッグ後の階層ビューア
図31-20に、af:outputFormattedコンポーネントとの間のドラッグやドロップを可能とするように構成された、同じ階層ビューアの例を示します。この例では、ユーザーは1つ以上のノードをドロップ・テキストにドラッグでき、かつテキストは変化して、ユーザーがどのノードをドラッグし、どの操作を実行したかを示します。ユーザーがドラッグ・テキストから階層ビューア・ノードかバックグラウンドにドラッグした場合、テキストは変化して、テキストがどこでドラッグされ、どの操作が実行されたかを示します。
図31-20 別のコンポーネントへのドラッグ・アンド・ドロップを可能とするように構成した階層ビューア
図31-21に、ユーザーがNina EvansとJames Marlowのデータを含むノードをドロップ・テキストにドラッグした後の、同じ階層ビューアを示します。
図31-21 複数ノードのドラッグの後の階層ビューア
ユーザーがドラッグ・テキストから階層ビューア・ノードかバックグラウンドにドラッグした場合、テキストは変化して、テキストがどこでドラッグされ、どの操作が実行されたかを示します。図31-22に、ユーザーがテキストを階層ビューアのバックグラウンドへドラッグした後の、同じ階層ビューアを示します。
図31-22 階層ビューア・バックグラウンドへのテキスト・ドラッグ後の階層ビューア
階層ビューアにドラッグのサポートを追加するには(これによりコンポーネントや他の階層ビューアがそこからノードのドラッグが可能となりますが)、af:dragSourceタグを階層ビューアに付加し、af:dropTargetタグをドラッグを受け取るコンポーネントに追加します。ドラッグを受け取るコンポーネントはorg.apache.myfaces.trinidad.model.RowKeySetデータ・フレーバをaf:dropTargetの子として含み、かつドロップ・イベントへの応答のため、dropListenerメソッドを定義する必要があります。
階層ビューアにドロップのサポートを追加するには(これによりコンポーネントや他の階層ビューアがそこへのアイテムのドラッグが可能となりますが)、af:dropTargetタグを階層ビューアに追加し、その階層ビューアがサポートするデータ・フレーバを含めます。dropListenerメソッドを、ドロップ・イベントに応答するマネージドBeanに追加します。
次の手順は、図31-20に示すaf:outputFormattedコンポーネントの、単一のドラッグ・ソースあるいはドロップ・ターゲットとして、階層を設定する方法を示します。ADF FacesまたはADFデータ視覚化コンポーネントのドラッグ・アンド・ドロップの構成の詳細は、「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページに階層ビューアを追加します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
ドラッグ・アンド・ドロップをサポートするのに必要な追加コンポーネントを作成します。
たとえば、図31-20の中のページはaf:panelGroupLayoutコンポーネントを使用し、このコンポーネントはaf:outputFormattedとaf:panelListコンポーネントを含み、ユーザーに手順を提供します。このページはまたaf:panelSplitterコンポーネントを使用して、ドラッグ・アンド・ドロップaf:outputFormattedコンポーネント・テキストを階層ビューアから分割します。
次の例に、追加コンポーネントの、完了したページ・セクションを示します。階層ビューアの詳細は省略されています。
<af:panelStretchLayout id="psl1" topHeight="auto" endWidth="auto">
<f:facet name="top">
<af:panelGroupLayout id="pgl2" layout="horizontal">
<af:spacer width="10px" id="s8"/>
<af:panelGroupLayout id="pgl14">
<af:outputFormatted value="Hierarchy Viewer Drag and Drop Example"
id="of4" inlineStyle="font-size:small;
font-weight:bold;"/>
<af:panelList id="pl1"
inlineStyle="font-size:x-small;">
<af:outputFormatted value="Click and hold on a node for more than one-half second to initiate the drag. Use Ctrl+Click to select multiple nodes."
id="of1" inlineStyle="font-size:x-small;"/>
<af:outputFormatted value="Drag one or more nodes from the hierarchy viewer to the drop text. The text will change to show which node(s) you dragged and the operation performed."
id="of2" inlineStyle="font-size:x-small;"/>
<af:outputFormatted value="Drag the drag text to one of the hierarchy viewer nodes or background. The text will change to show where you dropped it and the operation performed."
id="of3" inlineStyle="font-size:x-small;"/>
</af:panelList>
</af:panelGroupLayout>
</af:panelGroupLayout>
</f:facet>
<f:facet name="center">
<af:panelSplitter id="ps1" orientation="horizontal" splitterPosition="125"
positionedFromEnd="false" styleClass="AFStretchWidth">
<f:facet name="first">
<af:panelSplitter id="ps2" orientation="vertical">
<f:facet name="first">
<af:panelGroupLayout id="pgl3" layout="vertical">
<af:separator id="s1"/>
<af:outputFormatted value="#{hvBean.dropText}"
clientComponent="true"
inlineStyle="font-size:small; font-weight:bold;"
id="of5">
<af:dropTarget actions="COPY MOVE LINK"
dropListener="#{hvBean.fromDropListener}">
<af:dataFlavor
flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"/>
</af:dropTarget>
</af:outputFormatted>
<af:spacer width="200" id="s11"/>
<af:separator id="s3"/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="second">
<af:panelGroupLayout id="pgl1">
<af:separator id="s12"/>
<af:outputFormatted value="#{hvBean.dragText}"
clientComponent="true"
inlineStyle="font-size:small; font-weight:bold;" id="of6">
<af:componentDragSource/>
</af:outputFormatted>
<af:separator id="s10"/>
</af:panelGroupLayout>
</f:facet>
</af:panelSplitter>
</f:facet>
<f:facet name="second">
<dvt:hierarchyViewer id="shv" styleClass="AFStretchWidth"
controlPanelBehavior="initExpanded"
var="node" detailWindow="none"
value="#{XMLParser.employees}"
contentDelivery="immediate"
summary="HV Drag and Drop Sample"
navigateUpListener="#{XMLParser.doNavigateUp}">
<af:dragSource actions="COPY MOVE LINK" defaultAction="MOVE"/>
<af:dropTarget actions="COPY MOVE LINK"
dropListener="#{hvBean.toDropListener}">
<af:dataFlavor flavorClass="java.lang.Object"/>
</af:dropTarget>
<dvt:link linkType="orthogonalRounded" id="l1"/>
<dvt:node width="233" height="330"
setAnchorListener="#{XMLParser.doSetAnchor}" id="n1"
showNavigateUp="#{node.topNode == false}"
showExpandChildren="#{node.hasChildren}">
<f:facet name="zoom100">
< remaining hierarchy viewer contents omitted >
</dvt:hierarchyViewer>
</f:facet>
</af:panelSplitter>
</f:facet>
</af:panelStretchLayout>
af:outputFormattedコンポーネントの詳細は、「出力コンポーネントの使用」を参照してください。af:panelGroupLayoutコンポーネントまたはその他のページ・レイアウト・コンポーネントのヘルプを参照するには、「Webページ上のコンテンツの編成」を参照してください。
階層ビューアのドラッグ・アンド・ドロップを構成するには:
階層ビューアをドロップ・ターゲットとして構成するには、「コンポーネント」ウィンドウで、「操作」パネルから、「ドロップ・ターゲット」タグをドラッグし、階層ビューアの子としてドロップします。
「ドロップ・ターゲットを挿入」ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して「編集」を選び、ドロップ・リスナー・メソッドを階層ビューアのマネージドBeanに追加してください。または、ドロップダウン・メニューを使用して「式ビルダー」を選び、ドロップ・リスナーのEL式を入力してください。
たとえば、toDropListener()という名前のメソッドをhvBeanという名前のマネージドBeanに追加するには、編集を選び、ドロップダウン・メニューからhvBeanを選択し、新規を「メソッド」フィールドの右でクリックして、toDropListener()メソッドを作成します。
次の例に、サンプルのドロップ・リスナーと図31-20で示される階層ビューアのサポート・メソッドを示します。
// imports needed by methods
import java.util.Map;
import oracle.adf.view.rich.dnd.DnDAction;
import oracle.adf.view.rich.event.DropEvent;
import oracle.adf.view.rich.datatransfer.DataFlavor;
import oracle.adf.view.rich.datatransfer.Transferable;
import org.apache.myfaces.trinidad.context.RequestContext;
import org.apache.myfaces.trinidad.render.ClientRowKeyManager;
import javax.faces.context.FacesContext;
import oracle.adf.view.faces.bi.component.hierarchyViewer.UIHierarchyViewer;
import javax.faces.component.UIComponent;
// variables need by methods
private String dragText = "Drag this text onto a node or the hierarchy viewer background";
// drop listener
public DnDAction toDropListener(DropEvent event) {
Transferable transferable = event.getTransferable();
DataFlavor<Object> dataFlavor = DataFlavor.getDataFlavor(Object.class);
Object transferableObj = transferable.getData(dataFlavor);
if(transferableObj == null)
return DnDAction.NONE;
// Build up the string that reports the drop information
StringBuilder sb = new StringBuilder();
// Start with the proposed action
sb.append("Drag Operation: ");
DnDAction proposedAction = event.getProposedAction();
if(proposedAction == DnDAction.COPY) {
sb.append("Copy<br>");
}
else if(proposedAction == DnDAction.LINK) {
sb.append("Link<br>");
}
else if(proposedAction == DnDAction.MOVE) {
sb.append("Move<br>");
}
// Then add the rowKeys of the nodes that were dragged
UIComponent dropComponent = event.getDropComponent();
Object dropSite = event.getDropSite();
if(dropSite instanceof Map) {
String clientRowKey = (String) ((Map) dropSite).get("clientRowKey");
Object rowKey = getRowKey(dropComponent, clientRowKey);
sb.append("Drop Site: ");
if(rowKey != null) {
sb.append("Node: ");
sb.append(getLabel(dropComponent, rowKey));
}
else {
sb.append("Background");
}
}
// Update the output text
this._dragText = sb.toString();
RequestContext.getCurrentInstance().addPartialTarget(event.getDragComponent());
return event.getProposedAction();
}
private String getLabel(UIComponent component, Object rowKey) {
if(component instanceof UIHierarchyViewer) {
UIHierarchyViewer hv = (UIHierarchyViewer) component;
Employee rowData = (Employee) hv.getRowData(rowKey);
return rowData.getFirstName() + " " + rowData.getLastName();
}
return null;
}
private Object getRowKey(UIComponent component, String clientRowKey) {
if(component instanceof UIHierarchyViewer) {
UIHierarchyViewer hv = (UIHierarchyViewer) component;
ClientRowKeyManager crkm = hv.getClientRowKeyManager();
return crkm.getRowKey(FacesContext.getCurrentInstance(), component, clientRowKey);
}
return null;
}
public String getDragText() {
return _dragText;
}
注意:
このメソッドは、階層ビューアの属性を定義するEmployeeクラスを参照しています。ユーザーの階層ビューアが異なるクラスを使用している場合、かわりにそのクラスの名前を置き換えてください。
この例で使用されているEmployeeクラスのソース・コードを見る場合、そのソース・コードやADF Facesコンポーネント・デモ・アプリケーションのソース・コードを見つけることができます。デモ・アプリケーションの詳細は、「ADF Facesコンポーネント・デモ・アプリケーション」を参照してください。
「OK」をクリックして、「データ・フレーバの挿入」ダイアログに入ります。
「データ・フレーバの挿入」ダイアログで、ドロップ・ターゲットが受け入れるオブジェクトを入れます。または、ドロップダウン・メニューを使用してオブジェクトの階層をナビゲートし、希望するオブジェクトを選択します。
たとえば、af:outputFormattedコンポーネントがテキストを階層ビューアにドラッグできるようにするには、java.lang.Objectを「データ・フレーバの挿入」ダイアログに入力します。
構造ウィンドウでaf:dropTargetノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。許容値は、COPY、MOVEまたはLINKです。値を指定しない場合、ドロップ・ターゲットはCOPYを使用します。
たとえば、「アクション」フィールドに次を入力し、すべての操作を可能にします。
COPY MOVE LINK
階層ビューアをドロップ・ターゲットとして使用するには、次を実行します。
「コンポーネント」ウィンドウで、「操作」パネルから、「ドラッグ元」タグをドラッグのソースとなるコンポーネントの子としてドラッグ・アンド・ドロップします。
たとえば、「ドラッグ元」をaf:outputFormattedコンポーネントの子としてドラッグ・アンド・ドロップします。
構造ウィンドウでaf:dragSourceノードを右クリックし、「プロパティに移動」を選択します。
コンポーネントの「値」フィールドでは、手順2でドロップ・リスナーで階層ビューアに作成したパブリック変数を参照します。
たとえば、toDropListener()という名前のドロップ・リスナーとdropTextという名前の変数には、コンポーネントの「値」フィールドに、次を入力します。
#{hvBean.dropText}
階層ビューアをドラッグ・ソースとして構成するには、「コンポーネント」ウィンドウで、「操作」パネルから、「ドラッグ元」タグを、階層ビューアの子としてドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。許容値は、COPY、MOVEまたはLINKです。
たとえば、「アクション」フィールドに次を入力し、すべての操作を可能にします。
COPY MOVE LINK
ドラッグ・ソースがサポートするデフォルトのアクションを指定するには、DefaultAction属性のドロップダウン・メニューを使用して、「コピー」,、「移動」または「リンク」を選択します。
図31-20におけるドラッグ・アンド・ドロップの例での階層ビューアは、移動をデフォルトのアクションとして使用しています。
他のコンポーネントを階層ビューアからのドラッグのドロップ・ターゲットとするには、以下を実行します。
「コンポーネント」ウィンドウで、「Operations」パネルから、「ドロップ・ターゲット」を、ドロップを受け取るコンポーネント上にドラッグ・アンド・ドロップします。
たとえば、図31-20におけるドラッグ・アンド・ドロップの例のページは、ドロップの結果を表示するaf:outputFormattedコンポーネントを含んでいます。
「ドロップ・ターゲットの挿入」ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して「編集」を選び、ドロップ・リスナー・メソッドを適切なマネージドBeanに追加してください。または、ドロップダウン・メニューを使用して「式ビルダー」を選び、ドロップ・リスナーのEL式を入力してください。
たとえば、fromDropListener()という名前のメソッドをhvBeanという名前のマネージドBeanに追加するには、編集を選び、ドロップダウン・メニューからhvBeanを選択し、新規を「メソッド」フィールドの右でクリックして、fromDropListener()メソッドを作成します。
次の例に、図31-20に表示される階層ビューアのサンプル・ドロップ・リスナーを示します。この例は同じインポートとヘルパー・メソッドを使用しており、それらはここには含まれていません。
// Additional import needed for listener
import org.apache.myfaces.trinidad.model.RowKeySet;
// Variables needed by method
private String dropText = "Drop a node here";
// Drop listener
public DnDAction fromDropListener(DropEvent event) {
Transferable transferable = event.getTransferable();
DataFlavor<RowKeySet> dataFlavor = DataFlavor.getDataFlavor(RowKeySet.class);
RowKeySet rowKeySet = transferable.getData(dataFlavor);
if(rowKeySet == null || rowKeySet.getSize() <= 0)
return DnDAction.NONE;
// Build up the string that reports the drop information
StringBuilder sb = new StringBuilder();
// Start with the proposed action
sb.append("Drag Operation: ");
DnDAction proposedAction = event.getProposedAction();
if(proposedAction == DnDAction.COPY) {
sb.append("Copy<br>");
}
else if(proposedAction == DnDAction.LINK) {
sb.append("Link<br>");
}
else if(proposedAction == DnDAction.MOVE) {
sb.append("Move<br>");
}
// Then add the rowKeys of the nodes that were dragged
sb.append("Nodes: ");
UIComponent dragComponent = event.getDragComponent();
for(Object rowKey : rowKeySet) {
sb.append(getLabel(dragComponent, rowKey));
sb.append(", ");
}
// Remove the trailing ,
sb.setLength(sb.length()-2);
// Update the output text
this.dropText = sb.toString();
RequestContext.getCurrentInstance().addPartialTarget(event.getDropComponent());
return event.getProposedAction();
}
「OK」をクリックして、「データ・フレーバの挿入」ダイアログに入ります。
「データ・フレーバの挿入」ダイアログで、org.apache.myfaces.trinidad.model.RowKeySetを入力します。
たとえば、af:outputFormattedコンポーネントがテキストを階層ビューアにドラッグできるようにするには、org.apache.myfaces.trinidad.model.RowKeySetを「データ・フレーバの挿入」ダイアログに入力します。
構造ウィンドウでaf:dropTargetノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。許容値は、COPY、MOVEまたはLINKです。値を指定しない場合、ドロップ・ターゲットはCOPYを使用します。
たとえば、「アクション」フィールドに次を入力し、すべての操作を可能にします。
COPY MOVE LINK
コンポーネントの値のフィールドでは、ステップ2でドロップ・リスナーでツリーマップあるいはサンバーストに作成したパブリック変数を参照します。
たとえば、fromDropListener()という名前のドロップ・リスナーとdragTextという名前の変数には、コンポーネントの値フィールドに、次を入力します。
#{hvBean.dragText}
階層ビューアの検索機能では、階層ビューアのデータ構造を調べ、スクロール可能なリストに一致を提示します。ユーザーは、検索結果をダブルクリックすると、一致するノードを階層ビューアのアンカー・ノードとして表示できます。有効な場合、階層ビューアの右上隅に検索パネルが表示され、結果は検索パネルの下に表示されます。
図31-23に、検索パネルのサンプルを示します。
図31-23 階層ビューアの検索パネル
図31-24に、検索結果のサンプルを示します。
図31-24 階層ビューアの検索結果のサンプル
検索を有効にするには、dvt:searchタグをdvt:hierarchyViewerタグの子として追加し、結果の処理方法を指定するには、dvt:searchResultsをdvt:searchの子として追加します。
階層ビューアでの検索は、検索可能な属性、または階層ビューア・データ・モデルの基礎であるデータ・コレクションの列に基づいています。Oracle ADFのデータ・コントロールで定義された問合せ結果コレクションを使用すると、JDeveloperでは宣言的なタスクとなります。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の階層ビューアでのデータ・バインドされた検索の構成方法に関する項を参照してください。
始める前に:
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「階層ビューア・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「階層ビューア・コンポーネントの追加機能」を参照してください。
ページ上にすでに階層ビューアがあるはずです。ない場合は、この章の指示に従って階層ビューアを作成します。詳細は、「ページへの階層ビューアの追加方法」を参照してください。
階層ビューアでの検索を構成する手段:
構造ウィンドウで、dvt:hierarchyViewerコンポーネントを右クリックし、「階層ビューアの中に挿入」→「検索」を選択します。
「プロパティ」ウィンドウで、次の属性を設定して検索機能を構成します。
Value: 検索テキストを保持する変数を指定します。
ActionListener: 検索を実行するためにコールされるリスナーを入力します。
InitialBehavior: 検索パネルの初期表示を指定します。有効な値は、最初縮小された状態のinitCollapsed、最初開かれた状態のinitExpanded、またはビューから完全に隠すhiddenです。
オプションで、af:queryコンポーネントを使用して階層ビューア・コンポーネントの外で拡張検索を開始するコンポーネントを構成するには:
構造ウィンドウで、「dvt:search」ノードを展開します。
「af:link」ノードを右クリックして、 「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「af:link」ノードに対して目的のプロパティを構成します。
たとえば、拡張検索に対して「Advanced」を表示するテキストを変更するには、Text属性の値を入力します。
拡張検索オプションをユーザーに表示するポップアップを追加するには、「構造」ウィンドウで、「af:link」ノードをクリックして、「リンクの中に挿入」→「ADF Faces」→「ポップアップ表示動作」を選択します。
ポップアップの構成を終了するには、af:popupコンポーネントをページに追加してaf:queryコンポーネントが検索を実行するように構成します。
ポップアップの構成のヘルプを参照するには、「ポップアップの宣言的な呼出し」を参照してください。queryコンポーネントの詳細は、「queryコンポーネントの使用方法」を参照してください。
構造ウィンドウで「dvt:search」ノードを右クリックし、「検索の中に挿入」→「検索結果」を選択します。
「プロパティ」ウィンドウで、次の属性を設定して検索結果の表示を構成します。
Value: 検索結果のデータ・モデルを指定します。これは、oracle.adf.view.faces.bi.model.DataModelのインスタンスである必要があります。
Var: 階層ビューア・コレクションの各要素の参照に使用されるEL変数の名前を入力します。このコンポーネントのレンダリングが完了すると、この変数は削除されるか、その前の値に戻ります。
VarStatus: varStatus情報の参照に使用されるEL変数の名前を入力します。このコンポーネントのレンダリングが完了すると、この変数は削除されるか、その前の値に戻ります。
ResultListener: 検索結果の1行が選択された後コールされるアクション・リスナーに対する参照を指定します。
EmptyText: 結果が返されなかった場合に表示されるテキストを指定します。
FetchSize: 一度にフェッチされる結果の行数を指定します。
構造ウィンドウでdvt:searchResultsノードを右クリックし、「検索結果の中」を選択します。
「プロパティ」ウィンドウで次の属性を設定し、検索結果ノードを結果モデルから対応する階層ビューア・モデルにマップします。
From: 値のソース(定数またはEL式)を指定します。
To: 値のターゲットを指定します。
Type: actionを値として選択します。
構造ウィンドウで、検索結果にスタンプを設定するコンポーネントを次のように指定します。
検索結果を折り返すには、「f:facet-content」ノードを右クリックして、「ファセットの中に挿入」→「ADF Faces」→「パネル・グループ・レイアウト」を選択します。
検索結果を表示するには、ADF Faces出力コンポーネントをaf:panelGroupLayoutノードの中に挿入して検索結果を表示します。
たとえば、出力テキストを表示するには、「af:panelGroupLayout」を右クリックして「パネル・グループ・レイアウトの中に挿入」→「出力テキスト 」を選択します。
2つのaf:outputText要素を挿入して構成すると次の出力が表示されます。
<af:outputText value="#{resultRow.Lastname} " id="ot1"
inlineStyle="color:blue;"/>
<af:outputText value="#{resultRow.Firstname}" id="ot2"/>
スタンプされた各行では、dvt:searchResultsタグのvar属性を使用して、現在の行を参照します。
次の例に、階層ビューアでの検索を構成するためのサンプル・コードを示します。
<dvt:hierarchyViewer>
... hierarchy viewer details omitted
<dvt:search id="searchId" value="#{bindings.lastNameParam.inputValue}"
actionListener="#{bindings.ExecuteWithParams1.execute}">
<f:facet name="end">
<af:link text="Advanced" styleClass="AFHVAdvancedSearchLinkStyle" id="l2">
<af:showPopupBehavior popupId="::mypop" triggerType="action"/>
</af:link>
</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 layout="horizontal">
<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>
検索結果スタンプにより、最も外側のコンテナに指定されたサイズで、af:panelGroupLayoutが表示されます。デフォルトでは、このサイズは100×30ピクセルです。検索結果表示でサイズを調整する必要がある場合は、af:panelGroupLayoutのInlineStyle属性を構成します。
詳細は、「panelGroupLayoutコンポーネントの使用方法」を参照してください。
