| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.1.2) E48096-02 |
|
 前 |
 次 |
この章では、ADF データ可視化ツリーマップおよびサンバースト・コンポーネントを使い、ツリーマップとサンバーストで階層データを単純UI-first開発を使用して表示する方法を記述します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してツリーマップやサンバーストを作成することもできます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成」の章を参照してください。
この章では、次の項目について説明します。
ツリーマップとサンバーストを使用して、定量的な階層データをサイズと色により視覚的に表現し、2つの次元にまたがり表示します。ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。
たとえば、ツリーマップまたはサンバーストを使用して地域の四半期ごとの売上げを表示し、売上げ傾向を特定する場合は、ノードのサイズで各地域の売上げ高を示し、ノードの色でその地域の売上げが四半期で増えたか減ったかを示すことができます。ノードの外観とコンテンツは、階層の各レベルで構成可能です。
ツリーマップはノードをネストした矩形のセットとして表示します。ツリーのブランチごとに1つの矩形が割り当てられ、そこにサブブランチを表すより小さな矩形が並べられます。図30-1は、地域別にグループ化した米国の国勢調査データを示し、色属性が所得の中間値レベルを示すのに使用されています。人口の多い州は人口の少ない州より大きなノードで表示されます。
サンバーストは、ノードを矩形レイアウトではなく、放射状に表示し、階層のトップを中心に、深いレベルになると中心から離れて表示します。図30-2に、サンバーストで表示した同じ国勢調査データを示します。
ツリーマップとサンバーストのいずれも、数千のデータ・ポイントを比較的小さな空間領域に表示できます。各ノードの相対サイズが全体に対する重要度を表しているため、これらのコンポーネントは大規模な階層データ・セットで傾向を特定する場合に適しています。色もまた、情報に追加される次元の表現に使用できます。
階層の1つのレイヤーでサイズと色を使用してデータの2つのメトリックを表示することが主な目的の場合は、ツリーマップを使用します。階層のすべてのレベルでのメトリックを表示する場合、かわりにサンバーストを使用します。エンド・ユーザーが階層を横断してデータの重要な部分を重点的に表示できるように、ドリルを有効にできます。
アプリケーションが小さいデータ・セットを使用する場合、あるいはノード間の親子関係を強調する場合、ツリー、ツリー表あるいは階層ビューア・コンポーネントの使用を考えます。ツリーやツリー表の詳細は、第12章「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。階層ビューアの使用については、第29章「階層ビューア・コンポーネントの使用方法」を参照してください。
ADFデータ可視化ツールのツリーマップおよびサンバースト・コンポーネントは、ドリル、グループ化およびフィルタリングなど、エンド・ユーザー向けの幅広い機能を提供します。これらはまた、レイアウトのバリエーション、凡例の表示、およびカスタマイズ可能な色やラベル・スタイルなど、幅広いプレゼンテーション機能を提供します。
ツリーマップやサンバースト・コンポーネントの使用やカスタマイズには、次の機能やコンポーネントの理解が役立ちます。
ページにコンポーネントを挿入する際(「データ・コントロール」パネルからデータ・コレクションとtreemapまたはsunburstコンポーネントをバインドするか、「コンポーネント」ウィンドウからコンポーネントを挿入して後からデータにバインドする)、ツリーマップあるいはサンバーストの初期レイアウトを定義できます。
サンバースト・コンポーネントには、図30-2に示す、1つのレイアウトしかありません。
ツリーマップ・コンポーネントのノードのレイアウトは構成可能で、次のタイプのレイアウトが含まれます。
正方形、ノードは可能なかぎり正方形となるように配置されます。
正方形レイアウトはユーザーが最も容易にノードの相対的なサイズが比較できるように最適化され、レイアウトは図30-1に示すように表示されます。
スライスとダイス水平、ノードは最初ツリーマップの幅方向に沿い水平に配置され、ついで高さ方向に垂直に配置されます。
このレイアウトはノードの相対的な順序が一定に保たれるので、アニメーション用に最適化されます。図30-3は、スライスとダイス水平レイアウトでの、米国の国勢調査のサンプル・データを表示します。
スライスとダイス垂直、ノードは最初ツリーマップの高さ方向に沿い垂直に配置され、ついで幅方向に水平に配置されます。
このレイアウトも、ノードの相対的な順序が一定に保たれるので、アニメーション用に最適化されます。図30-4は、スライスとダイス垂直レイアウトでの、米国の国勢調査のサンプル・データを表示します。
ツリーマップとサンバーストは、データ・セット内での一意なグループの色などのスタイル属性値を生成するため、dvt:attributeGroupsタグの使用をサポートします。
ツリーマップとサンバーストにおいては、データの値が表示される色を決めます。どちらのコンポーネントも、連続的なデータをグラデーションから色を選択して表示し、ノードはデータの値に基づき徐々に色を変化させます。図30-1のツリーマップでは、データの値の範囲として所得の中間値を表示するのにグラデーションを使用しています。
離散データについても、ツリーマップとサンバーストはデータの値に基づき特定の色を表示します。図30-5は、所得の中間値の高低の区別に2色を使用して、米国の国勢調査の同じ人口データを示しています。
凡例サポートとノードの色とパターンのカスタマイズを容易にするために、属性グループの使用は必須です。
ツリーマップとサンバーストは凡例をコンポーネントの下に表示し、サイズと色をコントロールしているデータのタイプを視覚的にわかりやすくします。コンポーネントが所得レベルなどの条件に基づき色を指定するのに属性グループを使用する場合、凡例は使用される色を表示し、各色がどの値を表現しているかを示すこともできます。
図30-5のツリーマップは、離散属性グループを使用するツリーマップの凡例を示します。凡例により、平均所得の高低を示すのにどの色が使用されているかの判断が容易になります。
Iツリーマップが連続属性グループを使用する場合、凡例はグラデーションとして使用される色を表示します。図30-1のツリーマップは、平均所得レベルを示すのに連続属性グループを使用するツリーマップの凡例を示します。
ツリーマップとサンバーストは、子ノードのfillPattern属性に値が指定されたとき、パターンを表示します。パターンは白のバックグラウンドで描かれ、fillColorの値がフォアグラウンドの色を決めます。
図30-6に、塗りつぶしパターンの組合せとして構成されたサンバーストを示します。
ツリーマップとサンバーストは、ユーザーによる1つ以上のノードへのクリックに反応して選択されたノードについての情報を表示する機能をサポートします。
図30-7に、複数選択サポートのために構成されたツリーマップを示します。
ツリーマップとサンバーストは、ユーザーがノード上でマウスを動かすとノードの追加情報を表示する機能をサポートします。
図30-8に、ユーザーがアラスカのノード上でマウスを動かしたときに表示されるツールチップを示します。
ツールチップにより、視覚表示からでは明白ではない可能性のあるデータについての情報を、ユーザーは見ることができるようになります。ツールチップをツリーマップやサンバースト上に構成することは、コンポーネントの空間制約性の観点から推奨されます。
ツリーマップとサンバーストのコンポーネントは、ユーザーがノード上をマウスでクリックしたりホバーしたときに、情報を提供したり、入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。図30-9に、ユーザーがツリーマップ・ノードの1つの上でマウスをホバーさせたときに表示される、ポップアップのサンプルを示します。
図30-10に、ユーザーがサンバースト・ノードの1つの上でマウスをクリックしたときに表示される類似のポップアップ・ウィンドウを示します。
ツリーマップとサンバーストは、コンテキスト・メニューを表示して選択されたノードについての追加情報を提供する機能をサポートします。図30-11に、ユーザーがサンバースト・ノードの1つの上で右クリックしたときに表示されるコンテキスト・メニューを示します。
ツリーマップおよびサンバースト・コンポーネントはドリルをサポートして、階層をナビゲートしノードについてのより詳細な情報を表示します。
図30-12に、ユーザーが図30-5のWest Regionのヘッダー・テキストをクリックしたときに表示されるツリーマップを示します。ユーザーは、United States > West Regionのブレッドクラム・リンクをクリックすることで、階層を上方にナビゲート・バックできます。
ユーザーは、図30-13に示すように、ノードをダブルクリックして階層のルートに設定することもできます。
サンバースト上でドリルをするには、ユーザーはサンバースト上のノードをクリックし、図30-14に示すように階層のルートに設定します。ユーザーは、United States > West Regionのブレッドクラム・リンクをクリックするか、シフト・キーを押してWest Regionノードをダブルクリックすることにより、階層を上方にナビゲート・バックできます。
サンバーストには、選択したノードの子を開いたり閉じたりする機能もあります。ユーザーは、開くノード上でマウスを動かしたときに現れる開くアイコンをクリックします。子を閉じるには、ユーザーは「縮小」アイコンをクリックします。
図30-15に、非同期ドリルのために構成されたサンバーストを示します。
ツリーマップおよびサンバースト・コンポーネントには、大きなコントリビュータとの比較において、ユーザーのデータ・モデルが多数の小さいコントリビュータを含む場合、データを集計する機能があります。
図30-16に、図30-5で表示された国勢調査ツリーマップに、その他のノードを構成したものを示します。この例では、South Atlantic地域のSouth Carolina、Delaware、West VirginiaおよびDistrict of Columbiaノードは、その他のノードとして表現されます。
ツリーマップおよびサンバーストのコンポーネントは、ドロップ・ソース、およびドロップ・ターゲットのいずれとしても、ドラッグ・アンド・ドロップをサポートします。
図30-17に、ドラッグ・ソースとして構成されたツリーマップを示します。ユーザーがノードの1つを右のテキストにドラッグすると、テキストはどのノードがドラッグされたかを反映して変化します。
図30-18に、ドロップ・ターゲットとして構成されたツリーマップを示します。ユーザーが右のテキストをノードの1つにドラッグすると、テキストはどのノードがテキストを受け取ったかを反映して変化します。
ツリーマップおよびサンバースト・コンポーネントは、同じ親のノードをサイズによりソートして表示する機能をサポートしています。この機能はノードの比較を容易にするので、ユーザーのデータ・モデルがソートされていない場合に有用です。
図30-19にソートされたツリーマップを示します。ノードはサイズが減少する方向に配置され、どの地域が最も大きな人口を有するかがわかりやすくなります。
|
注意: ツリーマップはスライスとダイスのレイアウトにおいてのみソートをサポートします。 |
ツリーマップとサンバーストは、次のイメージ形式、すなわちHTML5、Flash、およびPNG (Portable Network Graphics)をサポートします。
デフォルトで、ツリーマップとサンバーストはクライアントのブラウザがサポートする、最良の出力形式で表示します。最良の出力形式をクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash (Flash Playerが使用可能な場合)。
アプリケーション全体でFlashコンテンツの使用を制御するには、adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定します。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
PNG出力形式。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ドラッグ・アンド・ドロップ・ジェスチャ
ポップアップのサポート
選択項目
ツリーマップとサンバーストは、テキスト・ラベル内には通常入らないコンテンツを追加するため、ノード上にコンテンツ・ファセットを提供します。サンバーストでは、拡張コンテンツはルート・ノードに表示されます。ツリーマップでは、拡張コンテンツはリーフ・ノードに表示されます。
図30-20に、ルート・ノード上に拡張ノードを使用するサンバーストの例を示します。この例では、ルート・ノードはノード・テキストに加え、イメージとタイトルを表示します。
図30-21に、拡張ノード・コンテンツを使用するツリーマップの例を示します。
|
注意: 拡張ノード・コンポーネントは、 |
ADF Facesでは、印刷または電子メール用の簡略化されたモードで、ADF Faces WebアプリケーションからJSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、ただしWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロール・バーやボタンなど、印刷ページに必要ないアイテムを削除することができます。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。このような出力用に簡略化されたページを作成する場合の詳細は、第37章「様々な出力モードの使用」を参照してください。
ツリーマップとサンバーストは、アクティブ・データ・イベントが受け取られたときにPPR(部分ページ・リフレッシュ)リクエストを送ることによりADSをサポートします。PPRのレスポンスにより、コンポーネントが更新され、必要に応じて変更がアニメーション化されます。次のADSイベントがサポートされます。
ノード・サイズの更新
ノードの色の更新
ノード・ラベルの更新
ノードの挿入
ノードの削除
拡張ノード・コンテンツ変更
アクティブ・データ・サービスの使用の詳細は、第38章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。
ツリーマップは、表示されたデータのグループ内での比較にフォーカスするため、独立性をサポートします。ユーザーは、グループ・ヘッダー上でマウスを動かしたときに現れる「分離」アイコンをクリックし、グループを最大化します。
図30-22に、ユーザーがSouth Atlanticのグループ・ヘッダー上でマウスを動かしたときに現れる「分離」アイコンを示します。
図30-23に、ユーザーが図30-22のSouth Atlantic地区で「分離」アイコンをクリックしたときに表示されるツリーマップを示します。
ツリーマップを元の表示に戻すには、ユーザーは「リストア」アイコンをクリックします。
ツリーマップが複数レベルで表示されるとき、親レベルはグループ・ヘッダーで表示されます。デフォルトでは、グループ・ヘッダーは白のバックグラウンドで表示され、グループのタイトルは、左から右モードのときは左側揃えで配置され黒のテキストで表示されます。
図30-24に、ノード・ヘッダーのあるツリーマップの一部を示します。この例では、South RegionとSouth Atlanticのヘッダーは、デフォルト形式で形式化されている。
ヘッダーをカスタマイズしてノードの色を使用したり、テキストの配置を変更したり、またフォントをカスタマイズしたりすることができます。
図30-25に、ノードの色を使用し、タイトルを中央に配置し、またフォントのサイズと色を変更するように形式化されたノード・ヘッダーを有する同じツリーマップを示します。
この例では、所得レベルが$50,000より低いときはツリーマップ・ノードが赤で表示され、所得レベルが$50,000より高いときはツリーマップ・ノードが青で表示されます。各ノードの色の計算で使用されたものと同じルールから色が計算されるので、South Atlanticのノード・ヘッダーは青で表示されます。このケースでは、South Atlanticの区画に含まれる全ノードの所得レベルは$50,000より高いです。しかしながら、South Regionのノード・ヘッダーは、West South CentralおよびEast South Centralの区画も含むので、赤で表示されます。このケースでは、South Regionに含まれる全ノードの所得レベルは$50,000より低いです。
ツリーマップやサンバースト・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、ページにツリーマップまたはサンバーストを追加すると、検証やアクセシビリティなどの機能を追加することが必要になる場合があります。ツリーマップおよびサンバースト・コンポーネントで使用できる他の機能へのリンクを次に示します。
部分ページ・レンダリング: ツリーマップまたはサンバーストをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: 有効化すると、ユーザーはツリーマップあるいはサンバーストの表示方法を実行中に変更できます。アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第35章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、ピボット・テーブルおよびピボット・フィルタ・バー・コンポーネントの外観をカスタマイズできます。詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
アクセシビリティ: ツリーマップあるいはサンバースト・コンポーネントをアクセス可能にできます。詳細は、第33章「アクセス可能なADF Facesページの開発」を参照してください。
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、付録D「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックを使用する場合は、ADFビジネス・コンポーネントがどのように構成されているかに基づいて、自動的にバインドされたツリーマップおよびサンバーストを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成」の章を参照してください。
|
注意: 最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。 |
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、22.2項「データ視覚化コンポーネントの共通機能」を参照してください。
ツリーマップおよびサンバースト・コンポーネントを使用するには、データを定義し、ツリーマップあるいはサンバーストをページに追加し、JDeveloperにおける追加の構成を完成させます。
ツリーマップおよびサンバースト・コンポーネントには、1つ以上のディテール・コレクションと1つのマスター・ディテール・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションが必要です。どちらのコンポーネントも、ADF Faces ツリー・コンポーネントと同じデータ・モデルを使用します。ツリー・コンポーネントの詳細は、12.6項「ツリーでのデータの表示」を参照してください。
ツリーマップとサンバーストは、次の属性をJDeveloperに設定する必要があります。
value:ノードのサイズ
fillColor:ノードの色
label:ノードのテキスト識別子
valueおよびlabel属性の値は、ツリーマップあるいはサンバーストのデータ・モデルに保存する必要があり、UI-first開発を使用の場合は、クラスまたはマネージドBeanに保存する必要があります。fillColor値は、データ・モデル、クラスおよびマネージドBeanで指定するか、「プロパティ」ウィンドウで宣言的に指定できます。
図30-26に、図30-1の中のツリーマップを生成するのに使用されるデータのサブセットを示します。これは、図30-2でサンバーストを生成するのに使用された同じデータです。
この例では、United Statesはルート・ノードで、以下3つの子レベルがあります。すなわち、region、divisionおよびstateです。
ツリーマップあるいはサンバーストの構成を正常に行うには、データが次のルールに従うことを確認してください。
各子ノードは、親ノードを1つのみ持つことができます。
レベルをスキップすることはできません。
ツリーマップあるいはサンバーストのモデルをUI-first開発において作成するには、クラスとマネージドBeanを使用してツリー・ノードとツリー・モデルを定義し、ツリーにデータを移入し、かつツリーマップあるいはサンバースト構成の必要に応じ、追加のメソッドを追加します。
ツリーマップとサンバースト人口調査データの例で使用されるクラスおよびマネージドBeanを定義するサンプル・コードについては、F.3.1項「ツリーマップおよびサンバースト人口調査データ例のサンプル・コード」を参照してください。
ツリーマップ・コンポーネントを使用するには、ツリーマップをページに追加し、JDeveloperにおける追加の構成を完成させます。
ツリーマップ・コンポーネントは、ツリーマップの表示や動作をカスタマイズするために追加したり修正したりすることのできる構成可能な属性や子コンポーネントを持ちます。接頭辞dvt:は、各ツリーマップ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
ツリーマップの子コンポーネント、属性およびサポートされているファセットを次のエリアで構成できます。
ツリーマップ(dvt:treemap): ツリーマップ・ノードを折り返します。次の属性を構成してツリーマップの表示をコントロールします。
ラベル: colorLabelおよびsizeLabel属性を使用してツリーマップの色とサイズのメトリックを特定します。ツリーマップには、これらのラベルが凡例表示に必要です。
凡例ソース(legendSource): この属性を、属性グループで構成されたツリーマップでの凡例表示に使用します。属性グループのIDを指定します。
子レベルの表示(displayLevelsChildren): 表示する子レベルの数を指定します。デフォルトでは、ツリーマップはルートと最初の2つの子レベルを表示します。
アニメーション: animationOnDisplay属性を使用して初期のアニメーションをコントロールし、animationOnDataChange属性を使用してその後のアニメーションをコントロールします。アニメーション期間をデフォルトの500ミリ秒から変更するには、animationDuration属性を修正します。
空テキスト(emptyText): emptyText属性を使用して、ツリーマップ・ノードにデータが含まれない場合に表示するテキストを指定します。
グループ・ギャップ(groupGaps): グループ間で表示するギャップを指定します。デフォルトでは、この属性はouterに設定されており、ツリーマップは外部ノード間のギャップのみを表示します。この属性をnoneに設定してすべてのギャップを取り除くことも、あるいはこの属性をallに設定してすべてのグループ間にギャップを追加することもできます。
ソート(sorting): ツリーマップでスライスとダイスのレイアウトを使用する場合は、同じ親を持つ全ノードを、サイズが小さくなる方向にソートするのにこの属性を使用します。
その他のグループ: otherThreshold、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 ADF Facesデータ可視化ツール・タグ・リファレンスを参照してください。ツリーマップ・コンポーネントの追加機能の詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
簡単なUI優先開発を使用してページを設計する場合は、「コンポーネント」ウィンドウを使用してツリーマップをJSFに追加してください。ツリーマップ・コンポーネントをページにドラッグ・アンド・ドロップすると、「ツリーマップの作成」ダイアログが表示されます。図30-27に、「ツリーマップの作成」ダイアログを示します。
「OK」をクリックすると、ページにツリーマップが追加され、「プロパティ」ウィンドウを使用してデータ値を指定し、追加の表示属性を構成できます。または、作成の間にデータのバインドを選択でき、ダイアログを使用して関連するノード・データの構成ができます。
「プロパティ」ウィンドウで、プロパティ・フィールドにマウス・カーソルを合わせると表示されるアイコンをクリックすることで、プロパティの説明や編集オプションを表示できます。図30-28に、ツリーマップのvalue属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してツリーマップを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成に関する項を参照してください。 |
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにツリーマップを追加するには:
「コンポーネント」ウィンドウの「ADFデータ視覚化」ページで、「共通」パネルからツリーマップをページにドラッグ・アンド・ドロップし、「ツリーマップの作成」ダイアログを開きます。
「ツリーマップの作成」ダイアログで、OKをクリックし、ツリーマップをページに追加します。
オプションで、そのダイアログを使用してデータを今すぐバインドを選択し、ツリーマップに表示するデータを表すADFデータ・コントロールをナビゲートして、ツリーマップをバインドします。このオプションを選択すると、ダイアログのデータ・バインディングのフィールドが編集のために使用可能になります。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「プロパティ」ウィンドウに、ツリーマップの属性を表示します。ヘルプ・ボタンを使用して、ツリーマップ・コンポーネントのタグの完全なドキュメントを表示します。
外観の項を開き、次の属性の値を入力します。
レイアウト: この属性のドロップダウン・メニューを使用して、デフォルトのレイアウトをsquarifiedからsliceAndDiceHorizontalまたはsliceAndDiceVerticalに変更します。
ツリーマップ・レイアウトのサンプル・イメージについては、30.1.2.1項「ツリーマップとサンバーストのレイアウト」を参照してください。
サマリー ツリーマップの目的およびスクリーン・リーダーで使用する場合の構造のサマリーを入力します。
「コンポーネント」ウィンドウからツリーマップをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合は、JDeveloperはタグの最小セットしか生成しません。例30-1に、生成されるコードを示します。
例30-1 UI-First開発におけるツリーマップのサンプル・コード
<dvt:treemap id="t1"> <dvt:treemapNode id="tn1"/> </dvt:treemap>
ツリーマップの作成時にデータとデータ・コントロールのバインドを選択した場合、JDeveloperはデータ・モデルに基づきコードを生成します。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成に関する項を参照してください。
サンバースト・コンポーネントを使用するには、をサンバーストページに追加し、JDeveloperにおける追加の構成を完成させます。
サンバースト・コンポーネントは、ツリーマップの表示や動作をカスタマイズするために追加したり修正したりすることのできる構成可能な属性や子コンポーネントを持ちます。接頭辞dvt:は、各ツリーマップ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
サンバーストの子コンポーネント、属性およびサポートされているファセットを次のエリアで構成できます。
サンバースト(dvt:sunburst): サンバースト・ノードを折り返します。次の属性を構成してサンバーストの表示をコントロールします。
ラベル: colorLabelおよびsizeLabel属性を使用してサンバーストの色とサイズのメトリックを特定します。サンバーストには、これらのラベルが凡例表示に必要です。
凡例ソース(legendSource): この属性を、属性グループで構成されたサンバーストでの凡例表示に使用します。属性グループのIDを指定します。
子レベルの表示(displayLevelsChildren): 表示する子レベルの数を指定します。デフォルトでは、サンバーストはルートと最初の2つの子レベルを表示します。
アニメーション: animationOnDisplay属性を使用して初期のアニメーションをコントロールし、animationOnDataChange属性を使用してその後のアニメーションをコントロールします。アニメーション期間をデフォルトの500ミリ秒から変更するには、animationDuration属性を修正します。
ローテーション (rotation): クライアント側のサンバーストのローテーションを可能にするのにこの属性を使用します。
開始角度(startAngle): サンバーストの開始角度を指定します。
空テキスト(emptyText): emptyText属性を使用して、サンバースト・ノードにデータが含まれない場合に表示するテキストを指定します。
ソート(sorting): ツリーマップでスライスとダイスのレイアウトを使用する場合は、同じ親を持つ全ノードを、サイズが小さくなる方向にソートするのにこの属性を使用します。
その他のグループ: otherThreshold、otherColorおよびotherPattern属性を使用して、子のデータをその他のノ－ドに集計します。
サンバースト・ノード(dvt:sunburstNode): サンバースト・コンポーネントの子。このタグはサンバーストの各ノードのサイズと色を定義し、データ・モデルでの各行にスタンプされます。行によりスタンプを変更する場合、ADF Faces af:switcherコンポーネントを使用し、各行にサンバースト・ノードを挿入します。次の属性を構成してノードの表示をコントロールします。
value (必須): サンバースト・ノードの値を指定します。この値はサンバースト内のノードの相対的なサイズを決定します。
fillColor (必須): ノードの塗りつぶしの色をRGB16進で指定します。この値は、サンバーストを正しく表示するのにも必要です。
fillPattern: オプションとして使用する塗りつぶしパターンを指定します。パターンは白のバックグラウンドで描かれ、フォアグラウンドの色はfillColor属性で指定された色を使用します。
label: ノードのラベルを指定します。
labelDisplay: ノード・ラベルがどのようにを表示されるかを指定します。デフォルトでは、この属性はrotatedに設定され、ラベルをノード内部でローテーションして表示しますが、offに設定してラベルの表示を消したり、onに設定してノード内部で水平のラベルを表示したりすることもできます。
|
注意: ローテーションしたテキストは、すべてのクライアント・テクノロジでサポートされているわけではありません。特に、ローテーションしたテキストは、Flashのイメージ形式を使用するクライアントでサポートされません。 |
属性グループ(dvt:attributeGroup): サンバースト・ノードのオプションとしての子。この属性を追加し、fillColorおよびfillPatternの値を、データ・セットのカテゴリのバケットや連続的な種別に基づき自動的に生成します。
サポートされるファセット: サンバーストあるいはサンバースト・ノードのオプションとしての子。サンバースト・コンポーネントはポップアップ・コンポーネントの表示のためにファセットをサポートし、サンバーストのノード・コンポーネントは、サンバースト・ノードのラベルが十分でない場合に詳細を追加するための、コンテンツ・ファセットをサポートします。
サンバーストは、他のDVTコンポーネントと同じ機能およびタグの多くも共有します。サンバースト・タグの完全なリストについては、Oracle ADF Facesデータ可視化ツール・タグ・リファレンスを参照してください。サンバースト・コンポーネントの追加機能の詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
簡単なUI優先開発を使用してページを設計しているときには、「コンポーネント」ウィンドウを使用してサンバーストをJSFページに追加します。サンバースト・コンポーネントをページにドラッグ・アンド・ドロップすると、「サンバーストの作成」ダイアログが表示されます。図30-29に、「サンバーストの作成」ダイアログを示します。
「OK」クリックすると、ページにサンバーストが追加され、「プロパティ」ウィンドウを使用してデータ値を指定し、追加の表示属性を構成できます。または、作成の間にデータのバインドを選択でき、ダイアログを使用して関連するノード・データの構成ができます。
「プロパティ」ウィンドウで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図30-30に、サンバーストのvalue属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してサンバーストを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成に関する項を参照してください。 |
始める前に:
サンバーストの属性やサンバーストの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにサンバーストを追加するには、
「コンポーネント」ウィンドウの「ADFデータ視覚化」ページで、「共通」パネルからサンバースト・コンポーネントをページにドラッグ・アンド・ドロップし、「サンバーストの作成」ダイアログを開きます。
「サンバーストの作成」ダイアログで、OKをクリックし、サンバーストをページに追加します。
オプションで、そのダイアログを使用して「データを今すぐバインド」を選択し、サンバーストに表示するデータを表すADFデータ・コントロールにナビゲートして、サンバーストをバインドします。このオプションを選択すると、ダイアログのデータ・バインディングのフィールドが編集のために使用可能になります。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「プロパティ」ウィンドウに、サンバーストの属性を表示します。ヘルプ・ボタンを使用して、sunburstコンポーネントの完全なタグ・ドキュメントを表示します。
その他の項を開き、次の属性の値を設定します。
サマリー サンバーストの目的およびスクリーン・リーダーで使用する場合の構造を説明するテキストを入力します。または、属性のドロップダウン・メニューからテキスト・リソースの選択あるいは式ビルダーを選び、テキスト・リソースまたはEL式を選択します。
ローテーション: ドロップダウン・メニューを使用して、サンバーストでローテーションを可能にするかどうかを指定します。デフォルトでは、この属性はonに設定されていますが、offに設定してローテーションのサポートを無効化することもできます。または、属性のドロップダウン・メニューから式ビルダーを選び、ローテーションを設定するEL式を作成します。
StartAngle: サンバーストの開始角度を入力します。デフォルトでは、この角度は90に設定されていますが、0から360までの任意の値を入力できます。または、属性のドロップダウン・メニューから式ビルダーを選び、開始角度を設定するEL式を作成します。
「コンポーネント」ウィンドウからサンバーストをJSFページにドラッグ・アンド・ドロップし、生成中にデータ・バインドを選択しなかった場合は、JDeveloperはタグの最小セットしか生成しません。例30-2に、生成されるコードを示します。
例30-2 UI-First開発におけるサンバーストのサンプル・コード
<dvt:sunburst id="s1"> <dvt:sunburstNode id="sn1"/> </dvt:sunburst>
サンバーストの作成時にデータとデータ・コントロールのバインドを選択した場合、JDeveloperはデータ・モデルに基づきコードを生成します。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成に関する項を参照してください。
UI-first開発を使用してツリーマップあるいはサンバーストにデータを追加するには、ツリー・モデルを作成してJDeveloperにおけるクラス、Beanあるいはメソッドを参照する、クラス、マネージドBean、およびメソッドを作成します。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ツリーマップとサンバーストは同じデータ・モデルを使用しているので、ツリーマップとサンバーストにデータを追加するプロセスは類似しています。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにツリーマップあるいはサンバーストを追加します。ページにツリーマップを追加する際のヘルプについては、30.2.2.2項「ツリーマップのページへの追加方法」を参照してください。ページにサンバーストを追加する際のヘルプについては、30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
UI-first開発においてツリーマップあるいはサンバースト・コンポーネントにデータを追加するには:
ツリーマップのツリー・モデルを定義しツリーマップにデータを供給するクラスおよびマネージドBeanを作成します。その他の詳細および例については、30.2.1項「ツリーマップとサンバーストのデータ要件」を参照してください。クラス作成のヘルプは、『Oracle Jdeveloperによるアプリケーションの開発』の「Javaコードの使用」の章を参照してください。マネージドBeanの詳細は、3.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式の作成のヘルプについては、第3.5.1項「EL式の作成方法」を参照してください。
Var: レンダリング・フェーズの間に使用される変数の名前を入力し、ツリーマップ・コレクションの各要素を参照します。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
たとえば、国勢調査のデータの例での各要素を参照するため、rowをVarフィールドに入力します。
VarStatus: オプションとして、レンダリング・フェーズの変数の名前を入力し、コレクション・モデルやループ・カウンタ情報など、コンポーネントの状態に関するコンテキスト情報にアクセスします。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
構造ウィンドウでdvt:treemapNodeノードまたはdvt:sunburstNodeを右クリックし、プロパティに移動を選択します。
共通の項でValue属性のドロップダウン・メニューを使し、式ビルダーを選択してください。
「式ビルダー」ダイアログで、ツリーマップあるいはサンバースト・ノードのサイズ・データを参照するEL式を作成し、このとき、ノードのサイズを戻すために作成したコンポーネントやメソッドの作成の際にVar属性に指定した変数を使用します。
たとえば、国勢調査のデータの例では、Var属性はrowと名付けられ、m_size変数に保存され、TreeNodeクラスのgetSize()メソッドにより返されます。これを、例F-3「ツリーマップあるいはサンバーストのツリー・ノード作成のためのコード・サンプル」に示します。国勢調査のデータの例におけるサイズ・データを参照するには、次の式を作成します。#{row.size}。
「プロパティ」ウィンドウで、「外観」の項を開き、次の属性の値を入力します。
FillColor: ノードの塗りつぶしの色を指定します。色をRGB16進で入力するか、属性のドロップダウン・メニューを使用して式ビルダーを選び、EL式を作成することができます。
たとえば、#FF0000を入力すればノード塗りつぶしの色を赤に設定できます。しかしながら、ツリーマップまたはサンバースト・ノードに、色メトリックに基づいた色変更をすることがあります。図30-1「米国の地域別人口と所得中央値を表示するツリーマップ」の国勢調査のデータの例では、塗りつぶしの色は所得データから計算されます。
例30-3に、国勢調査のデータ例使用したサンプルのメソッドを示します。式ビルダーでこのサンプルを参照するには、次の式を作成します。#{row.color}。
例30-3 ツリーマップあるいはサンバーストのノードの塗りつぶしの色を設定するサンプルのメソッド
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式を作成できます。
たとえば、国勢調査のデータの例では、ラベル表示のためにノード・データを文字列に変換するメソッドを使用しています。convertToString ()メソッドについては、例F-5「国勢調査データのツリーマップ設定のためのマネージドBeanの例」を参照してください。TreeNodeクラスはconvertToString()メソッドからの出力を使用し、ラベル表示に使用されるtext変数を設定します。式ビルダーでこのサンプルを参照するには、次の式を作成します。#{row.text}。
|
注意: 属性グループを使用して |
この章の例では、データをツリーマップおよびサンバーストに入力するのにクラスおよびマネージドBeanを使用します。アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してサンバーストを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた階層ビューア、ツリーマップおよびサンバースト・コンポーネントの作成に関する項を参照してください。
また、最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合は、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。
ツリーマップとサンバーストの表示要素は構成が可能で、これにはパターン、属性グループ、凡例、ラベル、アニメーション、小さいデータ・コントリビュータの集計、スキニング、サイジング、およびノードのサイズによる順序付けが含まれます。
ツリーマップおよびサンバーストのサイズおよびスタイルを、inlineStyleあるいはstyleClass属性を使用して構成できます。どちらの属性も、「プロパティ」ウィンドウの「スタイル」セクションで、dvt:treemapあるいはdvt:sunburstコンポーネントで使用可能です。これらの属性を使用して、フォント、境界線、およびバックグラウンド要素など、スタイルに関する機能をカスタマイズできます。
ツリーマップとサンバーストは、コンポーネントのトップ・レベルだけでなく、ノード、ノード・ヘッダー、およびツリーマップを分離したりサンバーストを開いたり閉じたりするのに使用するアイコンについても、色やフォント・スタイルをカスタマイズするためのスキニングもサポートします。ユーザーがノードやノード・ヘッダーをマウスでホバーしたり選択したりしたときの、ツリーマップあるいはサンバーストのノード、あるいはツリーマップのノード・ヘッダーについて、スタイルを定義するためにもスキニングを使用できます。ノードやノード・ヘッダーがドリル可能である場合は、ユーザーがノードやノード・ヘッダーをマウスでホバーしたり選択したりしたときのスタイルを定義するためにスキニングを使用できます。
例30-4は、ユーザーがノードを選択したときにノードのテキストそれを太字で表示するように構成されたサンバーストのスキニング・キーを示します。
ツリーマップとサンバーストのスキニング・キーの完全なリストについては、Oracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・データ視覚化ツール・タグ・リファレンスを参照してください。スキニングとスタイルを使用したアプリケーションのカスタマイズの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ツリーマップあるいはサンバーストを含むページには、サイズあるいはスタイルを変更する機能に制約のある場合があります。ページ・レイアウトの詳細は、第9章「Webページ上のコンテンツの編成」を参照してください。
ツリーマップあるいはサンバースト・ノードがパターンを表示するように構成できます。利用可能なパターンは以下です。
none (デフォルト)
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
ツリーマップあるいはサンバースト・ノードでのパターン表示を構成するには、fillPattern属性をdvt:treemapNodeあるいはdvt:sunburstNodeノード上で指定します。離散属性グループを使用して塗りつぶしパターンを指定することもできます。離散属性グループの詳細は、30.4.3.1項「ツリーマップおよびサンバーストの離散属性グループの構成方法」を参照してください。
データ・セットのカテゴリ分類に基づいて色または形状などのスタイル属性値を生成するために属性グループを使用します。ツリーマップおよびサンバーストは、子ノードの色やパターンの設定のため、離散および連続の両方の属性グループをサポートします。
色やパターンを所得レベルの高低などの所定の条件に依存させたい場合には、離散属性グループを使用します。色を高低値の間で徐々に変化させたい場合には、連続属性グループを使用します。
dvt:attributeGroupsタグをユーザーのツリーマップあるいはサンバーストに追加し、色またはパターンが表示される条件を定義することにより、離散属性グループを構成します。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップあるいはサンバーストの離散属性グループを構成するには、
構造ウィンドウで「dvt:treemapNode」または「dvt:sunburstNode」ノードを右クリックし、「コンポーネント・ノードの中に挿入」→「属性グループ」を選択します。
たとえば、ツリーマップの離散属性グループを構成するには、「dvt:treemapNode」ノードを右クリックし、「ツリーマップ・ノードの中に挿入」→「属性グループ」を選択します。
dvt:attributeGroups要素を右クリックし、プロパティに移動を選択します。
「プロパティ」ウィンドウで「外観」セクションを開きます。
Value属性のドロップダウン・メニューから、式ビルダーを選択し、色表示をコントロールする色メトリックと条件を参照する式を作成します。
たとえば、図30-5に示すように所得レベルの中間値が$50,000より高いか低いかでツリーマップに異なる色を表示させたい場合は、Valueフィールドに次の式と類似の式を作成します。
#{row.income > 50000}
EL式の作成のヘルプについては、第3.5.1項「EL式の作成方法」を参照してください。
Label属性のドロップダウン・メニューから、式ビルダーを選択し、離散色あるいはパターンが表すものを説明する凡例の式を作成します。
たとえば、色が所得レベルの中間値の高低を表すことをユーザーに知らせるには、次の式と類似の式をLabelフィールドに作成します。
#{row.income > 50000 ? 'High Income' : 'Low Income'}
タイプ属性のドロップダウン・メニューから、編集を選択します。
「属性の編集」ダイアログから、色、パターン、あるいは両方を選び、OKをクリックします。
色とパターンの両方を選び、即時にページを作成する場合、ツリーマップあるいはサンバーストは離散属性グループにデフォルトの色およびパターンを使用します。
例30-31に、国勢調査のデータ例で,デフォルトの色とパターンを受け入れた場合に表示されるツリーマップを示します。
オプションとして、属性グループのデフォルトの色を変更するには、以下を実行します。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、「属性グループの中に挿入」→属性合致ルールを選択します。
dvt:attributeMatchRuleタグは、データが所定の条件に合致したときに属性を置き換えるのに使用されます。国勢調査データの例では、この条件は$50,000より高い所得の中間値です。
dvt:attributeMatchRule要素を右クリックし、プロパティに移動を選択します。
「グループ」フィールドで、条件がTrueのときにその色を表示する場合はtrueを入力し、条件がFalseのときにその色を表示する場合はfalseを入力します。
たとえば、国勢調査データの例で所得の中間値が50000より高いときに表示する色を選ぶには、trueを入力します。
構造ウィンドウでdvt:attributeMatchRule要素を右クリックし、「一致ルールの中に挿入」→「属性」を選択します。
「属性を挿入」ダイアログで、colorを「名前」フィールドに入力し、色を「値」フィールドに入力し、「OK」をクリックします。
値のフィールドは、6桁のRGB16進値を受け入れます。たとえば、値を緑に設定するには、valueフィールドに以下を入力します。#00AA00。
残りの半分の条件についてデフォルトの色を変更する場合、ステップ1からステップ5を繰り返します。
たとえば、所得が50000より低い場合に表示する色を定義する別の合致ルールを定義し、Groupフィールドをfalseに設定します。
オプションとして、属性グループのデフォルトのパターンを変更するには、以下を実行します。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、「属性グループの中に挿入」→属性合致ルールを選択します。
dvt:attributeMatchRule要素を右クリックし、プロパティに移動を選択します。
「グループ」フィールドで、条件がTrueのときにそのパターンを表示する場合はtrueを入力し、条件がFalseのときにそのパターンを表示する場合はfalseを入力します。
構造ウィンドウでdvt:attributeMatchRule要素を右クリックし、「属性一致ルールの中に挿入」→「属性」を選択します。
「属性の挿入」ダイアログで、patternを「Name」フィールドに入力し、サポートされているパターンを「Value」フィールドに入力し、「OK」をクリックします。
たとえば、「Value」フィールドにsmallDiamondを入力し、パターンを小ダイヤモンドにします。利用可能なパターンのリストついては、30.4.2.項「パターン表示の構成」を参照してください。
残りの半分の条件についてデフォルトの色を変更する場合、ステップ1からステップ5を繰り返します。
たとえば、所得が50000より低い場合に表示する色を定義する別の合致ルールを定義し、Groupフィールドをfalseに設定します。
例30-5に、図30-5「離散属性グループを表示するツリーマップ」で示したツリーマップで離散属性グループを構成した場合のJSFページ上のコードを示します。
例30-5 離散属性グループの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タグをユーザーのツリーマップあるいはサンバーストに追加し、データの範囲の最小および最大レベルで表示される色を定義することにより、連続属性グループを構成します。属性グループはデータを使用してデータ範囲を決め対応する値で凡例にラベルを表示しますが、異なる範囲やラベルを使用するように属性グループを構成することもできます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップあるいはサンバーストの連続属性グループを構成するには、
構造ウィンドウで「dvt:treemapNode」または「dvt:sunburstNode」ノードを右クリックし、「コンポーネント・ノードの中に挿入」→「属性グループ」を選択します。
たとえば、ツリーマップの連続属性グループを構成するには、dvt:treemapNodeノードを右クリックし、「ツリーマップ・ノードの中に挿入」→「属性グループ」を選択します。
dvt:attributeGroups要素を右クリックし、プロパティに移動を選択します。
「プロパティ」ウィンドウで「外観」セクションを開きます。
「値」属性のドロップダウン・メニューから、「式ビルダー」を選択し、色メトリックを参照する式を入力します。
たとえば、国勢調査の例から所得データを返すEL式を指定するには、「式ビルダー」を選び、次の値をValueフィールドに入力します。#{row.income}。EL式の作成のヘルプについては、第3.5.1項「EL式の作成方法」を参照してください。
「タイプ」フィールドには、colorを入力します。
「属性タイプ」フィールドでは、属性のドロップダウン・メニューを使用して、continuousを選択します。
オプションとして、次の最小あるいは最大の範囲、およびラベルに値を設定します。
MinValue: 範囲の最小の境界を入力します。または、属性のドロップダウン・メニューから式ビルダーを選び、最小の境界を返す式を入力します。
たとえば、35000をMinValueフィールドに入力し、範囲の低い方の境界を35,000に設定します。
MaxValue: 範囲の最大の境界を入力します。または、属性のドロップダウン・メニューから式ビルダーを選び、最大の境界を返す式を入力します。
MinLabel: 凡例で表示する最小値のラベルを入力します。または、属性のドロップダウン・メニューからテキスト・リソースの選択あるいは式ビルダーを選び、テキスト・リソースまたはEL式を選択します。
たとえば、$35000をMinLabelフィールドに入力し、凡例に表示されるラベルを$35000に設定します。
MaxLabel: 凡例で表示する最大値のラベルを入力します。または、属性のドロップダウン・メニューからテキスト・リソースの選択あるいは式ビルダーを選び、テキスト・リソースまたはEL式を選択します。
最小および最大の境界で使用される色を定義するには、以下を実行します。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、「属性グループの中に挿入」→「属性」を選択します。
「属性を挿入」ダイアログでcolor1を最小の境界の名前と値に入力し、OKをクリックします。
値のフィールドは、6桁のRGB16進値を受け入れます。たとえば、最小の境界の値を黒に設定するには(この色は図30-1の属性グループで使用された色)、valueフィールドに以下を入力します。#000000。
構造ウィンドウでdvt:attributeGroups要素を右クリックし、「属性グループの中に挿入」→「属性」を選択します。
「属性を挿入」ダイアログでcolor2を最大の境界の名前と値に入力し、OKをクリックします。
値のフィールドは、6桁のRGB16進値を受け入れます。たとえば、最大の境界の値を薄い緑に設定するには(この色は図30-1の属性グループで使用された色)、valueフィールドに以下を入力します。#00AA00。
図30-0に、図30-1に示した連続属性グループを構成した場合のJSFページ上のコードを示します。
例30-6 連続属性グループの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ノードは構成された属性グループの色やパターンを使用しません。詳細は、30.4.5.2項「ツリーマップおよびサンバーストのその他のノードの構成に関する必知事項」を参照してください。
次の属性の値を指定すると、凡例は自動的に表示されます。
sizeLabel: コンポーネントのサイズ・メトリックを説明するテキストを指定します。または、属性のドロップダウン・メニューから「テキスト・リソースの選択」または「式ビルダー」を選択し、テキスト・リソースまたはEL式を選択します。
colorLabel: コンポーネントの色メトリックを説明するテキストを指定します。または、属性のドロップダウン・メニューから「テキスト・リソースの選択」または「式ビルダー」を選択し、テキスト・リソースまたはEL式を選択します。
legendSource: オプションとして、ツリーマップあるいはサンバーストの表示で使用される属性グループのIDを指定します。
ユーザーのツリーマップあるいはサンバーストが属性グループを使用しない場合は、凡例の表示はユーザーがサイズと色ラベルに指定したテキスト記述に限定されます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップあるいはサンバーストの凡例を構成するには、
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで「外観」セクションを開きます。
SizeLabelフィールドに、サイズ・メトリックを説明するために凡例が表示するテキストを入力します。
たとえば、人口をSizeLabelフィールドに入力し、ツリーマップあるいはサンバーストのノードのサイズは人口に基づいていることを示します。
ドロップダウン・メニューを使用して、テキスト・リソース、あるいは「式ビルダー」ダイアログからEL式を選択します。たとえば、国勢調査の例からサイズを返すEL式を指定するには、式ビルダーを選び、次の値をSizeLabelフィールドに入力します。#{row.size}。EL式の作成のヘルプについては、第3.5.1項「EL式の作成方法」を参照してください。
ColorLabelフィールドに、色メトリックを説明するために凡例が表示するテキストを入力します。
たとえば、家計所得の中間値をColorLabelフィールドに入力し、ツリーマップあるいはサンバーストのノードのサイズは人口に基づいていることを示します。
またはドロップダウン・メニューを使用してテキスト・リソースを入力するか、式ビルダーから式を選択します。たとえば、国勢調査の例から色を返すEL式を指定するには、式ビルダーを選び、次の値をColorLabelフィールドに入力します。#{color.size}。
ユーザーのツリーマップあるいはサンバーストが属性グループを使用する場合は、次のようにattributeGroupsコンポーネントのIDを参照します。
LegendSource属性のドロップダウン・メニューから、編集を選択します。
「プロパティの編集 - LegendSource」ダイアログで、各コンポーネントを開き、attributeGroupsコンポーネントを見つけます。
attributeGroupsコンポーネントを選び、OKをクリックします。
その他のノードを、小さなデータ・セットを1つの大きなセットに集計し、比較を容易にするのに使用します。
ツリーマップのその他のノードを、次の属性の値を設定して構成します。
OtherThreshold: その下でノードがその他のノードに集計される、親ノードのパーセンテージを指定します。有効な値は0から1の範囲です。
たとえば、0.1の値により、親の10%未満のすべてのノードがその他のノードに集計されます。図30-16では、otherThresholdは.08すなわち8パーセントに設定され、これによりSouth Carolina、Delaware、West VirginiaおよびDistrict of ColumbiaノードをSouth Atlantic地域に集計します。
この値を.1あるいは10%に増やすと、Marylandノードが集計に追加されます。図30-32に、otherThreshold属性が.1に設定された、同じツリーマップを示します。
OtherColor: 現在のその他のノードに含まれるすべてのノードのRowKeySetを受け取り、その他のノードの色のStringを返すメソッドへの参照を指定します。
たとえば、国勢調査のデータの例では、その他のノードに含まれる全ノードの所得の中間値を計算するメソッドを使用しています。家計所得の中間値が50,000未満の場合は、メソッドは低所得を表示するのに使用された、ツリーマップの集計されなかったノードと同じ色の値を返します。その他のノード上の色が図30-32でどのように変化し、Marylandノードがその他のノードに含まれるとき、高い所得の中間値を反映するかに注意してください。
例30-7に、国勢調査のデータ例で所得の中間値に基づきotherColorの値を指定するサンプルのメソッドを示します。
例30-7 ツリーマップの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を返すメソッドへの参照を指定します。
例30-8に、その他のノードの塗りつぶしパターンをsmallDiamondに設定するメソッドのサンプル・コードを示します。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
現在のその他のノードに含まれるすべてのノードのRowKeySetを受け取り、その他のノードの色のStringを返すメソッドを作成します。
米国国勢調査のデータの例を使用するには、例30-7のサンプル・メソッドをマネージドBeanに追加します。
マネージドBeanについてのヘルプが必要な場合、3.6項「マネージドBeanの作成と使用」を参照してください。
オプションとして、現在のその他のノードに含まれるすべてのノードのRowKeySetを受け取り、その他のノードのパターンのStringを返すメソッドを作成します。
米国国勢調査のデータの例を使用するには、例30-8のサンプル・メソッドをマネージドBeanに追加します。
otherColorノードをツリーマップあるいはサンバーストに追加するには、
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「その他」セクションを開き、次の属性の値を入力します。
OtherThreshold: 集計の対象とするノードのパーセンテージを、0から1の間の値で入力します。
OtherColor: ドロップダウン・メニューから編集を選び、マネージドBeanとotherColor属性を設定するメソッドを選択します。
たとえば、treemapという名前のマネージドBeanとotherColorという名前のメソッドには、OtherColorフィールドに、以下を入力します。#{treemap.otherColor}。
OtherPattern: ドロップダウン・メニューから編集を選び、マネージドBeanとotherPattern属性を設定するメソッドを選択します。
たとえば、treemapという名前のマネージドBeanとotherPatternという名前のメソッドには、OtherPatternフィールドに、以下を入力します。#{treemap.otherPattern}。
その他のノードは個々のノードの集計であるため、子、属性グループ、選択、ツールチップ、およびポップアップ・サポートを管理するとき、他のツリーマップおよびサンバ－ストの子ノードとは、動作が異なります。特に、次の相違点を知っておく必要があります。
子ノード: 集計されたノードの子は表示されません。
その他のノード表示と属性グループ: 色やパターンの指定に属性グループを使用している場合、その色やパターンはその他のノード上には表示されません。その他のノードに属性グループと同じ色やパターンを表示する場合、表示する色やパターンを返すメソッドをマネージド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ファセットを定義することにより、ツリーマップ上の拡張ノード・コンテンツを構成します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにツリーマップを追加します。詳細は、30.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
拡張ノード・コンテンツをツリーマップに追加するには、
構造ウィンドウで、dvt:treemapNodeを開きます。
ファセットを構造ウィンドウで構成するには、f:facet - contentノードを右クリックし、「f:facet - contentの中に挿入」に次の1つを選びます。
イメージ
出力テキスト
パネル・グループ・レイアウト
スペーサ
1つ以上のコンポーネントを挿入するには、パネル・グループ・レイアウトを選び、ユーザーのアプリケーションの必要に応じてイメージ、出力テキスト、あるいはスペーサを追加します。パネル・グループ・レイアウト構成に関するヘルプについては、9.13.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。
イメージおよび出力テキスト構成上のヘルプについては、第18章「出力コンポーネントの使用方法」を参照してください。
dvt:sunburstNodeノード上でrootContentファセットを定義することにより、ツリーマップ上の拡張ノード・コンテンツを構成します。
始める前に:
サンバーストの属性やサンバーストの子タグが機能に影響を与える可能性について理解しておくと役立ちます。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにサンバーストを追加します。詳細は、30.2.3.2項「ページにサンバーストを追加する方法」を参照してください。
拡張ノード・コンテンツをサンバーストに追加するには、
構造ウィンドウで、dvt:sunburstノードを展開します。
ファセットを構造ウィンドウで構成するには、f:facet - contentノードを右クリックし、「f:facet - rootContentの中に挿入」に次の1つを選びます。
イメージ
出力テキスト
パネル・グループ・レイアウト
スペーサ
1つ以上のコンポーネントを挿入するには、パネル・グループ・レイアウトを選び、ユーザーのアプリケーションの必要に応じてイメージ、出力テキスト、あるいはスペーサを追加します。パネル・グループ・レイアウト構成に関するヘルプについては、9.13.1項「panelGroupLayoutコンポーネントの使用方法」を参照してください。
イメージおよび出力テキスト構成上のヘルプについては、第18章「出力コンポーネントの使用方法」を参照してください。
ツリーマップとサンバーストは、複数のタイプのアニメーションをサポートします。デフォルトではアニメーションは表示されませんが、アニメーションをツリーマップあるいはサンバーストに、最初に表示されるときに追加できます。コンポーネント上でデータ変更が発生したとき、アニメーション効果のカスタマイズができます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
ツリーマップあるいはサンバーストにアニメーション効果を追加するには、
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「外観」の項を開き、次の属性の値を入力します。
AnimationDuration: アニメーションの継続時間をミリ秒単位で指定します。デフォルト値は500です。データ変更については、アニメーションは段階別に発生し、アニメーションの各段階でデフォルトの値は500です。
AnimationDisplay: ドロップダウン・メニューを使用し、コンポーネントが最初にレンダリングされたときに適用するアニメーションのタイプを指定します。デフォルトでは、noneに設定されています。
AnimationOnDataChange: ドロップダウン・メニューを使用し、ツリーマップかサンバーストでデータが変更されたときに適用するアニメーションのタイプを指定します。デフォルトでは、アクティブ・データ・サービスのデータ変更イベントのため、activeDataに設定されています。
ツリーマップおよびサンバーストでは、部分ページ・リフレッシュおよびアクティブ・データ・サービス・イベントの両方にアニメーションを適用するので、autoタイプが推奨されます。
表30-1に、サポートされているアニメーション効果のリストを示します。
表30-1 ツリーマップとサンバーストのアニメーション効果
| アニメーション効果 | AnimationOnDisplay | AnimationOnDataChange |
|---|---|---|
|
|
x |
x |
|
|
x |
|
|
|
x |
x |
|
|
x |
|
|
|
x (ツリーマップのみ) |
|
|
|
x (ツリーマップのみ) |
|
|
|
x (サンバーストのみ) |
|
|
|
x (サンバーストのみ) |
|
|
|
x (サンバーストのみ) |
|
|
|
x |
|
|
|
x |
|
|
|
x |
|
|
|
x |
|
|
|
x |
x |
ツリーマップとサンバーストは、次の要素についてラベル表示のカスタマイズをサポートします。
colorLabelおよびsizeLabel: これらのラベルは凡例表示に使用されます。これらのラベルの構成の詳細は、30.4.4項「ツリーマップおよびサンバーストの凡例の構成方法」を参照してください。
treemapNodeHeader: ツリーマップ・ノード・ヘッダーに表示されるタイトルは構成可能です。ツリーマップ・ノード・ヘッダー・タイトルのカスタマイズの構成の詳細は、30.4.10項「ツリーマップ・ノード・ヘッダーとグループ・ギャップ表示の構成」を参照してください。
ノード・ラベル: ツリーマップとサンバーストの両方で、ノード・ラベルのサイズ、スタイルおよび表示を構成できます。レイアウトの違いにより、構成のオプションがコンポーネント間でわずかに異なります。
ツリーマップ・ノード上のラベル属性を定義することにより、ツリーマップ・ノード・ラベルを構成します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにツリーマップを追加します。詳細は、30.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に設定してラベルをノード内に表示することもできます。
サンバースト・ノード上のラベル属性を設定することにより、サンバースト・ノード・ラベルを構成します。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにサンバーストを追加します。詳細は、30.2.3.2項「ページにサンバーストを追加する方法」を参照してください。
サンバースト・ノード・ラベルを構成するには、
構造ウィンドウで、dvt:sunburstNodeノードを右クリックし、プロパティに移動を選択します。
「プロパティ」ウィンドウで、「外観」の項を開き、次の属性の値を入力します。
LabelStyle: ヘッダー内に表示されるラベルのフォント・スタイルを指定します。この属性は、font-sizeやcolorなど、CSSスタイル属性を受け入れます。
たとえば、タイトルのサイズを14ピクセルに変え、色を白に変えるには、次の値をLabelStyleに入力します。
font-size:14px;color: #FFFFFF
CSS属性の完全なリストについては、次のアドレスのWorld Wide Web ConsortiumのWebサイトを参照してください。
LabelDisplay: ドロップダウン・メニューを使用して、ノードのラベル表示を指定します。デフォルトの値はrotatedで、クライアント環境がローテートしたテキストをサポートしていれば、ノード内でローテートしたラベルを表示します。これをoffに設定してラベル表示を消したり、onに設定してノード内でラベルを水平に表示することもできます。
|
注意:
|
ツリーマップのノード・ヘッダーは、ツリーマップに2つ以上の子レベルがあるときは、デフォルトでいつでも表示されます。デフォルトの表示を変更する場合、ノード・ヘッダーを構成します。
グループ・ギャップは、外部グループのノード間で、デフォルトで表示されます。ノード間でのグループ・ギャップの表示方法を変更する場合、グループ・ギャップを構成します。
dvt:treemapNodeHeader要素をツリーマップ・ノードに追加し、次の属性の値を設定することにより、ツリーマップのノード・ヘッダーを構成します。
labelStyle: ヘッダー内に表示されるラベルのフォント・スタイルを指定します。この属性は、font-sizeやcolorなど、CSSスタイル属性を受け入れます。
CSS属性の完全なリストについては、次のアドレスのWorld Wide Web ConsortiumのWebサイトを参照してください。
titleHalign: ヘッダーのタイトルの水平方向の配置を指定します。デフォルトではこの属性はstartに設定され、左から右モードではタイトルを左揃えに配置し、右から左モードでは右揃えに配置します。この属性をcenterに設定してタイトルを中央に配置したり、endに設定して、左から右モードではタイトルを右揃えに配置し、右から左モードでは左揃えに配置することができます。
useNodeColor: ヘッダーに親ノードのノード色を使用させるには、これをonに設定します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップを追加します。詳細は、30.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
コンポーネントをページに追加したときにツリーマップとデータ・コントロールをバインドしなかった場合は、データをツリーマップに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ツリーマップ・ノード・ヘッダーを構成するには、
構造ウィンドウで、dvt:treemapNodeノードを右クリックし、「dvt:treemapNodeの中に挿入」→ツリーマップ・ノード・ヘッダーを選択します。
dvt:treemapNodeHeaderノードを右クリックし、プロパティに移動を選択します。
「プロパティ」ウィンドウで、次の属性の値を入力します。
LabelStyle: ノード・ヘッダー・タイトルのスタイルを入力します。
たとえば、タイトルのサイズを14ピクセルに変え、色を白に変えるには、次の値をLabelStyleに入力します。
font-size:14px;color: #FFFFFF
TitleHalign: この属性のドロップダウン・メニューを使用してデフォルトの配置をcenterまたはendに変更します。デフォルトではこの属性はstartに設定され、左から右モードではタイトルを左揃えに配置し、右から左モードでは右揃えに配置します。
UseNodeColor: この属性のドロップダウン・メニューを使用してデフォルトをonに変更します。
ヘッダーでのノードの色の使用を選択すると、使用されるノードの色は、そのノードがツリーマップの最下レベルであった場合にツリーマップに表示されたものになります。
ツリーマップが全階層レベルで同じ色スキームを使用している場合は、ヘッダーにノードの色を使用することで、有用な情報が提供できます。しかしながら、階層の異なるレベルに異なる色スキームを指定した場合は、ノードの色の使用はあまり意味がありません。
ノード間に表示されるグループ・ギャップを、groupGaps属性の値を設定することによりカスタマイズします。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにツリーマップを追加します。詳細は、30.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
ツリーマップ・グループ・ギャップの表示をカスタマイズするには、
構造ウィンドウでdvt:treemapを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで「外観」セクションを開きます。
「グループ・ギャップ」ドロップダウン・メニューを使用して、グループ・ギャップ表示の値を選択します。有効な値は次のとおりです。
outer (デフォルト): ギャップは外部のグループのノード間に表示されます。
all: ギャップはすべてのグループのノード間に表示されます。
none: ギャップはグループのノード間に表示されません。
ツリーマップには対話機能が追加可能で、これには、ツールチップ、ポップアップ、選択サポート、コンテキスト・メニュー、およびドリルが含まれます。ツリーマップは、グループ・ノードの独立性もサポートします。
dvt:treemapNodeあるいはdvt:sunburstNode shortDesc属性の値を指定することにより、ツールチップを定義します。この属性に単純テキストを指定することも、あるいはツリーマップやサンバーストからデータを取り出してノードについての追加情報を表示するEL式を指定することもできます。
図30-33に、サンバースト・ノードの1つの名前とサイズを表示しているサンバーストを示します。
ノードのラベルとサイズ・データの詳細を表示するツールチップを構成するには、EL式のlabelおよびsize属性を参照します。EL式はそのメソッドを参照するマネージドBeanから、labelおよびsize属性の設定のために、データを引き出します。
たとえば、米国の国勢調査の例でのラベルとサイズの属性に値を指定するには、以下をJDeveloperのshortDesc属性に入力します。
#{row.text}<br/>#{row.size}
ツリーマップあるいはサンバーストのポップアップを、af:popupおよびaf:showPopupBehaviorタグを使用して定義します。
af:popupコンポーネントをツリーマップおよびサンバースト・コンポーネントで使用すると、セカンダリ・ウィンドウでの情報の表示および非表示、追加データの入力、コンテキスト・メニューなどの機能の呼出しを、エンド・ユーザーに許可する機能を構成できます。30.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属性を参照します。
図30-34に、ユーザーがツリーマップ上でマウスをホバーさせたときに短いメッセージとツリーマップ・ノードの名前を表示するように構成されたツリーマップを示します。
例30-9に、ポップアップを宣言するページ上のコードを示します。
例30-9 マウス・ホバーによるツリーマップ・ポップアップのサンプル・コード
<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>
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ADF Faces popupコンポーネントをページに追加し、ポップアップに表示させたいメニュー、ダイアログ、あるいはウィンドウを挿入します。
たとえば、図30-34のポップアップは、"Hello from Texas"メッセージを表示するため、ノート・ウィンドウを使用しています。この例を使用するには、ADF Faces noteWindowコンポーネントをpopupコンポーネント内部に挿入し、ADF Faces outputFormattedコンポーネントをノート・ウィンドウの内部に挿入します。サンプル・コードを例30-9に示します。
この例のポップアップは、ノート・ウィンドウでの使用のためにツリーマップからデータを取得するADF Faces setListenerコンポーネントも含みます。この例では、データは現在のノードのテキスト属性(source.currentRowData.text)から取得され、ツリーマップのマネージドBeanのnoteWindowMessage文字列変数に保存されます。この例を使用するには、例30-10に示されるコードをツリーマップBeanに追加します。
例30-10 noteWindowMessage変数をツリーマップ・マネージドBeanに追加するコード部分
private String noteWindowMessage = null;
public void setNoteWindowMessage(String noteWindowMessage) {
this.noteWindowMessage = noteWindowMessage;
}
public String getNoteWindowMessage() {
return noteWindowMessage;
}
マネージドBeanについてヘルプが必要な場合は、3.6項「マネージドBeanの作成と使用」を参照してください。ダイアログ、メニューおよびウィンドウ表示のためのポップアップ・ウィンドウ使用の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
選択を表示するのに必要な追加コンポーネントを作成します。
たとえば、図30-34のページは、ポップアップの表示のためにユーザーにノード上をホバーするように促すaf:outputTextコンポーネントを使用しています。af:outputTextコンポーネント構成の詳細は、18.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
ツリーマップあるいはサンバーストにポップアップを追加するには、
構造ウィンドウで「dvt:treemapNode」または「dvt:sunburstNode」ノードを右クリックし、「コンポーネント・ノードの中に挿入」→「ポップアップ表示動作」を選択します。
たとえば、ツリーマップにポップアップを追加するには、dvt:treemapNodeノードを右クリックし、「ツリーマップ・ノードの中に挿入」→「ポップアップ表示動作」を選択します。
af:showPopupBehaviorノードを右クリックし、 「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次の属性の値を入力します。
TriggerType: ポップアップをトリガーするアクションの値を入力します。有効な値は、clickおよびmouseHoverです。
PopupId: ポップアップ・コンポーネントのIDを参照します。IDを直接入力するか、属性のドロップダウン・メニューを使用して「編集」を選択し、「プロパティの編集 - PopupId」ダイアログでIDを選択できます。
たとえば、国勢調査のデータの例でポップアップを参照するには、次の値をPopupIdに入力します。::noteWindowPopup。
ツリーマップとサンバーストは、現在clickおよびmouseHoverのトリガー・タイプのみをサポートしています。
ポップアップはその他のノード上には表示されません。詳細は、30.4.5.2項「ツリーマップおよびサンバーストのその他のノードの構成に関する必知事項」を参照してください。
ツリーマップおよびサンバースト・コンポーネントは、単一および複数ノードの選択をサポートしています。コンポーネントで複数の選択が許可されている場合、ユーザーは[Ctrl]を押しながらクリックする操作で複数のノードを選択できます。
ユーザーがノードを選択、あるいは選択解除すると、ツリーマップあるいはサンバースト・コンポーネントは、selectionEventイベントを起動します。選択されたノードに基づいてツリー・コンポーネントで後処理を実行する、カスタムのselectionListenerインスタンスを登録できます。
図30-35に、カスタムの選択リスナーを使用するように構成されたサンバーストの簡単な例を示します。ユーザーが単一あるいは複数の選択をすると、コンソ－ルは選択されたノードの名前、および選択に追加あるいは除外されたノードの数を表示します。
例30-11に、ユーザーのクリックに反応してコンソールへの出力を生成するのに使用するselectionListenerメソッドを示します。このメソッドをサンバーストのマネージドBeanまたはバッキングBeanに格納します。
例30-11 サンバーストの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;
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) {
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ページに追加します。この項の例では、リスナーは出力をコンソールに単に表示しているだけで、ユーザーに選択を促すプロンプトのみがページに追加されています。例30-12に、サンバーストの設定に使用されたページの一部を示します。selectionListener属性が、太字のフォントでハイライトされています。
例30-12 選択リスナーを宣言するサンバーストのサンプル・ページ
<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>
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
selectionListenerを定義するメソッドを作成し、選択状態を返し、それをツリーマップあるいはサンバースト・コンポーネントのマネージドあるいはバッキングBeanに保存します。
同じ国勢調査データの例を使用するには、例のコードをsunburstと名付けられたマネージドBeanにコピーします。マネージドBeanについてのヘルプが必要な場合、3.6項「マネージドBeanの作成と使用」を参照してください。
選択を表示するのに必要な追加コンポーネントを作成します。
たとえば、図30-35のページは、選択を行うためにユーザーにノードのクリックを促すaf:outputTextコンポーネントを使用しています。af:outputTextコンポーネント構成の詳細は、18.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
ツリーマップあるいはサンバーストに選択サポートを追加するには、
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「動作」の項を開き、次の属性を設定します。
NodeSelection: 単一ノードのみの選択サポートを有効化するには、singleに設定します。デフォルトでは複数選択が有効化されています。
SelectionListener: ユーザーがノードをクリックしたときにコールされるメソッドの名前を入力します。
たとえば、sunburstという名前のマネージドBeanとselectionListenerという名前のメソッドには、SelectionListenerフィールドに、以下を入力します。#{sunburst.selectionListener}。
ツリーマップとサンバーストはツリー・コンポーネントと同じデータ・モデルを使用しているので、選択イベントはorg.apache.myfaces.trinidad.event.SelectionEventライブラリで定義されます。ツリー・モデルにおける選択サポートの詳細は、12.6.3項「実行時の処理内容: ツリー・コンポーネント・イベント」を参照してください。
JDeveloperにおけるイベント処理の詳細は、第6章「イベント処理」を参照してください。
ツリーマップとサンバーストのいずれも、ユーザーがノードを右クリックしたときにコンテキスト・メニューを表示するように構成できます。
ツリーマップおよびサンバーストのコンテキスト・メニューを、これらのコンテキスト・メニュー・ファセットを使用して定義します。
bodyContextMenu: ツリーマップまたはサンバースト・コンポーネント内の選択不可の要素上に表示されるコンテキスト・メニューを指定します。
contextMenu: ツリーマップまたはサンバースト・コンポーネント内の選択可能要素上に表示されるコンテキスト・メニューを指定します。
multiSelectContextMenu: ツリーマップまたはサンバースト・コンポーネント内で複数の要素が選択されるときに表示されるコンテキスト・メニューを指定します。
JSPまたはJSPXページの各ファセットでは、1つの子コンポーネントがサポートされます。Faceletは、複数の子コンポーネントをサポートします。これらすべてのファセットが機能するためには、ツリーマップあるいはサンバーストのプロパティで、選択が有効化されている必要があります。コンテキスト・メニューは、現在のところFlashでのみサポートされています。
af:popupコンポーネント内のaf:menuコンポーネントを使用してコンテキスト・メニューを作成します。ついで、指定されたトリガーに基づき、別のコンポーネントからコンテキスト・メニュー・ポップアップを起動できます。コンテキスト・メニューの構成の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
図30-36に、ユーザーがツリーマップの地域、地区、あるいはノードの1つを右クリックしたときにコンテキスト・メニューを表示するように、contextMenuファセットを使用して構成されたサンプルのツリーマップを示します。
ユーザーがView Details for Midwest Regionを選択すると、アプリケーションはMidwest Regionノードについての追加情報を提供できます。
図30-37に、ユーザーがMidwest Regionの詳細を見る選択をしたあとで、ツリーマップの下に表示されるテキスト出力を示します。この例では、出力はユーザーがクリックしたものを検証するだけですが、このコンテキスト・メニューはMidwest Regionについての追加詳細の提示にも使用できます。
例30-13に、例のツリーマップとコンテキスト・メニューを構成するのに使用したサンプル・コードを示します。
例30-13 ツリーマップ・コンテキスト・メニューのコード・サンプル
<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を使用しています。この例も、ツリーマップのデータ設定に、30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」で説明されたものと同じクラスとメソッドを使用しています。例30-14に、ContextMenuSampleクラスのコードを示します。
例30-14 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);
}
}
}
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
actionListenerを定義し選択状態を返すマネージドBeanを作成します。
同じ国勢調査データの例を使用するには、例30-14「ContextMenuSampleクラス・コード」の例のコードをtreemapContextMenuと名付けられたバッキングBeanにコピーします。マネージドBeanについてのヘルプが必要な場合、3.6項「マネージドBeanの作成と使用」を参照してください。
コンテキスト・メニューをサポートするのに必要な追加コンポーネントを作成します。
たとえば、図30-36のページは、コンテキスト・メニューの表示のためにユーザーに右クリックを促すaf:outputTextコンポーネントを使用しています。ユーザーがカスタムのコンテキスト・メニュー項目を選択したとき、ページはaf:outputFormattedコンポーネントを使用して、ユーザーがどのノードを選択したかを確認するメッセージを表示します。
追加コンポーネントの構成に必要な詳細は、例30-14のコード・サンプルを参照してください。af:outputTextおよびaf:outputFormattedコンポーネントの詳細は、18.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
ツリーマップあるいはサンバーストにコンテキスト・メニューを追加するには、
ユーザーのアプリケーションがバッキングBeanを使用している場合は、以下を実行します。
構造ウィンドウで「dvt:treemap」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
拡張の項を開いてバインディング属性の値を入力し、ツリーマップをコンテキスト・メニューのためのメソッドを含むマネージドBeanと関連付けます。または、属性のドロップダウン・メニューから編集を選び、既存のBeanとメソッドを、作成または選択します。
バインディング属性は、ツリーマップを設定するコードを含んでいるので、国勢調査のデータの例に必要です。しかしながら、これはまた、30.3.1項「ツリーマップあるいはサンバースト・コンポーネントへのデータの追加方法」で説明されたものと同じクラスとメソッドからのデータとメソッドを使用しています。たとえば、treemapContextMenuという名前のバッキングBeanに、以下を「バインディング」フィールドに入力します。#{treemapContextMenu.treemap}。
構造ウィンドウでdvt:treemapまたはdvt:sunburstノードを右クリックし、「ツリーマップの中に挿入」または「サンバーストの中に挿入」を選択します。
「ファセットの挿入」ダイアログで、作成するコンテキスト・メニューのタイプに相当するファセットの名前を入力します。
たとえば、contextMenuファセットを定義するには、以下を名前フィールドに入力します。contextMenu。
「OK」をクリックします。
ファセットは、dvt:treemapノードまたはdvt:sunburstノードの子として作成されます。
構造ウィンドウでf:facet - context menuノードを右クリックし、「ファセットの中に挿入」→「ADF Faces」→「ポップアップ」を選択します。
af:popupノードを右クリックし、プロパティに移動を選択します。
「プロパティ」ウィンドウで、次のプロパティを設定します。
ContentDelivery: これをLazyUncachedに設定します。
AutoCancel: これを、<default> enabledに設定します。
ChildCreation: これを、<default> immediateに設定します。
構造ウィンドウでaf:popupノードを右クリックし、「ポップアップの中に挿入」→「メニュー」を選択します。
構造ウィンドウでaf:menuノードを右クリックし、「メニューの中に挿入」→「メニュー・アイテム」を選択してメニュー・アイテムを作成します。
af:commandMenuItemノードを右クリックし、 プロパティに移動を選択します。
「プロパティ」ウィンドウで、「共通」の項を開き、次のプロパティを設定します。
Text: メニューに表示するテキストを入力します。
たとえば、国勢調査のデータの例を複製するには、次の値をTextフィールドに入力します。View Details for #{treemapContextMenu.selectionState}。
ActionListener: ユーザーがメニュー項目を選択したときにコールされるメソッドの名前を入力ます。
たとえば、treemapContextMenuという名前のマネージドBeanとmenuItemListenerという名前のメソッドには、ActionListenerフィールドに、以下を入力します。#{treemapContextMenu.menuItemListener}。
コンテキスト・メニューに表示させたい各メニュー項目につき、ステップ9とステップ11を繰り返します。
|
ヒント: 関連するメニュー項目をグループ化するには、ADF Faces |
追加のコンテキスト・メニュー・ファセットを構成するには、ステップ2からステップ12を繰り返します。
コンテキスト・メニューはHTML5とFlashイメージ形式でのみサポートされています。コンテキスト・メニューがFlashでレンダリングされる場合、コンテキスト・メニューはFlash Playerのコンテキスト・メニューを使用します。このため、ポップアップ・メニューにはいくつかの制限があります。Flashとポップアップ・メニューの詳細は、22.2.4項「グラフ、ゲージ、ツリーマップおよびサンバーストのコンテキスト・メニュー」を参照してください。
ドリル・サポートは、ユーザーがコンポーネントのグループ・ヘッダーをクリックするか、各ノードをダブルクリックすることにより、ツリーマップあるいはサンバーストの階層をナビゲートすることを可能にします。
ドリル・サポートをツリーマップあるいはサンバーストのノードのdrilling属性により有効化します。
JDeveloperには、ドリルをサポートするのに必要なコードが含まれています。しかしながら、ノードがドリルされているときに、アプリケーションに他のタスクを実行させる場合があります。追加のタスクを実行するメソッドを定義し、それをドリル・リスナーとして、ツリーマップあるいはサンバーストのマネージドあるいはバッキングBeanに追加できます。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ドリル・リスナーを追加する場合、リスナーを定義するメソッドを作成し、それをツリーマップあるいはサンバーストのマネージドあるいはバッキングBeanに追加します。
イベント処理の詳細は、第6章「イベント処理」を参照してください。Beanについてのヘルプが必要な場合、3.6項「マネージドBeanの作成と使用」を参照してください。
ツリーマップあるいはサンバーストにドリル・サポートを追加するには、
構造ウィンドウでdvt:treemapNodeまたはdvt:sunburstNodeノードを右クリックし、プロパティに移動を選択します。
「プロパティ」ウィンドウで、「拡張」の項を開き、「ドリル」属性のドロップダウン・リストを使用して 「ドリル」属性を次の値の1つに設定します。
replace: ユーザーがノードをダブルクリックして、ツリーマップあるいはサンバーストの新しいルートに設定することを可能にします。
insert (サンバーストのみ): ユーザーがノードの子を開いたり閉じたりすることを可能にします。
insertAndReplace (サンバーストのみ): ユーザーがノードをダブルクリックして階層のルートに設定したり、ノードの子を開いたり閉じたりするすることを可能にします。
ユーザーのアプリケーションがドリル・リスナーを含んでいる場合は、以下を実行します。
構造ウィンドウでdvt:treemapを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「動作」セクションを展開します。
ドリル・リスナー属性のドロップダウン・メニューから、編集を選択します。
「属性の編集」ダイアログで、検索ボックスを使用してツリーマップのマネージドBeanを検索します。
マネージドBeanのノードを開き、ドリル・リスナーを含むメソッドを選択します。
OKをクリックします。
式が作成されます。
たとえば、sampleTreemapというマネージドBeanとsampleDrillListenerというメソッドの場合、式ビルダーによりドリル・リスナーの値として、コード#{sampleTreemap.sampleDrillListener}が生成されます。
ドリルは、表示可能なデータの追加のレイヤーがある場合に推奨されます。独立性とは異なり、ツリー・モデルから追加のデータをフェッチするのは、サーバー側の操作です。すでに表示されているグループ・データにフォーカスするには、ツリーマップの分離機能を使用します。詳細は、30.5.7項「独立性のサポートの構成(ツリーマップのみ)」を参照してください。
ツリーマップおよびサンバーストを、ページ上でサポートされたコンポーネント間のドラッグ・アンド・ドロップ操作のドラッグ・ソース、およびドロップ・ターゲットとして構成できます。
ツリーマップあるいはサンバーストにドラッグのサポートを追加するには、af:dragSourceタグをツリーマップに追加し、af:dropTargetタグをドラッグを受け取るコンポーネントに追加します。ドラッグを受け取るコンポーネントはorg.apache.myfaces.trinidad.model.RowKeySetデータ・フレーバをaf:dropTargetの子として含み、かつドロップ・イベントへの応答のため、dropListenerメソッドを定義する必要があります。
ツリーマップあるいはサンバーストにドロップのサポートを追加するには、af:dropTargetタグをツリーマップあるいはサンバーストに追加し、そのツリーマップあるいはサンバーストがサポートするデータ・フレーバを含めます。dropListenerメソッドを、ドロップ・イベントに応答するツリーマップあるいはサンバーストのマネージドBeanに追加します。
次の手順は、ツリーマップあるいはサンバーストを単一のドラッグ・ソースあるいはドロップ・ターゲットとして設定する方法を示します。ADF FacesまたはADFデータ視覚化コンポーネントのドラッグ・アンド・ドロップの構成の詳細は、第36章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
始める前に:
ツリーマップおよびサンバーストの属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ツリーマップの属性と子タグの構成の詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。サンバーストの属性と子タグの構成の詳細は、30.2.3.1項「サンバーストの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページにツリーマップあるいはサンバーストを追加します。詳細は、30.2.2.2項「ツリーマップのページへの追加方法」または30.2.3.2項「サンバーストのページへの追加方法」を参照してください。
コンポーネントをデータに追加したときにツリーマップあるいはサンバーストとデータ・コントロールをバインドしなかった場合は、データをツリーマップあるいはサンバーストに追加します。UI-first開発を使用してのツリーマップまたはサンバーストへのデータ追加の詳細は、第30.3項「ツリーマップおよびサンバースト・コンポーネントへのデータの追加」を参照してください。
ドラッグ・アンド・ドロップをサポートするのに必要な追加コンポーネントを作成します。
たとえば、図30-17のページは、ツリーマップ・ノードを指示されたテキストにドラッグするようユーザーに促すaf:outputTextコンポーネントを使用しています。ユーザーがノードをテキストにドラッグしたとき、ページはaf:outputFormattedコンポーネントを使用して、ユーザーがどのノードをドラッグしたかを確認するメッセージを表示します。
例30-15に、完成したページのサンプル・コードを示します。af:outputTextおよびaf:outputFormattedコンポーネントの詳細は、18.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
例30-15 ツリーマップのドラッグ・ソース例のサンプル・コード
<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>
例30-16に、図30-18のページのサンプル・コードを示します。この例では、ツリーマップはドロップ・ターゲットとして構成されています。
例30-16 ツリーマップのドロップ・ターゲット例のサンプル・コード
<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()メソッドを作成します。
例30-17はサンプルのドロップ・リスナーと図30-18に表示されるツリーマップのサポート・メソッドを示します。
例30-17 ツリーマップのサンプル・ドロップ・リスナー
// 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
ツリーマップあるいはサンバーストをドロップ・ターゲットとして使用するには、以下を実行します。
「コンポーネント」ウィンドウで、「操作」パネルから、「ドラッグ元」タグをドラッグのソースとなるコンポーネントの子としてドラッグ・アンド・ドロップします。
たとえば、「ドラッグ元」をaf:outputFormattedコンポーネントの子としてドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コンポーネントの「値」のフィールドに、ステップ2でドロップ・リスナーでツリーマップあるいはサンバーストに作成したパブリック変数を参照します。
たとえば、toDropListener()という名前のドロップ・リスナーとdropTextという名前の変数には、コンポーネントの「値」フィールドに、次を入力します。
#{treemap.dropText}
ツリーマップあるいはサンバーストをドラッグ・ソースとして構成するには、「コンポーネント」ウィンドウで、「操作」パネルから、「ドラッグ元」タグを、ツリーマップあるいはサンバーストの子としてドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。許容値は、COPY、MOVEまたはLINKです。
たとえば、「アクション」フィールドに次を入力し、すべての操作を可能にします。
COPY MOVE LINK
ドラッグ・ソースがサポートするデフォルトのアクションを指定するには、DefaultAction属性のドロップダウン・メニューを使用して、「コピー」,、「移動」または「リンク」を選択します。
図30-17「ドラッグ・ソースとして構成されたツリーマップ」におけるドラッグ・アンド・ドロップの例でのツリーマップは、移動をデフォルトのアクションとして使用しています。
他のコンポーネントをツリーマップまたはサンバーストからのドラッグのドロップ・ターゲットとするには、以下を実行します。
「コンポーネント」ウィンドウで、「Operations」パネルから、「ドロップ・ターゲット」を、ドロップを受け取るコンポーネント上にドラッグ・アンド・ドロップします。
たとえば、図30-18「ドロップ・ターゲットとして構成されたツリーマップ」におけるドラッグ・アンド・ドロップの例のページは、ドロップの結果を表示するaf:outputFormattedコンポーネントを含んでいます。
「ドロップ・ターゲットの挿入」ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して「編集」を選び、ドロップ・リスナー・メソッドを適切なマネージドBeanに追加してください。または、ドロップダウン・メニューを使用して式ビルダーを選び、ドロップ・リスナーのEL式を入力してください。
たとえば、fromDropListener()という名前のメソッドをtreemapという名前のマネージドBeanに追加するには、編集を選び、ドロップダウン・メニューからtreemapを選択し、新規を「メソッド」フィールドの右でクリックして、fromDropListener()メソッドを作成します。
例30-18に、図30-17に表示されるツリーマップのサンプル・ドロップ・リスナーを示します。この例は例30-17で使用されたものと同じインポートとヘルパー・メソッドを使用しており、それらはここには含まれていません。
例30-18 ツリーマップをドラッグ・ソースとして使用するコンポーネントのサンプル・ドロップ・リスナー
// 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に設定します。
始める前に:
ツリーマップの属性やツリーマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、30.2.2.1項「ツリーマップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、30.1.3項「ツリーマップおよびサンバースト・コンポーネントの追加機能」を参照してください。
ページにツリーマップを追加します。詳細は、30.2.2.2項「ページにツリーマップを追加する方法」を参照してください。
ツリーマップ・ノード・ヘッダーをツリーマップに追加します。詳細は、30.4.10.1項「ツリーマップ・ノード・ヘッダーを構成する方法」を参照してください。
ツリーマップ・グループでの独立性サポートを無効化するには、
独立性はクライアント側の操作で、ユーザーがすでに表示されているデータにフォーカスすることを可能にします。ツリーマップに複数の子レベルがあり、ユーザーに未表示のレベルへのアクセスをさせたい場合は、かわりにドリルを使用します。ドリル・サポートの追加については、30.5.5.1項「ツリーマップおよびサンバーストのドリル・サポートの構成方法」を参照してください。
