| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.1.2) E48099-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.1.2) E48099-02 |
|
前 |
次 |
この章では、ADFビジネス・コンポーネントでモデル化されたデータから、階層ビューア、ツリーマップまたはサンバーストを作成する方法について説明します。これらの作成には、Fusion WebアプリケーションのADFデータ・コントロールとADF Facesコンポーネントを使用します。具体的には、ADFデータ視覚化コンポーネントのhierarchyViewer、treemapおよびsunburstを使用して、ビジネス・データを視覚的に表現する階層ビューア、ツリーマップおよびサンバーストを作成する方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。
簡単なUI優先開発を使用してページを設計する場合は、階層ビューア、ツリーマップまたはサンバーストをページに追加してから、データ・バインディングを構成してください。階層ビューア、ツリーマップおよびサンバースト・コンポーネントのデータ要件、タグ構造および外観と動作のカスタマイズ・オプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「階層ビューア・コンポーネントの使用方法」の章と「ツリーマップおよびサンバースト・コンポーネントの使用方法」の章を参照してください。
この章には次の項が含まれます:
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
ADF階層ビューア・コンポーネントは、リンクされた形状のセットとして階層データを表示した対話型グラフィックを生成します。形状とリンクはデータの要素と関係に対応します。たとえば、階層ビューア・コンポーネントを、従業員データに基づく組織図の生成に使用することができます。実行時、エンド・ユーザーはグラフィックをパンおよびズームし、このグラフィックが表示している管理階層を展開、選択、およびナビゲートすることができます。
ツリーマップとサンバーストを使用して、定量的な階層データをサイズと色で視覚的に表現し、2つの次元にまたがり表示します。ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。たとえば、ツリーマップまたはサンバーストを使用して地域の四半期ごとの売上げを表示し、売上げ傾向を特定する場合は、ノードのサイズで各地域の売上げ高を示し、ノードの色でその地域の売上げが四半期で増えたか減ったかを示すことができます。ノードの外観とコンテンツは、階層の各レベルで構成可能です。
接頭辞dvt:は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。エンド・ユーザーの詳細な説明と各コンポーネントのプレゼンテーション機能の詳細は、次を参照してください。
階層ビューア・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能とプレゼンテーション機能に関する項。
ツリーマップおよびサンバースト・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のツリーマップおよびサンバーストのエンド・ユーザー機能とプレゼンテーション機能に関する項。
データ視覚化コンポーネントのユースケースと例の詳細は、次を参照してください。
階層ビューア・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の階層ビューアのユースケースと例に関する項。
ツリーマップおよびサンバースト・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のツリーマップおよびサンバーストのユースケースと例に関する項。
データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「JSFページでのユーザー・カスタマイズの許可」の章を参照してください。
アクセシビリティ: データ視覚化コンポーネントをアクセス可能にできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセス可能なADF Facesページの開発」の章を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、第19章「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
階層ビューアは、データ内に親子関係の存在するデータを視覚的に表現するADFデータ視覚化コンポーネントです。組織図、ネットワーク・ダイアグラム、ソーシャル・ネットワークや類似の視覚的表現を表示する場合には、このコンポーネントが有益です。
階層ビューアでは、ノードと呼ばれる形状を使用して、階層内のデータを参照します。ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ノードは、1つのパネル・カード内に複数のビューを表示できます。
図39-1に、組織図をレンダリングする階層ビューア・コンポーネントの実行時ビューを示します。
作成する階層ビューア・コンポーネント(dvt:hierarchyViewer)はそれぞれ次の要素を持つことができます。
1つ以上のノード要素(dvt:node)
1つ以上のリンク要素(dvt:link)
階層ビューア・コンポーネントとともに、必要に応じて、カード要素(dvt:panelCard)を使用することもできます。パネル・カードは、アニメーションを使用して、ノード要素で参照される複数のコンテンツ・セットを動的に切り替える方法を提供します。たとえば、コンテンツを水平方向にスライドさせたり、ノードをめくったりできます。
階層ビューアのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、階層ビューアへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「階層ビューア・コンポーネントの使用方法」の章を参照してください。
階層ビューアは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のルート・ノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。
始める前に:
データバインドされた階層ビューアについて理解しておいてください。詳細は、39.2項「データバインドされた階層ビューアの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、39.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
階層ビューアのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、13.2項「アプリケーション・モジュールの作成と変更」を参照してください。
たとえば、図39-1に示す階層ビューアのデータ・ソースは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーションで従業員を表す1つの表から取得しています。Summit ADF DVTサンプルアプリケーションで、SEmp表を使用して管理者と従業員との間の階層関係を設定し、最上位レベルの従業員を階層のルートとして設定するには、次の手順を実行します。
SEmp表に基づくエンティティ・オブジェクトを作成します。
図39-2は、SEmp表に基づいたSEmpエンティティ・オブジェクトです。この表内の各行には、従業員のIDと従業員の管理者IDの両方が含まれています。エンティティ・オブジェクトの作成についての説明が必要な場合は、4.2項「エンティティ・オブジェクトおよびアソシエーションの作成」を参照してください。
SEmp.IdとSEmp.ManagerIDのアソシエーションを作成し、従業員と管理者との間の関係を確立します。
図39-3に、Summit ADF DVTサンプル・アプリケーションのSEmpManagerIdFkAssocアソシエーションを示します。この例では、SEmpエンティティ・オブジェクトの作成時に、アソシエーションが自動的に作成されます。アソシエーションに関する詳細は、4.2項「エンティティ・オブジェクトおよびアソシエーションの作成」を参照してください。
管理者と従業員との間の階層を確立するには、SEmpManagerIdFkAssocアソシエーションに基づいて、管理者と従業員との間にビュー・リンクを作成します。
図39-4に、Summit ADF DVTサンプル・アプリケーションのSEmpManagerIDFKLinkビュー・リンクを示します。ビュー・リンクを使用して、マスター/ディテール関係を確立する方法の詳細は、6.2.1項「エンティティ・アソシエーションに基づくマスター/ディテール階層の作成方法」を参照してください。
SEmpManagerIDFKLinkを使用するには、管理者を従業員に結び付ける新しいビュー・オブジェクトを作成します(図39-5を参照)。
データ・コレクションからルート値を取得するビュー・オブジェクトを作成します。
たとえば、Summit ADF DVTサンプル・アプリケーションでは、Carmen Velasquezは、従業員IDが1の最上位レベルの管理者です。Summit ADF DVTサンプル・アプリケーションに基づいたビュー・オブジェクトを作成する場合は、IDが1の従業員を取得するビュー・オブジェクトを作成します。
図39-6に、Summit ADF DVTサンプル・アプリケーションのRootEmployeeViewObjectを示します。問合せで、IDが1の従業員を取得して、その従業員をrootEmpnoバインド変数に格納します。ビュー・オブジェクトおよびバインド変数の使用の詳細は、5.10項「バインド変数の使用」を参照してください。
ルートの従業員と下位レベルの管理者および従業員との間の階層を確立するには、RootEmployeeViewObjと、手順4で作成した管理者/従業員ビュー・オブジェクトとの間にビュー・リンクを追加します。
「データ・コントロール」パネルで「リフレッシュ」アイコンをクリックして、データ・コントロールを更新します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
「データ・コントロール」パネルを使用して階層ビューアを作成する手順は次のとおりです。
「データ・コントロール」パネルから、コレクションを選択します。
図39-8に、「データ・コントロール」パネルでRootEmployeeViewObj2コレクションを選択して、従業員データを組織図で表す階層ビューアを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「階層ビューア」を選択します。
「コンポーネント・ギャラリ」で、作成する階層ビューアのレイアウトを選択します。図39-9に、上から下の垂直方向レイアウトが選択されたコンポーネント・ギャラリを示します。
「階層ビューアの作成」ダイアログで、次のように入力します。
「階層」: 実行時のダイアグラムにノードとして含めるコレクションを選択します。デフォルトでは、ルート・コレクションが選択されます。階層内の上位オブジェクトまたは下位オブジェクトを構成することもできます。
「ノード」: 「階層」リストで選択したコレクションごとに、利用可能なズーム・レベルを1つ以上使用して、タイトル・エリアで属性を、各パネル・カードでタイトルと属性を構成します。デフォルトでは、ズーム・レベルが100%のノードは次のアルゴリズムに準拠します。
データ・コレクションの最初の3つの属性をタイトル・エリアに割り当てます。
次の2つの属性を最初のパネル・カードに割り当てます。
その次の2つの属性を2番目のパネル・カードに割り当て、さらに同様にしてすべての属性をパネル・カードに割り当てます。
パネル・カードのタイトルまたはノードの属性を選択して、次に示す1つ以上の要素を構成します。
テキスト: パネル・カードのタイトルに使用できます。タイトル・エリア要素には使用できません。階層のパネル・カード・タイトルにテキストを入力するか、ドロップダウン・リストから「テキスト・リソースの選択」を選択して、該当のタイトルに使用するテキスト・リソースを選択または追加します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
パネル・カード・データ・ソース: パネル・カードに使用できます。データ・ソースは、パネル・カードの属性に使用されるデータ・コレクションを意味します。デフォルトでは、現在の階層レベルに関連付けられたコレクションが、属性の選択に使用されます。
図39-10は、Summit ADFスキーマに基づいたデータ・コレクションを使用した階層ビューアの「階層ビューアの作成」ダイアログを示しています。この例では、「パネル・カード・データ・ソース」は、デフォルトのSEmpViewコレクションです。
パネル・カード属性に対する代替の子アクセッサを使用するには、ドロップダウン・リストから代替の子アクセッサを選択します(図39-11を参照)。詳細は、39.2.3項「データバインドされたパネル・カード用に代替ビュー・オブジェクトを構成する方法」を参照してください。
「属性」: 属性要素とイメージ要素に使用可能です。ドロップダウン・リストから、階層ビューアのノードに表示する値を表すデータ・コレクションの属性を選択します。
「ラベル」: 属性に使用可能です。ドロップダウン・リストから、階層ビューアのノードで該当の要素に表示するラベルを表すデータ・コレクションの属性を選択します。デフォルトの「属性名の使用」を選択し、基礎となるViewObjectに属する該当の属性のUIヒントから取得したラベルを使用して文字列として値をレンダリングできますし、「ラベルなし」を選択し属性のラベルをレンダリングしなかったり、「テキスト・リソースの選択」を選択し、「テキスト・リソースの選択」ダイアログを開いてラベルに使用するテキスト・リソースを選択または追加できます。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。
「コンポーネント」: 属性に使用可能です。ノードにデータを表示するために使用するコンポーネントのタイプを選択します。有効な値は、「ラベル付ADF出力テキスト」、「ADF出力テキスト」、「ラベル付ADF出力フォーマット済」およびADF出力フォーマット済テキストです。これらのコンポーネントの使用方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「出力コンポーネントの使用方法」の章を参照してください。
「新規」アイコンをクリックし、ノードの選択に応じて、新しいパネル・カード、属性またはイメージをノードに追加します。既存の要素を選択したら、矢印アイコン(上へ、下へ、一番上、一番下)を使用して要素を並べ替えるか、「削除」アイコンを使用して選択した要素を削除します。
ズーム・レベルが75%、50%および25%のページを使用して、各ページ・レベルでの階層の展開表示を指定します。「ズーム・レベルの追加」を選択して、ページ・レベルのズーム・レベルを有効にします。デフォルトでは、ノード属性とパネル・カードをノードに割り当てるアルゴリズムは、100%のズーム・レベルの場合と同様です。
|
注意: 階層ビューア・コンポーネントは4種類のズーム・レベルを定義します。これらのズーム・レベルを変更したり、新しいズーム・レベルを作成したりすることはできません。デフォルトのズーム・レベルは100%です。 |
「サンプル」: 階層ビューア・ノードのサンプル・アウトラインの構成不能な表示です。タイトル・エリアなどのエリアや属性は、ノード・エリアで選択されている場合にはサンプルで強調表示されます。
「OK」をクリックします。
図39-12は、RootEmployeeViewObj2という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューアの作成」ダイアログです。
「階層ビューアの作成」ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用して階層ビューア属性の設定を指定できます。また、階層ビューア・タグに関連付けられた子タグを使用して、さらに階層ビューアをカスタマイズすることもできます。階層ビューアのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、階層ビューアへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「階層ビューア・コンポーネントの使用方法」の章を参照してください。
階層ビューアをビジュアル・エディタで編集する場合は、その表示は実行時の表示と機能とほぼ同じになります。パネル・カード間を移動し、パネル・カードやタイトル・エリア内でスタンプされた要素を使用することにより、属性を並べ替えたり、「データ・コントロール」パネルからインポートされた新たな属性をバインドできます。
階層ビューアを「データ・コントロール」パネルから作成すると、次の処理が行われます。
JSFページのページ定義ファイルで階層ビューアのバインディングを作成
階層ビューア・コンポーネントのJSFページに必要なタグを追加
例39-1は、階層ビューア・コンポーネントについてJDeveloperにより生成されたバインディングを表示します。マスター/ディテール・ツリーのノードにデータを移入するためのルールは、ノード定義として定義されます。次の例では、2つのノード定義が生成されます。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。また、このコード例はアクセッサ(SEmpView)も参照しています。
例39-1 階層ビューアのバインディング
<parameters/>
<executables>
<variableIterator id="variables"/>
<iterator Binds="RootEmployeeViewObj2" RangeSize="25"
DataControl="AppModuleDataControl"
id="RootEmployeeViewObj2Iterator"/>
</executables>
<bindings>
<tree IterBinding="RootEmployeeViewObj2Iterator" id="RootEmployeeViewObj2">
<nodeDefinition DefName="model.RootEmployeeViewObj"
Name="RootEmployeeViewObj20">
<AttrNames>
<Item Value="ManagerId"/>
<Item Value="TitleId"/>
<Item Value="Userid"/>
<Item Value="Comments"/>
<Item Value="DeptId"/>
<Item Value="StartDate"/>
<Item Value="Email"/>
<Item Value="Salary"/>
<Item Value="FirstName"/>
<Item Value="Id"/>
<Item Value="CommissionPct"/>
<Item Value="LastName"/>
</AttrNames>
<Accessors>
<Item Value="SEmpView">
<Properties>
<CustomProperties>
<Property Name="hierarchyType" Value="children"/>
</CustomProperties>
</Properties>
</Item>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SEmpView" Name="RootEmployeeViewObj21">
<AttrNames>
<Item Value="ManagerId"/>
<Item Value="TitleId"/>
<Item Value="Userid"/>
<Item Value="Comments"/>
<Item Value="DeptId"/>
<Item Value="StartDate"/>
<Item Value="Email"/>
<Item Value="Salary"/>
<Item Value="FirstName"/>
<Item Value="Id"/>
<Item Value="CommissionPct"/>
<Item Value="LastName"/>
</AttrNames>
<Accessors>
<Item Value="SEmpView">
<Properties>
<CustomProperties>
<Property Name="hierarchyType" Value="children"/>
</CustomProperties>
</Properties>
</Item>
</Accessors>
</nodeDefinition>
</tree>
</bindings>
例39-2は、例39-1のページ定義ファイルに関連付けられているJSFページに生成されるコードを示しています。簡潔にするために、zoom75、zoom50およびzoom25という名前のファセット要素の詳細と、パネル・カードのshowDetailItemコンポーネントの詳細は省略しています。また、階層ビューアの2番目のノードに関する詳細も省略しています。
この例は、RootEmployeeViewObj2ツリー・バインディングを参照する階層ビューア・コンポーネントを示しています。これには、ノード(dvt:node)コンポーネントが含まれ、このコンポーネントにはパネル・カード・コンポーネント(dvt:panelCard)が含まれます。このパネル・カード・コンポーネントは、ノードにより参照されたコンテンツの表示を変更するときに使用されるエフェクトとして、slide_horzを定義しています。
階層ビューアを作成すると、図39-12に示す「階層の作成」ダイアログを使用して、コンポーネントのレイアウトを変更したり、パネル・カードなどのコンポーネントをさらに追加できます。このダイアログを開くには、hierarchyViewerコンポーネントの「プロパティ」ウィンドウで、「編集」アイコンをクリックします。また、ビジュアル・エディタで階層ビューア・コンポーネントのコードを直接編集するか、「プロパティ」ウィンドウで値を設定して、レイアウトをカスタマイズすることもできます。「コンポーネント」ウィンドウを使用すると、パネル・カードなどの別のコンポーネントを追加できます。
例39-2 階層ビューアのJSFページのコード
<dvt:hierarchyViewer id="hv1" var="node"
value="#{bindings.RootEmployeeViewObj2.treeModel}"
selectionListener="#{bindings.RootEmployeeViewObj2.treeModel.makeCurrent}"
detailWindow="none" layout="hier_vert_top"
levelFetchSize="#{bindings.RootEmployeeViewObj2.rangeSize}"
styleClass="AFStretchWidth" summary="Hierarchy Viewer Demo">
<dvt:link linkType="orthogonalRounded" id="l1"/>
<dvt:node type="model.RootEmployeeViewObj" width="233" height="233" id="n1">
<f:facet name="zoom100">
<af:panelGroupLayout styleClass="AFStretchWidth AFHVNodeStretchHeight
AFHVNodePadding"
layout="vertical" id="pgl1">
<af:panelGroupLayout layout="horizontal" id="pgl2">
<af:panelGroupLayout id="pgl7">
<af:image source="/images/#{node.Id}.png" shortDesc="Employee Image"
id="i1" styleClass="AFHVNodeImageSize"/>
</af:panelGroupLayout>
<af:panelGroupLayout layout="vertical" id="pgl3">
<af:outputText value="#{node.LastName}"
shortDesc="#{bindings.RootEmployeeViewObj2.hints.LastName.tooltip}"
styleClass="AFHVNodeTitleTextStyle" id="ot1"/>
<af:outputText value="#{node.FirstName}"
shortDesc="#{bindings.RootEmployeeViewObj2.hints.FirstName.tooltip}"
styleClass="AFHVNodeSubtitleTextStyle" id="ot2"/>
<af:panelLabelAndMessage
label="#{bindings.RootEmployeeViewObj2.hints.Id.label}"
styleClass="AFHVNodeLabelStyle" id="plam1">
<af:outputText value="#{node.Id}"
shortDesc="#{bindings.RootEmployeeViewObj2.hints.Id.tooltip}"
styleClass="AFHVNodeTextStyle" id="ot3">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.RootEmployeeViewObj2.hints.Id.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelGroupLayout>
</af:panelGroupLayout>
<af:spacer height="5" id="s1"/>
<dvt:panelCard effect="slide_horz" styleClass="AFHVNodePadding" id="pc1">
<af:showDetailItem text="Contact Details" id="sdi1">
<af:spacer height="2" id="s2"/>
<af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight
AFHVNodePadding"
id="pfl1">
<af:panelLabelAndMessage
label="#{bindings.RootEmployeeViewObj2.hints.Email.label}"
styleClass="AFHVPanelCardLabelStyle" id="plam2">
<af:outputText value="#{node.Email}"
shortDesc="#{bindings.RootEmployeeViewObj2.hints.Email.tooltip}"
styleClass="AFHVPanelCardTextStyle" id="ot4"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage
label="#{bindings.RootEmployeeViewObj2.hints.Userid.label}"
styleClass="AFHVPanelCardLabelStyle" id="plam3">
<af:outputText value="#{node.Userid}"
shortDesc="#{bindings.RootEmployeeViewObj2.hints.Userid.tooltip}"
styleClass="AFHVPanelCardTextStyle" id="ot5"/>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:showDetailItem>
... remaining showDetailItem panel card details omitted
</dvt:panelCard>
</af:panelGroupLayout>
</f:facet>
... remaining zoom levels omitted
</dvt:node>
<dvt:node type="model.SEmpView" width="233" height="233" id="n2">
... second node details are similar to first node and are omitted
</dvt:node>
</dvt:hierarchyViewer>
データバインドされた階層ビューアを作成または編集するときには、パネル・カードのデータ・ソースとして、代替ビュー・オブジェクトを指定できます。たとえば、販売責任者と注文との間のマスター/ディテール関係を含むデータ・コレクションがあるときに、注文を発注した顧客の詳細を表示するパネル・カードが必要になることがあります。
図39-13に、階層ビューアの実行時ビューの一部を示します。この階層ビューアは、Summit ADFスキーマを使用して、販売責任者に対する注文と注文の詳細を表示するように構成されています。この例では、Customer Detailsパネル・カードに対して代替ビュー・オブジェクトを使用するように、階層ビューアを構成しています。
代替ビュー・オブジェクトは、親コレクションの子にする必要があります。この親子関係を確立するには、親コレクションと子コレクションとの間にビュー・リンクを作成します。
始める前に:
データバインドされた階層ビューアについて理解しておいてください。詳細は、39.2項「データバインドされた階層ビューアの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、39.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
アプリケーションに必要なエンティティとビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、13.2項「アプリケーション・モジュールの作成と変更」を参照してください。
階層ビューア用のデータ・モデルを作成します。たとえば、図39-13の階層ビューアでは、Summit ADF DVTサンプル・アプリケーションのSEmpエンティティに基づく、最上位レベルのビュー・オブジェクトを使用しています。この例では、Summit ADF従業員データベースに含まれるすべての販売責任者をビュー・オブジェクトで取得するために、TITLE_IDが2である従業員レコードをすべて取得しています。図39-14に、SalesRepViewObjビュー・オブジェクトを示します。
ビュー・オブジェクトの作成の詳細は、5.2.1項「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。
Summitの販売責任者と注文との間のマスター/ディテール関係は、SalesRepViewObjとOrdersViewObjとの間のビュー・リンクで確立されます。図39-15は、ビュー・オブジェクト間の関係を示しています。
ビュー・リンクを使用して、マスター/ディテール関係を確立する方法の詳細は、6.2.1項「エンティティ・アソシエーションに基づくマスター/ディテール階層の作成方法」を参照してください。
データバインドされたパネル・カード用に代替ビュー・オブジェクトを構成するには:
パネル・カードの代替データ・ソースにするビュー・オブジェクトを作成します(まだ作成していない場合)。
たとえば、図39-13の階層ビューアでは、Summit ADF DVTサンプル・アプリケーションのSCustomerエンティティ・オブジェクトに基づいたビュー・オブジェクトを使用しています。
親コレクションと代替ビュー・オブジェクトとの間にビュー・リンクを作成します。
図39-16に、Summit ADF DVTサンプル・アプリケーションでの販売責任者と顧客との間のビュー・リンクを示します。ビュー・リンクの作成についての説明が必要な場合は、6.2.1項「エンティティ・アソシエーションに基づくマスター/ディテール階層の作成方法」を参照してください。
必要に応じて、親コレクションと代替の子コレクションとの間の階層を確立するためのビュー・リンクを作成します。
たとえば、Summit ADF DVTサンプル・アプリケーションで、注文と顧客との階層を確立するには、SOrdViewコレクションとSCustomerViewコレクションとの間にビュー・リンクを作成します。図39-17に、サンプルのビュー・リンクを示します。
パネル・カード・データ・ソースに代替ビュー・オブジェクトを使用するように階層ビューアを構成すると、JDeveloperにより、階層ビューアと代替ソースのバインディングがJSFページのページ定義ファイルに追加されます。
例39-3は、図39-13に表示される階層ビューアのサンプル・バインディングを示します。代替ソースのエントリは強調表示されています。代替データ・ソースは、階層ビューアのノード定義の1つとして定義されている点に注目してください。
例39-3 代替のパネル・カード・データ・ソースを使用する階層ビューアのバインディング
<bindings>
<tree IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1">
<nodeDefinition DefName="model.SalesRepViewObj" Name="SalesRepViewObj10">
<AttrNames>
<Item Value="ManagerId"/>
<Item Value="TitleId"/>
<Item Value="Userid"/>
<Item Value="Comments"/>
<Item Value="DeptId"/>
<Item Value="StartDate"/>
<Item Value="Email"/>
<Item Value="Salary"/>
<Item Value="FirstName"/>
<Item Value="Id"/>
<Item Value="CommissionPct"/>
<Item Value="LastName"/>
</AttrNames>
<Accessors>
<Item Value="SOrdView">
<Properties>
<CustomProperties>
<Property Name="hierarchyType" Value="children"/>
</CustomProperties>
</Properties>
</Item>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SOrdView" Name="SalesRepViewObj11">
<AttrNames>
<Item Value="DateShipped"/>
<Item Value="CustomerId"/>
<Item Value="PaymentTypeId"/>
<Item Value="DateOrdered"/>
<Item Value="Id"/>
<Item Value="Total"/>
</AttrNames>
<Accessors>
<Item Value="SItemView">
<Properties>
<CustomProperties>
<Property Name="hierarchyType" Value="children"/>
</CustomProperties>
</Properties>
</Item>
<Item Value="SCustomerView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SCustomerView" Name="SalesRepViewObj12">
<AttrNames>
<Item Value="Name"/>
<Item Value="Phone"/>
<Item Value="City"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition DefName="model.SItemView" Name="SalesRepViewObj13">
<AttrNames>
<Item Value="QuantityShipped"/>
<Item Value="ItemId"/>
<Item Value="Quantity"/>
<Item Value="Price"/>
<Item Value="OrdId"/>
<Item Value="ProductId"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
階層ビューアの検索機能は、階層ビューア・データ・モデルの基本であるデータ・コレクションの検索可能属性または列に基づいています。Oracle ADFのデータ・コントロールで定義される問合せ結果コレクションを使用すると、JDeveloperでは宣言的なタスクとなります。ExecuteWithParams操作をドラッグして、このページの既存の階層ビューア・コンポーネントにドロップします。
図39-18に、従業員を姓で検索するように構成された、Summit ADFの従業員階層ビューアを示します。この例では、「検索」パネルに従業員の姓を入力することも、%または_を使用してパターン一致を指定することもできます。
始める前に:
データバインドされた階層ビューアについて理解しておいてください。詳細は、39.2項「データバインドされた階層ビューアの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、39.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされた階層ビューア・コンポーネントを作成します。作成手順は、39.2.1項「ADFデータ・コントロールを使用して階層ビューアを作成する方法」を参照してください。
階層ビューアのルート・ノードを取得する問合せを検証します。
たとえば、図39-6では、Id列でルート・ノードを取得して、ルート・ノードをrootEmpnoバインド変数に格納しています。
検索を実行するビュー・オブジェクトを作成します。
たとえば、図39-19はEmployeesSearchResultsビュー・オブジェクトを示しています。このオブジェクトは、任意の値と一致させるためのデフォルト値の%と、パターン一致を有効にする比較値のlikeを使用して、データ・コレクションのLastName列に基づいた検索を実行します。
ビュー・オブジェクトの作成の詳細は、5.2.1項「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。
階層ビューアでデータバインドされた検索を作成するには:
「データ・コントロール」パネルから、問合せ結果に対応するコレクションを選択し、「操作」ノードを展開してExecuteWithParams操作を表示します。
図39-20では、Summit ADF DVTサンプル・アプリケーションのEmployeeSearchResults1操作ノードが開かれています。
ExecuteWithParams操作をドラッグして、ビジュアル・エディタの階層ビューア、または「構造」ウィンドウのコンポーネント上にドロップします。
「階層ビューア検索の作成」ダイアログで、「追加」アイコンを使用して「検索結果」パネルに表示する結果リストを指定し、それぞれの結果に対して次の指定を行います。
ラベルの表示: 階層内のノードのヘッダー値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: 階層ビューアのツリーにあるノードに使用するデータ・コレクション内の列を選択します。
使用するコンポーネント: ノードに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。
既存のフィールドの選択後、矢印アイコン(Up、Down、Top、Bottom)を使用して、結果を並べ替えるか、または「削除」アイコンを使用して、結果を削除します。
「操作」ドロップダウン・リストで、検索結果が選択されたときに使用する階層ルート・データ・コレクションを選択します。有効な値は、次のとおりです。
removeRowWithKey: 入力フィールドによって指定された値から変換されたStringとして行キーを使用し、バインドされたデータ・コレクションのデータ・オブジェクトを削除します。
setCurrentRowWithKey: 入力フィールドで指定された値から変換したStringとして行キーを設定します。行キーは、バインドされたデータ・コレクション内のデータ・オブジェクトの現状設定に使用されます。
setCurrentRowWithKeyValue: キーの値を使用して、イテレータの現在のオブジェクトを設定します。
ExecuteWithParams: パラメータとして渡される名前付きバインド変数に値を設定します。
「パラメータ・マッピング」表で、「結果属性」列のドロップダウン・リストを使用して、「階層パラメータ」列に表示されるパラメータにマップする結果コレクション属性を選択します。
図39-21は、EmployeesSearchResults1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューア検索の作成」ダイアログです。
例39-4は、「OK」をクリックすることで、階層ビューア・コンポーネントの子としてdvt:searchが追加された後のJSFページのコードを示しています。
例39-4 階層ビューアのdvt:searchサンプル・コード
<dvt:search value="#{bindings.searchName.inputValue}"
actionListener="#{bindings.ExecuteWithParams.execute}" id="s19">
<f:facet name="end">
<af:commandLink text="Advanced" id="cl1"/>
</f:facet>
<dvt:searchResults id="sr1"
value="#{bindings.EmployeeSearchResults.collectionModel}"
emptyText="#{bindings.EmployeeSearchResults.viewable ?
'No data to display.' : 'Access Denied.'}"
fetchSize="#{bindings.EmployeeSearchResults.rangeSize}"
resultListener="#{bindings.ExecuteWithParams1.execute}"
var="resultRow">
<af:setPropertyListener type="action" from="#{resultRow.Id}"
to="#{bindings.rootEmpno.inputValue}"/>
<f:facet name="content">
<af:panelGroupLayout layout="horizontal" id="pgl27">
<af:panelLabelAndMessage
label="#{bindings.ExecuteWithParams.hints.LastName.label}"
id="plam29">
<af:outputText value="#{resultRow.LastName}"
shortDesc="#{bindings.ExecuteWithParams.hints.LastName.tooltip}"
id="ot45"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage
label="#{bindings.ExecuteWithParams.hints.FirstName.label}"
id="plam30">
<af:outputText value="#{resultRow.FirstName}"
shortDesc="#{bindings.ExecuteWithParams.hints.FirstName.tooltip}"
id="ot46">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.ExecuteWithParams.hints.FirstName.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelGroupLayout>
</f:facet>
</dvt:searchResults>
</dvt:search>
実行時に、検索結果は、1つの表にLastNameとFirstNameで表示されます。図39-22は、ユーザーがC%と入力して、姓がCで始まるすべての従業員を検索した場合の検索結果パネルを示しています。
ユーザーは、検索結果のいずれかを選択して、その結果に関連する階層ビューアのノードと子ノード(存在する場合)を表示できます。図39-23は、ユーザーが検索結果のリストからCatchpoleを選択した場合に示される階層ビューアのノードです。
ツリーマップおよびサンバーストは、サイズと色で視覚的に表された、2つの次元にまたがる定量的階層データを表示するADFデータ視覚化コンポーネントです。たとえば、ツリーマップまたはサンバーストを使用して地域の四半期ごとの売上げを表示し、売上げ傾向を特定する場合は、ノードのサイズで各地域の売上げ高を示し、ノードの色でその地域の売上げが四半期で増えたか減ったかを示すことができます。
ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。ツリーマップはノードをネストした矩形のセットとして表示します。ツリーのブランチごとに1つの矩形が割り当てられ、そこにサブブランチを表すより小さな矩形が並べられます。
図39-24に、各倉庫での製品在庫を表示するSummit ADF DVTサンプル・アプリケーションのツリーマップを示します。この例では、ノードのサイズが各製品の在庫量を表し、ノードの色が在庫ステータスを表しています。
サンバーストは、ノードを矩形レイアウトではなく、放射状に表示し、階層のトップを中心に、深いレベルになると中心から離れて表示します。図39-25に、同じインベントリ・データをサンバーストで示します。
ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。階層ビューアのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、階層ビューアへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「階層ビューア・コンポーネントの使用方法」の章を参照してください。
ツリーマップおよびサンバーストは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。ツリーマップおよびサンバーストでは、JDeveloperで次の属性も設定されている必要があります。
value:ノードのサイズ
fillColor:ノードの色
label:ノードのテキスト識別子
valueおよびlabel属性の値は、ツリーマップあるいはサンバーストのデータ・モデルに保存する必要があり、UI-first開発を使用の場合は、クラスまたはマネージドBeanに保存する必要があります。fillColorの値はデータ・モデル、クラスおよびマネージドBeanで指定できます。また「プロパティ」ウィンドウで宣言的に指定することもできます。
ツリーマップあるいはサンバーストの構成を正常に行うには、データが次のルールに従うことを確認してください。
各子ノードは、親ノードを1つのみ持つことができます。
レベルをスキップすることはできません。
Oracle ADFのデータ・コントロールを使用すると、JDeveloperではツリーマップとサンバーストの作成は宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。
始める前に:
データバインドされたツリーマップとサンバーストについて理解しておいてください。詳細は、39.3項「データバインドされたツリーマップおよびサンバーストの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、39.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
マスター/ディテール関係の操作の詳細は、第31章「マスター/ディテール・データの表示」を参照してください。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
「データ・コントロール」パネルを使用してツリーマップまたはサンバーストを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
図39-26に、図39-24のツリーマップおよび図39-25のサンバーストに対するデータ・コレクションを示します。
Summit ADF DVTサンプルの場合、アプリケーションは、SCountriesView2コレクションとSWarehouseView2コレクションの間のビュー・リンクを使用して、SRegionView1とSWarehouseView2のデータ・コレクションとの間の階層を確立します。図39-27に、ビュー・リンクの例を示します。
表39-1は、ツリーマップまたはサンバーストの作成に使用するデータ・コレクションと、サイズ値、ラベル値および色の値を示しています。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ツリーマップ」または「サンバースト」を選択します。
ツリーマップの作成またはサンバーストの作成ダイアログの「階層」セクションで、実行時のツリーマップまたはサンバーストにノードとして含めるコレクションを選択します。デフォルトでは、ルート・コレクションが選択されます。
「階層」リストで選択するコレクションごとに、次に対する値を入力します。
値: ドロップダウン・リストから、サンバーストのサイズ値を表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。「式ビルダー」ダイアログに関するヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
たとえば、図39-26のデータ・コレクションを使用してツリーマップまたはサンバーストを作成するには、最初のノードに対するサイズ値を表すように、SRegionView1の値として「CountryCount」を選択します。
ラベル: ドロップダウン・リストから、サンバースト・ノードのラベルとして表示するラベルを表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
たとえば、SRegionView1ノード・ラベルに対して「Name」を選択します。
オプションで、ビュー・エリア・セクションで「新規」をクリックして、ノードに対する属性グループを構成します。ノードの表示を色またはパターンに基づいて変えるには、属性グループを使用します。ツリーマップまたはサンバーストの作成後にノードのfillColorまたはfillPatternプロパティを使用して、ノードの塗りつぶしの色またはパターンを指定することもできます。
色を変えるように属性グループを構成したり、ノードに対してfillColor属性を指定したりしない場合は、ノードは黒で表示されます。デフォルトでは、ノードはパターンなしで表示されます。
ツリーマップとサンバーストの例では、階層のレベルごとに属性グループを構成しています。
属性グループを構成するには、次の値を入力します。
値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
ツリーマップとサンバーストの例で使用されている色は、階層のレベルごとの数のメトリックに基づきます。たとえば、SRegionView1コレクションの「値でグループ化」としてCountryCountを選択すると、「リージョン」ノードに表示される色数は、特定のリージョン内の国の数に応じて変化します。
エリア: ドロップダウン・リストから、属性グループを色で区別する場合は「色」を、属性グループをパターンで区別する場合は「パターン」を選択します。属性グループを色とパターンの両方で区別するには、「複数の属性の選択」を選択し、「色」と「パターン」の両方を選択します。「OK」をクリックします。
ツリーマップとサンバーストの例では、階層のレベルごとに色を使用しています。
凡例ラベル: ドロップダウン・リストから、ツリーマップの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
ツリーマップとサンバーストのインベントリの例では、この値は空のままになっています。
図39-28は、Summit ADF DVTサンプル・アプリケーションの最初のノード用に必要事項を入力したツリーマップの作成ダイアログです。「サンバーストの作成」ダイアログに対する入力も同じようになります。
オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。例外ルールは、ノードのグループ化値が特定の条件を満たす場合に色またはパターンを指定するときに使用します。
一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。
グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を、ノードをパターンで区別する場合は「パターン」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
図39-29に、階層の一番下のレベルに対する一致ルールを使用するデータ・コレクションの「ツリーマップの作成」ダイアログを示します。「サンバーストの作成」ダイアログに対する入力も同じようになります。
この例では、ツリーマップ・ノードは、インベントリ・レベルが許容可能であれば緑(RGB 16進#008000)で表示され、インベントリ・レベルが製品の再発注レベル以下であれば赤(RGB 16進#ff0000)で表示されます。属性グループの「ラベル」フィールドには、凡例表示に対する詳細が含まれます。この場合、フィールドには項目の在庫数に基づいて凡例ラベルを決定する式(#{(row.AmountInStock gt row.ReorderPoint) ? 'Stock Level OK' : 'Reorder Time'})が含まれます。
図39-30は、実行時のツリーマップを示します。
例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。
条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。
Summit ADF DVTサンプル・アプリケーションでは、最下位レベルの階層に対して3つの例外ルールが定義されています。製品のインベントリ・レベルが再発注レベルを明らかに上回っている場合は、図39-24のツリーマップ・ノードと図39-25のサンバースト・ノードは緑で表示されます。ツリーマップとサンバースト・ノードは、インベントリ・レベルが再発注点に近い場合は黄色で、インベントリ・レベルが再発注点に達したか非常に近い場合は赤で表示されます。
図39-31に、最下位レベルの階層に対する例外ルールを使用する、Summit ADF DVTサンプル・データ・コレクションのサンバーストの作成ダイアログを示します。「ツリーマップの作成」ダイアログに対する入力も同じようになります。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を選択します。ノードをパターンで区別する場合は「パターン」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。
「OK」をクリックします。
ツリーマップまたはサンバーストを「データ・コントロール」パネルから作成すると、次の処理が行われます。
サンバーストまたはツリーマップに対するバインディングがJSFページのページ定義ファイルに作成されます。
treemapまたはsunburstコンポーネントに必要なタグがJSFページに追加されます。
例39-5に、図39-26のデータ・コレクションを使用してtreemapまたはsunburstコンポーネントに対してJDeveloperが生成したバインディングを示します。どちらのコンポーネントも同じデータ・モデルを使用するため、ページ定義ファイル内のバインディングは同じになります。
例39-5 ツリーマップまたはサンバーストに対するサンプル・バインディング
<executables>
<variableIterator id="variables"/>
<iterator Binds="SRegionView1" RangeSize="-1" DataControl="AppModuleDataControl"
id="SRegionView1Iterator"/>
</executables>
<bindings>
<tree IterBinding="SRegionView1Iterator" id="SRegionView1">
<nodeDefinition DefName="model.SRegionView" Name="SRegionView10">
<AttrNames>
<Item Value="Id"/>
<Item Value="Name"/>
<Item Value="CountryCount"/>
</AttrNames>
<Accessors>
<Item Value="SCountriesView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SCountriesView" Name="SRegionView11">
<AttrNames>
<Item Value="Id"/>
<Item Value="Country"/>
<Item Value="RegionId"/>
Item Value="WarehouseCount"/>
</AttrNames>
<Accessors>
<Item Value="SWarehouseView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SWarehouseView" Name="SRegionView12">
<AttrNames>
<Item Value="Id"/>
<Item Value="Address"/>
<Item Value="City"/>
<Item Value="State"/>
<Item Value="CountryId"/>
<Item Value="ZipCode"/>
<Item Value="Phone"/>
<Item Value="ManagerId"/>
<Item Value="ProductCount"/>
</AttrNames>
<Accessors>
<Item Value="ProductInventoryView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.ProductInventoryView" Name="SRegionView13">
<AttrNames>
<Item Value="ProductId"/>
<Item Value="WarehouseId"/>
<Item Value="AmountInStock"/>
<Item Value="ReorderPoint"/>
<Item Value="MaxInStock"/>
<Item Value="OutOfStockExplanation"/>
<Item Value="RestockDate"/>
<Item Value="Id"/>
<Item Value="Name"/>
<Item Value="ShortDesc"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
ツリーマップまたはサンバーストのノードにデータを移入するためのルールは、ノード定義で定義されています。この例は、階層の各レベルに対して1つずつ、合計で4つのノード定義が生成されたことを示しています。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。階層の次のレベルが存在する場合は、各ノード定義では次のレベルに対するアクセッサも参照しています。
ツリーマップまたはサンバーストの作成後は、「ツリーマップの作成」ダイアログまたは「サンバーストの作成」ダイアログを使用して、各ノードの値、ラベルおよび属性グループを変更できます。このダイアログを開くには、treemapまたはsunburstコンポーネントに対する「プロパティ」ウィンドウの「編集」アイコンを使用します。また、値はコードで直接カスタマイズすることも、「プロパティ」ウィンドウで値を設定してカスタマイズすることもできます。
デフォルトでは、サンバーストまたはツリーマップでは階層の最初の2つのレベルのみが表示され、サンバーストまたはツリーマップでlegendSource属性を構成するまでは凡例は表示されません。図39-32に、図39-26のデータ・コレクションを使用してサンバーストを作成した場合に実行時に表示されるサンバーストを示します。
ツリーマップの作成ダイアログまたはサンバーストの作成ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用して、ツリーマップまたはサンバーストのレベル表示と、legendSource属性を構成できます。その他のツリーマップまたはサンバースト属性に対する設定を指定し、サンバーストおよびツリーマップ・タグに関連付けられた子タグを使用してさらにサンバーストおよびツリーマップをカスタマイズすることもできます。
例39-6に、JSFページのコードを示します。これは、図39-24のツリーマップ用のコードです。この例では、データバインドされたツリーマップは、階層内のすべてのレベル、凡例、およびユーザーがノード上にマウスを移動した場合にはツールチップを表示するように構成されています。
例39-6 ツリーマップに対するJSFページのサンプル・コード
<dvt:treemap id="t1" value="#{bindings.SRegionView1.treeModel}"
var="row" displayLevelsChildren="3"
legendSource="ag1" summary="Sample Treemap">
<af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
<f:facet name="SRegionView11">
<dvt:treemapNode value="#{row.WarehouseCount}" label="#{row.Country}"
id="tn1">
<dvt:attributeGroups id="ag2" value="#{row.WarehouseCount}" type="color"/>
</dvt:treemapNode>
</f:facet>
<f:facet name="SRegionView10">
<dvt:treemapNode value="#{row.CountryCount}" label="#{row.Name}" id="tn2">
<dvt:attributeGroups id="ag3" value="#{row.CountryCount}" type="color"/>
</dvt:treemapNode>
</f:facet>
<f:facet name="SRegionView13">
<dvt:treemapNode value="#{row.AmountInStock}" label="#{row.Name}" id="tn3"
shortDesc="Amount in Stock:
#{row.AmountInStock}<br/>Reorder Point:
#{row.ReorderPoint}">
<dvt:attributeGroups value="#{row.AmountInStock}" type="color" id="ag1">
<dvt:attributeExceptionRule id="aer1"
condition="#{(row.AmountInStock -
row.ReorderPoint) gt 50}"
label="Stock OK">
<f:attribute name="color" value="#008800"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer2"
condition="#{((row.AmountInStock - row.ReorderPoint) le 50) and
((row.AmountInStock - row.ReorderPoint) gt 25)}"
label="Stock Level Getting Low">
<f:attribute name="color" value="#FFFF33"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer3"
condition="#{(row.AmountInStock - row.ReorderPoint) le 25}"
label="Reorder Time">
<f:attribute name="color" value="#880000"/>
</dvt:attributeExceptionRule>
</dvt:attributeGroups>
</dvt:treemapNode>
</f:facet>
<f:facet name="SRegionView12">
<dvt:treemapNode value="#{row.ProductCount}" label="#{row.City}" id="tn4">
<dvt:attributeGroups id="ag4" value="#{row.ProductCount}" type="color"/>
</dvt:treemapNode>
</f:facet>
</af:switcher>
</dvt:treemap>
例39-7に、JSFページのコードを示します。これは、図39-25のサンバースト用のコードです。この例では、データバインドされたサンバーストは、階層内のすべてのレベル、凡例およびツールチップ(ユーザーがノード上にマウス・ポインタを移動した場合)を表示するように構成されています。この例のサンバースト・コードと前の例のツリーマップ・コードの例の類似点に注目してください。
例39-7 サンバーストに対するJSFページのサンプル・コード
<dvt:sunburst id="t1" value="#{bindings.SRegionView1.treeModel}" var="row"
displayLevelsChildren="3"
summary="Sample Sunburst" legendSource="ag3">
<af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
<f:facet name="SRegionView10">
<dvt:sunburstNode value="#{row.CountryCount}" label="#{row.Name}" id="sn1" >
<dvt:attributeGroups value="#{row.CountryCount}" type="color"
label="Country Count" id="ag1"/>
</dvt:sunburstNode>
</f:facet>
<f:facet name="SRegionView11">
<dvt:sunburstNode value="#{row.WarehouseCount}" label="#{row.Country}"
id="sn4">
<dvt:attributeGroups value="#{row.WarehouseCount}" type="color" id="ag4"/>
</dvt:sunburstNode>
</f:facet>
<f:facet name="SRegionView12">
<dvt:sunburstNode value="#{row.ProductCount}" label="#{row.City}" id="sn3">
<dvt:attributeGroups value="#{row.ProductCount}" type="color" id="ag2"/>
</dvt:sunburstNode>
</f:facet>
<f:facet name="SRegionView13">
<dvt:sunburstNode value="#{row.AmountInStock}" label="#{row.Name}" id="sn2"
shortDesc="Amount in Stock:
#{row.AmountInStock}<br/>Reorder Point:
#{row.ReorderPoint}">
<dvt:attributeGroups value="#{row.AmountInStock}" type="color"
label="Amount in Stock" id="ag3">
<dvt:attributeExceptionRule id="aer1"
condition="#{(row.AmountInStock - row.ReorderPoint) gt 50}"
label="Stock Level OK">
<f:attribute name="color" value="#008800"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer2"
condition="#{((row.AmountInStock - row.ReorderPoint) le 50)
and ((row.AmountInStock - row.ReorderPoint) gt 25)}"
label="Stock Getting Low">
<f:attribute name="color" value="#FFFF33"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer3"
condition="#{(row.AmountInStock - row.ReorderPoint) le 25}"
label="Reorder Time">
<f:attribute name="color" value="#880000"/>
</dvt:attributeExceptionRule>
</dvt:attributeGroups>
</dvt:sunburstNode>
</f:facet>
</af:switcher>
</dvt:sunburst>
サンバーストまたはツリーマップのレベル表示、legendSource属性、ツールチップ、追加の属性または子タグの構成に関する詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のツリーマップおよびサンバースト・コンポーネントの使用に関する項を参照してください。
