Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1(11.1.1.9.0) B52029-12 |
|
![]() 前 |
![]() 次 |
この章では、ADF データ可視化ツリーマップ
およびサンバースト
・コンポーネントを使い、ツリーマップとサンバーストで階層データを単純UI-first開発を使用して表示する方法を記述します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してツリーマップやサンバーストを作成することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。
この章では、次の項目について説明します。
ツリーマップとサンバーストを使用して、定量的な階層データをサイズと色により視覚的に表現し、2つの次元にまたがり表示します。たとえば、ツリーマップまたはサンバーストを使用して地域の四半期ごとの売上げを表示し、売上げ傾向を特定する場合は、ノードのサイズで各地域の売上げ高を示し、ノードの色でその地域の売上げが四半期で増えたか減ったかを示すことができます。
ツリーマップおよびサンバーストでは、node
と呼ばれる形を使用して、階層内のデータを表します。ノードの外観とコンテンツは、階層の各レベルで構成可能です。
ツリーマップはノードをネストした矩形のセットとして表示します。ツリーのブランチごとに1つの矩形が割り当てられ、そこにサブブランチを表すより小さな矩形が並べられます。図32-1に、米国の人口調査データを地域ごとにグループ化して表示し、色の属性で平均所得水準を表したツリーマップを示します。人口の多い州は人口の少ない州より大きなノードで表示されます。
サンバーストは、ノードを矩形レイアウトではなく、放射状に表示し、階層のトップを中心に、深いレベルになると中心から離れて表示します。図32-2に、サンバーストで表示した同じ国勢調査データを示します。
ツリーマップとサンバーストのいずれも、数千のデータ・ポイントを比較的小さな空間領域に表示できます。各ノードの相対サイズが全体に対する重要度を表しているため、これらのコンポーネントは大規模な階層データ・セットで傾向を特定する場合に適しています。色もまた、情報に追加される次元の表現に使用できます。
階層の1つのレイヤーでサイズと色を使用してデータの2つのメトリックを表示することが主な目的の場合は、ツリーマップを使用します。階層のすべてのレベルでのメトリックを表示する場合、かわりにサンバーストを使用します。エンド・ユーザーが階層を横断してデータの重要な部分を重点的に表示できるように、ドリルを有効にできます。
アプリケーションが小さいデータ・セットを使用する場合、あるいはノード間の親子関係を強調する場合、ツリー
、ツリー表
あるいは階層ビューア
・コンポーネントの使用を考えます。ツリーやツリー表の詳細は、第10章「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。階層ビューアの使用については、第31章「階層ビューア・コンポーネントの使用方法」を参照してください。
ADFデータ可視化ツールのツリーマップ
およびサンバースト
・コンポーネントは、ドリル、グループ化およびフィルタリングなど、エンド・ユーザー向けの幅広い機能を提供します。これらはまた、レイアウトのバリエーション、凡例の表示、およびカスタマイズ可能な色やラベル・スタイルなど、幅広いプレゼンテーション機能を提供します。
ツリーマップやサンバースト・コンポーネントの使用やカスタマイズには、次の機能やコンポーネントの理解が役立ちます。
ページにコンポーネントを挿入する際(「データ・コントロール」パネルからデータ・コレクションとツリーマップ
またはサンバースト
・コンポーネントをバインドするか、コンポーネント・パレットからコンポーネントを挿入して後からデータにバインドする)、ツリーマップあるいはサンバーストの初期レイアウトを定義できます。
サンバースト
・コンポーネントには、図32-2に示す、1つのレイアウトしかありません。
ツリーマップ
・コンポーネントのノードのレイアウトは構成可能で、次のタイプのレイアウトが含まれます。
正方形、ノードは可能なかぎり正方形となるように配置されます。
正方形レイアウトはユーザーが最も容易にノードの相対的なサイズが比較できるように最適化され、レイアウトは図32-1に示すように表示されます。
スライスとダイス水平、ノードは最初ツリーマップの幅方向に沿い水平に配置され、ついで高さ方向に垂直に配置されます。
このレイアウトはノードの相対的な順序が一定に保たれるので、アニメーション用に最適化されます。図32-3は、スライスとダイス水平レイアウトでの、米国の国勢調査のサンプル・データを表示します。
スライスとダイス垂直、ノードは最初ツリーマップの高さ方向に沿い垂直に配置され、ついで幅方向に水平に配置されます。
このレイアウトも、ノードの相対的な順序が一定に保たれるので、アニメーション用に最適化されます。図32-4は、スライスとダイス垂直レイアウトでの、米国の国勢調査のサンプル・データを表示します。
ツリーマップとサンバーストは、データ・セット内での一意なグループの色などのスタイル属性値を生成するため、dvt:attributeGroups
タグの使用をサポートします。
ツリーマップとサンバーストにおいては、データの値が表示される色を決めます。どちらのコンポーネントも、連続的なデータをグラデーションから色を選択して表示し、ノードはデータの値に基づき徐々に色を変化させます。図32-1のツリーマップでは、データの値の範囲として所得の中間値を表示するのにグラデーションを使用しています。
離散データについても、ツリーマップとサンバーストはデータの値に基づき特定の色を表示します。図32-5は、所得の中間値の高低の区別に2色を使用して、米国の国勢調査の同じ人口データを示しています。
ツリーマップとサンバーストは凡例をコンポーネントの下に表示し、サイズと色をコントロールしているデータのタイプを視覚的にわかりやすくします。コンポーネントが所得レベルなどの条件に基づき色を指定するのに属性グループを使用する場合、凡例は使用される色を表示し、各色がどの値を表現しているかを示すこともできます。
図32-5のツリーマップは、離散属性グループを使用するツリーマップの凡例を示します。凡例により、平均所得の高低を示すのにどの色が使用されているかの判断が容易になります。
Iツリーマップが連続属性グループを使用する場合、凡例はグラデーションとして使用される色を表示します。図32-1のツリーマップは、平均所得レベルを示すのに連続属性グループを使用するツリーマップの凡例を示します。
ツリーマップとサンバーストは、子ノードのfillPattern
属性に値が指定されたとき、パターンを表示します。パターンは白のバックグラウンドで描かれ、fillColor
の値がフォアグラウンドの色を決めます。
図32-6に、塗りつぶしパターンの組合せとして構成されたサンバーストを示します。
ツリーマップとサンバーストは、ユーザーによる1つ以上のノードへのクリックに反応して選択されたノードについての情報を表示する機能をサポートします。
図32-7に、複数選択サポートのために構成されたツリーマップを示します。
ツリーマップとサンバーストは、ユーザーがノード上でマウスを動かすとノードの追加情報を表示する機能をサポートします。
図32-8に、ユーザーがアラスカのノード上でマウスを動かしたときに表示されるツールチップを示します。
ツールチップにより、視覚表示からでは明白ではない可能性のあるデータについての情報を、ユーザーは見ることができるようになります。ツールチップをツリーマップやサンバースト上に構成することは、コンポーネントの空間制約性の観点から推奨されます。
ツリーマップとサンバーストのコンポーネントは、ユーザーがノード上をマウスでクリックしたりホバーしたときに、情報を提供したり、入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。図32-9に、ユーザーがツリーマップ・ノードの1つの上でマウスをホバーさせたときに表示される、ポップアップのサンプルを示します。
図32-10に、ユーザーがサンバースト・ノードの1つの上でマウスをクリックしたときに表示される類似のポップアップ・ウィンドウを示します。
ツリーマップとサンバーストは、コンテキスト・メニューを表示して選択されたノードについての追加情報を提供する機能をサポートします。図32-11に、ユーザーがサンバースト・ノードの1つの上で右クリックしたときに表示されるコンテキスト・メニューを示します。
ツリーマップ
およびサンバースト
・コンポーネントはドリルをサポートして、階層をナビゲートしノードについてのより詳細な情報を表示します。
図32-12に、ユーザーが図32-5のWest Regionのヘッダー・テキストをクリックしたときに表示されるツリーマップを示します。ユーザーは、United States > West Regionのブレッドクラム・リンクをクリックすることで、階層を上方にナビゲート・バックできます。
ユーザーは、図32-13に示すように、ノードをダブルクリックして階層のルートに設定することもできます。
サンバースト
上でドリルをするには、ユーザーはサンバースト上のノードをクリックし、図32-14に示すように階層のルートに設定します。ユーザーは、United States > West Regionのブレッドクラム・リンクをクリックするか、シフト・キーを押してWest Regionノードをダブルクリックすることにより、階層を上方にナビゲート・バックできます。
サンバーストには、選択したノードの子を開いたり閉じたりする機能もあります。ユーザーは、開くノード上でマウスを動かしたときに現れる開くアイコンをクリックします。子を閉じるには、ユーザーは閉じるをクリックします。
図32-15に、非同期ドリルのために構成されたサンバーストを示します。
ツリーマップ
およびサンバースト
・コンポーネントには、大きなコントリビュータとの比較において、ユーザーのデータ・モデルが多数の小さいコントリビュータを含む場合、データを集計する機能があります。
図32-16に、図32-5で表示された国勢調査ツリーマップに、その他のノードを構成したものを示します。この例では、South Atlantic地域のSouth Carolina、Delaware、West VirginiaおよびDistrict of Columbiaノードは、その他のノードとして表現されます。
ツリーマップおよびサンバーストのコンポーネントは、ドロップ・ソース、およびドロップ・ターゲットのいずれとしても、ドラッグ・アンド・ドロップをサポートします。
図32-17に、ドラッグ・ソースとして構成されたツリーマップを示します。ユーザーがノードの1つを右のテキストにドラッグすると、テキストはどのノードがドラッグされたかを反映して変化します。
図32-18に、ドロップ・ターゲットとして構成されたツリーマップを示します。ユーザーが右のテキストをノードの1つにドラッグすると、テキストはどのノードがテキストを受け取ったかを反映して変化します。
ツリーマップ
およびサンバースト
・コンポーネントは、同じ親のノードをサイズによりソートして表示する機能をサポートしています。この機能はノードの比較を容易にするので、ユーザーのデータ・モデルがソートされていない場合に有用です。
図32-19にソートされたツリーマップを示します。ノードはサイズが減少する方向に配置され、どの地域が最も大きな人口を有するかがわかりやすくなります。
注意: ツリーマップはスライスとダイスのレイアウトにおいてのみソートをサポートします。 |
ツリーマップとサンバーストは、次のイメージ形式、すなわちHTML5、Flash、およびPNG (Portable Network Graphics)をサポートします。
デフォルトで、ツリーマップとサンバーストはクライアントのブラウザがサポートする、最良の出力形式で表示します。最良の出力形式をクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash (Flash Playerが使用可能な場合)。
アプリケーション全体でFlashコンテンツの使用を制御するには、adf-config.xml
でflash-player-usage
コンテキスト・パラメータを設定します。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
PNG出力形式。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ドラッグ・アンド・ドロップ・ジェスチャ
ポップアップのサポート
選択項目
ツリーマップとサンバーストは、テキスト・ラベル内には通常入らないコンテンツを追加するため、ノード上にコンテンツ・ファセットを提供します。サンバーストでは、拡張コンテンツはルート・ノードに表示されます。ツリーマップでは、拡張コンテンツはリーフ・ノードに表示されます。
図32-20に、ルート・ノード上に拡張ノードを使用するサンバーストの例を示します。この例では、ルート・ノードはノード・テキストに加え、イメージとタイトルを表示します。
図32-21に、拡張ノード・コンテンツを使用するツリーマップの例を示します。
ADF Facesでは、印刷またはメール送信用の簡単なモードで、JSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、ただしWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロール・バーやボタンなど、印刷ページに必要ないアイテムを削除することができます。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。詳細は、第36章「異なる出力モードの使用」を参照してください。
ツリーマップとサンバーストは、アクティブ・データ・イベントが受け取られたときにPPR(部分ページ・リフレッシュ)リクエストを送ることによりADSをサポートします。PPRのレスポンスにより、コンポーネントが更新され、必要に応じて変更がアニメーション化されます。次のADSイベントがサポートされます。
ノード・サイズの更新
ノードの色の更新
ノード・ラベルの更新
ノードの挿入
ノードの削除
拡張ノード・コンテンツ変更
ツリーマップは、表示されたデータのグループ内での比較にフォーカスするため、独立性をサポートします。ユーザーは、グループ・ヘッダー上でマウスを動かしたときに現れる「分離」アイコンをクリックし、グループを最大化します。
図32-22に、ユーザーがSouth Atlanticのグループ・ヘッダー上でマウスを動かしたときに現れる「分離」アイコンを示します。
図32-23に、ユーザーが図32-22のSouth Atlantic地区でI分離をクリックしたときに表示されるツリーマップを示します。
ツリーマップを元の表示に戻すには、ユーザーはリストアをクリックします。
ツリーマップが複数レベルで表示されるとき、親レベルはグループ・ヘッダーで表示されます。デフォルトでは、グループ・ヘッダーは白のバックグラウンドで表示され、グループのタイトルは、左から右モードのときは左側揃えで配置され黒のテキストで表示されます。
図32-24に、ノード・ヘッダーのあるツリーマップの一部を示します。この例では、South RegionとSouth Atlanticのヘッダーは、デフォルト形式で形式化されている。
ヘッダーをカスタマイズしてノードの色を使用したり、テキストの配置を変更したり、またフォントをカスタマイズしたりすることができます。
図32-25に、ノードの色を使用し、タイトルを中央に配置し、またフォントのサイズと色を変更するように形式化されたノード・ヘッダーを有する同じツリーマップを示します。
この例では、所得レベルが$50,000より低いときはツリーマップ・ノードが赤で表示され、所得レベルが$50,000より高いときはツリーマップ・ノードが青で表示されます。
各ノードの色の計算で使用されたものと同じルールから色が計算されるので、South Atlanticのノード・ヘッダーは青で表示されます。このケースでは、South Atlanticの区画に含まれる全ノードの所得レベルは$50,000より高いです。しかしながら、South Regionのノード・ヘッダーは、West South CentralおよびEast South Centralの区画も含むので、赤で表示されます。このケースでは、South Regionに含まれる全ノードの所得レベルは$50,000より低いです。
ツリーマップ
およびサンバースト
・コンポーネントを使用するには、データを定義し、ツリーマップあるいはサンバーストをページに追加し、JDeveloperにおける追加の構成を完成させます。
ツリーマップ
およびサンバースト
・コンポーネントには、1つ以上のディテール・コレクションと1つのマスター・ディテール・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションが必要です。どちらのコンポーネントも、ADF Faces ツリー
・コンポーネントと同じデータ・モデルを使用します。ツリー
・コンポーネントの詳細は、10.5項「ツリーでのデータの表示」を参照してください。
ツリーマップとサンバーストは、次の属性をJDeveloperに設定する必要があります。
value
:ノードのサイズ
fillColor
:ノードの色
label
:ノードのテキスト識別子
value
およびlabel
属性の値は、ツリーマップあるいはサンバーストのデータ・モデルに保存する必要があり、UI-first開発を使用の場合は、クラスまたはマネージドBeanに保存する必要があります。fillColor
の値はデータ・モデル、およびマネージドBeanで指定でき、またプロパティ・インスペクタで、宣言的に指定することもできます。
図32-26に、図32-1の中のツリーマップを生成するのに使用されるデータのサブセットを示します。これは、図32-2でサンバーストを生成するのに使用された同じデータです。
この例では、United Statesはルート
・ノードで、以下3つの子レベルがあります。すなわち、region
、division
およびstate
です。
ツリーマップあるいはサンバーストの構成を正常に行うには、データが次のルールに従うことを確認してください。
各子ノードは、親ノードを1つのみ持つことができます。
レベルをスキップすることはできません。
ツリーマップあるいはサンバーストのモデルをUI-first開発において作成するには、クラスとマネージドBeanを使用してツリー・ノードとツリー・モデルを定義し、ツリーにデータを移入し、かつツリーマップあるいはサンバースト構成の必要に応じ、追加のメソッドを追加します。
例32-1に、国勢調査のデータ例でのツリー・ノードを定義する、コードのサンプルを示します。ラベル、サイズ、および色についての必要な設定は、パラメータとしてツリー・ノードに渡されます。
例32-1 ツリーマップあるいはサンバーストのツリー・ノードを作成するコード・サンプル
import java.awt.Color; import java.util.ArrayList; import java.util.List; public class TreeNode { private final String m_text; private final Number m_size; private final Color m_color; private final List<TreeNode> m_children = new ArrayList<TreeNode>();public TreeNode(String text, Number size, Color color) {
m_text = text;
m_size = size;
m_color = color;
}
public String getText() { return m_text; } public Number getSize() { return m_size; } public Color getColor() { return m_color; } public void addChild(TreeNode child) { m_children.add(child); } public void addChildren(List<TreeNode> children) { m_children.addAll(children); } public List<TreeNode> getChildren() { return m_children; } @Override public String toString() { return m_text + ": " + m_color + " " + Math.round(m_size.doubleValue()); } }
UI-first開発におけるツリーマップあるいはサンバーストにデータを供給するには、クラスあるいはマネージドBeanをユーザーのアプリケーションに追加します。アプリケーションは例32-1のツリー・ノードを展開し、そこにデータを移入します。ツリー・モデルを設定するクラスは、org.apache.myfaces.trinidad.model.TreeModel
クラスの実装にする必要があります。ツリー・モデルを定義したら、org.apache.myfaces.trinidad.model.ChildPropertyTreeModel
を実装するメソッドを作成してツリー・モデルを完成させます。国勢データの例において、ルートと子ノードの構造を設定し、子レベルにデータを移入し、ノードの色およびサイズを定義するクラスについては、例32-2を参照してください。
例32-2 ツリーマップおよびサンバースト用に国勢調査データ・モデルを作成するコード・サンプル
import java.awt.Color; import java.util.ArrayList; import java.util.List; import org.apache.myfaces.trinidad.model.ChildPropertyTreeModel; import org.apache.myfaces.trinidad.model.TreeModel; public class CensusData { public static TreeModel getUnitedStatesData() { return getModel(ROOT); } public static TreeModel getRegionWestData() { return getModel(REGION_W); } public static TreeModel getRegionNortheastData() { return getModel(REGION_NE); } public static TreeModel getRegionMidwestData() { return getModel(REGION_MW); } public static TreeModel getRegionSouthData() { return getModel(REGION_S); } public static TreeModel getDivisionPacificData() { return getModel(DIVISION_P); } private static TreeModel getModel(DataItem rootItem) { TreeNode root = getTreeNode(rootItem); return new ChildPropertyTreeModel(root, "children"); } private static TreeNode getTreeNode(DataItem dataItem) { // Create the node itself TreeNode node = new CensusTreeNode(dataItem.getName(), dataItem.getPopulation(), getColor(dataItem.getIncome(), MIN_INCOME, MAX_INCOME), dataItem.getIncome()); // Create its children List<TreeNode> children = new ArrayList<TreeNode>(); for(DataItem childItem : dataItem.children) { children.add(getTreeNode(childItem)); } // Add the children and return node.addChildren(children); return node; } private static Color getColor(double value, double min, double max) { double percent = Math.max((value - min) / max, 0); if(percent > 0.5) { double modifier = (percent - 0.5) * 2; return new Color((int)(modifier*102), (int)(modifier*153), (int)(modifier*51)); } else { double modifier = percent *2; return new Color((int)(modifier*204), (int)(modifier*51), 0); } } public static class DataItem { private final String name; private final int population; private final int income; private final List<DataItem> children; public DataItem(String name, int population, int income) { this.name = name; this.population = population; this.income = income; this.children = new ArrayList<DataItem>(); } public void addChild(DataItem child) { this.children.add(child); } public String getName() { return name; } public int getPopulation() { return population; } public int getIncome() { return income; } public List<CensusData.DataItem> getChildren() { return children; } } private static final int MIN_INCOME = 0; private static final int MAX_INCOME = 70000; private static final DataItem ROOT = new DataItem("United States", 301461533, 51425); private static final DataItem REGION_NE = new DataItem("Northeast Region", 54906297, 57208); private static final DataItem REGION_MW = new DataItem("Midwest Region", 66336038, 49932); private static final DataItem REGION_S = new DataItem("South Region", 110450832, 47204); private static final DataItem REGION_W = new DataItem("West Region", 69768366, 56171); private static final DataItem DIVISION_NE = new DataItem("New England", 14315257, 61511); private static final DataItem DIVISION_MA = new DataItem("Middle Atlantic", 40591040, 55726); private static final DataItem DIVISION_ENC = new DataItem("East North Central", 46277998, 50156); private static final DataItem DIVISION_WNC = new DataItem("West North Central", 20058040, 49443); private static final DataItem DIVISION_SA = new DataItem("South Atlantic", 57805475, 50188); private static final DataItem DIVISION_ESC = new DataItem("East South Central", 17966553, 41130); private static final DataItem DIVISION_WSC = new DataItem("West South Central", 34678804, 45608); private static final DataItem DIVISION_M = new DataItem("Mountain", 21303294, 51504); private static final DataItem DIVISION_P = new DataItem("Pacific", 48465072, 58735); static { // Set up the regions ROOT.addChild(REGION_NE); ROOT.addChild(REGION_MW); ROOT.addChild(REGION_S); ROOT.addChild(REGION_W); // Set up the divisions REGION_NE.addChild(DIVISION_NE); REGION_NE.addChild(DIVISION_MA); REGION_MW.addChild(DIVISION_ENC); REGION_MW.addChild(DIVISION_WNC); REGION_S.addChild(DIVISION_SA); REGION_S.addChild(DIVISION_ESC); REGION_S.addChild(DIVISION_WSC); REGION_W.addChild(DIVISION_M); REGION_W.addChild(DIVISION_P); // Set up the states DIVISION_NE.addChild(new DataItem("Connecticut", 3494487, 67721)); DIVISION_NE.addChild(new DataItem("Maine", 1316380, 46541)); DIVISION_NE.addChild(new DataItem("Massachusetts", 6511176, 64496)); DIVISION_NE.addChild(new DataItem("New Hampshire", 1315419, 63033)); DIVISION_NE.addChild(new DataItem("Rhode Island", 1057381, 55569)); DIVISION_NE.addChild(new DataItem("Vermont", 620414, 51284)); DIVISION_MA.addChild(new DataItem("New Jersey", 8650548, 68981)); DIVISION_MA.addChild(new DataItem("New York", 19423896, 55233)); DIVISION_MA.addChild(new DataItem("Pennsylvania", 12516596, 49737)); DIVISION_ENC.addChild(new DataItem("Indiana", 6342469, 47465)); DIVISION_ENC.addChild(new DataItem("Illinois", 12785043, 55222)); DIVISION_ENC.addChild(new DataItem("Michigan", 10039208, 48700)); DIVISION_ENC.addChild(new DataItem("Ohio", 11511858, 47144)); DIVISION_ENC.addChild(new DataItem("Wisconsin", 5599420, 51569)); DIVISION_WNC.addChild(new DataItem("Iowa", 2978880, 48052)); DIVISION_WNC.addChild(new DataItem("Kansas", 2777835, 48394)); DIVISION_WNC.addChild(new DataItem("Minnesota", 5188581, 57007)); DIVISION_WNC.addChild(new DataItem("Missouri", 5904382, 46005)); DIVISION_WNC.addChild(new DataItem("Nebraska", 1772124, 47995)); DIVISION_WNC.addChild(new DataItem("North Dakota", 639725, 45140)); DIVISION_WNC.addChild(new DataItem("South Dakota", 796513, 44828)); DIVISION_SA.addChild(new DataItem("Delaware", 863832, 57618)); DIVISION_SA.addChild(new DataItem("District of Columbia", 588433, 56519)); DIVISION_SA.addChild(new DataItem("Florida", 18222420, 47450)); DIVISION_SA.addChild(new DataItem("Georgia", 9497667, 49466)); DIVISION_SA.addChild(new DataItem("Maryland", 5637418, 69475)); DIVISION_SA.addChild(new DataItem("North Carolina", 9045705, 45069)); DIVISION_SA.addChild(new DataItem("South Carolina", 4416867, 43572)); DIVISION_SA.addChild(new DataItem("Virginia", 7721730, 60316)); DIVISION_SA.addChild(new DataItem("West Virginia", 1811403, 37356)); DIVISION_ESC.addChild(new DataItem("Alabama", 4633360, 41216)); DIVISION_ESC.addChild(new DataItem("Kentucky", 4252000, 41197)); DIVISION_ESC.addChild(new DataItem("Mississippi", 2922240, 36796)); DIVISION_ESC.addChild(new DataItem("Tennessee", 6158953, 42943)); DIVISION_WSC.addChild(new DataItem("Arkansas", 2838143, 38542)); DIVISION_WSC.addChild(new DataItem("Louisiana", 4411546, 42167)); DIVISION_WSC.addChild(new DataItem("Oklahoma", 3610073, 41861)); DIVISION_WSC.addChild(new DataItem("Texas", 23819042, 48199)); DIVISION_M.addChild(new DataItem("Arizona", 6324865, 50296)); DIVISION_M.addChild(new DataItem("Colorado", 4843211, 56222)); DIVISION_M.addChild(new DataItem("Idaho", 1492573, 46183)); DIVISION_M.addChild(new DataItem("Montana", 956257, 43089)); DIVISION_M.addChild(new DataItem("Nevada", 2545763, 55585)); DIVISION_M.addChild(new DataItem("New Mexico", 1964860, 42742)); DIVISION_M.addChild(new DataItem("Utah", 2651816, 55642)); DIVISION_M.addChild(new DataItem("Wyoming", 523949, 51990)); DIVISION_P.addChild(new DataItem("Alaska", 683142, 64635)); DIVISION_P.addChild(new DataItem("California", 36308527, 60392)); DIVISION_P.addChild(new DataItem("Hawaii", 1280241, 64661)); DIVISION_P.addChild(new DataItem("Oregon", 3727407, 49033)); DIVISION_P.addChild(new DataItem("Washington", 6465755, 56384)); } public static class CensusTreeNode extends TreeNode { private int income; public CensusTreeNode(String text, Number size, Color color, int income) { super(text, size, color); this.income = income; } public int getIncome() { return income; } } }
最後に、UI-first開発におけるツリー・モデルを完成するには、マネージドBeanを、データを含むクラスまたはBeanを参照するユーザーのアプリケーションに加え、オプションとして、ツリーマップあるいはサンバーストのカスタマイズのために他のメソッドを追加します。
例32-3に、国勢調査のツリーマップをインスタンス化し、それに国勢調査データを移入するコードのサンプルを示します。この例はまた、ツリーマップのノードの行データをラベル表示のための文字列に変換するサンプル・メソッド(convertToString
)を含んでいます。このコードをサンバーストで使用するには、下のサンプル・コードにおいてツリーマップへのすべての参照をサンバーストに置き換えます。
例32-3 国勢調査データのツリーマップ設定のためのマネージドBeanの例
import org.apache.myfaces.trinidad.component.UIXHierarchy; import org.apache.myfaces.trinidad.model.RowKeySet; import org.apache.myfaces.trinidad.model.TreeModel; import oracle.adf.view.faces.bi.component.treemap.UITreemap; public class SampleTreemap { // Data Model Attrs private TreeModel currentModel; private final CensusData censusData = new CensusData(); private String censusRoot = "United States"; private UITreemap treemap; public TreeModel getCensusRootData() { return censusData.getUnitedStatesData(); } public TreeModel getCensusData() { if ("West Region".equals(censusRoot)) return censusData.getRegionWestData(); else if ("South Region".equals(censusRoot)) return censusData.getRegionSouthData(); else if ("Midwest Region".equals(censusRoot)) return censusData.getRegionMidwestData(); else if ("Northeast Region".equals(censusRoot)) return censusData.getRegionNortheastData(); else if ("Pacific Division".equals(censusRoot)) return censusData.getDivisionPacificData(); else return censusData.getUnitedStatesData(); } public TreeModel getData() { // Return cached data model if available if(currentModel != null) return currentModel; currentModel = getCensusData(); return currentModel; } public void setCensusRoot(String censusRoot) { this.censusRoot = censusRoot; } public String getCensusRoot() { return censusRoot; } //Converts the rowKeySet into a string of node text labels. public static String convertToString(RowKeySet rowKeySet, UIXHierarchy hierarchy) { StringBuilder s = new StringBuilder(); // save the current rowkey because we will lose this state in the for-loop // when we setRowKey and then get the rowData Object savedKey = hierarchy.getRowKey(); try { if (rowKeySet != null) { for (Object rowKey : rowKeySet) { hierarchy.setRowKey(rowKey); TreeNode rowData = (TreeNode)hierarchy.getRowData(); s.append(rowData.getText()).append(", "); } // Remove the trailing comma if (s.length() > 0) s.setLength(s.length() - 2); } } finally { hierarchy.setRowKey(savedKey); } return s.toString(); } public void setTreemap(UITreemap treemap) { this.treemap = treemap; } public UITreemap getTreemap() { return treemap; } }
ツリーマップ
・コンポーネントを使用するには、ツリーマップをページに追加し、JDeveloperにおける追加の構成を完成させます。
ツリーマップ
・コンポーネントは、ツリーマップの表示や動作をカスタマイズするために追加したり修正したりすることのできる構成可能な属性や子コンポーネントを持ちます。接頭辞dvt:
は、各ツリーマップ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
ツリーマップの子コンポーネント、属性およびサポートされているファセットを次のエリアで構成できます。
ツリーマップ(dvt:treemap
): ツリーマップ・ノードを折り返します。次の属性を構成してツリーマップの表示をコントロールします。
ラベル: colorLabel
およびsizeLabel
属性を使用してツリーマップの色とサイズのメトリックを特定します。ツリーマップには、これらのラベルが凡例表示に必要です。
凡例ソース(legendSource
): この属性を、属性グループで構成されたツリーマップでの凡例表示に使用します。属性グループのIDを指定します。
子レベルの表示(displayLevelsChildren
): 表示する子レベルの数を指定します。デフォルトでは、ツリーマップはルートと最初の2つの子レベルを表示します。
アニメーション: animationOnDisplay
属性を使用して初期のアニメーションをコントロールし、animationOnDataChange
属性を使用してその後のアニメーションをコントロールします。アニメーション期間をデフォルトの500ミリ秒から変更するには、animationDuration
属性を修正します。
空テキスト(emptyText
): emptyText
属性を使用して、ツリーマップ・ノードにデータが含まれない場合に表示するテキストを指定します。
グループ・ギャップ(groupGaps
): グループ間で表示するギャップを指定します。デフォルトでは、この属性はouter
に設定されており、ツリーマップは外部ノード間のギャップのみを表示します。この属性をnone
に設定してすべてのギャップを取り除くことも、あるいはこの属性をall
に設定してすべてのグループ間にギャップを追加することもできます。
ソート(sorting
): 同じ親を持つ全ノードを、サイズが小さくなる方向にソートするのにこの属性を使用します。
その他のグループ: otherThreshold
、otherThresholdBasis
、otherColor
およびotherPattern
属性を使用して、子のデータをその他のノ-ドに集計します。
ツリーマップ・ノード(dvt:treemapNode
): ツリーマップ
・コンポーネントの子。このタグはツリーマップの各ノードのサイズと色を定義し、データ・モデルでの各行にスタンプされます。行によりスタンプを変更する場合、ADF Faces af:switcher
コンポーネントを使用し、各行にツリーマップ・ノードを挿入します。次の属性を構成してノードの表示をコントロールします。
value
(必須): ツリーマップ・ノードの値を指定します。この値はツリーマップ内のノードの相対的なサイズを決定します。
fillColor
(必須): ノードの塗りつぶしの色をRGB16進で指定します。この値は、ツリーマップを正しく表示するのにも必要です。
fillPattern
: オプションとして使用する塗りつぶしパターンを指定します。パターンは白のバックグラウンドで描かれ、フォアグラウンドの色はfillColor
属性で指定された色を使用します。
groupLabelDisplay
: グループ・ラベルを表示する場所を指定します。デフォルトでは、この属性はheader
に設定されており、ラベルをグループ・ヘッダー上に表示します。これをoff
に設定してラベル表示を消したり、node
に設定してラベルをノード内に表示することもできます。
label
: ノードのラベルを指定します。
labelDisplay
: ノード・ラベルを表示する場所を指定します。デフォルトでは、この属性はnode
に設定され、ラベルをノード内部に表示しますが、off
に設定してラベルの表示を消すこともできます。
labelHalign
、labelStyle
およびlabelValign
属性を設定することにより、ラベル表示をさらにカスタマイズできます。
ツリーマップ・ノード・ヘッダー(dvt:treemapNodeHeader
): ツリーマップ・ノードのオプションとしての子。この属性を追加して、次のノード・ヘッダーの属性を構成します。
isolate
: デフォルトでは、この属性はon
に設定されていますが、off
に設定して独立性のサポートを無効化することができます。
labelStyle
: フォント・スタイルを指定します。
useNodeColor
: デフォルトでは、この属性はoff
に設定されています。ノードの色をヘッダーに表示するには、これをon
に設定します。
titleHalign
: ヘッダーの中でタイトルを表示する場所を指定します。デフォルトではこの値はstart
に設定され、左から右モードではタイトルを左揃えに配置し、右から左モードでは右揃えに配置します。
属性グループ(dvt:attributeGroup
): ツリーマップ・ノードのオプションとしての子。この属性を追加し、fillColor
およびfillPattern
の値を、データ・セットのカテゴリのバケットや連続的な種別に基づき自動的に生成します。
サポートされるファセット: ツリーマップあるいはツリーマップ・ノードのオプションとしての子。ツリーマップ
・コンポーネントはポップアップ・コンポーネントの表示のためにファセットをサポートし、ツリーマップのノード
・コンポーネントは、ツリーマップ・ノードのラベルが十分でない場合に詳細を追加するための、コンテンツ・ファセットをサポートします。
ツリーマップは、他のDVTコンポーネントと同じ機能およびタグの多くも共有します。ツリーマップ・タグの完全なリストについては、Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Facesを参照してください。
簡単なUI-first開発を使用してページを設計する場合は、コンポーネント・パレットを使用してツリーマップをJSFに追加してください。ツリーマップ・コンポーネントをページにドラッグ・アンド・ドロップすると、「ツリーマップの作成」ダイアログが表示されます。図32-27に、「ツリーマップの作成」ダイアログを示します。
ユーザーがOKをクリックすると、ツリーマップがページに追加され、プロパティ・インスペクタを使用してデータの値の指定、および追加の表示属性の構成ができます。または、作成の間にデータのバインドを選択でき、ダイアログを使用して関連するノード・データの構成ができます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図32-28に、ツリーマップのvalue
属性のドロップダウン・メニューを示します。
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してツリーマップを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。 |
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。
次のタスクを実行する必要があります。
2.2項「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
2.4項「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
ページにツリーマップを追加するには:
コンポーネント・パレットの「ADFデータ視覚化」ページで、「共通」パネルからツリーマップ
・コンポーネントをページにドラッグ・アンド・ドロップし、ツリーマップの作成ダイアログを開きます。
「ツリーマップの作成」ダイアログで、OKをクリックし、ツリーマップをページに追加します。
オプションで、そのダイアログを使用してデータを今すぐバインドを選択し、ツリーマップに表示するデータを表すADFデータ・コントロールをナビゲートして、ツリーマップをバインドします。このオプションを選択すると、ダイアログのデータ・バインディングのフィールドが編集のために使用可能になります。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、ツリーマップの属性を見ます。ヘルプ・ボタンを使用して、ツリーマップ
・コンポーネントのタグの完全なドキュメントを表示します。
外観の項を開き、次の属性の値を入力します。
レイアウト: この属性のドロップダウン・メニューを使用して、デフォルトのレイアウトをsquarified
からsliceAndDiceHorizontal
またはsliceAndDiceVertical
に変更します。
ツリーマップ・レイアウトのサンプル・イメージについては、32.1.2.1項「ツリーマップとサンバーストのレイアウト」を参照してください。
サマリー ツリーマップの目的およびスクリーン・リーダーで使用する場合の構造のサマリーを入力します。
コンポーネント・パレットからツリーマップをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合は、JDeveloperはタグの最小セットしか生成しません。例32-4に、生成されるコードを示します。
例32-4 UI-First開発におけるツリーマップのサンプル・コード
<dvt:treemap id="t1"> <dvt:treemapNode id="tn1"/> </dvt:treemap>
ツリーマップの作成時にデータとデータ・コントロールのバインドを選択した場合、JDeveloperはデータ・モデルに基づきコードを生成します。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。
サンバースト
・コンポーネントを使用するには、をサンバーストページに追加し、JDeveloperにおける追加の構成を完成させます。
サンバースト
・コンポーネントは、ツリーマップの表示や動作をカスタマイズするために追加したり修正したりすることのできる構成可能な属性や子コンポーネントを持ちます。接頭辞dvt:
は、各ツリーマップ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
サンバーストの子コンポーネント、属性およびサポートされているファセットを次のエリアで構成できます。
サンバースト(dvt:sunburst
): サンバースト・ノードを折り返します。次の属性を構成してサンバーストの表示をコントロールします。
ラベル: colorLabel
およびsizeLabel
属性を使用してサンバーストの色とサイズのメトリックを特定します。サンバーストには、これらのラベルが凡例表示に必要です。
凡例ソース(legendSource
): この属性を、属性グループで構成されたサンバーストでの凡例表示に使用します。属性グループのIDを指定します。
子レベルの表示(displayLevelsChildren
): 表示する子レベルの数を指定します。デフォルトでは、サンバーストはルートと最初の2つの子レベルを表示します。
アニメーション: animationOnDisplay
属性を使用して初期のアニメーションをコントロールし、animationOnDataChange
属性を使用してその後のアニメーションをコントロールします。アニメーション期間をデフォルトの500ミリ秒から変更するには、animationDuration
属性を修正します。
ローテーション (rotation
): クライアント側のサンバーストのローテーションを可能にするのにこの属性を使用します。
開始角度(startAngle
): サンバーストの開始角度を指定します。
空テキスト(emptyText
): emptyText
属性を使用して、サンバースト・ノードにデータが含まれない場合に表示するテキストを指定します。
ソート(sorting
): 同じ親を持つ全ノードを、サイズが小さくなる方向にソートするのにこの属性を使用します。
その他のグループ: otherThreshold
、otherThresholdBasis
、otherColor
およびotherPattern
属性を使用して、子のデータをその他のノ-ドに集計します。
サンバースト・ノード(dvt:sunburstNode
): サンバースト
・コンポーネントの子。このタグはサンバーストの各ノードのサイズと色を定義し、データ・モデルでの各行にスタンプされます。行によりスタンプを変更する場合、ADF Faces af:switcher
コンポーネントを使用し、各行にサンバースト・ノードを挿入します。次の属性を構成してノードの表示をコントロールします。
value
(必須): サンバースト・ノードの値を指定します。この値はサンバースト内のノードの相対的なサイズを決定します。
fillColor
(必須): ノードの塗りつぶしの色をRGB16進で指定します。この値は、サンバーストを正しく表示するのにも必要です。
fillPattern
: オプションとして使用する塗りつぶしパターンを指定します。パターンは白のバックグラウンドで描かれ、フォアグラウンドの色はfillColor
属性で指定された色を使用します。
label
: ノードのラベルを指定します。
labelDisplay
: ノード・ラベルがどのようにを表示されるかを指定します。デフォルトでは、この属性はauto
に設定されていて、クライアントがローテーションしたテキストをサポートしている場合、サンバーストではノード内にローテーションしたラベルが表示されます。クライアントがローテーションしたテキストをサポートしていない場合、サンバーストではノード内にラベルが水平に表示されます。これをoff
に設定してラベル表示を消したり、on
に設定してノード内でラベルを水平に表示したり、rotated
に設定してローテーションしたラベルを表示することもできます。
注意: ローテーションしたテキストは、すべてのクライアント・テクノロジでサポートされているわけではありません。特に、ローテーションしたテキストは、Flashのイメージ形式を使用するクライアントでサポートされません。クライアントがローテーションしたテキストをサポートしていない場合、labelDisplay属性がauto またはrotated に設定されていても、サンバーストではノード内にラベルが水平に表示されます。 |
labelHalign
: ノードのラベルの配置を指定します。デフォルトではこの属性はcenter
に設定されおり、ラベルをノード・スライスの中央に配置します。これをinner
に設定してラベルをスライスの内側に配置したり、outer
に設定してラベルをスライスの外側に配置することもできます。
radius
: 他のノードに対して相対的なノードの半径を指定します。デフォルトでは、この属性は1
に設定されています。値を指定したり、ノードの半径を返すEl式を入力することもできます。
属性グループ(dvt:attributeGroup
): サンバースト・ノードのオプションとしての子。この属性を追加し、fillColor
およびfillPattern
の値を、データ・セットのカテゴリのバケットや連続的な種別に基づき自動的に生成します。
サポートされるファセット: サンバーストあるいはサンバースト・ノードのオプションとしての子。サンバースト
・コンポーネントはポップアップ・コンポーネントの表示のためにファセットをサポートし、サンバーストのノード
・コンポーネントは、サンバースト・ノードのラベルが十分でない場合に詳細を追加するための、コンテンツ・ファセットをサポートします。
サンバーストは、他のDVTコンポーネントと同じ機能およびタグの多くも共有します。サンバースト・タグの完全なリストについては、Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Facesを参照してください。
簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用してサンバーストをJSFページに追加します。サンバースト・コンポーネントをページにドラッグ・アンド・ドロップすると、「サンバーストの作成」ダイアログが表示されます。図32-29に、「サンバーストの作成」ダイアログを示します。
ユーザーがOKをクリックすると、サンバーストがページに追加され、プロパティ・インスペクタを使用してデータの値の指定、および追加の表示属性の構成ができます。または、作成の間にデータのバインドを選択でき、ダイアログを使用して関連するノード・データの構成ができます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図32-30に、サンバーストのvalue
属性のドロップダウン・メニューを示します。
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してサンバーストを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。 |
始める前に:
サンバーストの属性やサンバーストの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを実行する必要があります。
2.2項「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
2.4項「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
ページにサンバーストを追加するには、
コンポーネント・パレットの「ADFデータ視覚化」ページで、「共通」パネルからサンバースト
・コンポーネントをページにドラッグ・アンド・ドロップし、サンバーストの作成ダイアログを開きます。
サンバーストの作成ダイアログで、OKをクリックし、サンバーストをページに追加します。
オプションで、そのダイアログを使用してデータを今すぐバインドを選択し、サンバーストに表示するデータを表すADFデータ・コントロールをナビゲートして、サンバーストをバインドします。このオプションを選択すると、ダイアログのデータ・バインディングのフィールドが編集のために使用可能になります。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、サンバーストの属性を見ます。ヘルプ・ボタンを使用して、sunburst
コンポーネントの完全なタグ・ドキュメントを表示します。
「外観」セクションを開き、Summary属性の値を設定します。
サンバーストの目的およびスクリーン・リーダーで使用する場合の構造を説明するテキストを入力します。または、属性のドロップダウン・メニューから「テキスト・リソースの選択」または「式ビルダー」を選択し、テキスト・リソースまたはEL式を選択します。
その他の項を開き、次の属性の値を設定します。
ローテーション: ドロップダウン・メニューを使用して、サンバーストでローテーションを可能にするかどうかを指定します。デフォルトでは、この属性はon
に設定されていますが、off
に設定してローテーションのサポートを無効化することもできます。または、属性のドロップダウン・メニューから式ビルダーを選び、ローテーションを設定するEL式を作成します。
StartAngle: サンバーストの開始角度を入力します。デフォルトでは、この角度は90に設定されていますが、0から360までの任意の値を入力することができます。または、属性のドロップダウン・メニューから式ビルダーを選び、開始角度を設定するEL式を作成します。
コンポーネント・パレットからサンバーストをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合は、JDeveloperはタグの最小セットしか生成しません。例32-5に、生成されるコードを示します。
例32-5 UI-First開発におけるサンバーストのサンプル・コード
<dvt:sunburst id="s1"> <dvt:sunburstNode id="sn1"/> </dvt:sunburst>
サンバーストの作成時にデータとデータ・コントロールのバインドを選択した場合、JDeveloperはデータ・モデルに基づきコードを生成します。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。
UI-first開発を使用してツリーマップあるいはサンバーストにデータを追加するには、ツリー・モデルを作成してJDeveloperにおけるクラス、Beanあるいはメソッドを参照する、クラス、マネージドBean、およびメソッドを作成します。
ツリーマップとサンバーストは同じデータ・モデルを使用しているので、ツリーマップとサンバーストにデータを追加するプロセスは類似しています。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
ページにツリーマップあるいはサンバーストを追加します。ページにツリーマップを追加する際のヘルプについては、32.2.2.2項「ツリーマップのページへの追加方法」を参照してください。ページにサンバーストを追加する際のヘルプについては、32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
UI-first開発においてツリーマップあるいはサンバースト・コンポーネントにデータを追加するには:
ツリーマップのツリー・モデルを定義しツリーマップにデータを供給するクラスおよびマネージドBeanを作成します。その他の詳細および例については、32.2.1項「ツリーマップとサンバーストのデータ要件」を参照してください。マネージドBeanの詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションで、DisplayLevelsChildren属性に値を入力し、ツリーマップに表示される子レベルの数を変更します。デフォルトでは、この値は2
に設定されています。
たとえば、国勢調査データの例におけるツリーマップとサンバーストは、地域、地区および州の表現に3つの子レベルを持ち、この例を複製するには、この値を3
に設定します。
共通の項で、次の属性を設定します。
Value: オブジェクトをツリーマップあるいはサンバーストのどちらにバインドするかを示すEL式を指定します。これは、org.apache.myfaces.trinidad.model.TreeModel
のインスタンスである必要があります。
たとえば、ツリーマップあるいはサンバーストをインスタンス化するために作成したマネージドBeanを参照します。国勢調査のデータの例では、ツリーマップのマネージドBeanはtreemap
と名付けられ、国勢調査のデータはそのツリーマップが参照されたときにインスタンス化されます。国勢調査のデータの例をツリーマップで使用するには、以下をEL式のValueフィールドに入力します。#{treemap.censusData}
。
EL式の作成のヘルプについては、第2.5.1項「EL式の作成方法」を参照してください。
Var: レンダリング・フェーズの間に使用される変数の名前を入力し、ツリーマップ・コレクションの各要素を参照します。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
たとえば、国勢調査のデータの例での各要素を参照するため、row
をVarフィールドに入力します。
VarStatus: オプションとして、レンダリング・フェーズの変数の名前を入力し、コレクション・モデルやループ・カウンタ情報など、コンポーネントの状態に関するコンテキスト情報にアクセスします。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
構造ウィンドウでdvt:treemapNodeノードまたはdvt:sunburstNodeを右クリックし、プロパティに移動を選択します。
共通の項でValue属性のドロップダウン・メニューを使し、式ビルダーを選択してください。
「式ビルダー」ダイアログで、ツリーマップあるいはサンバースト・ノードのサイズ・データを参照するEL式を作成し、このとき、ノードのサイズを戻すために作成したコンポーネントやメソッドの作成の際にVar
属性に指定した変数を使用します。
たとえば、国勢調査のデータの例では、Var
属性はrow
と名付けられ、m.size
変数に保存され、TreeNode
クラスのgetSize()
メソッドにより返されます。これを、例32-1「ツリーマップあるいはサンバーストのツリー・ノード作成のためのコード・サンプル」に示します。国勢調査のデータの例におけるサイズ・データを参照するには、次の式を作成します。#{row.size}
。
プロパティ・インスペクタで、外観の項を開き、次の属性の値を入力します。
FillColor: ノードの塗りつぶしの色を指定します。色をRGB16進で入力するか、属性のドロップダウン・メニューを使用して式ビルダーを選び、EL式を作成することができます。
たとえば、#FF0000
を入力すればノード塗りつぶしの色を赤に設定できます。しかしながら、ツリーマップまたはサンバースト・ノードに、色メトリックに基づいた色変更をすることがあります。32.1.1項「米国の地域別人口と所得中央値を表示するツリーマップ」の国勢調査のデータの例では、塗りつぶしの色は所得データから計算されます。
例32-6に、国勢調査のデータ例使用したサンプルのメソッドを示します。式ビルダーでこのサンプルを参照するには、次の式を作成します。#{row.color}
。
例32-6 ツリーマップあるいはサンバーストのノードの塗りつぶしの色を設定するサンプルのメソッド
import java.awt.Color; private static Color getColor(double value, double min, double max) { double percent = Math.max((value - min) / max, 0); if(percent > 0.5) { double modifier = (percent - 0.5) * 2; return new Color((int)(modifier*102), (int)(modifier*153), (int)(modifier*51)); } else { double modifier = percent *2; return new Color((int)(modifier*204), (int)(modifier*51), 0); } }
Label: ノードのラベルを指定します。テキストを入力するか、属性のドロップダウン・メニューを使用して式ビルダーを選び、EL式を作成できます。
たとえば、国勢調査のデータの例では、ラベル表示のためにノード・データを文字列に変換するメソッドを使用しています。例32-3に、convertToString
()メソッドを示します。TreeNode
クラスはconvertToString()
メソッドからの出力を使用し、ラベル表示に使用されるtext
変数を設定します。式ビルダーでこのサンプルを参照するには、次の式を作成します。#{row.text}
。
注意: 属性グループを使用してfillColor およびlabel 属性を設定することもできます。属性グループの使用はオプションですが、ツリーマップまたはサンバーストの色やパターンを所得の高低などの条件に基づいて変更する場合、使用する必要があります。属性グループの構成の詳細は、32.4.3.1項「ツリーマップおよびサンバーストの離散属性グループの構成方法」を参照してください。 |
この章の例では、データをツリーマップおよびサンバーストに入力するのにクラスおよびマネージドBeanを使用します。アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してサンバーストを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた階層ビューアの作成に関する項を参照してください。
また、最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合は、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。
ツリーマップとサンバーストの表示要素は構成が可能で、これにはパターン、属性グループ、凡例、ラベル、アニメーション、小さいデータ・コントリビュータの集計、スキニング、サイジング、およびノードのサイズによる順序付けが含まれます。
ツリーマップおよびサンバーストのサイズおよびスタイルを、inlineStyle
あるいはstyleClass
属性を使用して構成できます。どちらの属性も、プロパティ・インスペクタのスタイルの項で、dvt:treemap
あるいはdvt:sunburst
コンポーネントで使用可能です。これらの属性を使用して、フォント、境界線、およびバックグラウンド要素など、スタイルに関する機能をカスタマイズできます。
inlineStyle
またはstyleClass
属性の使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ツリーマップあるいはサンバーストを含むページには、サイズあるいはスタイルを変更する機能に制約のある場合があります。ページ・レイアウトの詳細は、第8章「Webページ上のコンテンツの編成」を参照してください。
ツリーマップとサンバーストは、コンポーネントのトップ・レベルだけでなく、ノード、ノード・ヘッダー、およびツリーマップを分離したりサンバーストを開いたり閉じたりするのに使用するアイコンについても、色やフォント・スタイルをカスタマイズするためのスキニングもサポートします。ユーザーがノードやノード・ヘッダーをマウスでホバーしたり選択したりしたときの、ツリーマップあるいはサンバーストのノード、あるいはツリーマップのノード・ヘッダーについて、スタイルを定義するためにもスキニングを使用できます。ノードやノード・ヘッダーがドリル可能である場合は、ユーザーがノードやノード・ヘッダーをマウスでホバーしたり選択したりしたときのスタイルを定義するためにスキニングを使用できます。
例32-7は、ユーザーがノードを選択したときにノードのテキストそれを太字で表示するように構成されたサンバーストのスキニング・キーを示します。
ツリーマップとサンバーストのスキニング・キーの完全なリストについては、Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Faces Skin Selectorsを参照してください。スキニングとスタイルを使用したアプリケーションのカスタマイズの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ツリーマップあるいはサンバースト・ノードがパターンを表示するように構成できます。利用可能なパターンは以下です。
none
(デフォルト)
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
ツリーマップあるいはサンバースト・ノードでのパターン表示を構成するには、fillPattern
属性をdvt:treemapNodeあるいはdvt:sunburstNodeノード上で指定します。離散属性グループを使用して塗りつぶしパターンを指定することもできます。離散属性グループの詳細は、32.4.3.1項「ツリーマップおよびサンバーストの離散属性グループの構成方法」を参照してください。
データ・セットのカテゴリ分類に基づいて色または形状などのスタイル属性値を生成するために属性グループを使用します。ツリーマップおよびサンバーストは、子ノードの色やパターンの設定のため、離散および連続の両方の属性グループをサポートします。
色やパターンを所得レベルの高低などの所定の条件に依存させたい場合には、離散属性グループを使用します。色を高低値の間で徐々に変化させたい場合には、連続属性グループを使用します。
dvt:attributeGroups
タグをユーザーのツリーマップあるいはサンバーストに追加し、色またはパターンが表示される条件を定義することにより、離散属性グループを構成します。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップあるいはサンバーストの離散属性グループを構成するには、
構造ウィンドウで「dvt:treemapNode」または「dvt:sunburstNode」ノードを右クリックし、「dvt:<component>Nodeの中に挿入」→「属性グループ」を選択します。
たとえば、ツリーマップの離散属性グループを構成するには、dvt:treemapNodeノードを右クリックし、「dvt:treemapNodeの中に挿入」→「属性グループ」を選択します。
dvt:attributeGroups要素を右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。
Value属性のドロップダウン・メニューから、式ビルダーを選択し、色表示をコントロールする色メトリックと条件を参照する式を作成します。
たとえば、図32-5に示すように所得レベルの中間値が$50,000より高いか低いかでツリーマップに異なる色を表示させたい場合は、Valueフィールドに次の式と類似の式を作成します。
#{row.income > 50000}
EL式の作成のヘルプについては、第2.5.1項「EL式の作成方法」を参照してください。
Label属性のドロップダウン・メニューから、式ビルダーを選択し、離散色あるいはパターンが表すものを説明する凡例の式を作成します。
たとえば、色が所得レベルの中間値の高低を表すことをユーザーに知らせるには、次の式と類似の式をLabelフィールドに作成します。
#{row.income > 50000 ? 'High Income' : 'Low Income'}
タイプ属性のドロップダウン・メニューから、編集を選択します。
「属性の編集」ダイアログから、色、パターン、あるいは両方を選び、OKをクリックします。
色とパターンの両方を選び、即時にページを作成する場合、ツリーマップあるいはサンバーストは離散属性グループにデフォルトの色およびパターンを使用します。
例32-31に、国勢調査のデータ例で,デフォルトの色とパターンを受け入れた場合に表示されるツリーマップを示します。
オプションとして、属性グループのデフォルトの色を変更するには、以下を実行します。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、dvt:attributeGroupsの中に挿入→属性合致ルールを選択します。
dvt:attributeMatchRule
タグは、データが所定の条件に合致したときに属性を置き換えるのに使用されます。国勢調査データの例では、この条件は$50,000より高い所得の中間値です。
dvt:attributeMatchRule要素を右クリックし、プロパティに移動を選択します。
「グループ」フィールドで、条件がTrueのときにその色を表示する場合はtrue
を入力し、条件がFalseのときにその色を表示する場合はfalse
を入力します。
たとえば、国勢調査データの例で所得の中間値が50000より高いときに表示する色を選ぶには、true
を入力します。
構造ウィンドウでdvt:attributeMatchRule要素を右クリックし、dvt:attributeMatchRuleの中に挿入→属性を選択します。
「属性を挿入」ダイアログで、color
を「名前」フィールドに入力し、色を「値」フィールドに入力し、「OK」をクリックします。
値のフィールドは、6桁のRGB16進値を受け入れます。たとえば、値を緑に設定するには、valueフィールドに以下を入力します。#00AA00
。
残りの半分の条件についてデフォルトの色を変更する場合、ステップ1からステップ5を繰り返します。
たとえば、所得が50000より低い場合に表示する色を定義する別の合致ルールを定義し、Groupフィールドをfalse
に設定します。
オプションとして、属性グループのデフォルトのパターンを変更するには、以下を実行します。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、dvt:attributeGroupsの中に挿入→属性合致ルールを選択します。
dvt:attributeMatchRule要素を右クリックし、プロパティに移動を選択します。
「グループ」フィールドで、条件がTrueのときにそのパターンを表示する場合はtrue
を入力し、条件がFalseのときにそのパターンを表示する場合はfalse
を入力します。
構造ウィンドウでdvt:attributeMatchRule要素を右クリックし、dvt:attributeMatchRuleの中に挿入→属性を選択します。
属性を挿入ダイアログで、pattern
をnameフィールドに入力し、サポートされているパターンをvalueフィールドに入力し、OKをクリックします。
たとえば、value
フィールドにsmallDiamondを入力し、パターンを小ダイアモンドにします。利用可能なパターンのリストついては、32.4.2.項「パターン表示の構成」を参照してください。
残りの半分の条件についてデフォルトの色を変更する場合、ステップ1からステップ5を繰り返します。
たとえば、所得が50000より低い場合に表示する色を定義する別の合致ルールを定義し、Groupフィールドをfalse
に設定します。
図32-8に、図32-5「離散属性グループを表示するツリーマップ」で示したツリーマップで離散属性グループを構成した場合のJSFページ上のコードを示します。
例32-8 離散属性グループのJSFページ上のサンプル・コード
<dvt:treemap id="t1" summary="SampleTreemap" value="#{treemap.censusData}" var="row" colorLabel="Median Household Income" sizeLabel="Population" displayLevelsChildren="3" emptyText="No Data to Display" legendSource="ag1"> <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}"><dvt:attributeGroups id="ag1" value="#{row.income > 50000}"
label="#{row.income > 50000 ? 'High Income' : 'Low Income'}"
type="color">
<dvt:attributeMatchRule id="amr1" group="true">
<f:attribute name="color" value="#00AA00"/>
</dvt:attributeMatchRule>
<dvt:attributeMatchRule id="amr2" group="false">
<f:attribute name="color" value="#AA0000"/>
</dvt:attributeMatchRule>
</dvt:attributeGroups>
<f:facet name="content"/> </dvt:treemapNode> </dvt:treemap>
dvt:attributeGroups
タグをユーザーのツリーマップあるいはサンバーストに追加し、データの範囲の最小および最大レベルで表示される色を定義することにより、連続属性グループを構成します。属性グループはデータを使用してデータ範囲を決め対応する値で凡例にラベルを表示しますが、異なる範囲やラベルを使用するように属性グループを構成することもできます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップあるいはサンバーストの連続属性グループを構成するには、
構造ウィンドウで「dvt:treemapNode」または「dvt:sunburstNode」ノードを右クリックし、「dvt:<component>Nodeの中に挿入」→「属性グループ」を選択します。
たとえば、ツリーマップの連続属性グループを構成するには、dvt:treemapNodeノードを右クリックし、dvt:treemapNode内部に挿入→「属性グループ」を選択します。
dvt:attributeGroups要素を右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。
「値」属性のドロップダウン・メニューから、「式ビルダー」を選択し、色メトリックを参照する式を入力します。
たとえば、国勢調査の例から所得データを返すEL式を指定するには、「式ビルダー」を選び、次の値をValueフィールドに入力します。#{row.income}
。EL式の作成のヘルプについては、第2.5.1項「EL式の作成方法」を参照してください。
「タイプ」フィールドには、color
を入力します。
「属性タイプ」フィールドでは、属性のドロップダウン・メニューを使用して、continuous
を選択します。
オプションとして、次の最小あるいは最大の範囲、およびラベルに値を設定します。
MinValue: 範囲の最小の境界を入力します。または、属性のドロップダウン・メニューから式ビルダーを選び、最小の境界を返す式を入力します。
たとえば、35000をMinValueフィールドに入力し、範囲の低い方の境界を35,000に設定します。
MaxValue: 範囲の最大の境界を入力します。または、属性のドロップダウン・メニューから式ビルダーを選び、最大の境界を返す式を入力します。
MinLabel: 凡例で表示する最小値のラベルを入力します。または、属性のドロップダウン・メニューからテキスト・リソースの選択あるいは式ビルダーを選び、テキスト・リソースまたはEL式を選択します。
たとえば、$35000
をMinLabelフィールドに入力し、凡例に表示されるラベルを$35000に設定します。
MaxLabel: 凡例で表示する最大値のラベルを入力します。または、属性のドロップダウン・メニューからテキスト・リソースの選択あるいは式ビルダーを選び、テキスト・リソースまたはEL式を選択します。
最小および最大の境界で使用される色を定義するには、以下を実行します。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、dvt:attributeGroupsの中に挿入→属性を選択します。
「属性を挿入」ダイアログでcolor1
を最小の境界の名前と値に入力し、OKをクリックします。
値のフィールドは、6桁のRGB16進値を受け入れます。たとえば、最小の境界の値を黒に設定するには(この色は図32-1の属性グループで使用された色)、valueフィールドに以下を入力します。#000000
。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、dvt:attributeGroupsの中に挿入→属性を選択します。
「属性を挿入」ダイアログでcolor2
を最大の境界の名前と値に入力し、OKをクリックします。
値のフィールドは、6桁のRGB16進値を受け入れます。たとえば、最大の境界の値を薄い緑に設定するには(この色は図32-1の属性グループで使用された色)、valueフィールドに以下を入力します。#00AA00
。
図32-9に、図32-1に示した連続属性グループを構成した場合のJSFページ上のコードを示します。
例32-9 連続属性グループのJSFページ上のサンプル・コード
<dvt:treemap id="t1" summary="SampleTreemap" value="#{treemap.censusData}" var="row" colorLabel="Median Household Income" sizeLabel="Population" displayLevelsChildren="3" emptyText="No Data to Display" legendSource="ag1"> <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}"><dvt:attributeGroups id="ag1" value="#{row.income}" type="color"
attributeType="continuous" minValue="35000"
maxValue="70000" minLabel="$35000" maxLabel="$70000">
<f:attribute name="color1" value="#000000"/>
<f:attribute name="color2" value="#00AA00"/>
</dvt:attributeGroups>
<f:facet name="content"/> </dvt:treemapNode> </dvt:treemap>
Otherノードを使用して表示のためにノードを集計する場合、Otherノードは構成された属性グループの色やパターンを使用しません。詳細は、32.4.5.2項「ツリーマップおよびサンバーストのその他のノードの構成に関する必知事項」を参照してください。
次の属性の値を指定すると、凡例は自動的に表示されます。
sizeLabel
: コンポーネントのサイズ・メトリックを説明するテキストを指定します。または、属性のドロップダウン・メニューから「テキスト・リソースの選択」または「式ビルダー」を選択し、テキスト・リソースまたはEL式を選択します。
colorLabel
: コンポーネントの色メトリックを説明するテキストを指定します。または、属性のドロップダウン・メニューから「テキスト・リソースの選択」または「式ビルダー」を選択し、テキスト・リソースまたはEL式を選択します。
legendSource
: オプションとして、ツリーマップあるいはサンバーストの表示で使用される属性グループのIDを指定します。
ユーザーのツリーマップあるいはサンバーストが属性グループを使用しない場合は、凡例の表示はユーザーがサイズと色ラベルに指定したテキスト記述に限定されます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップあるいはサンバーストの凡例を構成するには、
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。
SizeLabelフィールドに、サイズ・メトリックを説明するために凡例が表示するテキストを入力します。
たとえば、人口
をSizeLabelフィールドに入力し、ツリーマップあるいはサンバーストのノードのサイズは人口に基づいていることを示します。
ドロップダウン・メニューを使用して、テキスト・リソース、あるいは「式ビルダー」ダイアログからEL式を選択します。たとえば、国勢調査の例からサイズを返すEL式を指定するには、式ビルダーを選び、次の値をSizeLabelフィールドに入力します。#{row.size}
。EL式の作成のヘルプについては、第2.5.1項「EL式の作成方法」を参照してください。
ColorLabelフィールドに、色メトリックを説明するために凡例が表示するテキストを入力します。
たとえば、家計所得の中間値
をColorLabelフィールドに入力し、ツリーマップあるいはサンバーストのノードのサイズは人口に基づいていることを示します。
またはドロップダウン・メニューを使用してテキスト・リソースを入力するか、式ビルダーから式を選択します。たとえば、国勢調査の例から色を返すEL式を指定するには、式ビルダーを選び、次の値をColorLabelフィールドに入力します。#{color.size}
。
ユーザーのツリーマップあるいはサンバーストが属性グループを使用する場合は、次のようにattributeGroups
コンポーネントのIDを参照します。
LegendSource属性のドロップダウン・メニューから、編集を選択します。
「プロパティの編集 - LegendSource」ダイアログで、各コンポーネントを開き、attributeGroups
コンポーネントを見つけます。
attributeGroups
コンポーネントを選び、OKをクリックします。
その他のノードを、小さなデータ・セットを1つの大きなセットに集計し、比較を容易にするのに使用します。ノードの親の大きさ、またはツリーマップやサンバースト・コンポーネントのルート・ノードの大きさに基づいてデータ・セットを集計できます。
次の属性の値を設定して、ツリーマップやサンバーストの「その他」のノードを構成します。
otherThreshold
: その下でノードが「その他」のノードに集計される、親ノードまたはルート・ノードのパーセンテージを指定します。有効な値は0から1の範囲です。
たとえば、0.1
の値により、親の値の10%未満のすべてのノードが「その他」のノードに集計されます。図32-16では、otherThresholdは.08
すなわち8パーセントに設定され、これによりSouth Carolina、Delaware、West VirginiaおよびDistrict of ColumbiaノードをSouth Atlantic地域に集計します。
この値を0.1
あるいは10%に増やすと、Marylandノードが集計に追加されます。図32-32に、otherThreshold
属性が0.1
に設定された、同じツリーマップを示します。
OtherThresholdBasis
: ルート・ノードのパーセンテージまたはサンバーストやツリーマップ・ノードの親ノードのパーセンテージのいずれかとして、otherThreshold
の値に適用される基準値を指定します。有効な値は次のとおりです。
parentPercentage
: otherThreshold
を適用するときに、ノードが親ノードの大きさと比較されます。これがデフォルトの動作、およびこのセクションの図に使用されている設定です。
たとえば、ツリーマップのいずれかのノードが「その他」のノードに親を持つ場合、そのレベルにドリル・ダウンすると、そのノードの値にかかわらず、子ノードは「その他」のノードに集計されます。2つの子ノードが同じ値を持ち、1つのノードの親が「その他」のノードである場合、その子ノードは「その他」のノードに集計されます。
rootPercentage
: otherThreshold
を適用するときに、ノードがツリーマップまたはサンバーストのルートの大きさと比較されます。
たとえば、OtherThresholdを0.1
に設定すると、その値がサンバースト表示の合計の10%より小さいすべてのノードは、それらの親の大きさにかかわらず「その他」に含まれます。
otherColor
: 現在のその他
のノードに含まれるすべてのノードのRowKeySetを受け取り、その他
のノードの色のStringを返すメソッドへの参照を指定します。
たとえば、国勢調査のデータの例では、その他のノードに含まれる全ノードの所得の中間値を計算するメソッドを使用しています。家計所得の中間値が50,000未満の場合は、メソッドは低所得を表示するのに使用された、ツリーマップの集計されなかったノードと同じ色の値を返します。その他のノード上の色が図32-32でどのように変化し、Marylandノードがその他のノードに含まれるとき、高い所得の中間値を反映するかに注意してください。
例32-10に、国勢調査のデータ例で所得の中間値に基づきotherColor
の値を指定するサンプルのメソッドを示します。
例32-10 ツリーマップのotherColorの値を設定するサンプルのメソッド
import org.apache.myfaces.trinidad.model.RowKeySet; import org.apache.myfaces.trinidad.model.TreeModel; public String otherColor(RowKeySet set) { // The color should be the mean income of the contained regions. Note that it should actually // be the median, but we can't calculate that with the available information. TreeModel tree = getCensusRootData(); // Loop through and get the population + average income double population = 0; double average = 0; for(Object rowKey : set) { CensusData.CensusTreeNode item = (CensusData.CensusTreeNode) tree.getRowData(rowKey); population += item.getSize().doubleValue(); average += item.getSize().doubleValue() * item.getIncome(); } // Calculate the average average = average / population; // Match the attr groups used by the demos return average > 50000 ? "#CC3300" : "#003366"; }
otherPattern
: オプションで、現在のその他
のノードに含まれるすべてのノードのRowKeySetを受け取り、その他
のノードのパターンのStringを返すメソッドへの参照を指定します。
例32-11に、その他
のノードの塗りつぶしパターンをsmallDiamondに設定するメソッドのサンプル・コードを示します。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
現在のその他
のノードに含まれるすべてのノードのRowKeySetを受け取り、その他
のノードの色のStringを返すメソッドを作成します。
米国国勢調査のデータの例を使用するには、例32-10のサンプル・メソッドをマネージドBeanに追加します。
マネージドBeanについてのヘルプが必要な場合、2.6項「マネージドBeanの作成と使用」を参照してください。
オプションとして、現在のその他
のノードに含まれるすべてのノードのRowKeySetを受け取り、その他
のノードのパターンのStringを返すメソッドを作成します。
米国国勢調査のデータの例を使用するには、例32-11のサンプル・メソッドをマネージドBeanに追加します。
ツリーマップまたはサンバーストに「その他」のノードを追加するには:
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、その他の項を開き、次の属性の値を入力します。
OtherThreshold: 集計の対象とするノードのパーセンテージを、0から1の間の値で入力します。
OtherThresholdBasis: サンバーストまたはツリーマップ・コンポーネントのルート・ノードの大きさのパーセンテージとしてotherThreshold
の値に適用されるデフォルトの基準値を変更するには、ドロップダウン・リストからrootPercentage
を選択します。有効な値は次のとおりです。
OtherColor: ドロップダウン・メニューから編集を選び、マネージドBeanとotherColor
属性を設定するメソッドを選択します。
たとえば、treemap
という名前のマネージドBeanとotherColor
という名前のメソッドには、OtherColorフィールドに、以下を入力します。#{treemap.otherColor}
。
OtherPattern: ドロップダウン・メニューから編集を選び、マネージドBeanとotherPattern
属性を設定するメソッドを選択します。
たとえば、treemap
という名前のマネージドBeanとotherPattern
という名前のメソッドには、OtherPatternフィールドに、以下を入力します。#{treemap.otherPattern}
。
その他のノードは個々のノードの集計であるため、子、属性グループ、選択、ツールチップ、およびポップアップ・サポートを管理するとき、他のツリーマップおよびサンバ-ストの子ノードとは、動作が異なります。特に、次の相違点を知っておく必要があります。
子ノード: ツリーマップまたはサンバースト・コンポーネントのotherThresholdBasis
属性を設定しないかぎり、集計されたノードの子は表示されません。
その他
のノード表示と属性グループ: 色やパターンの指定に属性グループを使用している場合、その色やパターンはその他のノード上には表示されません。その他のノードに属性グループと同じ色やパターンを表示する場合、表示する色やパターンを返すメソッドをマネージドBeanに作成する必要があります。
選択の動作: その他のノードは、ノード選択サポートをデフォルト値の複数選択から単一ノード選択に変更している場合、選択できません。
ツールチップ: ツールチップはその他のノード内のノードの数を表示し、カスタマイズできません。
ポップアップ: デフォルトでは、ポップアップはその他のノード上に表示されません。
ユーザーがノード上でポップアップを立ち上げると、そのノードはコンポーネント(とそのモデル)上で現在となり、アプリケーションによるコンテキストの決定が可能になります。ツリーマップとサンバーストは、af:showPopupBehavior
タグをコンテキスト決定のために使用しますが、このタグは複数のノードを現在にすることをサポートしていません。ツリーマップあるいはサンバーストにその他のノード上でポップアップを表示させたい場合は、getPopupContext()
メソッドをUITreemap
またはUISunburst
コンポーネント上で呼ぶメソッドをマネージドBean内に作成し、集計されたノードのコンテキストを決定する必要があります。
ソートは、ユーザーのツリーマップかサンバーストがその他のノードを使用する場合は、デフォルトで有効化されています。そうでない場合は、dvt:treemapあるいはdvt:sunburst sorting
属性を、「プロパティ・インスペクタ」でon
に設定して有効化する必要があります。
ツリーマップはスライスとダイスのレイアウトにおいてのみソートをサポートします。
ツリーマップあるいはサンバースト・ノード上のコンテンツ・ファセットを定義することにより、拡張ノード・コンテンツを構成します。
ツリーマップとサンバーストのいずれも、次のOracleアプリケーション開発フレームワーク・タグをサポートします。
af:image
af:outputText
af:panelGroupLayout
af:spacer
レイアウト上の理由により単一の子しかサポートされず、複数の子コンポーネントを折り返すには、af:panelGroupLayout
を使用する必要があります。このファセット内のコンポーネントには、対話型の動作もサポートされません。
dvt:treemapNode
ノード上でcontentファセットを定義することにより、ツリーマップ上の拡張ノード・コンテンツを構成します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。
ページにツリーマップを追加します。詳細は、32.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
拡張ノード・コンテンツをツリーマップに追加するには、
構造ウィンドウでdvt:treemapNodeを右クリックし、dvt:treemapNode内に挿入→ファセット・コンテンツを選択します。
ファセットを構造ウィンドウで構成するには、f:facet - contentノードを右クリックし、ファセット・コンテンツ内に挿入に次の1つを選びます。
イメージ
出力テキスト
パネル・グループ・レイアウト
スペーサ
1つ以上のコンポーネントを挿入するには、パネル・グループ・レイアウトを選び、ユーザーのアプリケーションの必要に応じてイメージ、出力テキスト、あるいはスペーサを追加します。パネル・グループ・レイアウト構成に関するヘルプについては、8.16.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。
イメージおよび出力テキスト構成上のヘルプについては、第16章「出力コンポーネントの使用方法」を参照してください。
dvt:sunburstNode
ノード上でrootContentファセットを定義することにより、ツリーマップ上の拡張ノード・コンテンツを構成します。
始める前に:
サンバーストの属性やサンバーストの子タグが機能に影響を与える可能性について理解しておくと役立ちます。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
ページにサンバーストを追加します。詳細は、32.2.3.2項「ページにサンバーストを追加する方法」を参照してください。
拡張ノード・コンテンツをサンバーストに追加するには、
構造ウィンドウでdvt:sunburstノードを右クリックし、dvt:sunburstNode内に挿入→ファセット・ルート・コンテンツを選択します。
ファセットを構造ウィンドウで構成するには、f:facet - contentノードを右クリックし、ファセット・ルート・コンテンツ内に挿入に次の1つを選びます。
イメージ
出力テキスト
パネル・グループ・レイアウト
スペーサ
1つ以上のコンポーネントを挿入するには、パネル・グループ・レイアウトを選び、ユーザーのアプリケーションの必要に応じてイメージ、出力テキスト、あるいはスペーサを追加します。パネル・グループ・レイアウト構成に関するヘルプについては、8.16.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。
イメージおよび出力テキスト構成上のヘルプについては、第16章「出力コンポーネントの使用方法」を参照してください。
ツリーマップとサンバーストは、複数のタイプのアニメーションをサポートします。デフォルトではアニメーションは表示されませんが、アニメーションをツリーマップあるいはサンバーストに、最初に表示されるときに追加できます。コンポーネント上でデータ変更が発生したとき、アニメーション効果のカスタマイズができます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
ツリーマップあるいはサンバーストにアニメーション効果を追加するには、
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、外観の項を開き、次の属性の値を入力します。
AnimationDuration: アニメーションの継続時間をミリ秒単位で指定します。デフォルト値は500
です。データ変更については、アニメーションは段階別に発生し、アニメーションの各段階でデフォルトの値は500
です。
AnimationDisplay: ドロップダウン・メニューを使用し、コンポーネントが最初にレンダリングされたときに適用するアニメーションのタイプを指定します。デフォルトでは、none
に設定されています。
AnimationOnDataChange: ドロップダウン・メニューを使用し、ツリーマップかサンバーストでデータが変更されたときに適用するアニメーションのタイプを指定します。デフォルトでは、アクティブ・データ・サービスのデータ変更イベントのため、activeData
に設定されています。
ツリーマップおよびサンバーストでは、部分ページ・リフレッシュおよびアクティブ・データ・サービス・イベントの両方にアニメーションを適用するので、auto
タイプが推奨されます。
表32-1に、サポートされているアニメーション効果のリストを示します。
表32-1 ツリーマップとサンバーストのアニメーション効果
アニメーション効果 | AnimationOnDisplay | AnimationOnDataChange |
---|---|---|
|
x |
x |
|
x |
|
|
x |
x |
|
x |
|
|
x (ツリーマップのみ) |
|
|
x (ツリーマップのみ) |
|
|
x (サンバーストのみ) |
|
|
x (サンバーストのみ) |
|
|
x (サンバーストのみ) |
|
|
x |
|
|
x |
|
|
x |
|
|
x |
|
|
x |
x |
ツリーマップとサンバーストは、次の要素についてラベル表示のカスタマイズをサポートします。
colorLabel
およびsizeLabel
: これらのラベルは凡例表示に使用されます。これらのラベルの構成の詳細は、32.4.4項「ツリーマップおよびサンバーストの凡例の構成方法」を参照してください。
treemapNodeHeader
: ツリーマップ・ノード・ヘッダーに表示されるタイトルは構成可能です。ツリーマップ・ノード・ヘッダー・タイトルのカスタマイズの構成の詳細は、32.4.11項「ツリーマップ・ノード・ヘッダーとグループ・ギャップ表示の構成」を参照してください。
ノード・ラベル: ツリーマップとサンバーストの両方で、ノード・ラベルのサイズ、スタイルおよび表示を構成できます。レイアウトの違いにより、構成のオプションがコンポーネント間でわずかに異なります。
ツリーマップ・ノード上のラベル属性を定義することにより、ツリーマップ・ノード・ラベルを構成します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。
ページにツリーマップを追加します。詳細は、32.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
ツリーマップ・リーフ・ノードを構成するには:
構造ウィンドウで、dvt:treemapNodeノードを右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、外観の項を開き、次の属性の値を入力します。
ラベルの表示: ドロップダウン・メニューを使用して、ラベルをリーフ・ノード上で表示するかどうかを指定します。デフォルトはnode
で、ラベルをリーフ・ノードの内部に表示します。ラベル表示を消すには、off
を選択します。
LabelHalign: ドロップダウン・メニューを使用して、ノード内に表示されるラベルの水平方向の配置を指定します。デフォルトの値はcenter
です。左から右モードではタイトルを左揃えに配置し、右から左モードでは右揃えに配置するには、この値をstart
に設定します。この値をend
に設定し、左から右モードではタイトルを右揃えに配置し、右から左モードでは左揃えに配置することもできます。
LabelValign: ドロップダウン・メニューを使用して、ノード内に表示されるラベルの垂直方向の配置を指定します。デフォルトの値はcenter
です。これを、top
あるいはbottom
に変更できます。
LabelStyle: ヘッダー内に表示されるラベルのフォント・スタイルを指定します。この属性は、font-size
やcolor
など、CSSスタイル属性を受け入れます。
たとえば、タイトルのサイズを14ピクセルに変え、色を白に変えるには、次の値をLabelStyleに入力します。
font-size:14px;color: #FFFFFF
CSS属性の完全なリストについては、次のアドレスのWorld Wide Web ConsortiumのWebサイトを参照してください。
GroupLabelDisplay: ドロップダウン・メニューを使用して、グループ・ノードのラベル表示の動作を指定します。デフォルトの値はheader
で、グループ・ノード・ラベルをノード・ヘッダーに表示します。これをoff
に設定でき、またnode
に設定してラベルをノード内に表示することもできます。
サンバースト・ノード上のラベル属性を設定することにより、サンバースト・ノード・ラベルを構成します。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
ページにサンバーストを追加します。詳細は、32.2.3.2項「ページにサンバーストを追加する方法」を参照してください。
サンバースト・ノード・ラベルを構成するには、
構造ウィンドウで、dvt:sunburstNodeノードを右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、外観の項を開き、次の属性の値を入力します。
LabelStyle: ヘッダー内に表示されるラベルのフォント・スタイルを指定します。この属性は、font-size
やcolor
など、CSSスタイル属性を受け入れます。
たとえば、タイトルのサイズを14ピクセルに変え、色を白に変えるには、次の値をLabelStyleに入力します。
font-size:14px;color: #FFFFFF
CSS属性の完全なリストについては、次のアドレスのWorld Wide Web ConsortiumのWebサイトを参照してください。
LabelDisplay: ドロップダウン・メニューを使用して、ノードのラベル表示を指定します。デフォルトの値はauto
で、クライアント環境がローテーションしたテキストをサポートしていれば、ノード内にローテーションしたラベルが表示されます。クライアントの環境がローテーションしたテキストをサポートしていない場合、サンバーストではノード内にテキストが水平に表示されます。これをoff
に設定してラベル表示を消したり、on
に設定してノード内でラベルを水平に表示したり、rotated
に設定してノード内にローテーションしたラベルを表示することもできます。
注意: labelDisplay 属性がrotated に設定され、クライアントの環境がローテートしたテキストをサポートしていない場合は、サンバーストはノード内でラベルを水平に表示します。これは、デフォルトのauto 設定と同じ動作です。 |
LabelHalign: ドロップダウン・メニューを使用してノード・ラベルの配置を指定します。デフォルト値はcenter
で、これはラベルをノード・スライスの中央に配置します。これをinner
に設定してラベルをスライスの内側に配置したり、outer
に設定してラベルをスライスの外側に配置することもできます。
デフォルトでは、サンバーストは、サンバーストの各ノードに対して同じ大きさの表示領域を割り当てます。いずれかのノードに対して割り当てられた表示領域を増やす場合、ノードのradius
属性を設定します。
図32-3に、2つのノードで構成したサンバーストを示します。ここでは、内側のノードが州を表し、外側のノードが州内の都市を表しています。ノードの半径はノードの各メンバーを分ける直線で、サンバースト全体の半径の一部です。
サンバースト全体の半径は、サンバーストで最も長いサブツリーの半径と同じです。サブツリーはルート・ノードからリーフ・ノードまでのパスを表し、1つ以上のレイヤーを含む1つ以上のノードから構成されることがあります。図32-33では、MassachusettsとSpringfieldを表すサブツリーは強調表示されています。
サンバーストのノードの半径はデフォルトで1に設定されていて、2つのレイヤーを表す2つのノードを含むサンバーストは全体の半径が2になります。ノードのいずれかの表示領域を増やすには、半径の値を増やします。図32-33では、内側のノードは半径を2に設定して構成されていて、リーフ・ノードの半径は1に設定されています。この例では、サンバースト全体の半径は3で、内側のノードは使用可能な表示領域の3分の2を使用します。
注意: サンバースト内のすべてのレイヤーに対して1つのノードを定義する場合、半径の属性を設定すると、他のレイヤーのサイズに合せるために、ルート・ノードの表示サイズを増やす効果があります。レイヤーを変化させる場合、ADF Facesのaf:switcher コンポーネントを使用し、各行に対して、dvt:node を含むf:facet を挿入します。 |
プロパティ・インスペクタを使用して、サンバースト・ノード半径の値を設定します。
始める前に:
サンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
ページにサンバーストを追加します。詳細は、32.2.3.2項「ページにサンバーストを追加する方法」を参照してください。
サンバーストのノードの半径を構成する手順:
構造ウィンドウで、dvt:sunburstNodeノードを右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、「その他」セクションを開きます。
「範囲」フィールドで、半径の数値を入力するか、属性のドロップダウン・メニューを使用して半径の値を返すEL式を入力します。
サンバーストのノードの半径を変更する場合、ノード・ラベルが適切に表示されないことがあります。labelHalign
属性を使用すると、ノード・ラベルの配置を調整できます。詳細は、32.4.9.2項「サンバースト・ノード・ラベルの構成方法」を参照してください。
ツリーマップのノード・ヘッダーは、ツリーマップに2つ以上の子レベルがあるときは、デフォルトでいつでも表示されます。デフォルトの表示を変更する場合、ノード・ヘッダーを構成します。
グループ・ギャップは、外部グループのノード間で、デフォルトで表示されます。ノード間でのグループ・ギャップの表示方法を変更する場合、グループ・ギャップを構成します。
dvt:treemapNodeHeader
要素をツリーマップ・ノードに追加し、次の属性の値を設定することにより、ツリーマップのノード・ヘッダーを構成します。
labelStyle
: ヘッダー内に表示されるラベルのフォント・スタイルを指定します。この属性は、font-size
やcolor
など、CSSスタイル属性を受け入れます。
CSS属性の完全なリストについては、次のアドレスのWorld Wide Web ConsortiumのWebサイトを参照してください。
titleHalign
: ヘッダーのタイトルの水平方向の配置を指定します。デフォルトではこの属性はstart
に設定され、左から右モードではタイトルを左揃えに配置し、右から左モードでは右揃えに配置します。この属性をcenter
に設定してタイトルを中央に配置したり、end
に設定して、左から右モードではタイトルを右揃えに配置し、右から左モードでは左揃えに配置することができます。
useNodeColor
: ヘッダーに親ノードのノード色を使用させるには、これをon
に設定します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップを追加します。詳細は、32.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
コンポーネントをページに追加したときにツリーマップとデータ・コントロールをバインドしなかった場合は、データをツリーマップに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップ・ノード・ヘッダーを構成するには、
構造ウィンドウで、dvt:treemapNodeノードを右クリックし、dvt:treemapNode内に挿入→ツリーマップ・ノード・ヘッダーを選択します。
dvt:treemapNodeHeader要素を右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、次の属性の値を入力します。
LabelStyle: ノード・ヘッダー・タイトルのスタイルを入力します。
たとえば、タイトルのサイズを14ピクセルに変え、色を白に変えるには、次の値をLabelStyleに入力します。
font-size:14px;color: #FFFFFF
TitleHalign: この属性のドロップダウン・メニューを使用してデフォルトの配置をcenter
またはend
に変更します。
UseNodeColor: この属性のドロップダウン・メニューを使用してデフォルトをon
に変更します。
ヘッダーでのノードの色の使用を選択すると、使用されるノードの色は、そのノードがツリーマップの最下レベルであった場合にツリーマップに表示されたものになります。
ツリーマップが全階層レベルで同じ色スキームを使用している場合は、ヘッダーにノードの色を使用することで、有用な情報が提供できます。しかしながら、階層の異なるレベルに異なる色スキームを指定した場合は、ノードの色の使用はあまり意味がありません。
ノード間に表示されるグループ・ギャップを、groupGaps
属性の値を設定することによりカスタマイズします。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。
ページにツリーマップを追加します。詳細は、32.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
ツリーマップ・グループ・ギャップの表示をカスタマイズするには、
構造ウィンドウでdvt:treemapを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。
ドロップダウン・メニューを使用して、グループ・ギャップ表示の値を選択します。有効な値は次のとおりです。
outer(デフォルト): ギャップは外部のグループのノード間に表示されます。
all
: ギャップはすべてのグループのノード間に表示されます。
none
: ギャップはグループのノード間に表示されません。
ツリーマップには対話機能が追加可能で、これには、ツールチップ、ポップアップ、選択サポート、コンテキスト・メニュー、およびドリルが含まれます。ツリーマップは、グループ・ノードの独立性もサポートします。
dvt:treemapNodeあるいはdvt:sunburstNode shortDesc
属性の値を指定することにより、ツールチップを定義します。この属性に単純テキストを指定することも、あるいはツリーマップやサンバーストからデータを取り出してノードについての追加情報を表示するEL式を指定することもできます。
図32-34に、サンバースト・ノードの1つの名前とサイズを表示しているサンバーストを示します。
ノードのラベルとサイズ・データの詳細を表示するツールチップを構成するには、EL式のlabel
およびsize
属性を参照します。EL式はそのメソッドを参照するマネージドBeanから、label
およびsize
属性の設定のために、データを引き出します。
たとえば、米国の国勢調査の例でのラベルとサイズの属性に値を指定するには、以下をJDeveloperのshortDesc
属性に入力します。
#{row.text}<br/>#{row.size}
ツリーマップあるいはサンバーストのポップアップを、af:popup
およびaf:showPopupBehavior
タグを使用して定義します。
af:popup
コンポーネントをツリーマップおよびサンバースト・コンポーネントで使用すると、セカンダリ・ウィンドウでの情報の表示および非表示、追加データの入力、コンテキスト・メニューなどの機能の呼出しを、エンド・ユーザーに許可する機能を構成できます。32.5.4項「ツリーマップおよびサンバーストのコンテキスト・メニューの構成」を参照し、af:popup
コンポーネントを使用してコンテキスト・メニューを表示する方法を確認してください。
ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。af:showPopupBehavior
タグは宣言的ソリューションとなるため、ポップアップ・コンポーネントを開くためのJavaScriptの作成や、スクリプトのポップアップ・コンポーネントへの登録の必要がありません。この項では、af:showPopupBehavior
を使用してポップアップを表示するようにサンバーストあるいはツリーマップ・コンポーネントを構成する例を提示します。
af:showPopupBehavior
およびaf:popup
タグを使用してポップアップを構成するには、af:popup
コンポーネントと関連メソッドを定義し、af:showPopupBehavior
タグをdvt:treemapNode
あるいはdvt:sunburstNode
コンポーネントの子として挿入し、af:showPopupBehavior
コンポーネントのタグをトリガー・タイプに構成し、af:popup
コンポーネントのid
属性を参照します。
図32-35に、ユーザーがツリーマップ上でマウスをホバーさせたときに短いメッセージとツリーマップ・ノードの名前を表示するように構成されたツリーマップを示します。
例32-12に、ポップアップを宣言するページ上のコードを示します。
例32-12 マウス・ホバーによるツリーマップ・ポップアップのサンプル・コード
<af:group id="g1"> <af:outputText value="Hover on a node to show a popup." inlineStyle="font-size:medium;" id="ot1"/> <af:panelGroupLayout layout="horizontal" id="pgl1"> <dvt:treemap id="treemap" value="#{treemap.censusData}" var="row" inlineStyle="width:450px; height:350px;" summary="Treemap Popup" displayLevelsChildren="3"> <dvt:treemapNode id="tn1" value="#{row.size}" fillColor="#{row.color} label="#{row.text}"><af:showPopupBehavior popupId="::noteWindowPopup"
triggerType="mouseHover"/>
</dvt:treemapNode> </dvt:treemap> </af:panelGroupLayout><af:popup childCreation="deferred" autoCancel="disabled"
id="noteWindowPopup" launcherVar="source" eventContext="launcher"
clientComponent="true" contentDelivery="lazyUncached">
<af:setListener from="#{source.currentRowData.text}"
to="#{treemap.noteWindowMessage}" type="popupFetch"/>
<af:noteWindow id="nw1">
<af:outputFormatted value="Hello from #{treemap.noteWindowMessage}"id="of8"/>
</af:noteWindow>
</af:popup>
</af:group>
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ADF Faces popup
コンポーネントをページに追加し、ポップアップに表示させたいメニュー、ダイアログ、あるいはウィンドウを挿入します。
たとえば、図32-35のポップアップは、"Hello from Texas"メッセージを表示するため、ノート・ウィンドウを使用しています。この例を使用するには、ADF Faces noteWindow
コンポーネントをpopup
コンポーネント内部に挿入し、ADF Faces outputFormatted
コンポーネントをノート・ウィンドウの内部に挿入します。サンプル・コードを例32-12に示します。
この例のポップアップは、ノート・ウィンドウでの使用のためにツリーマップからデータを取得するADF Faces setListener
コンポーネントも含みます。この例では、データは現在のノードのテキスト属性(source.currentRowData.text
)から取得され、ツリーマップのマネージドBeanのnoteWindowMessage
文字列変数に保存されます。この例を使用するには、例32-13のコードをツリーマップBeanに追加します。
例32-13 noteWindowMessage変数をツリーマップ・マネージドBeanに追加するコード部分
private String noteWindowMessage = null; public void setNoteWindowMessage(String noteWindowMessage) { this.noteWindowMessage = noteWindowMessage; } public String getNoteWindowMessage() { return noteWindowMessage; }
マネージドBeanについてヘルプが必要な場合は、2.6項「マネージドBeanの作成と使用」を参照してください。ダイアログ、メニューおよびウィンドウ表示のためのポップアップ・ウィンドウ使用の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
選択を表示するのに必要な追加コンポーネントを作成します。
たとえば、図32-35のページは、ポップアップの表示のためにユーザーにノード上をホバーするように促すaf:outputText
コンポーネントを使用しています。af:outputText
コンポーネント構成の詳細は、16.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
ツリーマップあるいはサンバーストにポップアップを追加するには、
構造ウィンドウでdvt:treemapNodeまたはdvt:sunburstNodeノードを右クリックし、dvt:<component>Node内部に挿入→「ポップアップ表示動作」を選択します。
たとえば、ツリーマップにポップアップを追加するには、dvt:treemapNodeノードを右クリックし、dvt内部に挿入→「ポップアップ表示動作」を選択します。
af:showPopupBehaviorノードを右クリックし、 「プロパティに移動」を選択します。
プロパティ・インスペクタで、次の属性の値を入力します。
TriggerType: ポップアップをトリガーするアクションの値を入力します。有効な値は、click
およびmouseHover
です。
PopupId: ポップアップ・コンポーネントのIDを参照します。IDを直接入力するか、属性のドロップダウン・メニューを使用して「編集」を選択し、「プロパティの編集 - PopupId」ダイアログでIDを選択できます。
たとえば、国勢調査のデータの例でポップアップを参照するには、次の値をPopupIdに入力します。::noteWindowPopup
。
ツリーマップとサンバーストは、現在click
およびmouseHover
のトリガー・タイプのみをサポートしています。
ポップアップはその他のノード上には表示されません。詳細は、32.4.5.2項「ツリーマップおよびサンバーストのその他のノードの構成に関する必知事項」を参照してください。
ツリーマップ
およびサンバースト
・コンポーネントは、単一および複数ノードの選択をサポートしています。コンポーネントで複数の選択が許可されている場合、ユーザーは[Ctrl]を押しながらクリックする操作で複数のノードを選択できます。
ユーザーがノードを選択、あるいは選択解除すると、ツリーマップあるいはサンバースト・コンポーネントは、selectionEvent
イベントを起動します。選択されたノードに基づいてツリー・コンポーネントで後処理を実行する、カスタムのselectionListener
インスタンスを登録できます。
図32-36に、カスタムの選択リスナーを使用するように構成されたサンバーストの簡単な例を示します。ユーザーが単一あるいは複数の選択をすると、コンソ-ルは選択されたノードの名前、および選択に追加あるいは除外されたノードの数を表示します。
例32-14に、ユーザーのクリックに反応してコンソールへの出力を生成するのに使用するselectionListener
メソッドを示します。このメソッドをサンバーストのマネージドBeanまたはバッキングBeanに格納します。
例32-14 サンバーストのselectionListenerメソッドのコード・サンプル
import javax.faces.component.UIComponent; import oracle.adf.view.faces.bi.component.sunburst.UISunburst; import org.apache.myfaces.trinidad.event.SelectionEvent; import org.apache.myfaces.trinidad.model.RowKeySet; public void selectionListener(SelectionEvent event) { UIComponent component = event.getComponent(); if(component instanceof UISunburst) { UISunburst sunburst = (UISunburst) component; UIXHierarchy hierarchy = (UIXHierarchy) component; StringBuilder s = new StringBuilder(); // Get the selected row keys and print RowKeySet selectedRowKeys = sunburst.getSelectedRowKeys(); System.out.println(selectedRowKeys.size() + " Nodes Currently Selected:"); if (selectedRowKeys != null) { for (Object rowKey : selectedRowKeys) { hierarchy.setRowKey(rowKey); TreeNode rowData = (TreeNode)sunburst.getRowData (rowKey); s.append (rowData.getText()).append(", "); } if (s.length() > 0) s.setLength (s.length() - 2); System.out.println(s); } // Get the row keys that were just added to the selection RowKeySet addedRowKeys = event.getAddedSet(); System.out.println(addedRowKeys.size() + " Nodes Added"); // Get the row keys that were just removed from the selection RowKeySet removedRowKeys = event.getRemovedSet(); System.out.println(removedRowKeys.size() + " Nodes Removed"); } }
選択リスナー・メソッドをツリーマップあるいはサンバースト・コンポーネントのselectionListener
属性で宣言し、選択を表示する追加のコンポーネントをJSFページに追加します。この項の例では、リスナーは出力をコンソールに単に表示しているだけで、ユーザーに選択を促すプロンプトのみがページに追加されています。例32-15に、サンバーストの設定に使用されたページの一部を示します。selectionListener
属性が、太字のフォントでハイライトされています。
例32-15 選択リスナーを宣言するサンバーストのサンプル・ページ
<af:panelGroupLayout id="pgl12">
<af:group id="g5">
<af:outputText value="Click on a node to make a selection. Use Ctrl-click for multiple nodes."
inlineStyle="font-size:large;" id="ot3"/>
<dvt:sunburst id="s1" summary="SampleSunburst"
value="#{sunburst.censusData}"
var="row"
colorLabel="Income"
sizeLabel="Population" displayLevelsChildren="3"
selectionListener="#{sunburst.selectionListener}">
<dvt:sunburstNode id="sn1" value="#{row.size}" fillColor="#{row.color}"
label="#{row.text}"
shortDesc="#{row.text}<br/>#{row.size}"/>
</dvt:sunburst>
</af:group>
</af:panelGroupLayout>
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
selectionListener
を定義するメソッドを作成し、選択状態を返し、それをツリーマップあるいはサンバースト・コンポーネントのマネージドあるいはバッキングBeanに保存します。
同じ国勢調査データの例を使用するには、例のコードをsunburst
と名付けられたマネージドBeanにコピーします。マネージドBeanについてのヘルプが必要な場合、2.6項「マネージドBeanの作成と使用」を参照してください。
選択を表示するのに必要な追加コンポーネントを作成します。
たとえば、図32-36のページは、選択を行うためにユーザーにノードのクリックを促すaf:outputText
コンポーネントを使用しています。af:outputText
コンポーネント構成の詳細は、16.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
ツリーマップあるいはサンバーストに選択サポートを追加するには、
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、動作の項を開き、次の属性を設定します。
NodeSelection: 単一ノードのみの選択サポートを有効化するには、single
に設定します。デフォルトでは複数選択が有効化されています。
SelectionListener: ユーザーがノードをクリックしたときにコールされるメソッドの名前を入力します。
たとえば、sunburst
という名前のマネージドBeanとselectionListener
という名前のメソッドには、SelectionListenerフィールドに、以下を入力します。#{sunburst.selectionListener}
。
ツリーマップとサンバーストはツリー・コンポーネントと同じデータ・モデルを使用しているので、選択イベントはorg.apache.myfaces.trinidad.event.SelectionEvent
ライブラリで定義されます。ツリー・モデルにおける選択サポートの詳細は、10.5.3項「実行時の処理内容: ツリー・コンポーネント・イベント」を参照してください。
JDeveloperにおけるイベント処理の詳細は、第5章「イベント処理」を参照してください。
ツリーマップとサンバーストのいずれも、ユーザーがノードを右クリックしたときにコンテキスト・メニューを表示するように構成できます。
ツリーマップおよびサンバーストのコンテキスト・メニューを、これらのコンテキスト・メニュー・ファセットを使用して定義します。
bodyContextMenu
: ツリーマップまたはサンバースト・コンポーネント内の選択不可の要素上に表示されるコンテキスト・メニューを指定します。
contextMenu
: ツリーマップまたはサンバースト・コンポーネント内の選択可能要素上に表示されるコンテキスト・メニューを指定します。
multiSelectContextMenu
: ツリーマップまたはサンバースト・コンポーネント内で複数の要素が選択されるときに表示されるコンテキスト・メニューを指定します。
JSPまたはJSPXページの各ファセットでは、1つの子コンポーネントがサポートされます。Faceletは、複数の子コンポーネントをサポートします。これらすべてのファセットが機能するためには、ツリーマップあるいはサンバーストのプロパティで、選択が有効化されている必要があります。コンテキスト・メニューは、現在のところFlashでのみサポートされています。
af:popup
コンポーネント内のaf:menu
コンポーネントを使用してコンテキスト・メニューを作成します。ついで、指定されたトリガーに基づき、別のコンポーネントからコンテキスト・メニュー・ポップアップを起動できます。コンテキスト・メニューの構成の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
図32-37に、ユーザーがツリーマップの地域、地区、あるいはノードの1つを右クリックしたときにコンテキスト・メニューを表示するように、contextMenu
ファセットを使用して構成されたサンプルのツリーマップを示します。
ユーザーがView Details for Midwest Regionを選択すると、アプリケーションはMidwest Regionノードについての追加情報を提供できます。
図32-38に、ユーザーがMidwest Regionの詳細を見る選択をしたあとで、ツリーマップの下に表示されるテキスト出力を示します。この例では、出力はユーザーがクリックしたものを検証するだけですが、このコンテキスト・メニューはMidwest Regionについての追加詳細の提示にも使用できます。
例32-16に、例のツリーマップとコンテキスト・メニューを構成するのに使用したサンプル・コードを示します。
例32-16 ツリーマップ・コンテキスト・メニューのコード・サンプル
<af:group id="g1"> <af:outputFormatted value="Right click to display context menu." id="of1"/> <dvt:treemap id="t1" displayLevelsChildren="3" summary="Sample Treemap" var="row" value="#{treemap.censusData}" binding="#{treemapContextMenu.treemap}"> <dvt:treemapNode id="tn1" value="#{row.size}" fillColor="#{row.color}" label="#{row.text}"/> <f:facet name="contextMenu"> <af:popup id="p1" contentDelivery="lazyUncached"> <af:menu text="menu 1" id="m1"> <af:commandMenuItem text="View Details for #{treemapContextMenu.selectionState}" id="cmi1" actionListener="#{treemapContextMenu.menuItemListener}"/> <af:group id="g2"> <af:commandMenuItem text="Add Task" id="cmi2" actionListener="#{treemapContextMenu.menuItemListener}"/> <af:commandMenuItem text="Add Notes" id="cmi3" actionListener="#{treemapContextMenu.menuItemListener}"/> </af:group> </af:menu> </af:popup> </f:facet> </dvt:treemap> <af:outputFormatted value="#{treemapContextMenu.status}" id="of2" clientComponent="true" binding="#{treemapContextMenu.outputFormatted}"/> </af:group>
この例では、メソッドがツリーマップを設定し、選択状態を返し、コンテキスト・メニュー上のユーザー・クリックに反応する、treemapContextMenu
という名前のバッキングBeanを使用しています。この例も、ツリーマップのデータ設定に、32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」で説明されたものと同じクラスとメソッドを使用しています。例32-17に、ContextMenuSample
クラスのコードを示します。
例32-17 ContextMenuSampleクラスのコード
import javax.faces.component.UIComponent; import javax.faces.event.ActionEvent; import oracle.adf.view.faces.bi.component.treemap.UITreemap; import oracle.adf.view.rich.component.rich.nav.RichCommandMenuItem; import oracle.adf.view.rich.component.rich.output.RichOutputFormatted; import org.apache.myfaces.trinidad.context.RequestContext; public class ContextMenuSample { private UITreemap treemap; private String status; private RichOutputFormatted outputFormatted; public ContextMenuSample() { } public void setTreemap(UITreemap treemap) { this.treemap = treemap; } public UITreemap getTreemap() { return treemap; } public String getSelectionState() { if (treemap != null) { return TreemapSample.convertToString(treemap.getSelectedRowKeys(), treemap); } else return null; } public String getStatus() { return status; } public void setOutputFormatted(RichOutputFormatted outputFormatted) { this.outputFormatted = outputFormatted; } public RichOutputFormatted getOutputFormatted() { return outputFormatted; } /** * Called when a commandMenuItem is clicked. Updates the outputText with information about the menu item clicked. * @param actionEvent */ public void menuItemListener(ActionEvent actionEvent) { UIComponent component = actionEvent.getComponent(); if (component instanceof RichCommandMenuItem) { RichCommandMenuItem cmi = (RichCommandMenuItem)component; // Add the text of the item into the status message StringBuilder s = new StringBuilder(); s.append("You clicked on \"").append(cmi.getText()).append("\". <br><br>"); this.status = s.toString(); // Update the status text component RequestContext.getCurrentInstance().addPartialTarget(this.outputFormatted); } } }
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
actionListener
を定義し選択状態を返すマネージドBeanを作成します。
同じ国勢調査データの例を使用するには、例32-17の例のコードをtreemapContextMenu
と名付けられたバッキングBeanにコピーします。マネージドBeanについてのヘルプが必要な場合、2.6項「マネージドBeanの作成と使用」を参照してください。
コンテキスト・メニューをサポートするのに必要な追加コンポーネントを作成します。
たとえば、図32-37の例は、コンテキスト・メニューの表示のためにユーザーに右クリックを促すaf:outputText
コンポーネントを使用しています。ユーザーがカスタムのコンテキスト・メニュー項目を選択したとき、ページはaf:outputFormatted
コンポーネントを使用して、ユーザーがどのノードを選択したかを確認するメッセージを表示します。
追加コンポーネントの構成に必要な詳細は、例32-17のコード・サンプルを参照してください。af:outputText
およびaf:outputFormatted
コンポーネントの詳細は、16.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
ツリーマップあるいはサンバーストにコンテキスト・メニューを追加するには、
ユーザーのアプリケーションがバッキングBeanを使用している場合は、以下を実行します。
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
拡張の項を開いてバインディング属性の値を入力し、ツリーマップをコンテキスト・メニューのためのメソッドを含むマネージドBeanと関連付けます。または、属性のドロップダウン・メニューから編集を選び、既存のBeanとメソッドを、作成または選択します。
バインディング属性は、ツリーマップを設定するコードを含んでいるので、国勢調査のデータの例に必要です。しかしながら、これはまた、32.3.1項「ツリーマップあるいはサンバースト・コンポーネントへのデータの追加方法」で説明されたものと同じクラスとメソッドからのデータとメソッドを使用しています。たとえば、treemapContextMenu
という名前のバッキングBeanに、以下を「バインディング」フィールドに入力します。#{treemapContextMenu.treemap}
。
構造ウィンドウでdvt:treemapまたはdvt:sunburstノードを右クリックし、dvt:treemap内部に挿入→ファセットを選択します。
「ファセットの挿入」ダイアログで、作成するコンテキスト・メニューのタイプに相当するファセットの名前を入力します。
たとえば、contextMenu
ファセットを定義するには、以下を名前フィールドに入力します。contextMenu
。
「OK」をクリックします。
ファセットは、dvt:treemapノードの子として作成されます。
構造ウィンドウで、f:facet - contextMenuノードを右クリックし、f:facet - contextMenu内に挿入→ADF Faces→ポップアップを選びます。
af:popupノードを右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、次のプロパティを設定します。
ContentDelivery: これをLazyUncached
に設定します。
AutoCancel: これを、<default> enabled
に設定します。
ChildCreation: これを、<default> immediate
に設定します。
構造ウィンドウで、af:popupノードを右クリックし、af:popup内に挿入→Menuを選びます。
構造ウィンドウで、af:menuノードを右クリックし、af:menu内に挿入→メニュー項目を選び、メニュー項目を作成します。
af:commandMenuItemノードを右クリックし、 プロパティに移動を選択します。
プロパティ・インスペクタで、共通の項を開き、次の属性を設定します。
Text: メニューに表示するテキストを入力します。
たとえば、国勢調査のデータの例を複製するには、次の値をTextフィールドに入力します。View Details for #{treemapContextMenu.selectionState}
。
ActionListener: ユーザーがメニュー項目を選択したときにコールされるメソッドの名前を入力ます。
たとえば、treemapContextMenu
という名前のマネージドBeanとmenuItemListener
という名前のメソッドには、ActionListenerフィールドに、以下を入力します。#{treemapContextMenu.menuItemListener}
。
コンテキスト・メニューに表示させたい各メニュー項目につき、ステップ10とステップ12を繰り返します。
ヒント: 関連するメニュー項目をグループ化するには、ADF Facesaf:group コンポーネントをaf:commandMenuItem の前後で、例32-16に示すように折り返します。af:group コンポーネントの詳細は、8.16項「関連する項目のグループ化」を参照してください。 |
コンテキスト・メニューはHTML5とFlashイメージ形式でのみサポートされています。コンテキスト・メニューがFlashでレンダリングされる場合、コンテキスト・メニューはFlash Playerのコンテキスト・メニューを使用します。このため、Flash Playerにより定義されたいくつかの制限があります。
Flashでは、コンテキスト・メニューのサブメニューは使用できません。
Flashでは、カスタム・メニュー項目は15に制限されます。コンポーネントの組込みメニュー項目(円グラフのinteractiveSliceBehavior
メニュー項目など)は、制限に考慮されます。
Flashでは、メニュー項目がテキストのみに制限されます。ADF Facesメニューで可能なアイコンなどのコントロールは、Flashメニューでは使用できません。
各メニュー・キャプションには、1つ以上の表示可能な文字を含める必要があります。制御文字、改行文字およびその他の空白文字は無視されます。キャプションは100文字以内です。
別のカスタム項目と同一のメニュー・キャプションは、一致する項目の表示または非表示に関係なく無視されます。メニュー・キャプションは、組込みキャプションまたは既存のカスタム・キャプションと比較されます(大文字/小文字、句読点、空白は考慮されません)。
次のキャプションは許可されません。ただし、単語同士をつなげて使用して、カスタム・キャプションを作成できます: 保存、ズーム・イン、ズーム・アウト、100%、すべて表示、品質、再生、ループ、巻戻し、進む、戻る、ロードされない映画、バージョン情報、印刷、再描画リージョンの表示、デバッガ、元に戻す、切取り、コピー、貼付け、削除、すべて選択、開く、新規ウィンドウで開くおよびリンクのコピー。
次の単語は、単独または他の単語とともにカスタム・キャプションで表示できません: Adobe、Macromedia、Flash Playerまたは設定。
さらに、Flashからのコンテキスト・メニュー項目のリクエストは同期コールであるため、コンテキスト・メニューの呼出し時には、ELを評価するサーバー・リクエストは不可能です。選択したオブジェクトごとに異なるコンテキスト・メニューを提供するために、コンテキスト・メニューのポップアップでcontentDelivery="lazyUncached"
設定が使用される場合、メニューはあらかじめフェッチされます。状況により変化するコンテキスト・メニューの場合、これはメニュー定義内のEL式が、異なる選択や通貨の状況により、レンダリング時に繰り返しコールされることを意味します。あらかじめフェッチされたこれらのコンテキスト・メニューを使用する場合、アプリケーションでは次の事項を認識しておく必要があります。
コンテキスト・メニューの表示方法の定義に使用するEL式では、実行時間の長いコードまたは遅いコードは実行しないでください。これは、actionListener
など、メニュー項目が選択された後にコールされるaf:commandMenuItem
属性には当てはまりません。
今後、Flashの制限が解決された場合、ADFコンテキスト・メニューがFlashコンテキスト・メニューのかわりに表示されます。アップグレードの互換性を確保するには、メニューがあらかじめフェッチされている場合と、メニューの開始時にEL式が評価される場合の両方でEL式が機能するようにコードを作成する必要があります。アプリケーションが依存するコンポーネントの状態は、selection
とcurrency
のみです。
ドリル・サポートは、ユーザーがコンポーネントのグループ・ヘッダーをクリックするか、各ノードをダブルクリックすることにより、ツリーマップあるいはサンバーストの階層をナビゲートすることを可能にします。
ドリル・サポートをツリーマップあるいはサンバーストのノードのdrilling
属性により有効化します。
JDeveloperには、ドリルをサポートするのに必要なコードが含まれています。しかしながら、ノードがドリルされているときに、アプリケーションに他のタスクを実行させる場合があります。追加のタスクを実行するメソッドを定義し、それをドリル・リスナーとして、ツリーマップあるいはサンバーストのマネージドあるいはバッキングBeanに追加できます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ドリル・リスナーを追加する場合、リスナーを定義するメソッドを作成し、それをツリーマップあるいはサンバーストのマネージドあるいはバッキングBeanに追加します。
イベント処理の詳細は、第5章「イベント処理」を参照してください。Beanについてのヘルプが必要な場合、2.6項「マネージドBeanの作成と使用」を参照してください。
ツリーマップあるいはサンバーストにドリル・サポートを追加するには、
構造ウィンドウでdvt:treemapNodeまたはdvt:sunburstNodeノードを右クリックし、プロパティに移動を選択します。
プロパティ・インスペクタで、拡張の項を開き、ドリル属性のドロップダウン・メニューを使用してドリル
属性を次の値の1つに設定します。
replace
: ユーザーがノードをダブルクリックして、ツリーマップあるいはサンバーストの新しいルートに設定することを可能にします。
insert
(サンバーストのみ): ユーザーがノードの子を開いたり閉じたりすることを可能にします。
insertAndReplace
(サンバーストのみ): ユーザーがノードをダブルクリックして階層のルートに設定したり、ノードの子を開いたり閉じたりするすることを可能にします。
ユーザーのアプリケーションがドリル・リスナーを含んでいる場合は、以下を実行します。
構造ウィンドウでdvt:treemapを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「動作」セクションを展開します。
ドリル・リスナー属性のドロップダウン・メニューから、編集を選択します。
「属性の編集」ダイアログで、検索ボックスを使用してツリーマップのマネージドBeanを検索します。
マネージドBeanのノードを開き、ドリル・リスナーを含むメソッドを選択します。
OKをクリックします。
式が作成されます。
たとえば、sampleTreemap
というマネージドBeanとsampleDrillListener
というメソッドの場合、式ビルダーによりドリル・リスナーの値として、コード#{sampleTreemap.sampleDrillListener}
が生成されます。
ドリルは、表示可能なデータの追加のレイヤーがある場合に推奨されます。独立性とは異なり、ツリー・モデルから追加のデータをフェッチするのは、サーバー側の操作です。すでに表示されているグループ・データにフォーカスするには、ツリーマップの分離機能を使用します。詳細は、32.5.7項「独立性のサポートの構成(ツリーマップのみ)」を参照してください。
ツリーマップおよびサンバーストを、ページ上でサポートされたコンポーネント間のドラッグ・アンド・ドロップ操作のドラッグ・ソース、およびドロップ・ターゲットとして構成できます。
ツリーマップあるいはサンバーストにドラッグのサポートを追加するには、af:dragSource
タグをツリーマップに追加し、af:dropTarget
タグをドラッグを受け取るコンポーネントに追加します。ドラッグを受け取るコンポーネントはorg.apache.myfaces.trinidad.model.RowKeySet
データ・フレーバをaf:dropTarget
の子として含み、かつドロップ・イベントへの応答のため、dropListener
メソッドを定義する必要があります。
ツリーマップあるいはサンバーストにドロップのサポートを追加するには、af:dropTarget
タグをツリーマップあるいはサンバーストに追加し、そのツリーマップあるいはサンバーストがサポートするデータ・フレーバを含めます。dropListener
メソッドを、ドロップ・イベントに応答するツリーマップあるいはサンバーストのマネージドBeanに追加します。
次の手順は、ツリーマップあるいはサンバーストを単一のドラッグ・ソースあるいはドロップ・ターゲットとして設定する方法を示します。ADF FacesまたはADFデータ視覚化コンポーネントのドラッグ・アンド・ドロップの構成の詳細は、第35章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、32.2.3.1項「サンバーストの構成」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、32.2.2.2項「ツリーマップのページへの追加方法」または32.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第32.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ドラッグ・アンド・ドロップをサポートするのに必要な追加コンポーネントを作成します。
たとえば、図32-17のサンプルは、ツリーマップ・ノードを指示されたテキストにドラッグするようユーザーに促すaf:outputText
コンポーネントを使用しています。ユーザーがノードをテキストにドラッグしたとき、ページはaf:outputFormatted
コンポーネントを使用して、ユーザーがどのノードをドラッグしたかを確認するメッセージを表示します。
例32-18に、完成したページのサンプル・コードを示します。af:outputText
およびaf:outputFormatted
コンポーネントの詳細は、16.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
例32-18 ツリーマップのドラッグ・ソース例のサンプル・コード
<af:group id="g1"> <af:panelGroupLayout id="pgl2" layout="horizontal"> <af:outputText value="Drag Source Demo" inlineStyle="font-size:large;" id="ot2"/> <af:spacer width="10" height="10" id="s1"/> <af:outputText value="Drag a Treemap Node to the Text" id="ot1"/> </af:panelGroupLayout> <af:panelGroupLayout id="pgl3" layout="horizontal"> <dvt:treemap id="t1" value="#{treemap.censusData}" var="row" displayLevelsChildren="3" colorLabel="Median Household Income" sizeLabel="Population" summary="Discrete Treemap" legendSource="ag1"> <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}" shortDesc="#{row.text}<br/>Population: #{row.size}<br/>Income: #{row.income}"> <dvt:attributeGroups id="ag1" value="#{row.income > 50000}" label="#{row.income > 50000 ? 'High Income' : 'Low Income'}" type="color"/> </dvt:treemapNode> <af:dragSource defaultAction="MOVE" actions="COPY MOVE LINK"/> </dvt:treemap> <af:spacer width="20" id="s2"/> <af:outputFormatted value="#{treemap.dropText}" id="of1"> <af:dropTarget dropListener="#{treemap.fromDropListener}"> <af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"/> </af:dropTarget> </af:outputFormatted> </af:panelGroupLayout> </af:group>
例32-19に、図32-18のページのサンプル・コードを示します。この例では、ツリーマップはドロップ・ターゲットとして構成されています。
例32-19 ツリーマップのドロップ・ターゲット例のサンプル・コード
<af:group id="g1"> <af:panelGroupLayout id="pgl4" layout="horizontal"> <af:outputText value="Drop Target Demo" inlineStyle="font-size:large;"/> <af:spacer width="10" id="s2"/> <af:outputText value="Drag From the Text to the Treemap" id="ot1"/> </af:panelGroupLayout> <af:panelGroupLayout id="pgl3" layout="horizontal"> <dvt:treemap id="t1" value="#{treemap.censusData}" var="row" displayLevelsChildren="3" colorLabel="Median Household Income" sizeLabel="Population" summary="Discrete Treemap" legendSource="ag1"> <dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}" shortDesc="#{row.text}<br/>Population: #{row.size}<br/>Income: #{row.income}"> <dvt:attributeGroups id="ag1" value="#{row.income > 50000}" label="#{row.income > 50000 ? 'High Income' : 'Low Income'}" type="color"/> </dvt:treemapNode> <af:dropTarget dropListener="#{treemap.toDropListener}" actions="MOVE COPY LINK"> <af:dataFlavor flavorClass="java.lang.Object"/> </af:dropTarget> </dvt:treemap> <af:spacer width="20" id="s1"/> <af:outputFormatted value="#{treemap.dragText}" id="of1" clientComponent="true"> <af:componentDragSource/> </af:outputFormatted> </af:panelGroupLayout> </af:group>
ツリーマップあるいはサンバーストにドラッグ・アンド・ドロップ・サポートを追加するには、
ツリーマップあるいはサンバーストをドロップ・ターゲットとして構成するには、コンポーネント・パレットで、「操作」パネルから、「ドロップ・ターゲット」タグをドラッグし、ツリーマップあるいはサンバースト・コンポーネントの子としてドロップします。
ドロップ・ターゲットを挿入ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して編集を選び、ドロップ・リスナー・メソッドをツリーマップあるいはサンバーストのマネージドBeanに追加してください。または、ドロップダウン・メニューを使用して式ビルダーを選び、ドロップ・リスナーのEL式を入力してください。
たとえば、toDropListener()
という名前のメソッドをtreemap
という名前のマネージドBeanに追加するには、編集を選び、ドロップダウン・メニューからtreemapを選択し、新規を「メソッド」フィールドの右でクリックして、toDropListener()
メソッドを作成します。
例32-20はサンプルのドロップ・リスナーと図32-18に表示されるツリーマップのサポート・メソッドを示します。
例32-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.treemap.UITreemap; import javax.faces.component.UIComponent; // variables need by methods private String dragText = "Drag this text onto a node"; // 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); if(rowKey != null) { sb.append("Drop Site: "); sb.append(getLabel(dropComponent, rowKey)); } } // Update the output text this.dragText = sb.toString(); RequestContext.getCurrentInstance().addPartialTarget(event.getDragComponent()); return event.getProposedAction(); } public String getDragText() { return dragText; } private String getLabel(UIComponent component, Object rowKey) { if(component instanceof UITreemap) { UITreemap treemap = (UITreemap) component; TreeNode rowData = (TreeNode) treemap.getRowData(rowKey); return rowData.getText(); } return null; } private Object getRowKey(UIComponent component, String clientRowKey) { if(component instanceof UITreemap) { UITreemap treemap = (UITreemap) component; ClientRowKeyManager crkm = treemap.getClientRowKeyManager(); return crkm.getRowKey(FacesContext.getCurrentInstance(), component, clientRowKey); } return null; }
「OK」をクリックして、「データ・フレーバの挿入」ダイアログに入力します。
データ・フレーバを挿入ダイアログで、ドロップ・ターゲットが受け入れるオブジェクトを入力します。または、ドロップダウン・メニューを使用してオブジェクトの階層をナビゲートし、希望するオブジェクトを選択します。
たとえば、af:outputFormatted
コンポーネントがテキストをツリーマップにドラッグできるようにするには、java.lang.Object
をデータ・フレーバの挿入ダイアログに入力します。
構造ウィンドウでaf:dropTarget
コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。許容値は、COPY
、MOVE
またはLINK
です。値を指定しない場合、ドロップ・ターゲットはCOPY
を使用します。
たとえば、「アクション」フィールドに次を入力し、すべての操作を可能にします。
COPY MOVE LINK
ツリーマップあるいはサンバーストをドロップ・ターゲットとして使用するには、以下を実行します。
コンポーネント・パレットで、「Operations」パネルから、「ドラッグ元」タグをドラッグのソースとなるコンポーネントの子としてドラッグ・アンド・ドロップします。
たとえば、「ドラッグ元」タグをaf:outputFormatted
コンポーネントの子としてドラッグ・アンド・ドロップします。
コンポーネントの値のフィールドでは、ステップ2でドロップ・リスナーでツリーマップあるいはサンバーストに作成したパブリック変数を参照します。
たとえば、toDropListener()
という名前のドロップ・リスナーとdropText
という名前の変数には、コンポーネントの値のフィールドに、次を入力します。
#{treemap.dropText}
ツリーマップあるいはサンバーストをドラッグ・ソースとして構成するには、コンポーネント・パレットで、「操作」パネルから、「ドラッグ元」タグを、ツリーマップあるいはサンバーストの子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。許容値は、COPY
、MOVE
またはLINK
です。
たとえば、「アクション」フィールドに次を入力し、すべての操作を可能にします。
COPY MOVE LINK
ドラッグ・ソースがサポートするデフォルトのアクションを指定するには、DefaultAction属性のドロップダウン・メニューを使用して、「コピー」,、「移動」または「リンク」を選択します。
図32-17「ドラッグ・ソースとして構成されたツリーマップ」におけるドラッグ・アンド・ドロップの例でのツリーマップは、移動
をデフォルトのアクションとして使用しています。
ツリーマップあるいはサンバーストを別のコンポーネントへのドロップ・ターゲットとして追加するには、以下を実行します。
コンポーネント・パレットで、「Operations」パネルから、「ドロップ・ターゲット」を、ドロップを受け取るコンポーネント上にドラッグ・アンド・ドロップします。
たとえば、図32-18「ドロップ・ターゲットとして構成されたツリーマップ」におけるドラッグ・アンド・ドロップの例のページは、ドロップの結果を表示するaf:outputFormatted
コンポーネントを含んでいます。
ドロップ・ターゲットを挿入ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して編集を選び、ドロップ・リスナー・メソッドを適切なマネージドBeanに追加してください。または、ドロップダウン・メニューを使用して式ビルダーを選び、ドロップ・リスナーのEL式を入力してください。
たとえば、fromDropListener()
という名前のメソッドをtreemap
という名前のマネージドBeanに追加するには、編集を選び、ドロップダウン・メニューからtreemapを選択し、新規を「メソッド」フィールドの右でクリックして、fromDropListener()
メソッドを作成します。
例32-21に、図32-17に表示されるツリーマップのサンプル・ドロップ・リスナーを示します。この例は例32-20で使用されたものと同じインポートとヘルパー・メソッドを使用しており、それらはここには含まれていません。
例32-21 ツリーマップをドラッグ・ソースとして使用するコンポーネントのサンプル・ドロップ・リスナー
// 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
という名前の変数には、コンポーネントの値フィールドに、次を入力します。
#{treemap.dragText}
独立性は、ユーザーがグループ・ヘッダーをクリックしてグループ・データの表示を最大化することを可能にします。独立性の機能は、グループ・ヘッダーが表示されているとき、デフォルトで有効化されます。
独立性を無効化する場合、dvt:treemapNodeHeader
ノードのIsolate属性をoff
に設定します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、32.2.2.1項「ツリーマップの構成」を参照してください。
ページにツリーマップを追加します。詳細は、32.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
ツリーマップ・ノード・ヘッダーをツリーマップに追加します。詳細は、32.4.11.1項「ツリーマップ・ノード・ヘッダーを構成する方法」を参照してください。
ツリーマップ・グループでの独立性サポートを無効化するには、
独立性はクライアント側の操作で、ユーザーがすでに表示されているデータにフォーカスすることを可能にします。ツリーマップに複数の子レベルがあり、ユーザーに未表示のレベルへのアクセスをさせたい場合は、かわりにドリルを使用します。ドリル・サポートの追加については、32.5.5.1項「ツリーマップおよびサンバーストのドリル・サポートの構成方法」を参照してください。