| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1.2.0) E82918-03 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1.2.0) E82918-03 |
|
|
前 |
次 |
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データ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
階層ビューアは、データ内に親子関係の存在するデータを視覚的に表現するADFデータ視覚化コンポーネントです。組織図、ネットワーク・ダイアグラム、ソーシャル・ネットワークや類似の視覚的表現を表示する場合には、このコンポーネントが有益です。
階層ビューアでは、ノードと呼ばれる形状を使用して、階層内のデータを参照します。ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ノードは、1つのパネル・カード内に複数のビューを表示できます。
図43-1に、組織図をレンダリングする階層ビューア・コンポーネントの実行時ビューを示します。
図43-1 組織図をレンダリングする階層ビューア・コンポーネント
作成する階層ビューア・コンポーネント(dvt:hierarchyViewer)はそれぞれ次の要素を持つことができます。
1つ以上のノード要素(dvt:node)
1つ以上のリンク要素(dvt:link)
階層ビューア・コンポーネントとともに、必要に応じて、カード要素(dvt:panelCard)を使用することもできます。パネル・カードは、アニメーションを使用して、ノード要素で参照される複数のコンテンツ・セットを動的に切り替える方法を提供します。たとえば、コンテンツを水平方向にスライドさせたり、ノードをめくったりできます。
階層ビューアのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、階層ビューアへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「階層ビューア・コンポーネントの使用方法」を参照してください。
階層ビューアは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、JDeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のルート・ノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。
始める前に:
データバインドされた階層ビューアについて理解しておいてください。詳細は、「データバインドされた階層ビューアの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従い、階層ビューアのデータ・モデルで必要になる、ビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。
たとえば、図43-1に示す階層ビューアのデータソースは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーションで従業員を表す1つの表から取得しています。Summit ADF DVTサンプルアプリケーションで、SEmp表を使用して管理者と従業員との間の階層関係を設定し、最上位レベルの従業員を階層のルートとして設定するには、次の手順を実行します。
SEmp表に基づくエンティティ・オブジェクトを作成します。
図43-2は、SEmp表に基づいたSEmpエンティティ・オブジェクトです。この表内の各行には、従業員のIDと従業員の管理者IDの両方が含まれています。エンティティ・オブジェクトの作成についての説明が必要な場合は、「エンティティ・オブジェクトおよびアソシエーションの作成」を参照してください。
図43-2 Summit ADF DVTサンプル・アプリケーションのSEmpエンティティ・オブジェクト
SEmp.IdとSEmp.ManagerIDのアソシエーションを作成し、従業員と管理者との間の関係を確立します。
図43-3に、Summit ADF DVTサンプル・アプリケーションのSEmpManagerIdFkAssocアソシエーションを示します。この例では、SEmpエンティティ・オブジェクトの作成時に、アソシエーションが自動的に作成されます。アソシエーションの詳細は、「エンティティ・オブジェクトおよびアソシエーションの作成」を参照してください。
図43-3 Summit ADF DVTサンプル・アプリケーションでの管理者と従業員との間のアソシエーション
管理者と従業員との間の階層を確立するには、SEmpManagerIdFkAssocアソシエーションに基づいて、管理者と従業員との間にビュー・リンクを作成します。
図43-4に、Summit ADF DVTサンプル・アプリケーションのSEmpManagerIDFKLinkビュー・リンクを示します。ビュー・リンクを使用して、マスター/ディテール関係を確立する方法の詳細は、「エンティティ・アソシエーションに基づくマスター/ディテール階層の作成方法」を参照してください。
図43-4 Summit ADF DVTサンプル・アプリケーションでの管理者と従業員との間のビュー・リンク
SEmpManagerIDFKLinkを使用するには、管理者を従業員に結び付ける新しいビュー・オブジェクトを作成します(図43-5を参照)。
図43-5 Summit ADF DVTサンプル・アプリケーションの管理者/従業員ビュー・オブジェクト
データ・コレクションからルート値を取得するビュー・オブジェクトを作成します。
たとえば、Summit ADF DVTサンプル・アプリケーションでは、Carmen Velasquezは、従業員IDが1の最上位レベルの管理者です。Summit ADF DVTサンプル・アプリケーションに基づいたビュー・オブジェクトを作成する場合は、IDが1の従業員を取得するビュー・オブジェクトを作成します。
図43-6に、Summit ADF DVTサンプル・アプリケーションのRootEmployeeViewObjectを示します。問合せで、IDが1の従業員を取得して、その従業員をrootEmpnoバインド変数に格納します。ビュー・オブジェクトおよびバインド変数の使用の詳細は、「バインド変数の使用」を参照してください。
図43-6 階層ビューアのRootEmployeeViewObjectサンプル
ルートの従業員と下位レベルの管理者および従業員との間の階層を確立するには、RootEmployeeViewObjと、手順4で作成した管理者/従業員ビュー・オブジェクトとの間にビュー・リンクを追加します。
図43-7 Summit ADF DVTサンプル・アプリケーションのRootEmployeesViewLink
「データ・コントロール」パネルで「リフレッシュ」アイコンをクリックして、データ・コントロールを更新します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
「データ・コントロール」パネルを使用して階層ビューアを作成する手順は次のとおりです。
「データ・コントロール」パネルから、コレクションを選択します。
図43-8に、「データ・コントロール」パネルでRootEmployeeViewObj2コレクションを選択して、従業員データを組織図で表す階層ビューアを作成する例を示します。
図43-8 組織図の従業員のデータ・コレクション
コレクションをJSFページにドラッグし、ポップアップ・メニューから「階層ビューア」を選択します。
「コンポーネント・ギャラリ」で、作成する階層ビューアのレイアウトを選択します。図43-9に、上から下の垂直方向レイアウトが選択されたコンポーネント・ギャラリを示します。
図43-9 階層ビューアのコンポーネント・ギャラリ
「階層ビューアの作成」ダイアログで、次のように入力します。
「階層」: 実行時のダイアグラムにノードとして含めるコレクションを選択します。デフォルトでは、ルート・コレクションが選択されます。階層内の上位オブジェクトまたは下位オブジェクトを構成することもできます。
「ノード」: 「階層」リストで選択したコレクションごとに、利用可能なズーム・レベルを1つ以上使用して、タイトル・エリアで属性を、各パネル・カードでタイトルと属性を構成します。デフォルトでは、ズーム・レベルが100%のノードは次のアルゴリズムに準拠します。
データ・コレクションの最初の3つの属性をタイトル・エリアに割り当てます。
次の2つの属性を最初のパネル・カードに割り当てます。
次の2つの属性を2つ目のパネル・カードに割り当てます。
パネル・カードのタイトルまたはノードの属性を選択して、次に示す1つ以上の要素を構成します。
テキスト: パネル・カードのタイトルに使用できます。タイトル・エリア要素には使用できません。階層のパネル・カード・タイトルにテキストを入力するか、ドロップダウン・リストから「テキスト・リソースの選択」を選択して、該当のタイトルに使用するテキスト・リソースを選択または追加します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
パネル・カード・データ・ソース: パネル・カードに使用できます。データ・ソースは、パネル・カードの属性に使用されるデータ・コレクションを意味します。デフォルトでは、現在の階層レベルに関連付けられたコレクションが、属性の選択に使用されます。
図43-10は、Summit ADFスキーマに基づいたデータ・コレクションを使用した階層ビューアの「階層ビューアの作成」ダイアログを示しています。この例では、「パネル・カード・データ・ソース」は、デフォルトのSEmpViewコレクションです。
図43-10 デフォルトのパネル・カード・データ・ソースで構成した階層ビューア
パネル・カード属性に対する代替の子アクセッサを使用するには、ドロップダウン・リストから代替の子アクセッサを選択します(図43-11を参照)。詳細は、「データバインドされたパネル・カード用に代替ビュー・オブジェクトを構成する方法」を参照してください。
図43-11 代替のパネル・カード・データ・ソースを示す「階層ビューアの作成」ダイアログ
「コンポーネント」: 属性に使用可能です。ノードにデータを表示するために使用するコンポーネントのタイプを選択します。有効な値は、「ラベル付ADF出力テキスト」、「ADF出力テキスト」、「ラベル付ADF出力フォーマット済」およびADF出力フォーマット済テキストです。これらのコンポーネントの使用方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「出力コンポーネントの使用方法」を参照してください。
「属性」: 属性要素とイメージ要素に使用可能です。ドロップダウン・リストから、階層ビューアのノードに表示する値を表すデータ・コレクションの属性を選択します。
ラベル: 「コンポーネント」フィールドのドロップダウン・リストから「ラベル付出力テキスト」またはラベル付ADF出力フォーマット済テキスト・コンポーネントを選択した場合に、属性に使用できます。デフォルトの「属性名の使用」を使用すると、基礎となるViewObjectのその属性にUIHintsのラベルを使用して値を文字列としてレンダリングできます。属性のドロップダウン・メニューから「ラベルなし」を選択して、属性にラベルをレンダリングしないことを選択したり、「テキスト・リソースの選択」を選択して「テキスト・リソースの選択」ダイアログを開き、ラベルに使用するテキスト・リソースを選択または追加できます。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。
「新規」アイコンをクリックし、ノードの選択に応じて、新しいパネル・カード、属性またはイメージをノードに追加します。既存の要素を選択したら、矢印アイコン(上へ、下へ、一番上、一番下)を使用して要素を並べ替えるか、「削除」アイコンを使用して選択した要素を削除します。
ズーム・レベルが75%、50%および25%のページを使用して、各ページ・レベルでの階層の展開表示を指定します。「ズーム・レベルの追加」を選択して、ページ・レベルのズーム・レベルを有効にします。デフォルトでは、ノード属性とパネル・カードをノードに割り当てるアルゴリズムは、100%のズーム・レベルの場合と同様です。
注意:
階層ビューア・コンポーネントは4種類のズーム・レベルを定義します。これらのズーム・レベルを変更したり、新しいズーム・レベルを作成したりすることはできません。デフォルトのズーム・レベルは100%です。
「サンプル」: 階層ビューア・ノードのサンプル・アウトラインの構成不能な表示です。タイトル・エリアなどのエリアや属性は、ノード・エリアで選択されている場合にはサンプルで強調表示されます。
「OK」をクリックします。
図43-12は、RootEmployeeViewObj2という名前のデータ・コレクションのデータを使用して階層ビューアのルート・レベルについて完成した「階層ビューアの作成」ダイアログを示しています。
図43-12 「階層ビューアの作成」ダイアログ
「階層ビューアの作成」ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用して階層ビューア属性の設定を指定できます。また、階層ビューア・タグに関連付けられた子タグを使用して、さらに階層ビューアをカスタマイズすることもできます。階層ビューアのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、階層ビューアへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「階層ビューア・コンポーネントの使用方法」を参照してください。
階層ビューアをビジュアル・エディタで編集する場合は、その表示は実行時の表示と機能とほぼ同じになります。「構造」ウィンドウの属性を並べ替えたり、属性を「データ・コントロール」パネルから「構造」ウィンドウにドラッグ・アンド・ドロップして新しい属性をバインドできます。
階層ビューアを「データ・コントロール」パネルから作成すると、次の処理が行われます。
JSFページのページ定義ファイルで階層ビューアのバインディングを作成
階層ビューア・コンポーネントのJSFページに必要なタグを追加
次の例は、階層ビューア・コンポーネントについてJDeveloperにより生成されたバインディングを表示します。マスター/ディテール・ツリーのノードにデータを移入するためのルールは、ノード定義として定義されます。次の例では、2つのノード定義が生成されます。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。また、このコード例はアクセッサ(SEmpView)も参照しています。
<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>
次の例は、上の例のページ定義ファイルに関連付けられているJSFページに生成されるコードを示しています。簡潔にするために、zoom75、zoom50およびzoom25という名前のファセット要素の詳細と、パネル・カードのshowDetailItemコンポーネントの詳細は省略しています。また、階層ビューアの2番目のノードに関する詳細も省略しています。
この例は、RootEmployeeViewObj2ツリー・バインディングを参照する階層ビューア・コンポーネントを示しています。これには、ノード(dvt:node)コンポーネントが含まれ、このコンポーネントにはパネル・カード・コンポーネント(dvt:panelCard)が含まれます。このパネル・カード・コンポーネントは、ノードにより参照されたコンテンツの表示を変更するときに使用されるエフェクトとして、slide_horzを定義しています。
階層ビューアを作成すると、図43-12に示す「階層の作成」ダイアログを使用して、コンポーネントのレイアウトを変更したり、パネル・カードなどのコンポーネントをさらに追加できます。このダイアログを開くには、hierarchyViewerコンポーネントの「プロパティ」ウィンドウで、「編集」アイコンをクリックします。また、ビジュアル・エディタで階層ビューア・コンポーネントのコードを直接編集するか、「プロパティ」ウィンドウで値を設定して、レイアウトをカスタマイズすることもできます。「コンポーネント」ウィンドウを使用すると、パネル・カードなどの別のコンポーネントを追加できます。
<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>
データバインドされた階層ビューアを作成または編集するときには、パネル・カードのデータ・ソースとして、代替ビュー・オブジェクトを指定できます。たとえば、販売責任者と注文との間のマスター/ディテール関係を含むデータ・コレクションがあるときに、注文を発注した顧客の詳細を表示するパネル・カードが必要になることがあります。
図43-13に、階層ビューアの実行時ビューの一部を示します。この階層ビューアは、Summit ADFスキーマを使用して、販売責任者に対する注文と注文の詳細を表示するように構成されています。この例では、Customer Detailsパネル・カードに対して代替ビュー・オブジェクトを使用するように、階層ビューアを構成しています。
図43-13 代替ビュー・オブジェクトを使用して構成した階層ビューアのパネル・カード
代替ビュー・オブジェクトは、親コレクションの子にする必要があります。この親子関係を確立するには、親コレクションと子コレクションとの間にビュー・リンクを作成します。
始める前に:
データバインドされた階層ビューアについて理解しておいてください。詳細は、「データバインドされた階層ビューアの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
「アプリケーション・モジュールの作成と変更」の説明に従い、アプリケーションに必要なエンティティとビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。
階層ビューア用のデータ・モデルを作成します。たとえば、図43-13の階層ビューアでは、Summit ADF DVTサンプル・アプリケーションのSEmpエンティティに基づく、最上位レベルのビュー・オブジェクトを使用しています。この例では、Summit ADF従業員データベースに含まれるすべての販売責任者をビュー・オブジェクトで取得するために、TITLE_IDが2である従業員レコードをすべて取得しています。図43-14に、SalesRepViewObjビュー・オブジェクトを示します。
図43-14 Summit ADFスキーマを使用した販売責任者ビュー・オブジェクト
ビュー・オブジェクトの作成の詳細は、「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。
Summitの販売責任者と注文との間のマスター/ディテール関係は、SalesRepViewObjとOrdersViewObjとの間のビュー・リンクで確立されます。図43-15は、ビュー・オブジェクト間の関係を示しています。
図43-15 Summitの販売責任者と注文との間のビュー・リンク
ビュー・リンクを使用して、マスター/ディテール関係を確立する方法の詳細は、「エンティティ・アソシエーションに基づくマスター/ディテール階層の作成方法」を参照してください。
データバインドされたパネル・カード用に代替ビュー・オブジェクトを構成するには:
パネル・カードの代替データ・ソースにするビュー・オブジェクトを作成します(まだ作成していない場合)。
たとえば、図43-13の階層ビューアでは、Summit ADF DVTサンプル・アプリケーションのSCustomerエンティティ・オブジェクトに基づいたビュー・オブジェクトを使用しています。
親コレクションと代替ビュー・オブジェクトとの間にビュー・リンクを作成します。
図43-16に、Summit ADF DVTサンプル・アプリケーションでの販売責任者と顧客との間のビュー・リンクを示します。ビュー・リンクの作成についての説明が必要な場合は、「エンティティ・アソシエーションに基づくマスター/ディテール階層の作成方法」を参照してください。
図43-16 Summit ADF DVTサンプル・アプリケーションでの販売責任者と顧客との間のビュー・リンク
必要に応じて、親コレクションと代替の子コレクションとの間の階層を確立するためのビュー・リンクを作成します。
たとえば、Summit ADF DVTサンプル・アプリケーションで、注文と顧客との階層を確立するには、SOrdViewコレクションとSCustomerViewコレクションとの間にビュー・リンクを作成します。図43-17に、ビュー・リンクの例を示します。
図43-17 Summit ADF DVTでの注文と顧客との間のビュー・リンク
パネル・カード・データソースに代替ビュー・オブジェクトを使用するように階層ビューアを構成すると、JDeveloperにより、階層ビューアと代替ソースのバインディングがJSFページのページ定義ファイルに追加されます。
次の例は、図43-13に表示される階層ビューアのサンプル・バインディングを示します。代替ソースのエントリは強調表示されています。代替データ・ソースは、階層ビューアのノード定義の1つとして定義されている点に注目してください。
<bindings>
<tree IterBinding="SalesRepViewObj2Iterator" id="SalesRepViewObj2">
<nodeDefinition DefName="model.SalesRepViewObj" Name="SalesRepViewObj20">
<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="SalesRepViewObj21">
<AttrNames>
<Item Value="DateShipped"/>
<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="SalesRepViewObj22">
<AttrNames>
<Item Value="Name"/>
<Item Value="Phone"/>
<Item Value="City"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition DefName="model.SItemView" Name="SalesRepViewObj23">
<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操作をドラッグして、このページの既存の階層ビューア・コンポーネントにドロップします。
図43-18に、従業員を姓で検索するように構成された、Summit ADF DVTの従業員階層ビューアを示します。この例では、「検索」パネルに従業員の姓を入力することも、%または_を使用してパターン一致を指定することもできます。
図43-18 階層ビューアと検索パネル
始める前に:
データバインドされた階層ビューアについて理解しておいてください。詳細は、「データバインドされた階層ビューアの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
「ADFデータ・コントロールを使用して階層ビューアを作成する方法」の説明に従い、データバインドされた階層ビューア・コンポーネントを作成します。
階層ビューアのルート・ノードを取得する問合せを検証します。
たとえば、図43-6では、Id列でルート・ノードを取得して、ルート・ノードをrootEmpnoバインド変数に格納しています。
検索を実行するビュー・オブジェクトを作成します。
たとえば、図43-19はEmployeesSearchResultsビュー・オブジェクトを示しています。このオブジェクトは、任意の値と一致させるためのデフォルト値の%と、パターン一致を有効にする比較値のlikeを使用して、データ・コレクションのLastName列に基づいた検索を実行します。
図43-19 EmployeeSearchResultsビュー・オブジェクト
ビュー・オブジェクトの作成の詳細は、「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。
階層ビューアでデータバインドされた検索を作成する手順:
「データ・コントロール」パネルから、問合せ結果に対応するコレクションを選択し、「操作」ノードを展開してExecuteWithParams操作を表示します。
図43-20では、Summit ADF DVTサンプル・アプリケーションのEmployeeSearchResults1操作ノードが開かれています。
図43-20 階層ビューア検索のExecuteWithParams操作の例
ExecuteWithParams操作をドラッグして、ビジュアル・エディタの階層ビューア、または「構造」ウィンドウのコンポーネント上にドロップします。
「階層ビューア検索の作成」ダイアログで、「追加」アイコンを使用して「検索結果」パネルに表示する結果リストを指定し、それぞれの結果に対して次の指定を行います。
ラベルの表示: 階層内のノードのヘッダー値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: 階層ビューアのツリーにあるノードに使用するデータ・コレクション内の列を選択します。
使用するコンポーネント: ノードに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。
既存のフィールドの選択後、矢印アイコン(Up、Down、Top、Bottom)を使用して、結果を並べ替えるか、または「削除」アイコンを使用して、結果を削除します。
「操作」ドロップダウン・リストで、検索結果が選択されたときに使用する階層ルート・データ・コレクションを選択します。有効な値には、次のものがあります。
removeRowWithKey: 入力フィールドによって指定された値から変換されたStringとして行キーを使用し、バインドされたデータ・コレクションのデータ・オブジェクトを削除します。
setCurrentRowWithKey: 入力フィールドで指定された値から変換したStringとして行キーを設定します。行キーは、バインドされたデータ・コレクション内のデータ・オブジェクトの現状設定に使用されます。
setCurrentRowWithKeyValue: キーの値を使用して、イテレータの現在のオブジェクトを設定します。
ExecuteWithParams: パラメータとして渡される名前付きバインド変数に値を設定します。
「パラメータ・マッピング」表で、「結果属性」列のドロップダウン・リストを使用して、「階層パラメータ」列に表示されるパラメータにマップする結果コレクション属性を選択します。
図43-21は、EmployeesSearchResults1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューア検索の作成」ダイアログです。
図43-21 「階層ビューア検索の作成」ダイアログ
次の例は、「OK」をクリックすることで、階層ビューア・コンポーネントの子としてdvt:searchが追加された後のJSFページのコードを示しています。
<dvt:search value="#{bindings.searchName.inputValue}"
actionListener="#{bindings.ExecuteWithParams.execute}" id="s19">
<f:facet name="end">
<af:link text="Advanced" styleClass="AFHVAdvancedSearchLinkStyle" id="l1"/>
</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で表示されます。図43-22は、ユーザーがC%と入力して、姓がCで始まるすべての従業員を検索した場合の検索結果パネルを示しています。
図43-22 階層ビューアの検索結果パネル
ユーザーは、検索結果のいずれかを選択して、その結果に関連する階層ビューアのノードと子ノード(存在する場合)を表示できます。図43-23は、ユーザーが検索結果のリストからCatchpoleを選択した場合に示される階層ビューアのノードです。
図43-23 検索後に選択したノードを示す階層ビューア
ツリーマップおよびサンバーストは、サイズと色で視覚的に表された、2つの次元にまたがる定量的階層データを表示するADFデータ視覚化コンポーネントです。これは、データの傾向を簡単かつ迅速に識別するのに役立ちます。
たとえば、ツリーマップまたはサンバーストを使用して地域の四半期ごとの売上げを表示し、売上げ傾向を特定する場合は、ノードのサイズで各地域の売上げ高を示し、ノードの色でその地域の売上げが四半期で増えたか減ったかを示すことができます。
ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。ツリーマップはノードをネストした矩形のセットとして表示します。ツリーのブランチごとに1つの矩形が割り当てられ、そこにサブブランチを表すより小さな矩形が並べられます。
図43-24に、各倉庫での製品在庫を表示するSummit ADF DVTサンプル・アプリケーションのツリーマップを示します。この例では、ノードのサイズが各製品の在庫量を表し、ノードの色が在庫ステータスを表しています。
図43-24 製品の在庫状況とインベントリ・レベルを示すツリーマップ
サンバーストは、ノードを矩形レイアウトではなく、放射状に表示し、階層のトップを中心に、深いレベルになると中心から離れて表示します。図43-25に、地域と国ごとの注文数を示すために色を使用して地域および国ごとの売上を示すように構成されたサンバーストを示します。
図43-25 製品の在庫状況とインベントリ・レベルを示すサンバースト
ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ツリーマップおよびサンバーストのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ツリーマップおよびサンバースト・コンポーネントの使用方法」を参照してください。
ツリーマップおよびサンバーストは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。ツリーマップおよびサンバーストでは、JDeveloperで次の属性も設定されている必要があります。
value:ノードのサイズ
fillColor:ノードの色
label:ノードのテキスト識別子
valueおよびlabel属性の値は、ツリーマップあるいはサンバーストのデータ・モデルに保存する必要があり、UI-first開発を使用の場合は、クラスまたはマネージドBeanに保存する必要があります。fillColor値は、データ・モデル、クラスおよびマネージドBeanで指定するか、「プロパティ」ウィンドウで宣言的に指定できます。
ツリーマップあるいはサンバーストの構成を正常に行うには、データが次のルールに従うことを確認してください。
各子ノードは、親ノードを1つのみ持つことができます。
レベルをスキップすることはできません。
Oracle ADFのデータ・コントロールを使用すると、JDeveloperではツリーマップとサンバーストの作成は宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。
始める前に:
データバインドされたツリーマップとサンバーストについて理解しておいてください。詳細は、「データバインドされたツリーマップおよびサンバーストの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
マスター/ディテール関係の操作の詳細は、「マスター/ディテール・データの表示」を参照してください。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
「データ・コントロール」パネルを使用してツリーマップまたはサンバーストを作成するには:
図43-26に、図43-24のツリーマップおよび図43-25のサンバーストに対するデータ・コレクションを示します。
図43-26 ツリーマップおよびサンバーストに対するサンプル・データ・コレクション
Summit ADF DVTサンプルの場合、アプリケーションは、SCountriesView2コレクションとSWarehouseView2コレクションの間のビュー・リンクを使用して、SRegionView1とSWarehouseView2のデータ・コレクションとの間の階層を確立します。図43-27に、ビュー・リンクの例を示します。
図43-27 国と倉庫との間のビュー・リンクの例
表43-1は、図43-24のツリーマップの作成に使用するデータ・コレクションと、サイズ値、ラベル値および色の値を示しています。
表43-1 ツリーマップ・インベントリの例に対するサンプル値
| コレクション | サイズ値 | ラベル値 | 色値 |
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
在庫レベルにより異なる |
CountryCount、WarehouseCountおよびProductCount属性は、データ・コレクション内の国、倉庫および製品の数をカウントする一時属性です。たとえば、地域内の国の数は、地域のRegionIdと一致するSCountriesView子コレクションの一意のId値の数をカウントすることで計算されます。
SCountriesView.count('Id')
表43-2は、図43-25のサンバーストの作成に使用するデータ・コレクションと、サイズ値、ラベル値および色の値を示しています。
表43-2 サンバーストの売上の例に対するサンプル値
| コレクション | サイズ値 | ラベル値 | 色値 |
|---|---|---|---|
|
|
|
|
|
|
|
|
TotalSalesおよびTotalOrders属性は、データ・コレクション内の各地域と国の合計売上高および注文数を計算する一時属性です。たとえば、地域の売上合計は、SCountriesViewコレクション内のTotalSalesを合計することで計算されます。
SCountriesView.sum ('TotalSales')
ビュー・オブジェクトへの一時属性の詳細は、「ビュー・オブジェクトへの計算属性および一時属性の追加」を参照してください。
値: ドロップダウン・リストから、サンバーストのサイズ値を表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。「式ビルダー」ダイアログに関するヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
たとえば、図43-26のデータ・コレクションを使用してツリーマップまたはサンバーストを作成するには、最初のノードに対するサイズ値を表すように、SRegionView1の値として「CountryCount」を選択します。
ラベル: ドロップダウン・リストから、サンバースト・ノードのラベルとして表示するラベルを表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
たとえば、SRegionView1ノード・ラベルに対して「Name」を選択します。
オプションで、ビュー・エリア・セクションで「新規」をクリックして、ノードに対する属性グループを構成します。ノードの表示を色またはパターンに基づいて変えるには、属性グループを使用します。ツリーマップまたはサンバーストの作成後にノードのfillColorまたはfillPatternプロパティを使用して、ノードの塗りつぶしの色またはパターンを指定することもできます。
色を変えるように属性グループを構成したり、ノードに対してfillColor属性を指定したりしない場合は、ノードは黒で表示されます。デフォルトでは、ノードはパターンなしで表示されます。
ツリーマップとサンバーストの例では、階層のレベルごとに属性グループを構成しています。
属性グループを構成するには、次の値を入力します。
値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
ツリーマップの例で使用されている色は、階層のレベルごとの数のメトリックに基づきます。たとえば、SRegionView1コレクションの「値でグループ化」としてCountryCountを選択すると、「リージョン」ノードに表示される色数は、特定のリージョン内の国の数に応じて変化します。
サンバーストの例で使用されている色は、階層のレベルごとの数の注文数に基づきます。たとえば、SRegionView1コレクションの「値でグループ化」としてTotalOrdersを選択すると、「リージョン」ノードに表示される色数は、特定のリージョン内の注文の数に応じて変化します。
エリア: ドロップダウン・リストから、属性グループを色で区別する場合は「色」を、属性グループをパターンで区別する場合は「パターン」を選択します。属性グループを色とパターンの両方で区別するには、「複数の属性の選択」を選択し、「色」と「パターン」の両方を選択します。「OK」をクリックします。
ツリーマップとサンバーストの例では、階層のレベルごとに色を使用しています。
凡例ラベル: ドロップダウン・リストから、ツリーマップの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
ツリーマップとサンバーストの例では、この値は空のままになっています。
図43-28は、Summit ADF DVTサンプル・アプリケーションの最初のノード用に必要事項を入力したツリーマップの作成ダイアログです。
図43-28 リージョン・ノードに対する「ツリーマップの作成」ダイアログ
図43-29は、Summit ADF DVTサンプル・アプリケーションの最初のノード用に必要事項を入力した「サンバーストの作成」ダイアログです。
図43-29 リージョン・ノードに対する「サンバーストの作成」ダイアログ
オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。例外ルールは、ノードのグループ化値が特定の条件を満たす場合に色またはパターンを指定するときに使用します。
一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。
グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を、ノードをパターンで区別する場合は「パターン」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
図43-30に、階層の一番下のレベルに対する一致ルールを使用するデータ・コレクションの「ツリーマップの作成」ダイアログを示します。
図43-30 属性グループに対する一致ルールを示すツリーマップ
この例では、ツリーマップ・ノードは、インベントリ・レベルが許容可能であれば緑(RGB 16進#008000)で表示され、インベントリ・レベルが製品の再発注レベル以下であれば赤(RGB 16進#ff0000)で表示されます。属性グループの「ラベル」フィールドには、凡例表示に対する詳細が含まれます。この場合、フィールドには項目の在庫数に基づいて凡例ラベルを決定する式(#{(row.AmountInStock gt row.ReorderPoint) ? 'Stock Level OK': 'Reorder Time'})が含まれます。
図43-31は、実行時のツリーマップを示します。
図43-31 実行時に一致ルールを示すツリーマップ
例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。
条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。
Summit ADF DVTサンプル・アプリケーションでは、最下位レベルの階層に対して3つの例外ルールが定義されています。製品のインベントリ・レベルが再発注レベルを明らかに上回っている場合は、図43-24のツリーマップ・ノードと図43-25のサンバースト・ノードは緑で表示されます。ツリーマップとサンバースト・ノードは、インベントリ・レベルが再発注点に近い場合は黄色で、インベントリ・レベルが再発注点に達したか非常に近い場合は赤で表示されます。
図43-32に、最下位レベルの階層に対する例外ルールを使用する、Summit ADF DVTサンプル・データ・コレクションの「ツリーマップの作成」ダイアログを示します。
図43-32 例外ルールを示すツリーマップの作成ダイアログ
注意:
この例では、条件はデータ・コレクションのReorderPoint属性を参照しています。この属性を使用するには、ツリーマップの作成後にツリーマップのバインディングに手動で追加する必要があります。詳細は、「データバインドされたツリーマップまたはサンバーストの作成時の処理」を参照してください。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を選択します。ノードをパターンで区別する場合は「パターン」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。
ツリーマップまたはサンバーストを「データ・コントロール」パネルから作成すると、次の処理が行われます。
サンバーストまたはツリーマップに対するバインディングがJSFページのページ定義ファイルに作成されます。
treemapまたはsunburstコンポーネントに必要なタグがJSFページに追加されます。
次の例に、図43-26のデータ・コレクションを使用してtreemapコンポーネントに対してJDeveloperが生成したバインディングを示します。
<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="CountryCount"/>
<Item Value="Name"/>
</AttrNames>
<Accessors>
<Item Value="SCountriesView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SCountriesView" Name="SRegionView11">
<AttrNames>
<Item Value="WarehouseCount"/>
<Item Value="Country"/>
</AttrNames>
<Accessors>
<Item Value="SWarehouseView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SWarehouseView" Name="SRegionView12">
<AttrNames>
<Item Value="ProductCount"/>
<Item Value="City"/>
</AttrNames>
<Accessors>
<Item Value="ProductInventoryView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.ProductInventoryView" Name="SRegionView13">
<AttrNames>
<Item Value="Name"/>
<Item Value="AmountInStock"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
ツリーマップまたはサンバーストのノードにデータを移入するためのルールは、ノード定義で定義されています。この例は、階層の各レベルに対して1つずつ、合計で4つのノード定義が生成されたことを示しています。これらのノード定義はそれぞれ、ビュー・オブジェクト1つと「ツリーマップの作成」または「サンバーストの作成」ダイアログで指定された属性を参照します。階層の次のレベルが存在する場合は、各ノード定義では次のレベルに対するアクセッサも参照しています。
作成時に「値」、「名前」または「値でグループ化」フィールドで指定されていない属性は、バインディングに含まれません。データ・コレクションの別の属性を参照する必要がある場合は、バインディングに手動で追加する必要があります。たとえば、Summit ADF DVTサンプルでは、属性例外ルールは特定の製品の在庫量(AmountInStock)と再発注点(ReorderPoint)の差異に基づいて色を計算します。EL式を正しく評価するには、ReorderPoint属性をツリーマップまたはサンバーストのバインディング定義に追加する必要があります。
バインディングを追加するには、「構造」ウィンドウでdvt:treemapまたはdvt:sunburstコンポーネントを右クリックし、「バインディングに移動」を選択します。「バインディング」セクションで「編集」を選択し、ReorderPoint属性を追加します。図43-33に、ReorderPointが表示属性に追加された、Summit ADF DVTツリーマップについて完成した「ツリー・バインディングの編集」ダイアログを示します。
図43-33 「ツリー・バインディングの編集」ダイアログ
「OK」をクリックすると、バインディングが追加した属性で更新されます。次の例に、SRegionView13ノード定義の改訂したバインディングを示します。
<nodeDefinition DefName="model.ProductInventoryView" Name="SRegionView13">
<AttrNames>
<Item Value="Name"/>
<Item Value="AmountInStock"/>
<Item Value="ReorderPoint"/>
</AttrNames>
</nodeDefinition>
ツリーマップまたはサンバーストの作成後は、「ツリーマップの作成」ダイアログまたは「サンバーストの作成」ダイアログを使用して、各ノードの値、ラベルおよび属性グループを変更できます。このダイアログを開くには、treemapまたはsunburstコンポーネントに対する「プロパティ」ウィンドウの「編集」アイコンを使用します。また、値はコードで直接カスタマイズすることも、「プロパティ」ウィンドウで値を設定してカスタマイズすることもできます。
デフォルトでは、サンバーストまたはツリーマップでは階層の最初の2つのレベルのみが表示され、サンバーストまたはツリーマップでlegendSource属性を構成するまでは凡例は表示されません。図43-34に、図43-26のデータ・コレクションを使用してツリーマップを作成した場合に実行時に表示されるツリーマップを示します。
図43-34 構成前のデータバインドされたツリーマップの例
「ツリーマップの作成」ダイアログまたは「サンバーストの作成」ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用して、ツリーマップまたはサンバーストのレベル表示と、legendSource属性を構成できます。その他のツリーマップまたはサンバースト属性に対する設定を指定し、サンバーストおよびツリーマップ・タグに関連付けられた子タグを使用してさらにサンバーストおよびツリーマップをカスタマイズすることもできます。
次の例に、図43-24のツリーマップに対する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>
次の例に、図43-25のサンバーストに対するJSFページ・コード上のコードを示します。この例では、データバインドされたサンバーストには、サマリーおよびユーザーがノード上にマウス・ポインタを移動した場合に表示するツールチップが構成されています。
<dvt:sunburst id="t1" value="#{bindings.SRegionView1.collectionModel}"
var="row" summary="Sunburst Demo">
<af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
<f:facet name="SRegionView10">
<dvt:sunburstNode value="#{row.TotalSales}" label="#{row.Name}" id="sn1"
shortDesc="Sales: #{row.TotalSales}<br/>Orders: #{row.TotalOrders}">
<dvt:attributeGroups value="#{row.TotalOrders}" type="color" id="ag2"/>
</dvt:sunburstNode>
</f:facet>
<f:facet name="SRegionView11">
<dvt:sunburstNode value="#{row.TotalSales}" label="#{row.Country}" id="sn2"
shortDesc="Sales: #{row.TotalSales}<br/>Orders: #{row.TotalOrders}">
<dvt:attributeGroups value="#{row.TotalOrders}" type="color" id="ag1"/>
</dvt:sunburstNode>
</f:facet>
</af:switcher>
</dvt:sunburst>
サンバーストまたはツリーマップのレベル表示、legendSource属性、ツールチップ、追加の属性または子タグの構成の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ツリーマップおよびサンバースト・コンポーネントの使用方法」を参照してください。
