| Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド 11gリリース1 (11.1.1.7.0) B52028-05 |
|
 前 |
 次 |
| Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド 11gリリース1 (11.1.1.7.0) B52028-05 |
|
前 |
次 |
この章では、「データ・コントロール」パネルおよびADFデータバインディングを使用して、データバインドされたADFデータ視覚化コンポーネントを作成する方法について説明します。これらのコンポーネントを使用すると、様々なグラフ、各種ゲージ、ピボット・テーブル、複数レイヤーの情報を持つ地理マップ、各種ガント・チャート、時系列、階層ビューア、ツリーマップおよびサンバーストを使用してデータを表示および分析できるようになります。
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントは、データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。
ADFグラフとゲージ・コンポーネントの両方により、データがレンダリングされます。グラフ(50種以上のチャートを作成)では、複数の軸上の複数のデータ・ポイントを様々な方法で評価できます。豊富な種類のグラフにより、あるグループの結果を別のグループの結果と比較することが容易になります。一方、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題を識別します。
ADFピボット・テーブル・コンポーネントでは、複数レイヤーのデータ・ラベルをグリッドの行エッジまたは列エッジでサポートするグリッドが生成されます。オプションのピボット・フィルタ・バーはページ・エッジを使用して、ビューに表示されていないピボット・テーブル・データをフィルタします。このコンポーネントには、グリッド・データの小計および合計を自動的に生成するオプションもあります。ピボット・テーブルを使用すると、データ・レイヤーをあるエッジから別のエッジに切り替えてデータの表示を変更できます。たとえば、あるピボット・テーブルには、最初、行エッジに複数地域にわたる商品売上合計、列エッジに年別の明細が表示されていたとします。実行時に地域と年を切り替えると、複数年にわたる商品売上合計の地域別明細が表示されます。実行時に、エンド・ユーザーは内部列ラベルに表示されるボタンをクリックして、昇順または降順で行をソートできます。
ADF地理マップ・コンポーネントはビジネス・データを空間的に表現し、1つのマップ上に複数層(テーマとも呼ばれる)の情報を重ね合せられるようにします。たとえば、アメリカ合衆国のマップでは、色の明度を変えて各州における商品の人気を示すカラー・テーマ、商品カテゴリ内での売上を示す円グラフ・テーマ、各倉庫の正確な場所を識別する点テーマなどを使用できます。この3つの全テーマをアメリカ合衆国の地図に重ね合せると、特定の地域で商品の人気度に応じた十分な在庫があるかどうかを簡単に評価できます。
ADFガント・チャート・コンポーネントには、プロジェクト・ガント・チャート(プロジェクト管理を重視)、スケジュール・ガント・チャート、およびリソース使用率ガント・チャート(どちらもリソース管理を重視)の3種類があります。それぞれのガント・チャートでは、次のリージョンを分割線と組み合せて表示します。
リスト・リージョンの内容: 分割線の左側には、タスクのリスト(プロジェクト・ガント・チャートの場合)またはリソースのリスト(リソース使用率ガント・チャートとスケジュール・ガント・チャートの場合)が表示されます。このリージョンでは、任意の数の関連情報の列を追加で表示できます。
グラフ・リージョンの内容: 分割線の右側には、時間の経過に伴うタスクの進行状況、リソース使用率またはリソースの進行状況のグラフを示す領域があります。ガント・チャートでは時間軸を拡大または縮小できるため、必要な期間にわたって管理情報を参照できます。
ADF時系列コンポーネントは、ユーザーが日付ベースのイベントを時間順に表示し、定義された時間範囲内を簡単に前後に移動することを可能にする、対話型のデータ視覚化ツールです。二重時系列を使用して、イベントの対照比較を行うことができます。
時系列は、時間軸に沿った時系列項目としての各イベントの表示、時系列内に表示可能な期間に対応した移動可能な概要ウィンドウ、および時系列に対する合計時間増分を表示する概要時間軸から構成されます。水平ズーム制御を使用して、表示可能な時間範囲を変更できます。イベントに対応する時系列項目には、関連付けられた情報またはアクションが表示され、時系列内のイベントの日付に接続されています。時系列項目は、概要パネル内のマーカーにより表されます。時系列コンポーネントでは、3つ以上のイベント系列はサポートされていません。
ADF階層ビューア・コンポーネントは、リンクされた形状のセットとして階層データを表示したグラフィックを生成します。形状とリンクはデータの要素と関係に対応します。たとえば、階層ビューア・コンポーネントを、従業員データに基づく組織図の生成に使用することができます。実行時、エンド・ユーザーはグラフィックをパンおよびズームし、このグラフィックが表示している管理階層を展開、選択、およびナビゲートすることができます。
ADFツリーマップおよびサンバースト・コンポーネントは、サイズと色で視覚的に表された、2つの次元にまたがる定量的階層データを表示します。たとえば、ツリーマップまたはサンバーストを使用して四半期ごとの地域別売上を表示して売上動向を示すことができます。この場合、ノードのサイズを使用して各地域の売上高を表し、ノードの色を使用してその地域の売上高が四半期内に増減したかどうかを表せます。
ADFデータ視覚化コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。これはコンポーネントの外観は表示されるデータによって変わるからです。この章では、各コンポーネントをデータ・ソースにバインドする方法について説明します。
図26-1に、棒グラフ、円グラフ、ステータス・メーター・ゲージおよびダイアル・ゲージなど、実行時の様々なADFデータ視覚化コンポーネントを示します。
「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してグラフを作成する場合は、コンポーネント・ギャラリを使用すると、多数のグラフ・カテゴリ、グラフ・タイプおよびレイアウト・オプションから選択できます。グラフ・カテゴリは、1つ以上の異なるタイプのグラフを1つのグループにまとめたものです。たとえば、「散布図/極」カテゴリには次のタイプのグラフが含まれます。
散布図
二重-Y散布図
極
グラフの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なグラフ・カテゴリ、タイプおよびそれぞれの説明を確認してください。図26-2に、「データ・コントロール」パネルを使用しているときにADFグラフ用に表示されるコンポーネント・ギャラリを示します。
|
注意: 一部のグラフのタイプでは、非常に具体的な種類のデータが必要です。選択したグラフのタイプの表示に十分なデータが含まれていないデータ・コレクションにグラフをバインドすると、グラフは表示されず、データが不十分であることを示すメッセージが表示されます。 |
また、コンポーネント・パレットからグラフ・コンポーネントをドラッグして、グラフを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、グラフのユーザー・インタフェースを設計できます。コンポーネント・ギャラリが開き、グラフ・タイプ、説明および簡単なレイアウト・オプションが表示されます。
表26-1に、グラフのコンポーネント・ギャラリに表示されるカテゴリを示します。各カテゴリには、1つ以上のグラフ・タイプが関連付けられています。
表26-1 コンポーネント・ギャラリのADFグラフ・カテゴリ
| カテゴリ | 説明 |
|---|---|
|
面 |
データが塗りつぶされた面として表されるグラフを作成します。面グラフは、直近12か月の売上など、ある期間にわたる傾向を示すために使用します。面グラフでは、一方の軸に沿って少なくとも2つのグループのデータが必要です。通常、この軸には期間(月など)のラベルが付けられます。 |
|
棒 |
データが一連の垂直な棒として表されるグラフを作成します。ある期間にわたる傾向を調べる場合や、複数のアイテム(複数の地域における異なる商品部門の売上など)を同時に比較する場合に使用します。 |
|
棒(横) |
Y軸に沿って棒を横向きに表示するグラフを作成します。方向を示して傾向の表示や値の比較を可能にするために使用します。 |
|
バブル |
データが丸いデータ・マーカー(バブル)の場所と大きさによって表されるグラフを作成します。3タイプの値の相関を示すために使用します(特に、多数のデータ・アイテムがあり、全般的な関係を確認する場合)。たとえば、従業員の給与(x軸)、経験年数(y軸)および生産性(バブルの大きさ)を図示するためにバブル・グラフを使用します。このようなグラフでは、生産性を給与および経験と比較して調べることができます。 |
|
組合せ |
異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するグラフを作成します。棒と線、棒と面、線と面またはこの3つすべてを比較するために使用します。 |
|
ファンネル |
1つのプロセス内の複数のステップに関連するデータを図示するグラフを作成します。ステップは、水平な円筒に対して垂直なスライスとして表示されます。特定のステップまたはスライスの実際の値がそのスライスの割当て制限に達すると、そのスライスは塗りつぶされます。通常、ファンネル・グラフでは、ある区切りの値(時間など)に対する実際の値と目標の値が必要です。たとえば、会計年度の四半期という区切りにおいて、あるプロセス(セールス・パイプラインなど)が目標に向かう動きを確認するためにこのコンポーネントを使用します。 |
|
折れ線 |
データが線、一連のデータ・ポイントまたは線で結ばれた複数のデータ・ポイントとして表されるグラフを作成します。折れ線グラフでは、グループ内の各メンバーに対し、少なくとも2つの点のデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2つの月のデータが必要です。通常、特定の色の線がデータの各グループ(アメリカ、ヨーロッパ、アジアなど)に関連付けられます。複数のアイテムを同じ期間で比較するために使用します。 |
|
パレート |
データが棒、および棒の累積率を示す線によって表されるグラフを作成します。棒の各セットにより、問題の異なる原因(交通事故による死亡の原因など)が識別されます。それぞれの棒は、最大数の事象から最小数の事象まで、値別に配置されます。パレート・グラフは常に二重y軸グラフになり、最初のy軸は棒が表す値に対応し、2番目のy軸は0から100%の範囲で累計率の値に対応します。パレート・グラフは、問題の原因を識別および比較するために使用します。 |
|
円 |
円が分割され、データの各グループが円の中のスライスとして表されるグラフを作成します。それぞれの商品群から得られる収益など、各区分と全体との関係を示すために使用します。 |
|
レーダー |
円状の線グラフとして表示されるグラフを作成します。直近3年間の毎月の売上など、周期的に起こるパターンを示すために使用します。 |
|
散布図/極 |
データがデータ・マーカーの場所によって表されるグラフを作成します。人気商品の売上とコストなど、2つの異なる種類のデータ値の相関を示すために使用します。散布図は、多数のアイテム間の全般的な関係を確認する際に特に便利です。 |
|
スパークチャート |
表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフを作成します。スパークチャートはコンポーネント・パレットを使用して挿入し、後にデータにバインドしたときに、コンポーネント・ギャラリでのみ使用できます。 |
|
株価 |
データが株式の高値、安値および終値を示すグラフを作成します。それぞれの株式マーカーにより、3つの異なる値が表示されます。 |
図26-3は、StoreFrontModuleアプリケーションの「Hot Items Statistics」ページに表示される横棒グラフを示しています。このグラフでは、各商品の注文数が表示されるため、最も頻繁に注文されている商品を簡単に識別できます。
データ・バインディングの完了後にグラフをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFグラフ・コンポーネントの使用」を参照してください。
グラフはデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Oracle Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップします。
データバインドされたグラフを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、StoreFrontModuleアプリケーションの「Hot Items Statistics」ページで各商品に対する注文数を表示する棒グラフを作成するには、ProductOrdersCountコレクションを選択します。図26-4に、「データ・コントロール」パネルでのProductOrdersCountコレクションを示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「グラフ」を選択してコンポーネント・ギャラリを表示します。
コンポーネント・ギャラリからグラフ・カテゴリおよびグラフ・タイプを選択し、「OK」をクリックします。
コンポーネント・ギャラリに表示されるグラフ・カテゴリおよびグラフ・タイプの詳細は、表26-1を参照してください。
表示されるダイアログの名前および入力フィールドのラベルは、選択したグラフのカテゴリおよびタイプによって異なります。たとえば、カテゴリとして「棒(横)」を、タイプとして「棒」を選択した場合、表示されるダイアログの名前は「横棒グラフの作成」で、入力フィールドには「棒」というラベルがつけられます。
ダイアログで次のようにして、データを表示するグラフを構成します。
実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから「棒」または「X軸」入力フィールドに属性をドラッグします。
「属性ラベル」フィールドで、値を入力するか、「ラベル」列のドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
棒が表しているデータの表示をY軸に変更する場合は、「Y軸の棒と入替え」ボタンをクリックします。このアクションでは、グラフの系列とグループの間で非表示のデータ・レイヤーが切り替えられます。棒とY軸属性が単純に手動で入れ替えられるわけではありません。
「入力済属性」のデフォルトの選択から「名前-値ペア」に変更してデータ・ポイントをコレクションに格納する方法を構成する場合は、「データ形状の変更」ボタンをクリックします。次のオプションを提示するダイアログが表示されます。
入力済属性
コレクション内の各種データ・ポイントは、別々の属性によって表されます。このオプションは、グラフ内のデータ・ポイントの種類が1つのみの場合も有効です。
たとえば、推定値と実際値に対するデータ・ポイントがある場合は、推定値の属性と実際値の属性が異なる場合にのみ、「入力済属性」を選択します。
名前-値ペア
データ・ポイントの種類は複数でも、それらのポイントを指定する属性は1つのみであることを示します。この場合、単一の属性に、各種データ・ポイントを識別する値があります。
たとえば、ある属性に、推定値を表すデータ・ポイントの値としてESTがあり、実際値を表すデータ・ポイントの値としてACTがある場合があります。
現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。詳細は、26.2.3項「マスター/ディテール処理のグラフの行選択リスナーの使用について」を参照してください。
図26-5は、ProductOrdersCountデータ・コレクションにあるItemsOrdered属性のデータを使用してグラフを生成する「横棒グラフの作成」ダイアログを示しています。ProductName属性は、表示されたデータにラベルを提供します。
オプションで、「プレビュー」タブをクリックして、棒グラフとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、棒グラフの仕様を調整できます。
「OK」をクリックします。
データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してグラフ属性の設定を指定できます。また、グラフ・タグに関連付けられた子タグを使用してグラフをさらにカスタマイズできます。
|
注意:
|
グラフを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
グラフのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
JDeveloperにより生成されるデータ・バインディングXMLは、選択したグラフのタイプによって変わります。XMLは、作成する具体的なグラフ・タイプの物理モデルを表しています。例26-1はページ定義ファイルにJDeveloperが生成したバインディングを示しています。ここでは、ProductOrdersCountデータ・コレクションにあるItemsOrdered属性のデータを使用して横棒グラフが作成されています。
例26-1 ADF棒(横)グラフのバインディングXML
<graph IterBinding="ProductOrdersCountIterator" id="ProductOrdersCount"
xmlns="http://xmlns.oracle.com/adfm/dvt" type="BAR_HORIZ_CLUST">
<graphDataMap leafOnly="true">
<series>
<data>
<item value="ItemsOrdered" label="Orders"/>
</data>
</series>
<groups>
<item value="ProductName" label="ProductName"/>
</groups>
</graphDataMap>
</graph>
例26-2に、ProductOrdersCountデータ・コレクションをJSFページにドラッグしたときに横棒グラフに対して生成されるコードを示します。
例26-2 ADF棒(横)グラフのJSFコード
<dvt:horizontalBarGraph id="horizontalBarGraph1"
value="#{bindings.ProductOrdersCount.graphModel}"
subType="BAR_HORIZ_CLUST">
<dvt:background>
<dvt:specialEffects/>
</dvt:background>
<dvt:graphPlotArea/>
<dvt:seriesSet>
<dvt:series/>
</dvt:seriesSet>
<dvt:o1Axis/>
<dvt:y1Axis/>
<dvt:legendArea automaticPlacement="AP_NEVER"/>
</dvt:horizontalBarGraph>
グラフの行選択リスナー(マスター・ビューとして機能)を使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネント(ディテール・ビューとして機能)のデータを更新できるようになります。たとえば、グラフで特定の商品売上を表す棒をクリックすると、その商品に関する詳細な売上データがピボット・テーブルで表示されます。
このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。
次のように、同じデータ・コントロールを使用して両方のビューにデータを提供する必要があります。
グラフを行セットとしてデータ・コントロールの親コレクションにバインドします(例: DepartmentsView)。
もう1つのADFビュー(表、ピボット・テーブルなど)をデータ・コントロールの依存ディテール・コレクションにバインドします(例: EmployeesView)。
「<グラフのタイプ>グラフの作成」ダイアログで現在の行をマスター/ディテールに設定を選択して、グラフ・タグのclickListener属性の値を自動設定し、すでにグラフ・バインディングの一部になっているprocessClickメソッドを使用します。
たとえば、グラフ・タグのvalue属性がvalue="#{bindings.myGraph.graphModel}"の場合は、clickListener属性をclickListener="#{bindings.myGraph.graphModel.processClick}"に設定します。
ディテール・コンポーネントの親タグのpartialTriggers属性が正しく設定されていることを確認します。この属性には、グラフ・コンポーネントのIDを設定する必要があります。
グラフのデータ要素のクリックを処理するためのJavaコードを記述する必要はありません。グラフ・バインディングに対するprocessClickイベントが、グラフのデータ・コンポーネントに対するクリック・イベントを認識し、必要な処理を実行します。
スパークチャートは、表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフです。折れ線、棒、および面スパークチャートには、データ値の系列が1つ必要です。図26-6に、表の列に描画された折れ線スパークチャートの例を示します。
フローティング棒スパークチャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの合計2つ必要です。図26-7に、フローティング棒スパークチャートの例を示します。
スパークチャートを作成するには、コンポーネント・パレットからコンポーネントを挿入し、その後、スパークチャートをデータにバインドします。「データ・コントロール」パネルからのスパークチャートの挿入はサポートされていません。図26-8に、コンポーネント・パレットからページ上にスパークチャート・コンポーネントをドラッグしたときに表示されるコンポーネント・ギャラリを示します。
スパークチャートにデータを提供するには、次のいずれかの方法を使用します。
ゲージでは、各データ・ポイントに対し、そのデータ・ポイントが許容範囲の内と外のどちらに含まれるかが示されます。データバインドされた1つのゲージ・コンポーネントは、使用するデータ・コレクション内の行数に応じて、単一のゲージまたは一連のゲージ全部を作成できます。コレクション内の各行には、単一のゲージに対する値が含まれます。
ゲージ用のコンポーネント・ギャラリを使用すると、次のゲージのカテゴリから選択できます。
ダイアル:タスクのメトリック値を180度の弧に沿って示します。
ステータス・メーター:矩形のバーに沿ってタスクの進度または測定値のレベルを示します。
ステータス・メーター(垂直):タスクの進行状況やある指標のレベルを長方形の棒に沿って示します。
LED:キー・パフォーマンス・インディケータ(KPI)などの指標を図示します。LEDゲージでは、良好(上矢印)、適正(左矢印または右矢印)、不良(下矢印)を示す矢印など、数種類の図形を使用できます。
これらのカテゴリにはそれぞれ、多数の様々なタイプのゲージが含まれます。ゲージの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なすべてのゲージ、カテゴリ・タイプおよびそれぞれの説明を確認してください。図26-9に、ADFゲージ用に表示されるコンポーネント・ギャラリを示します。
データ・バインディングのプロセスは、作成するゲージのタイプに関係なく、基本的に同じです。必要なものは、メトリック値(つまり、ゲージで示す指標)のみです。ただし、データ・コレクション内の行に最大、最小、しきい値などの範囲情報が含まれている場合は、その値をゲージにバインドして動的な設定を示すことができます。ゲージの上部または下部ラベルで使用する情報がデータ・コレクション内に含まれている場合も、その値をゲージにバインドできます。
データ・バインディングの完了後にゲージをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFゲージ・コンポーネントの使用」を参照してください。
ADFゲージ・コンポーネントを使用して、悪いから良いまで変化する値範囲(しきい値)を指定した、背景に対するダイアル・ゲージを作成できます。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを簡単に評価できます。
図26-10は、WarrantyPeriodMonthsデータを格納するコレクションからゲージを作成した場合に表示される、単一のダイアル・ゲージを示しています。表示されているゲージは1つのみであるため、このデータ・コレクションに含まれているのは単一行のデータのみです。メトリックの値(ここでは6)は、ゲージの下のラベルに表示されています。ゲージの値の範囲は0から24です。しきい値の範囲は8、16、24で、不良(8未満)は赤、適正(8から16)は黄、優良(17以上)は緑で塗りつぶされています。
データ・コントロールを使用してダイアル・ゲージを作成するには、ゲージ・コンポーネントをコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
データバインドされたダイアル・ゲージを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、特定の倉庫にある商品に対する現在の月単位の保証期間を表示するダイアル・ゲージをStoreFrontModuleアプリケーションで作成するには、WarehouseStockLevelsコレクションを選択します。図26-11に、「データ・コントロール」パネルでのWarehouseStockLevelsコレクションを示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ゲージ」を選択します。
「コンポーネント・ギャラリ」ダイアログで、カテゴリ、ゲージのタイプおよびクイック・スタート・レイアウトを選択して、「OK」をクリックします。
このダイアログの「構成」タブで、次の操作を行います。
「メトリック」ボックスで、ゲージで図示する実際の値を含むデータ・コレクション内の列を選択します。このダイアログで必須なのは、この値のみです。
最小ボックスで、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
最大ボックスで、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
「上位ラベル」ボックスで、ゲージの上部ラベルに表示する値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
「下位ラベル」ボックスで、ゲージの下部ラベルに表示する値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
「しきい値属性」リストで、しきい値を指定する場合は、「追加」アイコンをクリックしてしきい値ごとに1行挿入し、その行に値を指定します。ゲージでは最大値を自動的にしきい値設定として扱うため、ゲージの最大値に等しいしきい値は作成しないでください。
オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整できます。
「OK」をクリックします。
図26-12に、WarehouseStockLevelsデータ・コレクションを使用してダイアル・ゲージを生成する、入力済の「ダイアル・ゲージの作成」ダイアログを示します。
|
注意: メトリック・データ値のみが必須です。このダイアログの他のデータ値はオプションであり、プロパティ・インスペクタを使用してゲージ・タグに指定できます。 |
ゲージのバインディングの完了後は、プロパティ・インスペクタで、ゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。
ゲージを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ゲージのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例26-6に、倉庫内の商品に対する月単位の保証期間を表示するダイアル・ゲージに生成された行セット・バインディングを示します。このコード例では、ゲージ・メトリックがデータ・コレクション内のWarrantyPeriodMonths列から動的に値を受け取り、残りデータ値が静的に設定されていることを示しています。
例26-6 ダイアル・ゲージのバインディング
<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels"
xmlns="http://xmlns.oracle.com/adfm/dvt"
type="DIAL">
<gaugeDataMap>
<thresholds>
<item value="8" valueType="literal"/>
<item value="16" valueType="literal"/>
</thresholds>
<item type="metric" value="WarrantyPeriodMonths"/>
<item type="minimum" value="0" valueType="literal"/>
<item type="maximum" value="24" valueType="literal"/>
<item type="topLabel" value="Warranty" valueType="literal"/>
<item type="bottomLabel" value="Months" valueType="literal"/>
</gaugeDataMap>
</gauge>
例26-7に、ダイアル・ゲージに対してJDeveloperによりJSFページに生成されたコードを示します。<dvt:thresholdSet>要素は、しきい値ごとに<dvt:threshold>要素を1つ指定しています。しきい値範囲の色は、fillColor属性の値で指定されるとおり、赤、黄および緑にデフォルト設定されています。<dvt:indicator>要素は、使用するインジケータとしてIT_NEEDLEを指定しています。これにより、実行時に針がレンダリングされます。<dvt:indicator>のデフォルト値では、線(IT_LINE)がレンダリングされます。
例26-7 ADFダイアル・ゲージのJSFページのコード
<dvt:gauge id="gauge1"
value="#{bindings.WarehouseStockLevels.gaugeModel}"
gaugeType="DIAL">
<dvt:gaugeBackground>
<dvt:specialEffects/>
</dvt:gaugeBackground>
<dvt:thresholdSet>
<dvt:threshold text="Low" fillColor="#d62800"/>
<dvt:threshold text="Medium" fillColor="#ffcf21"/>
<dvt:threshold text="High" fillColor="#84ae31"/>
</dvt:thresholdSet>
<dvt:gaugeFrame/>
<dvt:indicator type="IT_NEEDLE"/>
<dvt:indicatorBase/>
<dvt:gaugePlotArea/>
<dvt:tickLabel/>
<dvt:tickMark/>
<dvt:topLabel/>
<dvt:bottomLabel text="Months"/>
<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/>
</dvt:gauge>
ADFゲージ・コンポーネントを使用して、ステータス・メーター・ゲージを作成します。このゲージでは、外側の四角形が示している範囲に対する現在の測定レベルを内側の四角形が表しています。ステータス・メーター・ゲージのグラフィックにより、測定の状態や進行状況を簡単に評価することができます。
図26-13は、いくつかの倉庫における在庫レベルを表す一連のステータス・メーター・ゲージを示しています。このゲージ・セットは、1つのゲージ・コンポーネントをデータ・コレクション(WarehouseStockLevels)にバインドした結果として生成されます。このデータ・コレクションには、各倉庫につき1行のデータが含まれています。各行により、セットに1つのゲージが生成されます。セット内のすべてのゲージは最小値(0)から最大値(1500)までの同じ範囲値を共有し、しきい値が500、1000および1500に設定されています。セット内の各ゲージでは、それが表す倉庫の名前と、その倉庫の在庫メトリックが下部ラベルに表示されています。
データ・コントロールを使用してステータス・メーター・ゲージ・セットを作成するには、複数のデータ行を含むデータ・コレクションにゲージ・コンポーネントをバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
データバインドされたステータス・メーター・ゲージを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、倉庫の在庫量を表示するステータス・メーター・ゲージをStoreFrontModuleアプリケーションで作成するには、WarehouseStockLevelsコレクションを選択します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ゲージ」を選択します。
コンポーネント・ギャラリで、次のようにします。
「カテゴリ」リストで、「ステータス・メーター」または「ステータス・メーター(垂直)」を選択します。
作成するゲージのタイプを選択します。
実行時のゲージのクイック・スタート・レイアウトを選択します。
「OK」をクリックします。
表示される「ゲージの作成」ダイアログで、次に説明しているように値を選択します。
「メトリック」ドロップダウン・リストから属性バインディングを選択します。この属性バインディングには、ゲージで図示する実際の値が含まれます。
「最小」フィールドに、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、最小値を入力します。
「最大」フィールドに、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、最大値を入力します。
「上位ラベル」フィールドで、実行時にゲージの上部にラベルを表示する場合は、値を入力または選択します。
「下位ラベル」フィールドで、実行時にゲージの下部にラベルを表示する場合は、値を入力または選択します。
「しきい値属性」リストで、しきい値を指定する場合は、「追加」アイコンをクリックしてしきい値ごとに1行挿入し、そのしきい値の値を指定します。ゲージでは最大値を自動的にしきい値設定として扱うため、ゲージの最大値に等しいしきい値は作成しないでください。
|
注意: しきい値を含むクイック・スタート・レイアウトを選択した場合はダイアログにしきい値属性が含まれ、しきい値リストに行を追加したい場合以外はしきい値行を挿入する必要はありません。 |
オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整します。
図26-14に、図26-13で示したステータス・メーター・ゲージ・セットの設定を示します。このダイアログでは、必要なメトリック値の他に、しきい値とゲージの下部ラベルに表示される倉庫の名前を設定しています。
「OK」をクリックします。
ゲージのバインディングの完了後は、プロパティ・インスペクタで、必要に応じてゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。
ゲージを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ゲージのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例26-8に、各倉庫の在庫レベルを表示するステータス・メーター・ゲージ・セット(図26-14を参照)に生成された行セット・バインディングを示します。この例では、ゲージ・メトリック属性とデータ・コレクション内のQuantityOnHand値との間に作成された値バインディングが示されています。また、Bottom Label属性とデータ・コレクション内のWarehouseName値の間の値バインディングも示されています。
例26-8 ADFステータス・メーター・ゲージ・セットのバインディング・コード
<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<gaugeDataMap>
<thresholds>
<item value="500" valueType="literal"/>
<item value="1000" valueType="literal"/>
</thresholds>
<item type="metric" value="QuantityOnHand"/>
<item type="minimum" value="0" valueType="literal"/>
<item type="maximum" value="1500" valueType="literal"/>
<item type="bottomLabel" value="WarehouseName"/>
</gaugeDataMap>
</gauge>
例26-9に、倉庫の在庫レベルを示すステータス・メーター・ゲージ・セットに対してJSFページで生成されるコードを示します。gaugeSetColumnCount属性は、ゲージを2列で表示することを指定します。また、このコードは、Low、MediumおよびHighの3つのしきい値を指定します。簡潔にするため、inlineStyle属性の値は省略されています。
例26-9 ADFステータス・メーター・ゲージ・セットのJSFページのコード
<dvt:gauge id="gauge1"
value="#{bindings.WarehouseStockLevels.gaugeModel}"
gaugeType="STATUSMETER" gaugeSetDirection="GSD_DOWN"
gaugeSetColumnCount="2">
<dvt:gaugeBackground>
<dvt:specialEffects/>
</dvt:gaugeBackground>
<dvt:thresholdSet>
<dvt:threshold text="Low" fillColor="#d62800"/>
<dvt:threshold text="Medium" fillColor="#ffcf21"/>
<dvt:threshold text="High" fillColor="#84ae31"/>
</dvt:thresholdSet>
<dvt:indicatorBar/>
<dvt:gaugePlotArea/>
<dvt:tickLabel/>
<dvt:tickMark/>
<dvt:topLabel position="LP_NONE"/>
<dvt:bottomLabel/>
<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/>
</dvt:gauge>
ADFピボット・テーブルには行と列からなるデータのグリッドが表示されます。また、行や列に表示されていないデータをフィルタするためのピボット・フィルタ・バーが表示されることもあります。ピボット・テーブルの構造は次のとおりです。
列エッジ: 1つ以上の情報レイヤーを持つピボット・テーブル上の横軸。
行エッジ: 1つ以上の情報レイヤーを持つピボット・テーブル左側の縦軸。
ページ・エッジ: ピボット・テーブルで、データの表示をフィルタするために、0個以上の情報レイヤーを持つオプションのピボット・フィルタ・バー。
データ本体: ピボット・テーブルのセルに表示される1つ以上の指標(つまり、データ値)。
図26-15は、売上を示すピボット・テーブルです。データ本体に売上高と個数、列エッジに地理データ・レイヤー、行エッジに年データ・レイヤーと商品データ・レイヤーが表示されています。ページ・エッジのピボット・フィルタ・バーには販路フィルタが表示されています。
このピボット・テーブルは図26-16に示すCSVファイルのデータに基づいてデータを集計します。
ピボット・テーブルの作成ウィザードは、ピボット・テーブルをデータバインドし、構成するための宣言的サポートを提供します。ウィザードページでは、次の操作を行うことができます。
ピボット・テーブルの初期レイアウトの指定
ピボット・フィルタ・バーの関連付けと構成
データ・レイヤーに対する代替ラベルの指定
ドリルの挿入またはフィルタの設定
データ値の集計の定義
カテゴリおよびデータ・ソートの構成
ピボット・テーブルの実際のデータ・プレビュー
ウィザードの先頭ページでピボット・テーブルのレイアウトを行うと、2ページめ以降で対応するエントリが初期化されます。ウィザードのページを進めるに従って、「戻る」ボタンおよび「次へ」ボタンを使用して、ピボット・テーブルを調整できます。ウィザード・ページの後半では、「終了」をクリックして、構成オプションをスキップすることもできます。
データバインディングの完了後にピボット・テーブルをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFピボット・テーブル・コンポーネントの使用」を参照してください。
データ・コントロールを使用してピボット・テーブルを作成するには、ピボット・テーブル・コンポーネントをコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
|
ヒント: また、コンポーネント・パレットからピボット・テーブル・コンポーネントをドラッグして、ピボット・テーブルを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、ピボット・テーブルのユーザー・インタフェースを設計できます。 |
図26-15に示したサンプルの売上ピボット・テーブルの作成をデモンストレーションするために、プレースホルダ・データ・コントロールが作成され、図26-16のCSVファイルのデータ・タイプが定義されました。詳細は、29.4項「プレースホルダ・データ・コントロールの使用」を参照してください。
データバインドされたピボット・テーブルを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、商品別に年ごとの売上高と売上個数を表示したピボット・テーブルを作成するには、図26-17に示すように、「データ・コントロール」パネルでptExamplePlaceholderコレクション用に定義されたptExampleDataを選択できます。
データ・コレクションをJSFページにドラッグし、ポップアップ・メニューから「表」→「ADFピボット・テーブル」を選択します。
ピボット・テーブルの作成ウィザードの「表示属性の選択」ページで、次のようにして、ピボット・テーブルの初期レイアウトを指定します。
ピボット・フィルタ・バーとピボット・テーブルを関連付ける場合は、「ピボット・フィルタ・バーの作成」を選択します。必要に応じて、「使用可能な属性」リストからページ・エッジに属性をドラッグして、フィルタの初期ディスプレイを設定します。設定しなかった場合、空のピボット・フィルタ・バーが作成されます。データバインディング後、ピボット・テーブルにピボット・フィルタ・バーを追加する場合、ピボット・フィルタ・バーにデータ・モデルをバインドするには、ページ・ソースを直接編集する必要があります。
|
注意: ピボット・フィルタ・バーを作成しなくても、ページ・エッジに属性を追加できます。この属性には、データ・モデルでプログラム的にアクセスすることができます。 |
初期レイアウトでは、属性を「使用可能な属性」リストからピボット・テーブルにドラッグし、ピボット・テーブルの列、行およびデータ本体の属性を選択します。
ピボット・テーブル・レイアウトでは、データ・ラベルは、セル内のデータ(データ値)を表し、行エッジ、列エッジまたはページ・エッジのヘッダー・ラベルとして表示されるピボット・テーブルのレイヤーのことをいいます。ピボット・テーブルのデータ本体にドラッグした属性のラベルは、「データ・ラベル」レイヤーに表示されます。
データ・ラベルは、列エッジ、行エッジまたはページ・エッジ上の任意の場所にドラッグできます。また、属性を同じエッジ上の別の場所や、別のエッジ上にドラッグすることも可能です。
レイアウトで属性を配置または移動するためにドラッグ操作を使用するかわりに、属性を右クリックするか、[Shift]を押しながら[F10]を押して、ポップアップ・メニュー・オプションを表示することもできます。図26-18に、地理属性のポップアップ・メニュー・オプションを示します。
|
注意: 属性の間に存在しうるドリル・パスは、行エッジ、列エッジ、およびページ・エッジに複数の属性をレイアウトするときに定義されます。このようなドリル・パスは、実行時にピボット・テーブルのドリルをサポートするために後で有効化できます。 |
「入力済属性」のデフォルトの選択から「名前-値ペア」に変更してデータ・ポイントをコレクションに格納する方法を構成する場合は、「データ形状の変更」ボタンをクリックします。次のオプションを提示するダイアログが表示されます。
入力済属性
コレクション内の各種データ・ポイントは、別々の属性によって表されます。このオプションは、ピボット・テーブル内のデータ・ポイントの種類が1つのみの場合も有効です。
たとえば、推定値と実際値に対するデータ・ポイントがある場合は、推定値の属性と実際値の属性が異なる場合にのみ、「入力済属性」を選択します。
名前-値ペア
データ・ポイントの種類は複数でも、それらのタイプを指定する属性は1つのみであることを示します。この場合、単一の属性に、各種データ・タイプを識別する値があります。
たとえば、ある属性に、推定値を表すデータ・ポイントの値としてESTがあり、実際値を表すデータ・ポイントの値としてACTがある場合があります。
たとえば、図26-15の売上ピボット・テーブルの初期レイアウトを指定するには、図26-19にあるように、ページ・エッジにChannel属性、行エッジにYear属性とProduct属性、データ本文にSales属性とUnits属性(データ・ラベル)、列エッジにGeography属性をドラッグし、「ピボット・フィルタ・バーの作成」を選択します。
ウィザードの「表示属性の選択」ページにレイアウトされた属性に対して代替ラベルまたは値を指定する場合は、「属性ラベルの指定」ページを使用して、次の手順を実行します。
「データ値」エリアでデータ値の代替ラベルを指定するには、実行時にその属性のヘッダー・セルにスタンプされているデフォルトの<データ属性名の使用>テキスト・ラベルを変更します。テキストは直接、入力できます。また、ピボット・テーブルでデータ値を1つ使用する場合など、ヘッダー・セルを表示しない場合は<ラベルなし>を選択します。
「カテゴリ」エリアで属性カテゴリの代替ラベルを指定するには、「属性の表示名」列にテキストを直接入力して、実行時にその属性のヘッダー・セルにスタンプされているデフォルトの<データ属性名の使用>テキスト・ラベルを変更します。ラベルは、実行時、ピボット・ハンドルに表示されます。
また、「属性の表示名」列で別の属性を選択して、属性カテゴリに代替値を指定することもできます。たとえば、データ・コレクションでProductId属性を使用して、ピボット・テーブルをレイアウトしながら、ProductName属性値で人間が読みやすいように、ピボット・テーブルを改良することもできます。
たとえば、図26-15の売上ピボット・テーブルのYear属性に代替ラベルを指定するには、図26-20に示すように「属性の表示名」フィールドにテキスト(Time)を入力します。
実行時に、ピボット・テーブルでドリル操作を公開する必要がある場合は、ピボット・テーブルの作成ウィザードの「ドリルの構成」ページを使用して、次のいずれかのオプションを有効にします。
2つの属性の間の関係を折りたたまれたビューまたは展開されたビューに表示しながら、データ・レイヤーに詳細の集計値を保存するには、「ドリルの挿入」を選択します。実行時、ドリル・アイコンは親属性の表示ラベル内に表示されます。
展開されたビューで、親属性の総計を子属性の前または後のどちらに表示するかを指定するには、「親行の挿入」を使用します。
ドリルの挿入を有効にするには、次の手順の実行も必要です。
有効化するドリル・パスを選択します。ドリル・パスは、ウィザードの「表示属性の選択」ページにある属性レイアウトに基づいて設定されます。
ウィザードの「集計の構成」ページで集計を設定します。
たとえば、図26-21のピボット・テーブルは、ドリルの挿入を使用して、Yearデータ・レイヤーのビューを展開しています。各年の売上の集計値(2007年52,500ドル、2006年544,150ドル)および売上個数(2007年410個、2006年507個)は、製品の上にある行に表示されます。
折りたたまれたビューのデータ・レイヤーに詳細の集計値を保存せずに、属性の関係を折りたたまれたビューまたは展開されたビューに表示するには、「ドリルのフィルタ」を選択します。実行時、ドリル・アイコンは親属性の表示ラベル内で有効化されます。
ドリルのフィルタはデータ・レイヤー属性の詳細にビューの焦点を当てます。たとえば、図26-22のピボット・テーブルは、ドリルのフィルタを使用して、Year (2007)データ・レイヤーのビューを展開し、総売上高(52,500)および売上個数(410)を表示しています。
「ドリルのフィルタ」を有効化するには、有効化するドリル・パスを選択する必要があります。ドリル・パスは、ウィザードの「表示属性の選択」ページにある属性レイアウトに基づいて設定されます。
たとえば、図26-15の売上ピボット・テーブルでドリルの挿入を有効化するには、図26-23に示すように、ウィザードの「ドリルの構成」ページに必要事項を入力します。
ピボット・テーブルでデータの合計と小計を集計する方法を定義するには、ピボット・テーブルの作成ウィザードの「集計の構成」の1ページまたは2ページとも使用します。
デフォルトでは、ピボット・テーブルに表示されている属性によってデータ・コレクションの各行が一意に識別されない場合、重複行のデータを集計してピボット・テーブルの単一のセルに折りたたむことができます。また、特定のデータ項目では、デフォルトの集計タイプを無視することもできます。
ピボット・テーブルでのデータの集計方法を指定するには、「データ集計」ページで次の手順を実行します。
重複行を処理するためのデフォルト集計方法を変更する場合は、「デフォルトの関数」ドロップダウン・リストを使用して、値を指定します。有効な値は、Sum、Average、Count、Maximum、Minimum、Standard DeviationおよびVarianceです。
特定のデータ値について、デフォルトの集計タイプを無視する場合は、「追加」アイコンをクリックして、使用可能な属性のために1行挿入します。次に、各属性の「関数」列で、集計に使用する数学演算を選択します。使用可能なオプションは、Sum、Average、Count、Maximum、Minimum、Standard DeviationおよびVarianceです。この属性は、ピボット・テーブルに複数のデータ値(SalesやUnitsなど)がバインドされている場合のみ有効です。
たとえば、図26-15の売上ピボット・テーブルにあるUnitsデータ値のデフォルト集計タイプを無視するには、図26-24に示すように、「追加」アイコンを使用してUnits属性を追加し、「データ集計」ページの「関数」列でAverageを選択します。
また、ピボット・テーブルの列エッジ、行エッジまたはページ・エッジに追加された属性カテゴリについて、合計と小計を定義することもできます。「カテゴリの合計」ページで、「追加」アイコンを使用して、各属性を挿入するか、「すべての集計」を選択して、使用可能な属性をすべて追加してから、次の手順を実行します。
「属性」列で、合計する属性を選択します。
「関数」列で、集計に使用する数学演算を選択します。使用可能なオプションは、Sum、Average、Count、Maximum、Minimum、Standard DeviationおよびVarianceです。
「属性」列で参照しているアイテムを基準として、集計結果を表示する位置を示す値を「合計の挿入」列で選択します。有効な値はBefore、AfterまたはReplaceです。
「合計ラベル」列に、集計のラベルとして使用するテキストを入力します。
|
注意: 読取り専用の「ドリル挿入の合計」表には、ピボット・テーブルでドリルの挿入を有効にした結果として、自動的に定義されたカテゴリ合計が表示されます。 |
たとえば、図26-15の売上ピボット・テーブルでGeographyデータ・レイヤーとYearデータ・レイヤーの合計を定義するには、「関数」列で「Sum」、「合計の挿入」列で「After」を選択し、図26-25に示すように、「カテゴリの合計」ページの属性それぞれについて、「合計ラベル」列にテキスト(「地域合計」と「年合計」)を入力します。
実行時に結果として得られたピボット・テーブルで特定の年の値を展開すると、直前のウィザードページのドリルの挿入オプションで指定したレイアウトと設定に基づいて子値から計算された合計が自動的に保存されます。
ピボット・テーブルでソートを設定するには、ピボット・テーブルの作成ウィザードの「ソートの構成」の1ページまたは2ページとも使用します。
デフォルトでは、ピボット・テーブルのデータは、最初は外部行データ・レイヤーの値に基づいてソートされます。任意の行エッジ、列エッジまたはページ・エッジのデータ・レイヤーにソート順序を指定することができます。このようなソートをカテゴリ・ソートと呼びます。実行時に、データ・レイヤーを異なるエッジにピボットした場合、指定されたカテゴリのソート順序が使用されます。
ウィザードの「表示属性の選択」ページでデータ本文にマップされた属性を並べることはできますが、データ・ラベル(データ値)のカテゴリ・ソートは指定できません。たとえば、図26-19はSalesおよびUnitsのデータ値を使ったピボット・テーブルのレイヤーを示しています。これらのメジャーのカテゴリ・ソートは指定できませんが、図26-15のように、実行時にピボット・テーブルのデータ本文に表示される値の順序は指定できます。
また、ピボット・テーブルをレンダリングするときに、データ本文でのデータ値の初期ソート順序を指定することもできます。これはデータ・ソートと呼ばれます。
カテゴリごとにソートを設定するには、「カテゴリ・ソート」ページの「追加」アイコンを使用して、設定の対象となる各行エッジ、列エッジまたはページ・エッジの属性を追加し、その後、次の手順を実行します。
「ソート属性」列で、ピボット・テーブル・ヘッダーの実際値に基づいてアルファベット順でソートすることを指定するにはデフォルトの<属性値の使用>をそのまま使用します。ソート順序をカスタマイズするには、ドロップダウン・リストからデータ・ラベルの値を指定します。たとえば、基礎となる問合せに、収益性別製品ランキングのランク計算が含まれている場合、ProductRank別に降順で製品が表示されるように指定できます。
「初期ソート順序」で、初期ソート方向を選択します。有効な値はASCENDINGまたはDESCENDINGです。
たとえば、図26-26は、列エッジにはChannelデータ・レイヤーを降順、行エッジにはYearデータ・レイヤーを昇順で表示するように構成されたウィザードの「カテゴリ・ソート」ページを示しています。
実行時に表示されるピボット・テーブルは図26-27のとおりです。
データのソートを構成するには、「データ・ソート」ページで、次の手順を実行します。
ピボット・テーブルがレンダリングされたときのデータの初期ソート順序を指定するには、「列でソート」を選択します。
「初期ソート順序」ドロップダウン・リストで、初期ソート方向を選択します。有効な値はASCENDINGおよびDESCENDINGです。
「シーケンスNull」ドロップダウン・リストで、NULL値をソートの先頭に表示する場合はFirst、NULL値をソートの最後に表示する場合はLastを指定します。
「初期ソート列」表で、「レイヤー属性」列に表示されるデータ・レイヤーの「値」列にデータ値を指定します。
たとえば、図26-28は、Units/World/Canoesデータ値に基づいて、年ごとにグループ化されたChannelデータ・レイヤーをソートするように構成された「データ・ソート」ページを示しています。
実行時、ピボット・テーブルは最初に図26-29のようにレンダリングされます。
ピボット・テーブルの作成ウィザードの「ピボット・テーブルのプレビュー」ページで、ピボット・テーブルに表示されるデータをそのときの設定でプレビューできます。プレビューでは、コードのコンパイルや実行は不要です。プレビューが希望どおりでない場合は、バインディング・ウィザード・ページで設定を変更し、「プレビュー」ページに再び戻ってデータが意図したとおりに表示されることを確認します。
図26-30は、図26-15に示す売上ピボット・テーブルに対するウィザードの「ピボット・テーブルのプレビュー」ページを示しています。
ピボット・テーブルを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ピボット・テーブルのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
「データ・コントロール」パネルからピボット・テーブルを作成すると、ページ定義ファイルがバインディングを使って更新されます。例26-10に、地域内の商品売上げと売上げ個数を年別に表示するピボット・テーブルに生成された行セット・バインディングを示します。ピボット・テーブルのデータ・マップには次の要素が含まれます。
<columns>: 各列項目を定義します
<rows>: 各行項目を適切な順番で定義します
<pages>: ピボット・フィルタ・バーに組入れられる項目を定義します
<aggregatedItems>: 項目の合計と小計を定義します
<hierarchies>: 2つの項目間で考えられるドリル・パスを定義します
<sorts>: ピボット・テーブル・データのカテゴリ・ソートと初期ソート順序を定義します
重複する行のデフォルト・データ集計方法は、<data>要素で指定します。重複の集計の詳細は、26.4.3項「ピボット・テーブルの属性の集計について」を参照してください。
ソート操作の詳細は、26.4.4項「ピボット・テーブルへの初期ソートの指定について」を参照してください。
例26-10 ADFピボット・テーブルのバインディングXML
<pivotTable IterBinding="ptExampleDataIterator" id="ptExampleData"
xmlns="http://xmlns.oracle.com/adfm/dvt"
ChangeEventPolicy="ppr">
<pivotTableDataMap>
<columns>
<item value="Geography" itemLabel="Location"/>
<data aggregateDuplicates="true" defaultAggregateType="SUM">
<item value="Sales"/>
<item value="Units" aggregateType="AVERAGE"/>
</data>
</columns>
<rows>
<item value="Year"/>
</rows>
<pages>
<item value="Channel"/>
</pages>
<aggregatedItems>
<item aggregateLocation="AFTER" aggregateType="SUM" value="Geography"
aggregateLabel="Total Geography"/>
<item aggregateLocation="AFTER" aggregateType="SUM" value="Year"
aggregateLabel="Total Across Years"/>
</aggregatedItems>
<drills type="INSERT"/>
<hierarchies>
<item value="Year" location="BEFORE">
<child value="Product" label="Product"/>
</item>
</hierarchies>
<sorts>
<categorySort item="Channel" direction="DESCENDING"/>
<categorySort item="Year" direction="ASCENDING"/>
<qdrSliceSort direction="DESCENDING" edge="rows" grouped="true"
nullsFirst="true">
<item name="Geography" value="World"/>
</qdrSliceSort>
</sorts>
</pivotTableDataMap>
</pivotTable>
「データ・コントロール」パネルを使ってピボット・テーブルを作成すると、必要なコードがページに追加されます。例26-11に、売上のピボット・テーブルと関連するピボット・フィルタ・バーに対してJSFページで生成されるコードを示します。
ピボット・テーブルに表示するために選択した属性によってデータ・コレクションの各行が一意に識別されない場合、重複行のデータを集計してピボット・テーブルの単一のセルに折りたたむことができます。
たとえば、図26-15に示すデータ・コレクションの行に店舗IDも含まれていた場合、商品、販路および地理の特定の組合せにおける全店舗のデータ行をピボット・テーブルの単一のセルに折りたたむ必要があります。
ピボット・テーブルには、重複するデータ行の計算の制御に使用できる次のオプションのデータ・バインディング属性があります。
aggregateDuplicates: <data>要素のブール型プロパティ。重複行でデータ値を集計するために、バインディング実行時に特殊処理を有効化するかどうかを決定します。この属性が指定されていない場合、falseであると判断されます。
defaultAggregateType: 重複を処理するためのデフォルト集計方法を指定する<data>要素の文字列プロパティ。有効な値は、SUM、AVERAGE、COUNT、MIN、MAX、STDDEVおよびVARIANCEです。aggregateDuplicatesがtrueで、defaultAggregateTypeが指定されていない場合、SUMであると判断されます。
aggregateType: <item>要素の文字列プロパティ。特定のデータ項目のデフォルト集計タイプをオーバーライドすることができます。この属性は、ピボット・テーブルに複数のデータ値(SalesやUnitsなど)がバインドされている場合のみ有効です。
デフォルトでは、ピボット・テーブルはSUM演算を使用してデータ・コレクション内で重複するデータ行のデータ値を集計し、ピボット・テーブルの単一のセル値を生成します。つまり、aggregateDuplicates属性はtrueに設定され、defaultAggregateTypeはSUMであると判断されます。
例26-10に示す<data>要素は、このようなデフォルトの集計の例です。
ピボット・テーブルで別の数学演算を使用して重複行のデータ値を集計する場合は、defaultAggregateTypeを目的の演算に設定します。
例26-12に、defaultAggregateTypeがSUMに設定されているデータ要素を示します。この演算は、商品、販路および州の一意の組合せごとに全店舗の売上合計を表示する場合に適しています。
例26-12 重複行のカスタム集計のバインディングXML
<pivotTable IterBinding="SalesPivotTable1Iterator" id="SalesPivotTable11"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<pivotTableDataMap>
<columns>
<data aggregateDuplicates="true" defaultAggregateType="SUM">
<item value="Sales"/>
</data>
<item value="Geography"/>
</columns>
<rows>
<item value="Channel"/>
<item value="Product"/>
</rows>
<aggregatedItems>
<item aggregateLocation="After" aggregateType="AVERAGE"
value="Product" aggregateLabel="Average"/>
</aggregatedItems>
</pivotTableDataMap>
</pivotTable>
売上や店舗の平均規模(平方フィート単位)など複数のデータ値がピボット・テーブルにあり、重複行の売上データ値を合計する一方、平方フィートのデータ値を平均化する場合は、次のようにします。
<data>要素で、defaultAggregateTypeをSUMに設定します。
平方フィート属性の<item>要素で、aggregateTypeをAVERAGEに設定します。
例26-13に、PivotTableDataMap要素でラップされた<columns>要素を示します。<data>要素には、集計のデフォルトの属性が指定されています。これらは、特殊なカスタムaggregateType属性が指定されていないデータ・アイテムすべてに適用されます。
デフォルトでは、ピボット・テーブルのデータは、最初は外部行データ・レイヤーの値に基づいてソートされます。任意の行アイテム、列アイテムまたはページ・アイテムのデータ・レイヤーにソート順序を指定することができます。このようなソートをカテゴリ・ソートと呼びます。実行時に、データ・レイヤーを異なるエッジにピボットした場合、指定されたカテゴリのソート順序が使用されます。sorts要素内にcategorySort要素を挿入し、表26-2に示すように属性の値を設定します。
表26-2 categorySort要素の属性値
| 属性 | 説明 |
|---|---|
|
|
カテゴリ・ソートを設定する列アイテム、行アイテムまたはページ・アイテムを指定します。この属性の値は必須です。 |
|
|
初期のソート方向を指定します。有効な値は |
また、ピボット・テーブルをレンダリングするときに、データ本文でのデータ値の初期ソート順序を指定することもできます。これはデータ・ソートと呼ばれます。デフォルトの動作は、ページ定義ファイルでピボット・テーブル・バインディングのpivotTableDataMap要素内にsorts要素を挿入すると変更できます。sorts要素内にqdrSliceSort要素を挿入し、表26-3に示すように属性の値を設定します。
表26-3 qdrSliceSort要素の属性値
| 属性 | 説明 |
|---|---|
|
|
初期のソート方向を指定します。有効な値は |
|
|
|
|
|
親のスライスをソートする場合は |
|
|
NULL値をソートの先頭に表示する場合は |
1つ以上のitemタグをqdrSliceSortタグに挿入します。itemタグは、ソート対象の値が取得されるのとは逆のエッジ上にスライスを指定します。表26-4に示すように属性の値を設定します。
ADF地理マップは、Oracle Spatialの機能をOracle ADF内で提供するADFデータ視覚化コンポーネントです。このコンポーネントでは、ユーザーはビジネス・データを地理マップ上に表し、1つのマップ上に複数層の情報(テーマと呼ばれる)を重ね合せることができます。これらのレイヤーは、棒グラフ、円グラフ、カラー、点および事前定義済テーマといった任意のテーマとして表すことができます。
図26-31は、アメリカ合衆国内のある地域のベース・マップとともに次のテーマを使用した地理マップ・コンポーネントを示しています。
カラー・テーマ: このテーマでは、選択した商品について、商品の人気に基づいて州を色付けします。色の範囲は緑(その商品の人気が最高であることを表す)から赤(その商品の人気が最低であることを表す)までです。
円グラフ・テーマ: このテーマでは、各州で人気のある商品カテゴリを示す円グラフをその州に表示します。この例の円グラフでは、Media、OfficeおよびElectronicsという3つの商品カテゴリを円のスライスとして示しています。
点テーマ: このテーマでは、倉庫を点として識別します。各点に対し、選択した商品のその倉庫での在庫レベルを示すアイコンが表示されます。表示されるアイコンは、在庫レベルが低、中、高といった各在庫範囲で異なります。
地理マップ・コンポーネントは、複数のデータ・セットを表示するために、複数のマップを1ページ上に配置する必要がないという点が、他のADFデータ視覚化コンポーネントとは異なります。このコンポーネントは、複数のグラフを1ページ上に配置できるグラフなどのコンポーネントとは対照的です。かわりに、複数のデータセットの空間的な相互関係を示すか、特定の点に対して別々のテーマでレイヤー化された異なる属性を表示します。
地理マップ・コンポーネント自体はデータにバインドされません。しかし、各マップのテーマは独自のデータバインディングを持っています。
ベース・マップは、開発者が作成したテーマをADF地図コンポーネントでレイヤー化する背景となります。
Oracle Spatialでは、管理者は1つ以上のテーマで構成されるベース・マップを作成します。管理者は、ベース・マップのテーマの可視性を制御します。ベース・マップを拡大および縮小すると、ベース・マップの様々なテーマが表示/非表示になります。ADF地図コンポーネントのレベルでは、管理者がベース・マップに作成したテーマの表示を、開発者がズーム係数を使用して制御することはできません。
複数のテーマをADF地図にオーバーレイする際は、そのテーマに関連するタグのmaxZoomおよびminZoom属性を設定することでテーマの可視性を制御できます。実行時には、「マップ」ツールバーの表示メニューまたはページに作成した他のADFコンポーネントを使用してカスタム・テーマを表示/非表示にすることもできます。
データ・バインディングの完了後に地理マップをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADF地理マップ・コンポーネントの使用」を参照してください。
地図を作成するには、まず地図を構成し(つまり、ベース・マップを選択し、処理用のURLを提供)、次に地図のテーマをデータ・コレクションにバインドします。JDeveloperでは、作成するテーマに対して「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を行うことができます。
マップ点テーマを作成する際、マップに表示される点のスタイルをカスタマイズするオプションがあります。様々な点スタイルごとに、mapPointStyleItemタグを使用できます。
データバインドされた点テーマを使用して地図を作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
図26-32に、「データ・コントロール」パネルでWarehouseStockLevelsByProduct1コレクションを選択し、各倉庫点の在庫量を表すイメージを表示する点テーマを使用した地理マップを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび点のテーマ」を選択します。
マップをページにまだ構成していない場合は、次に表示される「地理マップの作成」ダイアログで「新規」アイコンをクリックし、「地理マップ構成の作成」ダイアログを表示して次のようにします。
「ID」フィールドに、マップ構成の一意のIDを入力します。
「MapViewer URL」フィールドに、Oracle Application Server MapViewerサービスのURLを入力します。
「ジオコーダURL」フィールドで、マップ作成用に住所を緯度と経度の座標に変換するGeocoder WebサービスのURLを選択します。
|
注意: ジオコーダのURLは、住所の経度および緯度情報をまだ持っていない場合のみ必要です。 |
「OK」をクリックしてダイアログを閉じ、「地理マップの作成」ダイアログに戻ります。
「マップ」ページで、地図コンポーネントのベース・マップを選択し、地図で使用する他の設定を次の手順で選択します。
データソース・リストで、ベース・マップの選択元となるマップのコレクションを選択します。
「基準となるマップ」リストから、地理マップ・コンポーネントの背景となるマップを選択します。
「開始X」フィールドと「開始Y」フィールドの値を指定するには、マップのイメージをクリックしてマップをプレビュー・ウィンドウ内の中央に配置します。
左上角のマップ・ナビゲータの矢印を使用すると、マップを適切な方向に移動できます。
オプションで、プレビュー・ウィンドウのスライド矢印を使用して、地図のズーム係数を調整します。
「OK」をクリックしてダイアログを閉じ、「点マップ・テーマの作成」ダイアログを表示します。
「テーマID」フィールドに、点マップ・テーマの一意のIDを入力します。
位置セクションで、点の位置をx座標とy座標(経度と緯度)のペアで指定するか、住所で指定するかを選択します。
選択する位置によって、位置セクションに表示されるコントロールが決まります。
|
ヒント: 地図上にデータを表現するには、住所コントロールを使用するよりも、xおよびy座標を使用するほうが効率的です。これは、住所コントロールはジオコーダでxおよびy座標に変換する必要があるからです。データ・コレクションの行が100行を超える場合は、適切なパフォーマンスを確保するために、xおよびy座標を使用してください。 |
xとyの点の位置に対し、次のアイテムに対応するデータを選択します。
X(経度):マップ上の点の水平位置。
Y(緯度):マップ上の点の垂直位置。
ラベル:情報ウィンドウの上部に表示される点のラベル。点をクリックすると表示されます。
「点データ」セクションで、点、そのラベルおよび点のスタイル(オプション)に関連するデータを指定する次の情報を入力します。
「データ」フィールドで、点に関連付けられているデータ行(QuantityOnHandなど)を選択します。
「ラベル」フィールドに、点をクリックすると、情報ウィンドウでデータ値の前に表示されるテキストを入力します。
オプションで、「カテゴリ」フィールドで、点の適切なスタイルの検索に使用するデータ列を選択します。「カテゴリ」で値を選択すると、その値はこの点テーマのバインディングに格納された後、この点テーマ用に作成するmapPointStyleItemタグのitemValue属性と照合されます。
|
注意: 点のスタイルの検索にカテゴリとして使用する列がデータにない場合、 |
「行選択の有効化」フィールドは、関連するコンポーネントで行を選択可能にする場合にのみ選択します。このオプションは、作成中の地理マップに関連するデータ・コレクションにリンクされているコンポーネントがページに含まれる場合に使用します。
「OK」をクリックします。
図26-33に、各倉庫点の在庫量を表すイメージを表示する点テーマを使用した地理マップの「点マップ・テーマの作成」ダイアログを示します。
特定のマップ点テーマで使用する点スタイル・アイテムを作成するために使用できる様々なオプションがあります。これらのオプションは次のとおりです。
すべてのデータ・ポイントに対する単一イメージ
データ・ポイント・カテゴリごとに異なるイメージ
データ値の低、中および高範囲を表すイメージ
マップ点テーマのデータ・バインディングを作成すると、そのマップ・テーマのすべての点に対して使用される単一の組込みイメージを選択できるようになります。プロパティ・インスペクタで、mapPointThemeタグのbuiltInImage属性でこの選択を実行できます。この属性のデフォルト値はOrangeBallです。
あるいは、「点マップ・テーマの作成」ダイアログの「カテゴリ」に値を指定した場合は、一連の点スタイル・アイテムを作成して各カテゴリのデータ・ポイントを表す別のイメージを決定する必要もあります。その場合、点スタイル・アイテムのタグで最小/最大値を使用しないでください。かわりに、点スタイル・アイテムのタグのitemValue属性に、「カテゴリ」に指定したデータ列のエントリと一致する値を設定します。
地理マップの点テーマでは、「カテゴリ」に値を指定しない場合でも、mapPointThemeタグのmapPointStyleItem子タグを使用して値の範囲(低、中、高など)とその範囲を表すイメージを指定できます。この指定をすると、各点は、その点のデータ値が含まれる範囲を識別するイメージによって表されます。
次の手順では、点テーマを使用して地図がすでに作成されていることを前提としています。
データ値の低、中および高範囲を表す点スタイル・アイテムをマップ点テーマに追加するには:
構造ウィンドウで、dvt:mapPointThemeタグを右クリックし、「dvt:mapPointThemeの内部に挿入」→「点スタイルのアイテム」を選択します。
「点スタイルのアイテム」のプロパティ・インスペクタで、表26-5「点スタイル・アイテムのプロパティ」に示すように値を設定します。
表26-5 点スタイル・アイテムのプロパティ
| プロパティ | 設定値 |
|---|---|
|
|
点スタイル・アイテムの一意のIDを指定します。 |
|
|
定義するデータ範囲の最小値を指定します。 |
|
|
定義するデータ範囲の最大値を指定します。 |
|
|
ユーザーが点アイテムの上にカーソルを置いたときに表示されるテキストを指定します。たとえば、低い在庫レベルの点アイテムを定義する場合は、このプロパティの値として |
|
|
イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージはマップ上に表示され、MinValueおよびMaxValueプロパティによって指定されたデータ範囲を表します。 あるいは、「その他」セクションに表示されるBuiltInImageドロップダウン・リストによって参照される様々な事前定義済イメージの1つを選択できます。 |
|
|
イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムの上にカーソルを置くと表示されます。 |
|
|
イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムを選択すると表示されます。 |
手順1および2でデータ値の低範囲についてデータ値の範囲を定義した場合は、手順1および2を繰り返して、データ値の中および高範囲を適切な値で定義します。
|
注意:
|
地図と点テーマ(この場合は、地図に追加された初期テーマ)を「データ・コントロール」パネルからドロップすると、次の処理が行われます。
点テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
地理マップ・コンポーネントに必要なタグをJSFページに追加します。
マップXML内で必要な点テーマのタグをJSFページに追加します。
例26-14に、地理マップの点テーマに生成された行セット・バインディングを示します。
例26-14 点テーマのバインディングXML
<mapTheme IterBinding="WarehouseStockLevelsByProduct1Iterator"
id="WarehouseStockLevelsByProduct1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<mapThemeDataMap mapThemeType="point">
<item type="data" value="QuantityOnHand" label="Product Quantity"/>
<item type="lat_long" latitude="Latitude"
longitude="Longitude" label="WarehouseName"/>
</mapthemeDataMap>
</mapTheme>
例26-15に、地理マップおよびその点テーマに対してJSFページで生成されるXMLコードを示します。このコードは、データ値に基づいて次の3種類の点スタイル設定が含まれています。
最初の点スタイル設定(ps0)は、500未満の値に適用されます。この点スタイルでは、非常に低い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。
2番目の点スタイル設定(ps1)は、500から1000の値に適用されます。この点スタイルでは、低い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。
最後の点スタイル設定(ps2)は、1000から1600の値に適用されます。この点スタイルでは、高い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。
例26-15 JSFページの地理マップと点テーマのXMLコード
<dvt:map id="map1"
mapServerConfigId="mapConfig1"
inlineStyle="width:850px;height:490px"
startingX="-96.0"
baseMapName="ELOCATION_MERCATOR.WORLD_MAP"
startingY="37.0" zoomBarPosition="WEST"
showScaleBar="false"
partialTriggers="go pointTheme pieTheme colorTheme" mapZoom="3">
<dvt:mapPointTheme id="mapPointTheme1"
shortLabel="Warehouse Stock Levels"
selectionListener="#{MapBean.processSelection}"
value="#{bindings.WarehouseStockLevelsByProduct1.geoMapModel}"
rendered="#{AppState.showPointTheme}">
<dvt:mapPointStyleItem id="ps0"
minValue="0"
maxValue="500"
imageURL="/images/low.png"
selectedImageURL="/images/lowSelected.png"
shortLabel="Very Low Inventory"/>
<dvt:mapPointStyleItem id="ps1"
minValue="500"
maxValue="1000"
imageURL="/images/medium.png"
selectedImageURL="/images/mediumSelected.png"
shortLabel="Low Inventory"/>
<dvt:mapPointStyleItem id="ps2"
minValue="1000"
maxValue="1600"
imageURL="/images/regularGreen.png"
selectedImageURL="/images/regularGreenSelected.png"
shortLabel="High Inventory"/>
</dvt:mapPointTheme>
</dvt:map>
マップ点のカスタムHTMLおよびカスタム・イメージを指定する場合、dvt:mapPointThemeタグのcustomPointCallback属性を使用してこのカスタマイズを実現できます。
|
重要: マップ点テーマの |
コールバックを使用してマップ点のスタイルをカスタマイズするには:
目的の点のカスタマイズを実行するメソッドをJavaで記述します。
このメソッドをマップのマネージドBeanに格納します。
マネージドBeanの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「マネージドBeanの作成と使用」の項を参照してください。
マップ点テーマのデータ・バインディングの完了後に、プロパティ・インスペクタを使用してマネージドBeanのメソッドへの参照をdvt:mapPointThemeタグのcustomPointCallback属性に指定します。
たとえば、マネージドBeanの名前がMapSampleBean、メソッドの名前がsetCustomPointStyleの場合、その参照は#{mapSampleBean.CustomPointStyle}となります。
地図の作成時は、任意の順序でのテーマ(点、カラーおよびグラフ)の作成を選択できます。
次の手順では、地理マップがすでに構成されていることを前提にしています。したがって、マップ・コンポーネントから、地図を構成するためのダイアログは表示されません。そのかわり、カラー・テーマを作成するためのダイアログのみ表示されます。
データバインドされたカラー・テーマを地図に追加するには:
「データ・コントロール」パネルから、コレクションを選択します。
図26-34に、「データ・コントロール」パネルでProductPopularity1コレクションを選択し、地域における商品の人気を色別に示すカラー・マップ・テーマを作成する例を示します。
地理マップ・コンポーネントをすでに含んでいるJSFページにコレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「カラー・テーマ」を選択します。
次に表示される「カラー・マップ・テーマの作成」ダイアログで、マップ・テーマの一意のIDを「ID」フィールドに入力します。
ベース・マップ・テーマ・セクションで、地理マップで使用するベース・マップのカラー・テーマを次のように指定します。
「名前」フィールドで、ベース・マップ・テーマの名前を選択します。
「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。
オプションで、「サンプル・テーマ・データの表示」をクリックし、「サンプル・テーマ・データ」ダイアログを表示します。このダイアログでは、実際のデータの先頭のいくつかの行を確認できるため、適切な位置列を指定できます。
たとえば、アメリカ合衆国のマップの州で構成される地域のデータを確認するには、図26-35で示すように、MAP_STATES_NAMEを選択できます。
|
注意: Oracle Spatialの管理者はサンプル・データの表示を無効にできます。このボタンが使用できない場合は、管理者に連絡して指示を求めてください。 |
「外観」セクションで、カラー・テーマの外観を次のように指定します。
「データ・バケット数」に、この地理マップのデータのグループ数を入力します。各グループは、色別にコード化されます。この数の指定後は、最小値と最大値に色を指定できます。他の値の色は、RGBアルゴリズムを使用して自動的に選択されます。
「最小値の色」で、最小値の色を選択します。
「最大値の色」で、最大値の色を選択します。
「データ」セクションで、コレクション内のデータに関する次の情報を指定します。
「位置」では、ベース・マップ・テーマから選択した位置列の値に対応するデータ・コレクション内の列を選択します。
「ロケーション・ラベル」では、位置列の値に関連付けられているラベルを含むデータ・コレクション内の列を選択します。これらのラベルは、色をクリックしたときまたは色の上にカーソルを置いたときに表示される情報ウィンドウに表示されます。
「データ・ラベル」には、色をクリックしたときまたは色の上にカーソルを置いたときに表示される情報ウィンドウおよびツールチップでのデータの説明に使用されるラベルを入力します。たとえば、情報ウィンドウでは、データ値の前にProduct Popularityなどのラベルを表示できます。
「行選択の有効化」は、マスター/ディテール関係を有効にする場合にのみ使用します。これは、マップ・テーマのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。
図26-36に、商品の人気を州別のカラー・テーマで示す「カラー・マップ・テーマの作成」ダイアログを示します。
カラー・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。
カラー・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
マップXML内で必要なカラー・テーマのタグをJSFページに追加します。
例26-16に、地理マップのカラー・テーマに生成された行セット・バインディングを示しています。
例26-16 カラー・テーマのバインディングXML
<mapTheme IterBinding="ProductPopularity1Iterator" id="ProductPopularity1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<mapThemeDataMap mapThemeType="color">
<item type="location" value="StateProvince" label="StateProvince"/>
<item type="data" value="CountAddressesStateProvince"
label="Popularity"/>
</mapThemeDataMap>
</mapTheme>
例26-17に、アメリカ合衆国のマップ上の各州における商品の人気を表すカラー・テーマに対してJSFページで生成されるXMLコードを示します。
マップ・カラー・テーマのデータ・バインディング時には、データ・バケットに対する最小値の色および最大値の色のみを指定できます。最小値から最大値までのバケットの色は、マップがアルゴリズムを使用して決定します。しかし、データ・バインディングを完了すると、各データ・バケットに使用する正確な色を指定できるようになります。
オブジェクト・インスペクタで、dvt:mapColorThemeタグのcolorList属性を使用して各バケットの色を指定できます。色の配列をこの属性にバインドするか、セミコロンのセパレータを使用して色の文字列を指定できます。
たとえば、この属性の値を#ff0000;#00ff00;#0000ffに設定した場合、最初のバケットは赤、2番目のバケットは緑、3番目のバケットは青となります。
地図の作成時は、任意の順序でのテーマ(点、カラーおよびグラフ)の作成を選択できます。ただし、ADF地図コンポーネント上で一度に表示できるグラフ・テーマ(円または棒)は1つのみです。
次の手順では、地理マップがすでに構成されていることを前提にしています。したがって、マップ・コンポーネントから、地図を構成するためのダイアログは表示されません。そのかわり、円グラフを作成するためのダイアログのみ表示されます。
データバインドされた円グラフ・テーマを地図に追加するには:
「データ・コントロール」パネルから、コレクションを選択します。
図26-37に、PopularCategories1を選択し、ある州で人気のある製品カテゴリを表すために、既存の地図マップ・コンポーネントに円棒テーマを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「作成」→「円グラフ・テーマ」を選択します。
次に表示される「円グラフ・テーマ・バインディングの作成」ダイアログで、操作する新しいテーマとベース・マップのテーマの要素を次の手順で識別します。
「テーマID」で、作成する円グラフ・テーマの一意のIDを入力します。
ベース・マップ・テーマ・セクションで、ベース・マップの名前と、円グラフを配置する地域を選択します。
「外観」セクションで、「データ」の下で次のようにします。
「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。
必要に応じて、適切な位置の列を識別できるように、「サンプル・テーマ・データの表示」をクリックして実際のデータの最初の数行を確認します。
「ロケーション・ラベル」では、データ・コレクション内の位置のラベルを含むデータ・コレクション内の列を選択します。
「シリーズ属性」のグリッドで、作成中の円グラフで表す値を含む各属性を入力します。
各シリーズ属性の横に、シリーズ属性のデータ値のラベルとして使用するテキストを入力します。
「行選択の有効化」は、関連するコンポーネントで行を選択可能にする場合にのみ選択します。このコンポーネントは、作成中の地図に関連するデータ・コレクションにリンクされているコンポーネントがページに含まれる場合に使用します。
「OK」をクリックします。
図26-38に、商品の人気を州別の円グラフ・テーマで示す「円グラフ・マップ・テーマの作成」ダイアログの入力が完了した状態を示します。
円グラフ・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。
円グラフ・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
マップXML内で必要な円グラフ・テーマのコードをJSFページに追加します。
例26-18に、地理マップの円グラフ・テーマに生成された行セット・バインディングを示します。
例26-18 円グラフ・テーマのバインディングXML
<mapTheme IterBinding="PopularCategoriesByState1Iterator"
id="PopularCategoriesByState1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<mapThemeDataMap mapThemeType="pieChart">
<item type="location" value="StateProvince" label="StateProvince"/>
<item type="data" value="AudioVideo" label="Audio Video"/>
<item type="data" value="CellPhones" label="Cell Phones"/>
<item type="data" value="Games" label="Games"/>
</mapThemeDataMap>
</mapTheme>
ガント・チャートは、棒グラフの1種です(横軸が時間を表します)。このグラフは、プロジェクトの計画および追跡において、開始と終了が明確な時間枠内でタスクまたはリソースを示すために使用されます。
ガント・チャートを作成する場合は、次のタイプから選択できます。
プロジェクト
プロジェクト・ガント・チャートは、タスクを垂直に示し、各タスクの期間を水平な時間軸上に棒として示します。
リソースの使用率
リソース使用率ガント・チャートは、リソースの割当てが超過なのか未満なのかを図示します。リソースを垂直に示し、その割当てと容量(オプション)を水平な時間軸上に示します。
スケジューリング
このガント・チャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例としては、要員、マシン、部屋などがあります。
データバインディングの完了後にガント・チャートをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFガント・チャート・コンポーネントの使用」を参照してください。
プロジェクト・ガント・チャートでは、タスクの値を指定する必要があります。オプションで、分割タスク、サブタスク、再帰タスクおよびタスク間の依存性の値も指定できます(データ・コレクションにこの追加情報に対するアクセッサがある場合)。
プロジェクト・ガント・チャートは、全体的な開始時間および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。プロジェクト・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図26-39は、各タスクが入力される1つの注文となっているプロジェクト・ガント・チャートを示しています。分割線の左側のリスト・リージョンには、注文の担当者の名前が入力された列と、注文日および出荷日が入力された列が示されています。分割線の右側のグラフ・リージョンでは、各注文の注文日から出荷日までの水平な棒がガント・チャートで表示されています。
データ・コントロールを使用してプロジェクト・ガント・チャートを作成するには、プロジェクト・ガント・チャート・コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
|
ヒント: プロジェクト・ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「プロジェクト・ガントの作成」ダイアログの入力を完了することでも、プロジェクト・ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。 |
データバインドされたプロジェクト・ガント・チャートを作成するには:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクション(タスクのフラット・リストを生成)または基本的なツリー・コレクション(タスクの階層リストを生成)を選択できます。
図26-40に、「データ・コントロール」パネルでOrderShippingSummary1コレクションを選択し、注文の出荷の進行状況を表示するプロジェクト・ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「プロジェクト」を選択します。
次に表示される「プロジェクト・ガントの作成」ダイアログで、次のようにして、ダイアログの上部にあるページ内のタスク関連のコントロールを、データ・コレクション内の対応する列にリンクします。
ダイアログの上部にある「タスク」ページでは、「タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択します。ダイアログで「詳細の表示」をクリックして、データ・コレクションでコントロール「実際の開始」、「実際の終了」、「%完了」、「完了」、「クリティカル」、「コンテナ」に対応する列を追加で選択できます。
オプションで、タスク・タイプにマップするデータ・コレクション内の列を選択できます。タスク・タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトで標準になります。タスク・タイプは、ガント・チャートにレンダリングされる際のタスクの棒の外観を制御します。
プロジェクト・ガント・チャート・コンポーネントでは、サマリー、標準およびマイルストンのタスク・タイプがサポートされます。データ・コレクションは、これらのタスク・タイプを戻すように構成します。
データ・コレクションにサブタスクのアクセッサがある場合は、ダイアログの「サブタスク」ページを使用してサブタスク・アクセッサを選択し、「サブタスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。オプションで、サブタスク・タイプにマップするデータ・コレクション内の列を選択できます。サブタスク・タイプをデータにバインドしない場合、すべてのサブタスクはデフォルトで標準になります。
プロジェクト・ガント・チャート・コンポーネントでは、サマリー、標準およびマイルストンのタスク・タイプがサポートされます。データ・コレクションは、これらのタスク・タイプを戻すように構成します。
サブタスクをバインドしないと、ガント・チャートはタスクの階層ビューをレンダリングできません。サブタスクをバインドすると、ガント・チャートの階層ビューでタスクからサブタスクにドリルダウンできます。
データ・コレクションに依存タスクのアクセッサがある場合は、ダイアログの「依存タスク」ページを使用して依存タスク・アクセッサを選択し、「依存性のタイプ」、「元タスクID」、「先タスクID」の各コントロールに対応するデータ・コレクション内の列を選択できます。
依存タスクは、終了時間と開始時間の間の依存性によってリンクされます。
プロジェクト・ガント・チャート・コンポーネントでは、fs(終了から開始へ)、ss(開始から開始へ)、ff(終了から終了へ)およびsf(開始から終了へ)の依存性タイプがサポートされます。データ・コレクションは、これらの依存性タイプを戻すように構成します。
データ・コレクションに分割タスクのアクセッサがある場合は、ダイアログの「分割タスク」ページを使用して分割タスク・アクセッサを選択し、「分割タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションに再帰タスクのアクセッサがある場合は、ダイアログの「再帰タスク」ページを使用して再帰タスク・アクセッサを選択し、「再帰タスクID」、「タイプ」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
このダイアログの「外観」ページを使用して、タスク・バーの「ラベル」に対応する属性と、タスク・バーに関連付けるアイコンを3個まで指定します。
「表の列」セクションでは、ガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。
|
注意: 「表の列」セクションで指定する最初の行により、リスト・リージョンのノード・スタンプ列が指定されます。ノード・スタンプ列は、サブタスク・コレクションがある場合に開閉できる列です。 |
各行について、次のアイテムを指定します。
ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。
「OK」をクリックします。
ガント・チャートに凡例を含めるには、構造ウィンドウでproject Gantt chartノードを右クリックし、「dvt:projectGanttの内部に挿入」→「凡例」を選択します。
凡例には、それぞれの記号に関する情報と、各タスク・タイプを表すカラー・コード化された棒が示されます。また、ガント・チャートで選択されているタスクに関する詳細情報も示されます。
図26-41に、注文の出荷のデータ・コレクションからプロジェクト・ガント・ダイアログを作成する際に使用されるダイアログを示します。
データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してプロジェクト・ガント・チャートの追加属性の値を指定できます。
プロジェクト・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例26-20に、出荷された注文を表示するプロジェクト・ガント・チャートに生成された行セット・バインディングを示します。このコード例では、タスクおよびサブタスクについて、属性とともに定義されたノードがあることを示しています。また、依存タスク、分割タスクおよび再帰タスクについて、属性なしで定義されたノードがあります。
例26-20 プロジェクト・ガント・チャートのバインディング
<gantt IterBinding="OrderShippingSummary2Iterator"
id="OrderShippingSummary2" xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary"
type="Tasks">
<AttrNames>
<Item Value="PersonId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="TaskType" type="taskType"/>
<Item Value="ShippedDate" type="endTime"/>
</AttrNames>
<Accessors>
<Item Value="OrderShippingDetails" type="subTasks"/>
</Accessors>
</nodeDefinition>
<nodeDefinition type="SubTasks"
DefName="oracle.fod.model.OrderShippingDetails">
<AttrNames>
<Item Value="OrderId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="TaskType" type="subTaskType"/>
<Item Value="ShippedDate" type="endTime"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="Dependents">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="SplitTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="RecurringTasks">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
例26-21に、ADFプロジェクト・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、プロジェクト・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主軸(週)および副軸(日)に対するデフォルトの時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、OrderStatusCodeおよびShippedDateのaf:column要素のコードは省略されています。
例26-21 プロジェクト・ガント・チャートのJSFページのコード
<projectGantt id="projectGantt1"
value="#{bindings.OrderShippingSummary2.projectGanttModel}"
var="row" startTime="2008-05-17" endTime="2008-07-07"
inlineStyle="width:100%; height:100%;">
<f:facet name="major">
<timeAxis scale="weeks"/>
</f:facet>
<f:facet name="minor">
<timeAxis scale="days"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column sortProperty="FirstName" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.FirstName.label}">
<af:outputText value="#{row.FirstName}"/>
</af:column>
</f:facet>
<af:column sortProperty="LastName" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.LastName.label}">
<af:outputText value="#{row.LastName}"/>
</af:column>
<af:column sortProperty="OrderDate" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.OrderDate.label}">
<af:outputText value="#{row.OrderDate}">
<af:convertDateTime
pattern="#{bindings.OrderShippingSummary2.hints.OrderDate.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="ShippedDate" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.ShippedDate.label}">
<af:outputText value="#{row.ShippedDate}">
<af:convertDateTime
pattern="#{bindings.OrderShippingSummary2.hints.ShippedDate.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="TaskType" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.TaskType.label}">
<af:outputText value="#{row.TaskType}"/>
</af:column>
</projectGantt>
サマリー・タスクは、タスクのグループ(通常はサブタスク)に対する開始時間と終了時間を示します。サマリー・タスクの移動や拡張はできません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。
タスク期間の変更を検出するには、メソッド・バインディング式をガント・チャート・コンポーネントのDataChangeListener属性に指定してイベント・ハンドラを登録します。ガント・チャートのデータを変更する可能性のある処理が発生すると、タイプがoracle.adf.view.faces.bi.event.DataChangeEventのイベントが起動されます。このイベントには、データ変更に関する情報が含まれ、登録済のイベント・リスナーに対して起動されます。このリスナーにより、新しい値の検証および基礎となるデータ・モデルの更新が行われます。
更新が完了すると、ガント・チャートは古いデータ(更新が失敗した場合)または新しいデータでリフレッシュされます。ガント・チャートでは部分ページ・レンダリングを使用するため、ガント・チャートのみがリフレッシュされ、ページ全体はリフレッシュされません。
パーセント完了は、タスクの完了率を示す内部の棒として表すことができます。内部の棒の長さは、データ・オブジェクトによって返されるパーセント完了に基づいて計算されます。
プロジェクト・ガント・チャートのデータ・バインディング・ダイアログには、パーセント完了値を入力できるコントロールはありませんが、パーセント完了のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはpercentComplete属性が含まれています。
パーセント完了の整数を指定するには、タイプがTasksであるnodeDefinitionに新しい属性マッピングを追加する必要があります。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="percentComplete"/>のようになります。
例26-22に、例26-20で示したプロジェクト・ガント・チャート・バインディングのうち、タイプがTasksのnodeDefinitionのデータ・バインディング・コードに追加されたパーセント完了の属性マッピングを示します。
例26-22 パーセント完了を使用したプロジェクト・ガント・チャートのバインディング
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary"
type="Tasks">
<AttrNames>
<Item Value="PersonId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="TaskType" type="taskType"/>
<Item Value="ShippedDate" type="endTime"/>
<Item Value="PercentDone" type="percentComplete"/>
</AttrNames>
パーセントではなく日付を指定できるようにする別の属性(completedThrough)があります。ガント・チャート・データ・オブジェクトは、completedThrough属性が参照する日付に基づいてパーセント完了を計算します。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="completedThrough"/>のようになります。
分散は、2つの水平な棒でレンダリングされます。一方の棒は、タスクの基本の(元の)開始および終了時間を表します。他方の棒は、タスクの実際の開始および終了時間を表します。プロジェクト・ガント・チャートのデータ・バインディング・ダイアログで、基本の開始時間と終了時間に対するバインディング情報を入力します。
ガント・チャートのデータ・バインディング・ダイアログには、ガント・チャートの実際の開始時間と終了時間を入力できるコントロールはありませんが、分散のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはactualStartおよびactualEnd属性が含まれています。
実際の開始および終了時間を指定するには、2つの新しい属性マッピングをタイプがTasksのnodeDefinitionに追加する必要があります。たとえば、データ・コレクションにActualStartDateおよびActualEndDateという名前の列がある場合、属性マッピングは例26-23のようになります。
例26-23 実際の開始および終了の属性マッピング
<Item Value="ActualStartDate" type="actualStart"/> <Item Value="ActualEndDate" type="actualEnd"/>
例26-24に、プロジェクト・ガント・チャートのタイプがTasksのnodeDefinitionのデータ・バインディング・コードに追加された実際の開始および終了の属性マッピングを示します。
例26-24 実際の開始および終了を使用したプロジェクト・ガント・チャートのバインディング
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary"
type="Tasks">
<AttrNames>
<Item Value="PersonId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="TaskType" type="taskType"/>
<Item Value="ShippedDate" type="endTime"/>
<Item Value="ActualStartDate" type="actualStart"/>
<Item Value="ActualEndDate" type="actualEnd"/>
</AttrNames>
リソース使用率ガント・チャートでは、リソースのID、時間のID、リソース使用率の開始および終了時間を指定する必要があります。オプションで、サブリソースのデータ値を指定できます。
リソース使用率ガント・チャートは、主および副時間軸の値に対するデフォルト値を使用して表示されます。リソース使用率ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図26-42は、各リソースと、リソースの使用中に表示できる関連付けられたカレンダを示すリソース使用率ガント・チャートを示しています。
データ・コントロールを使用してリソース使用率ガント・チャートを作成するには、リソース使用率コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグしてJSFページにドロップし、宣言的にこの処理を実行できます。
|
ヒント: リソース使用率ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「リソース使用率ガントの作成」ダイアログの入力を完了することでも、リソース使用率ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。 |
リソース使用率ガント・チャートを作成するには:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。
図26-43に、「データ・コントロール」パネルでGanttRugResourcesView1コレクションを選択し、リソースの使用率を表示するリソース使用率ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「リソース使用率」を選択します。
「リソース使用率ガントの作成」ダイアログで、リソースおよび時間関連のコントロールを、データ・コレクション内の対応する列にリンクします。
「リソースID」では、リソースの一意のIDに対応するデータ・コレクション内の列を選択します。
「時間バケット」ページでは、リソースに割り当てられた時間バケットを含む「バケット・アクセッサ」ドロップダウン・リストから値を選択し、時間の単位に対応する「バケット日」ドロップダウン・リストから値を選択します。
「バケット・メトリック」リストでは、必要に応じて、時間バケット内のバーとして表示される属性を指定することができます。「バケット・メトリック」リストで指定した属性はバーの高さの計算に使用されるため、個々の属性は数値タイプでなければなりません。
「表の列」リストでは、分割線の左側のリソース使用率ガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。リソース使用率リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行に、ラベルの表示、値バインディングおよび使用するコンポーネントの値を指定します。
データ・コレクションにサブリソースのアクセッサがある場合は、「サブリソース」ページを使用してサブリソース・アクセッサおよびリソースIDを選択できます。
「OK」をクリックします。
図26-44に、プロジェクトで使用可能なリソースのデータ・コレクションからリソース使用率ガント・チャートを作成するために使用するダイアログを示します。
リソース使用率ガント・チャートを「データ・コントロール」パネルからJSFページにドロップすると、次の処理が行われます。
リソース使用率ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例26-25に、図26-44に示すリソース使用率ガント・チャートに生成された行セット・バインディングを示します。
例26-25 リソース使用率ガント・チャートのバインディングXML
<gantt IterBinding="GanttRugResourcesView2Iterator"
id="GanttRugResourcesView2"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="model.GanttRugResourcesView" type="Resources">
<AttrNames>
<Item Value="ResourceId" type="resourceId"/>
</AttrNames>
<Accessors>
<Item Value="GanttRugTimebucketsView2" type="timeBuckets"/>
</Accessors>
</nodeDefinition>
<nodeDefinition type="TimeBuckets"
DefName="model.GanttRugTimebucketsView">
<AttrNames>
<Item Value="TimeDaily" type="time"/>
<Item type="metric" Value="Available"/>
<Item type="metric" Value="Setup"/>
<Item type="metric" Value="Used"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="Subresources">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
例26-26に、リソース使用率ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、リソース使用率ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。これらの設定は手動で編集する必要があります。また、主時間軸(週)および副時間軸(日)に対する時間軸の設定も示されています。さらに、リソース使用率ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。
例26-26 リソース使用率ガント・チャートのJSFページのコード
<dvt:resourceUtilizationGantt id="resourceUtilizationGantt1"
value="#{bindings.GanttRugResourcesView2.resourceUtilizationGanttModel}"
var="row"
metrics="#{bindings.GanttRugResourcesView2.metrics}"
taskbarFormatManager="#{bindings.GanttRugResourcesView2.resourceUtilizationGanttTaskbarFormatManager}"
startTime="2008-07-03"
endTime="2008-07-29">
<f:facet name="major">
<dvt:timeAxis scale="weeks"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="days"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column sortProperty="ResourceId" sortable="false"
headerText="#{bindings.GanttRugResourcesView2.hints.ResourceId.label}">
<af:outputText value="#{row.ResourceId}"/>
</af:column>
</f:facet>
<af:column sortProperty="ResourceName" sortable="false"
headerText="#{bindings.GanttRugResourcesView2.hints.ResourceName.label}">
<af:outputText value="#{row.ResourceName}"/>
</af:column>
<af:column sortProperty="ServiceRegion" sortable="false"
headerText="#{bindings.GanttRugResourcesView2.hints.ServiceRegion.label}">
<af:outputText value="#{row.ServiceRegion}"/>
</af:column>
</dvt:resourceUtilizationGantt>
スケジュール・ガント・チャートでは、リソースのID、タスクのID、タスクの開始および終了時間を指定する必要があります。オプションで、サブリソース、再帰タスク、分割タスクおよびタスク間の依存性のデータ値を指定できます。
スケジュール・ガント・チャートは、全体的な開始および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。スケジュール・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図26-45は、各リソースと、そのリソースが担当するすべての注文をリストするスケジュール・ガント・チャートを示しています。プロジェクト・ガント・チャートでは各タスクが個別の線上にリストされますが、スケジュール・ガント・チャートでは特定のリソースのすべてのタスクが同じ線上に表示されます。
データ・コントロールを使用してスケジュール・ガント・チャートを作成するには、schedulingGanttタグをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
データバインドされたスケジュール・ガント・チャートを作成するには:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。
図26-46に、Personsデータ・コレクションを選択し、各リソースが担当する注文を表示するスケジュール・ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「スケジュール」を選択します。
次に表示される「スケジュール・ガントの作成」ダイアログで、次のようにして、ダイアログの上部にあるリソースおよびタスク関連のコントロールを、データ・コレクション内の対応する列にリンクします。
「リソースID」では、リソースの一意のIDに対応するデータ・コレクション内の列を選択します。
「タスク」ページでは、リソースに割り当てられたタスクを含む「タスク・アクセッサ」ドロップダウン・リストから値を選択します。「タスクID」、「開始時間」および「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択します。オプションで、タスク・タイプにマップするデータ列を指定できます。タスク・タイプをデータにバインドしない場合、すべてのタスク・タイプはデフォルトで標準になります。
データ・コレクションに依存タスクを保持するアクセッサがある場合は、ダイアログの「依存タスク」ページを使用して依存タスク・アクセッサを選択し、「依存性のタイプ」、「元タスクID」、「先タスクID」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションに分割タスクのアクセッサがある場合は、ダイアログの「分割タスク」ページを使用して分割タスク・アクセッサを選択し、「分割タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションに再帰タスクのアクセッサがある場合は、ダイアログの「再帰タスク」ページを使用して再帰タスク・アクセッサを選択し、「再帰タスクID」、「タイプ」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションにサブリソース(下位レベルのリソース)のアクセッサがある場合は、「サブリソース」ページを使用して適切なアクセッサを指定し、サブリソースの一意のIDを含むデータ列を選択できます。
たとえば、管理者がリソースで、管理者の直属の部下がサブリソースになる場合があります。データにサブリソースが含まれる場合は、リソースを開いてサブリソースを検索することができます。
「表の列」セクションでは、分割線の左側のガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行について、次のアイテムを指定します。
ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、「ADF出力テキスト」コンポーネントです。
「OK」をクリックして、「スケジュール・ガントの作成」ダイアログを閉じます。
JSFページの構造ウィンドウでdvt:schedulingGantt要素を選択し、プロパティ・インスペクタでdvt:schedulingGantt要素の次の属性に対して日付を設定します。
StartTime
EndTime
指定した日付により、実行時にスケジュール・ガント・チャートに表示される初期ビューが決定されます。
図26-47に、注文の出荷を担当するリソースのデータ・コレクションからスケジュール・ガント・チャートを作成する際に使用されるダイアログを示します。
スケジュール・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例26-27に、リソースおよび出荷された注文を表示するスケジュール・ガント・チャートに生成された行セット・バインディングを示します。
例26-27 スケジュール・ガント・チャートのバインディングXML
<gantt IterBinding="PersonsIterator" id="Persons"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="oracle.fodemo.storefront.store.queries.PersonsVO"
type="Resources">
<AttrNames>
<Item Value="PersonId" type="resourceId"/>
</AttrNames>
<Accessors>
<Item Value="OrdersVO" type="tasks"/>
</Accessors>
</nodeDefinition>
<nodeDefinition type="Tasks"
DefName="oracle.fodemo.storefront.store.queries.OrdersVO">
<AttrNames>
<Item Value="OrderId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="OrderStatusCode" type="taskType"/>
<Item Value="OrderShippedDate" type="endTime"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="Dependents">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="SplitTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="RecurringTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="Subresources">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
例26-28に、スケジュール・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、スケジュール・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主時間軸(月)および副時間軸(週)に対する時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、MembershipId、EmailおよびPhoneNumberのaf:column要素のコードは省略されています。
例26-28 スケジュール・ガント・チャートのJSFページのコード
<dvt:schedulingGantt id="schedulingGantt1"
value="#{bindings.Persons.schedulingGanttModel}"
var="row" startTime="2008-03-29"
endTime="2008-05-30"
taskbarFormatManager="#{GanttBean.taskbarFormatManager}">
<f:facet name="major">
<dvt:timeAxis scale="months"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="weeks"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column sortProperty="FirstName" sortable="false"
headerText="#{bindings.Persons.hints.FirstName.label}">
<af:outputText value="#{row.FirstName}"/>
</af:column>
</f:facet>
<af:column sortProperty="LastName" sortable="false"
headerText="#{bindings.Persons.hints.LastName.label}">
<af:outputText value="#{row.LastName}"/>
</af:column>
...
<dvt:ganttLegend>
</dvt:schedulingGantt>
時系列は、ユーザーが日付ベースのイベントを時間順に表示し、定義された時間範囲内を簡単に前後に移動することを可能にする対話型のデータ視覚化ツールです。二重時系列を使用して、イベントの対照比較を行うことができます。たとえば、時系列を使用して従業員の入社日を表示したり、二重時系列を使用して2人の従業員の複数の人事管理イベントを比較したりすることができます。
時系列は、時間軸に沿った時系列項目としての各イベントの表示、時系列内に表示可能な期間に対応した移動可能な概要ウィンドウ、および時系列に対する合計時間増分を表示する概要時間軸から構成されます。水平ズーム制御を使用して、表示可能な時間範囲を変更できます。イベントに対応する時系列項目には、関連付けられた情報またはアクションが表示され、時系列内のイベントの日付に接続されています。時系列項目は、概要パネル内のマーカーにより表されます。時系列コンポーネントでは、3つ以上のイベント系列はサポートされていません。
図26-48に、Summit DVTの例で従業員の入社日を時間順に表示した時系列を示します。この例では、各イベントを表す時系列項目は、イメージとラベル付きのテキストを使用して従業員に関する情報を表示しています。選択を行うと、時系列項目、ライン・フィーラーおよび概要パネル内のイベント・マーカーがハイライト表示されます。
図26-49に、2人の従業員の複数の人事管理イベントを比較する二重時系列を示します。時間軸は2つのイベント系列の間に配置され、概要パネルは時系列の一番下に表示されています。
時系列項目の内容、マーカーの表示および時間軸は構成可能です。時系列のユースケース、エンド・ユーザーとプレゼンテーション機能、タグ構造および時系列への特殊機能の追加に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「時系列コンポーネントの使用方法」を参照してください。
時系列に表示されるデータは、データ・コレクションに基づいています。timelineコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModelに自動的に変換されます。
時系列イベントに関する情報をデータ・コレクションのデータ行に関連付けるには、スタンプを使用します。スタンプを使用すれば、データ・モデル内の各データ行をイベントに対して表示できます。スタンプを使用する場合、時系列のすべての項目に対して子コンポーネントが作成されるわけではありません。むしろ、コンポーネントのコンテンツは、データ属性ごとに1回、繰り返しレンダリング(スタンプ)されます。
Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ(または2つ)のイベント系列を生成するデータ・コレクションをドラッグして、JSFページにドロップします。
作業を始める前に、次のようにします。
時系列について理解しておくと役立ちます。詳細は、26.7項「データバインドされた時系列の作成」を参照してください。
次のタスクを完了する必要があります。
9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。
「データ・コントロール」パネルを使用して時系列を作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
図26-50に、図26-48の時系列に対するデータ・コレクションを示します。この例では、Summit DVTアプリケーションはSEmpView1データ・コレクションを使用して時系列を作成します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「時系列」を選択します。
時系列の作成ウィザードの「時系列の系列データの構成」ページで次の値を設定することにより、1つ以上(二重時系列の場合は2つ)の時系列に対する時系列データ・モデルを構成します。
系列値: ドロップダウン・リストを使用して、時系列で使用するデータ・コレクションを選択します。デフォルトでは、「データ・コントロール」パネルから挿入したデータ・コレクションが表示されます。該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのデータ・コレクションのリストが、選択用に自動的に表示されます。
アイテム・データ値: ドロップダウン・リストを使用して、時系列内にスタンプされる時系列項目に対して使用する日付ベースの属性を選択します。「系列値」で参照されるデータ・コレクション内の該当するすべての属性が選択用に自動的に表示されます。
グループ: オプションで、ドロップダウン・リストを使用して、項目日付値が同一の場合に時系列項目をグループ化するために使用する属性を選択します。すべてのデータ・コレクション属性が選択用に自動的に表示されます。
「式ビルダー」を選択してEL式を作成することにより、実行時に属性のグループ化を指定することもできます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
データ・モデルとして構成した時系列の系列ごとに、系列を選択し、時系列項目の表示属性に対して次の値を設定します。
イメージ: オプションで、時系列項目にスタンプするイメージ・ファイルへの相対パスを入力するか、「検索」アイコンを使用して「イメージ・ファイルの選択」ダイアログを開き、イメージ・ソースに移動します。
「式ビルダー」を選択して、実行時に評価されてイメージ・ファイルの場所を特定するEL式を構成することもできます。
|
注意: 時系列項目内のイメージのサイズを変更する必要がある場合は、ソース・コードで、または「プロパティ」ウィンドウで宣言的に、 |
コンポーネント: ドロップダウン・リストから、時系列項目内に属性テキストを表示するために使用するADF Facesコンポーネントを選択します。書式設定されていないテキストを表示するoutputTextまたはテキストを表示して限られた範囲の書式設定オプションを設定できるoutputFormattedを選択できます。「ラベル」値を使用して、いずれかの出力テキスト・オプションにラベルを関連付けることも選択できます。
値: ドロップダウン・リストから、時系列項目内に表示する属性値を選択します。選択した時系列の系列に対するデータ・コレクション内のすべての属性が自動的に表示されます。
ラベル: 表示属性に対する「コンポーネント」値でラベル付きのADF Facesコンポーネントを指定した場合は、このオプションを使用できます。デフォルトの「属性名の使用」テキストを使用するか、リソース・バンドルからのテキスト・リソースを指定するか、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。ラベルは、実行時に時系列項目に表示されます。
たとえば、図26-48のSummit DVTの例に対する時系列の系列と表示属性を指定するには、図26-51に示すように、時系列の作成ウィザードの「時系列の系列データの構成」ページを構成します。
「次へ」をクリックしてウィザードの次のページに進むか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。
時系列の作成ウィザードの「イベント・マーカーの構成」ページで、データ・モデルとして構成した時系列の系列ごとに、系列を選択し、イベント・マーカーに対する次のオプションの値を設定します。
「色」: イベント・マーカーの塗りつぶし色を指定します。ドロップダウン・リストを使用して使用可能な色を選択するか、アイコンをクリックしてカラー・ピッカー・ダイアログを表示できます。デフォルトでは、どの色も指定されません。
不透明度: マーカーの塗りつぶし色の不透明度を指定します。有効値の範囲は、0パーセント(透明)から100パーセント(不透明)です。
標準図形: 選択した各時系列の系列値に対する概要マーカーの形状を指定します。ドロップダウン・リストから、7つの事前作成図形の内の1つを選択して、概要マーカーの形状を指定します。有効な値は、circle(デフォルト)、diamond、human、plus、square、triangleDownおよびtriangleUpです。
スケールX/スケールY: 概要マーカーをデフォルト・サイズから変更するための水平(scaleX)および垂直(scaleY)スケール係数を入力します。有効値は、0から100パーセントまでの数値パーセンテージです。マーカーが大きすぎる場合は、時系列の概要エリアに収まるようにマーカーのサイズが自動的に変更されます。
たとえば、図26-48のSummit DVTの例に対する時系列の概要系列マーカーを指定するには、図26-52に示すように、時系列の作成ウィザードの「イベント・マーカーの構成」ページを構成します。
「戻る」をクリックしてウィザードの前のページに戻るか、「次へ」をクリックしてウィザードの次のページに進むか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。
時系列の作成ウィザードの「時間範囲とタイム・スケールの構成」ページで次の値を設定することにより、時間軸と概要軸を構成します。
開始時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する開始日を入力します。時系列に表示したいデータ・コレクションのイベントが含まれるような開始日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値は現在の日付です。
終了時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する終了日を入力します。時系列に表示したいデータ・コレクションのイベントが含まれるような終了日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値は現在の日付です。
軸スケール: ドロップダウン・リストを使用して、時系列の時間軸で使用するタイム・スケールを選択します。時間軸は、時系列に対する現在の時間増分を示します。
「概要スケール」よりも小さなタイム・スケールを使用する必要があります。たとえば、概要スケールがmonthsに設定されている場合に、軸スケールをyearsに設定することはできません。カスタム軸スケールを指定することもできます。
有効値は、twoyears、years、halfyears、quarters(デフォルト)、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。カスタム軸スケールを指定することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の時系列の表示要素のカスタマイズに関する項を参照してください。
概要スケール: ドロップダウン・リストを使用して、時系列の概要軸で使用するタイム・スケールを選択します。概要軸は、時系列に含まれる合計時間増分を示します。
有効値は、twoyears、years(デフォルト)、halfyears、quarters、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。カスタム軸スケールを指定することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の時系列の表示要素のカスタマイズに関する項を参照してください。
たとえば、図26-48のSummit DVTの例に対する時系列の軸と概要時間範囲を指定するには、図26-53に示すように、時系列の作成ウィザードの「時間範囲とタイム・スケールの構成」ページを構成します。
「戻る」をクリックしてウィザードの前のページに戻るか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。
ADFデータ・コントロールを使用して時系列を作成すると、JDeveloperにより、次が実行されます。
時系列に対するバインディングがJSFページのページ定義ファイルに定義されます。
DVT時系列コンポーネント用のコードがJSFページに挿入されます。
例26-29に、図26-48のSummit DVTの例の時系列に対するJSFページのページ定義ファイルで定義されているバインディングを示します。
例26-29 ページ定義ファイルのXMLバインディング
<bindings>
<tree IterBinding="SEmpView1Iterator" id="SEmpView1" ChangeEventPolicy="ppr">
<nodeDefinition DefName="model.SEmpView" Name="SEmpView1">
<AttrNames>
<Item Value="DeptId"/>
<Item Value="FirstName"/>
<Item Value="Id"/>
<Item Value="LastName"/>
<Item Value="StartDate"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
例26-30に、図26-48に例示された時系列の場合の、JSFページに挿入されるコードを示します。
例26-30 時系列コンポーネントのサンプル・コード
<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2012-12-31"
itemSelection="multiple">
<dvt:timelineSeries id="ts1" var="evt"
value="#{bindings.SEmpView1.collectionModel}">
<dvt:timelineItem value="#{evt.StartDate}" id="ti1" group="#{evt.DeptId}">
<af:panelGroupLayout id="pg1" layout="horizontal">
<af:image id="img1" source="images/#{evt.Id}.png"
inlineStyle="width:85px;height:100px;"/>
<af:spacer width="3" id="s1"/>
<af:panelGroupLayout id="pg2" layout="vertical">
<af:panelLabelAndMessage id="plam1"
label="#{viewcontrollerBundle.EMPLOYEE_ID}">
<af:outputText id="ot1" value="#{evt.Id}" noWrap="true">
<af:convertNumber groupingUsed="false" pattern=
"#{bindings.SEmpView1.hints.Id.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage id="plam2"
label="#{viewcontrollerBundle.FIRST_NAME}">
<af:outputText id="ot2" value="#{evt.FirstName}" noWrap="true"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage id="plam3"
label="#{viewcontrollerBundle.LAST_NAME}">
<af:outputText id="ot3" value="#{evt.LastName}" noWrap="true"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage id="plam4"
label="#{viewcontrollerBundle.DEPARTMENT_ID}">
<af:outputText id="ot4" value="#{evt.DeptId}" noWrap="true">
<af:convertNumber groupingUsed="false" pattern=
"#{bindings.SEmpView1.hints.DeptId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelGroupLayout>
</af:panelGroupLayout>
<f:facet name="overviewItem">
<dvt:marker id="m1" fillColor="#ff0000"/>
</f:facet>
</dvt:timelineItem>
</dvt:timelineSeries>
<dvt:timeAxis id="ta1" scale="months"/>
<dvt:timelineOverview id="ov1">
<dvt:timeAxis id="ta2" scale="halfyears"/>
</dvt:timelineOverview>
</dvt:timeline>
「データ・コントロール」パネルを使用して二重時系列を作成する際には、2つの時系列の系列に対して同じまたは異なるデータ・コレクションを構成できます。またそれぞれに対して、時系列項目の表示属性および概要マーカーを指定できます。時系列の作成ウィザードに、該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのデータ・コレクションのリストが、選択用に自動的に表示されます。
例26-31に、図26-49の二重時系列に対するサンプル・コードを示します。
例26-31 二重時系列のサンプル・コード
<dvt:timeline id="tl1" startTime="2000-01-01" endTime="2011-12-31"
inlineStyle="width:1024px;height:500px" itemSelection="single"
currentTime="2010-04-01">
<dvt:timelineSeries id="ts1" var="evt" value="#{timeline.firstModel}"
contentDelivery="lazy">
<dvt:timelineItem id="ti1" value="#{evt.date}" group="#{evt.group}">
<af:panelGroupLayout id="pg1" layout="horizontal">
<af:image id="img1" inlineStyle="width:30px;height:30px"
source="/resources/images/timeline/#{evt.type}.png"/>
<af:spacer width="3"/>
<af:panelGroupLayout id="pg2" layout="vertical">
<af:outputText id="ot1" inlineStyle="color:#084B8A"
value="#{evt.description}" noWrap="true"/>
<af:outputText id="ot2" value="#{evt.date}"
inlineStyle="color:#6e6e6e" noWrap="true">
<af:convertDateTime dateStyle="medium"/>
</af:outputText>
</af:panelGroupLayout>
</af:panelGroupLayout>
<f:facet name="overviewItem">
<dvt:marker id="m1" shape="circle" fillColor="#ff0000"/>
</f:facet>
</dvt:timelineItem>
</dvt:timelineSeries>
<dvt:timelineSeries id="ts2" var="evt" value="#{timeline.secondModel}"
contentDelivery="lazy">
<dvt:timelineItem id="ti2" value="#{evt.date}">
<af:panelGroupLayout id="pg2" layout="horizontal">
<af:image id="img2" inlineStyle="width:30px;height:30px"
source="/resources/images/timeline/#{evt.type}.png"/>
<af:spacer width="3"/>
<af:panelGroupLayout id="pg3" layout="vertical">
<af:outputText id="ot3" inlineStyle="color:#084B8A"
value="#{evt.description}" noWrap="true"/>
<af:outputText id="ot4" value="#{evt.date}"
inlineStyle="color:#6e6e6e" noWrap="true">
<af:convertDateTime dateStyle="medium"/>
</af:outputText>
</af:panelGroupLayout>
</af:panelGroupLayout>
<f:facet name="overviewItem">
<dvt:marker id="m2" shape="circle" fillColor="#0000ff"/>
</f:facet>
</dvt:timelineItem>
</dvt:timelineSeries>
<dvt:timeAxis id="ta1" scale="quarters"/>
<dvt:timelineOverview id="ov1">
<dvt:timeAxis id="ta2" scale="years"/>
</dvt:timelineOverview>
</dvt:timeline>
コンポーネントのデータ要件、タグ構造および外観と動作のカスタマイズ・オプションに関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「時系列コンポーネントの使用方法」を参照してください。
階層ビューアは、データ内に親子関係の存在するデータを視覚的に表現するADFデータ視覚化コンポーネントです。たとえば、組織図、ネットワーク・ダイアグラム、ソーシャル・ネットワークなどを表示する場合には、このコンポーネントが有益です。
図26-54に、組織図をレンダリングする階層ビューア・コンポーネントの実行時ビューを示します。
図26-55に、階層ビューアのタイプが表示されたコンポーネント・ギャラリと階層ビューアの作成に使用できるクイック・スタート・レイアウトを示します。
作成する階層ビューア・コンポーネント(dvt:hierarchyViewer)はそれぞれ次の要素を持つことができます。
1つ以上のノード要素(dvt:node)
1つ以上のリンク要素(dvt:link)
階層ビューア・コンポーネントとともに、必要に応じて、カード要素(dvt:panelCard)を使用することもできます。パネル・カードは、アニメーションを使用して、ノード要素により参照される複数のコンテンツ・セットを動的に切り替える方法を提供します。たとえば、コンテンツを水平方向にスライドさせたり、ノードをめくったりすることができます。パネル・カードの使用を指定するには、図26-55で選択されているクイック・スタート・レイアウトを選択します。
データ・バインディングの完了後に階層ビューアをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADF階層ビューア・コンポーネントの使用方法」を参照してください。
階層ビューアは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のルート・ノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。
データバインドされた階層ビューアを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
図26-56に、「データ・コントロール」パネルでHvtestView1コレクションを選択し、組織図の従業員データを表す階層ビューアを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「階層ビューア」を選択します。
「コンポーネント・ギャラリ」で、作成する階層ビューアのレイアウトを選択します。図26-55「階層ビューア・タイプのコンポーネント・ギャラリ」に、上から下の垂直方向レイアウト・タイプが選択された階層ビューアのコンポーネント・ギャラリを示します。
|
注意: クイック・スタート・レイアウトの選択以外、コンポーネント・ギャラリとそれに続く「階層ビューアの作成」ダイアログでは、階層ビューアの外観をカスタマイズすることはできません。階層ビューアの外観をカスタマイズするには、この手順の完了後、プロパティ・インスペクタを使用して、階層ビューアの値を設定します。 |
「階層ビューアの作成」ダイアログで、次の操作を行います。
「階層」リストで、実行時ダイアログにノードとして表示したいコレクションを選択します。
「階層」リストで選択したコレクションそれぞれについて、ズーム・レベルを1つ以上使用して、隣に表示される「ノード属性」リストから属性を選択します。設定する75%、50%または25%レベルそれぞれについて、「ズーム・レベルの追加」を選択します。
階層ビューア・コンポーネントは4種類のズーム・レベルを定義します。これらのズーム・レベルを変更したり、新しいズーム・レベルを作成したりすることはできません。デフォルトのズーム・レベルは100%です。
「OK」をクリックします。
図26-57は、hvtestView1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューアの作成」ダイアログです。この例では、100%のズーム・レベルに対して次の構成が行われています。
「階層」エリアでは、ツリー・バインディングを表示するためにデータ・コレクションHvtestView1、ツリー内の子ノードを表示するためにアクセッサHvtestViewが選択されています。
「クイック・スタート・レイアウト」では、dvt:panelCardが階層ビューア・ノード用に構成されます。
「イメージ」では、各ノードでスタンプされるイメージ・ファイルを指定します。このオプションは、パネル・カードのクイック・スタート・レイアウトにのみ表示されます。
「ノード属性」では、各ノードのコンテンツと表示順序を、コンテンツのレンダリングに使用するADFコンポーネントとともに指定します。
「階層ビューアの作成」ダイアログを完了したら、プロパティ・インスペクタを使用して、階層ビューア属性を設定します。また、階層ビューア・タグに関連付けられた子タグを使用して、さらに階層をカスタマイズすることもできます。
階層ビューアを「データ・コントロール」パネルから作成すると、次の処理が行われます。
JSFページのページ定義ファイルで階層ビューアのバインディングを作成
階層ビューア・コンポーネントのJSFページに必要なタグを追加
例26-32は、階層ビューア・コンポーネントについてJDeveloperにより生成されたバインディングを表示します。コンポーネントのノードにデータを移入するためのルールは、ノード定義として定義されます。各ノード定義は、ビュー・オブジェクト1つとそれに関連する属性を参照しています。この例は、階層のすべてのレベルに対して生成された1つのノード定義を示しています。また、このコード例はアクセッサ(HvtestView)も参照しています。
例26-32 階層ビューアのバインディング
<bindings>
<tree IterBinding="HvtestView1Iterator" id="HvtestView1">
<nodeDefinition DefName="model.HvtestView">
<AttrNames>
<Item Value="Phone"/>
<Item Value="Email"/>
<Item Value="Managerid"/>
<Item Value="Thumburl"/>
<Item Value="Lastname"/>
<Item Value="Firstname"/>
<Item Value="Id"/>
<Item Value="Title"/>
</AttrNames>
<Accessors>
<Item Value="HvtestView"/>
</Accessors>
</nodeDefinition>
</tree>
</bindings>
例26-33は、例26-32のページ定義ファイルに関連付けられているJSFページで生成されたコードを示しています。簡潔にするため、ファセット要素zoom75、zoom50およびzoom25のコードは省略されています。パネル・カード要素内のshowDetail項目の1つも省略されています。
この例は、HvtestView1ツリー・バインディングを参照する階層ビューア・コンポーネントを示しています。これには、ノード(dvt:node)コンポーネントが含まれ、このコンポーネントにはパネル・カード・コンポーネント(dvt:panelCard)が含まれます。このパネル・カード・コンポーネントは、ノードにより参照されたコンテンツの表示を変更するときに使用されるエフェクトとして、slide_horzを定義しています。
図26-57に示す「階層の作成」ダイアログを使用して、階層ビューア・コンポーネントのレイアウトをカスタマイズしたり、パネル・カードなどのコンポーネントをさらに追加したりすることはできません。このため、ビジュアル・エディタで階層ビューア・コンポーネントのコードを直接編集するか、プロパティ・インスペクタで値を設定して、レイアウトをカスタマイズします。「コンポーネント・パレット」を使用して、パネル・カードなどのコンポーネントを追加できます。
例26-33 階層ビューアのJSFページのコード
<dvt:hierarchyViewer id="hv1" var="node"
value="#{bindings.HvtestView1.treeModel}"
selectionListener="#{bindings.HvtestView1.treeModel.makeCurrent}"
layout="hier_vert_top"
levelFetchSize="#{bindings.HvtestView1.rangeSize}"
styleClass="AFStretchWidth">
<dvt:link linkType="orthogonalRounded" id="l1"/>
<dvt:node type="model.HvtestView" width="233" height="330" id="n1">
<f:facet name="zoom100">
<af:panelGroupLayout styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding"
layout="vertical" id="pgl4">
<af:panelGroupLayout layout="horizontal" id="pgl3">
<af:panelGroupLayout id="pgl2">
<af:image source="images/#{node.Thumburl}"
styleClass="AFHVNodeImageSize" id="i1"/>
</af:panelGroupLayout>
<af:spacer width="5" height="5" id="s2"/>
<af:panelGroupLayout layout="vertical" id="pgl1">
<af:outputText value="#{node.Firstname}"
styleClass="AFHVNodeTitleTextStyle" id="ot7"/>
<af:outputText value="#{node.Lastname}"
styleClass="AFHVNodeSubtitleTextStyle" id="ot6"/>
<af:outputText value="#{node.Title}"
styleClass="AFHVNodeTextStyle" id="ot5"/>
</af:panelGroupLayout>
</af:panelGroupLayout>
<af:spacer height="5" id="s3"/>
<dvt:panelCard effect="slide_horz" styleClass="AFHVNodePadding"
id="pc1">
<af:showDetailItem text="Contact " id="sdi2">
<af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding"
id="pfl2">
<af:panelLabelAndMessage label="#{bindings.HvtestView1.hints.Email.label}"
styleClass="AFHVPanelCardLabelStyle"
id="plam4">
<af:outputText value="#{node.Email}"
styleClass="AFHVPanelCardTextStyle" id="ot2"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.HvtestView1.hints.Phone.label}"
styleClass="AFHVPanelCardLabelStyle"
id="plam1">
<af:outputText value="#{node.Phone}"
styleClass="AFHVPanelCardTextStyle" id="ot3"/>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:showDetailItem>
<af:showDetailItem text="Address " id="sdi1">
showDetailItem details omitted
</af:showDetailItem>
</dvt:panelCard>
</af:panelGroupLayout>
</f:facet>
</dvt:node>
</dvt:hierarchyViewer>
階層ビューアの検索機能は、階層ビューア・データ・モデルの基本であるデータ・コレクションの検索可能属性または列に基づいています。Oracle ADFのデータ・コントロールで定義された問合せ結果コレクションを使用すると、Jdeveloperでは宣言的なタスクとなります。ExecuteWithParams操作をドラッグして、このページの既存の階層ビューア・コンポーネントにドロップします。
作業を始める前に、次のようにします。
ページ上にデータバインドされた階層ビューア・コンポーネントを配置します。
階層ビューアのルート・ノードを取得する問合せを検証します。
たとえば、図26-58では、EMPNO列でルート・ノードを取得しています。
検索を実行するビュー・オブジェクトを作成します。
たとえば、図26-59はEmployeesSearchResultsビュー・オブジェクトを示していますが、このオブジェクトは任意の値と一致させるためにデフォルト値の%、および列に対する完全一致を指定する比較値=を使用して、データ・コレクションのJob列に基づく検索を実行します。
ビュー・オブジェクトの作成の詳細は、5.2.1項「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。
階層ビューアでデータバインドされた検索を作成するには:
「データ・コントロール」パネルから、問合せ結果に対応するコレクションを選択し、「操作」ノードを展開してExecuteWithParams操作を表示します。
ExecuteWithParams操作をドラッグして、ビジュアル・エディタの階層ビューア、または「構造」ウィンドウのコンポーネント上にドロップします。かわりに、このパラメータを階層ビューアにドラッグすることもできます。
表示される「階層ビューア検索の作成」ダイアログで、「追加」アイコンを使用して、「検索結果」パネルに表示する結果リストを指定し、その後、各結果について次の指定を行います。
ラベルの表示: 階層内のノードのヘッダー値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: 階層ビューアのツリーにあるノードに使用するデータ・コレクション内の列を選択します。
使用するコンポーネント: ノードに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。
既存のフィールドの選択後、矢印アイコン(Up、Down、Top、Bottom)を使用して、結果を並べ替えるか、または「削除」アイコンを使用して、結果を削除します。
「操作」ドロップダウン・リストで、検索結果が選択されたときに使用する階層ルート・データ・コレクションを選択します。有効な値は次のとおりです。
removeRowWithKey: 入力フィールドによって指定された値から変換されたStringとして行キーを使用し、バインドされたデータ・コレクションのデータ・オブジェクトを削除します。
setCurrentRowWithKey: 入力フィールドで指定された値から変換したStringとして行キーを設定します。行キーは、バインドされたデータ・コレクション内のデータ・オブジェクトの現状設定に使用されます。
setCurrentRowWithKeyValue: キーの値を使用して、イテレータの現在のオブジェクトを設定します。
ExecuteWithParams: パラメータとして渡される名前付きバインド変数に値を設定します。
「パラメータ・マッピング」表で、「結果属性」列のドロップダウン・リストを使用して、「階層パラメータ」列に表示されるパラメータにマップする結果コレクション属性を選択します。
図26-60は、EmployeesSearchResults1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューア検索の作成」ダイアログです。
実行時に、検索結果がEnameとJobの表にまとめられます。図26-61は、ユーザーが「検索」ボックスに「Manager」と入力し、検索結果の1つを選択したときに表示される「検索結果」パネルを示します。
ツリーマップおよびサンバーストは、サイズと色で視覚的に表された、2つの次元にまたがる定量的階層データを表示するADFデータ視覚化コンポーネントです。たとえば、ツリーマップまたはサンバーストを使用して四半期ごとの地域別売上を表示して売上動向を示すことができます。この場合、ノードのサイズを使用して各地域の売上高を表し、ノードの色を使用してその地域の売上高が四半期内に増減したかどうかを表せます。
ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。ツリーマップでは、ノードはネストされた四角形として表示されます。ツリーの各ブランチには四角形が割り当てられ、そこにサブブランチを表す、より小さい四角形が並べられます。
図26-62に、世界中の様々な地域にある企業の倉庫内の製品の在庫状況を表示するツリーマップを示します。この例では、ノードのサイズが各製品の在庫量を表し、ノードの色が在庫ステータスを表しています。
サンバーストでは、ノードは四角形のレイアウトではなく放射状に示され、階層の最上位が中心に表示され、よりレベルが深くなるにつれ中心から離れた位置に表示されます。図26-63に、同じインベントリ・データをサンバーストで示します。
ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ツリーマップおよびサンバーストのエンド・ユーザーとプレゼンテーション機能、ユースケース、タグ構造および特殊機能の追加に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFツリーマップおよびサンバースト・コンポーネントの使用方法」を参照してください。
ツリーマップおよびサンバーストは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。ツリーマップおよびサンバーストでは、JDeveloperで次の属性も設定されている必要があります。
value: ノードのサイズ
fillColor: ノードの色
label: ノードのテキスト識別子
valueとlabel属性の値はツリーマップまたはサンバーストのデータ・モデルに、あるいは最初にUIを開発する機能を使用している場合はクラスまたはマネージドBeanに格納する必要があります。fillColor値は、データ・モデル、クラスおよびマネージドBeanで指定するか、プロパティ・インスペクタで宣言的に指定できます。
ツリーマップまたはサンバーストを適切に構成するには、データが次の規則に従っている必要があります。
各子ノードは1つの親ノードしか持つことはできません。
レベルはスキップできません。
Oracle ADFのデータ・コントロールを使用すると、JDeveloperではツリーマップとサンバーストの作成は宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。
作業を始める前に、次のようにします。
次のタスクを完了する必要があります。
9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
マスター/ディテール関係の操作の詳細は、第24章「マスター/ディテール・データの表示」を参照してください。
『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のビュー・ページの作成に関する項の手順に従い、JSFページを作成します。
「データ・コントロール」パネルを使用してツリーマップまたはサンバーストを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
図26-64に、図26-62のツリーマップおよび図26-63のサンバーストに対するデータ・コレクションを示します。この例では、アプリケーションはSCountriesView2コレクションとSWarehouseView2コレクション間のビュー・リンクを使用して、SRegionView1とSWarehouseView2データ・コレクションから構成される階層を作成します。
表26-6に、ツリーマップまたはサンバーストの作成に使用される値、サイズおよび色属性を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ツリーマップ」または「サンバースト」を選択します。
ツリーマップの作成または「サンバーストの作成」ダイアログの「階層」セクションで、実行時のツリーマップまたはサンバーストにノードとして含めるコレクションを選択します。デフォルトでは、ルート・コレクションが選択されます。
「階層」リストで選択するコレクションごとに、次に対する値を入力します。
値: ドロップダウン・リストから、サンバーストのサイズ値を表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。「式ビルダー」ダイアログに関するヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
たとえば、図26-64のデータ・コレクションを使用してツリーマップまたはサンバーストを作成するには、最初のノードに対するサイズ値を表すように、SRegionView1の値として「CountryCount」を選択します。
ラベル: ドロップダウン・リストから、サンバースト・ノードのラベルとして表示するラベルを表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
たとえば、SRegionView1ノード・ラベルに対して「Name」を選択します。
オプションで、ビュー・エリア・セクションで「新規」をクリックして、ノードに対する属性グループを構成します。ノードの表示を色またはパターンに基づいて変えるには、属性グループを使用します。ツリーマップまたはサンバーストの作成後にノードのfillColorまたはfillPatternプロパティを使用して、ノードの塗りつぶしの色またはパターンを指定することもできます。
色を変えるように属性グループを構成したり、ノードに対してfillColor属性を指定したりしない場合は、ノードは黒で表示されます。デフォルトでは、ノードはパターンなしで表示されます。
ツリーマップとサンバーストの製品インベントリの例では、階層の各レベルに対して属性グループが構成されています。
属性グループを構成するには、次の値を入力します。
値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
ツリーマップとサンバーストの例では、「値でグループ化」の値としてサイズ値が使用されています。SRegionView1コレクションについては、「値でグループ化」の値として「CountryCount」を選択します。
エリア: ドロップダウン・リストから、属性グループを色で区別する場合は「色」を、属性グループをパターンで区別する場合は「パターン」を選択します。属性グループを色とパターンの両方で区別するには、「複数の属性の選択」を選択し、「色」と「パターン」の両方を選択します。「OK」をクリックします。
ツリーマップとサンバーストの製品インベントリの例では、階層の各レベルに対して色が使用されています。
凡例ラベル: ドロップダウン・リストから、ツリーマップの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。
ツリーマップとサンバーストの製品インベントリの例では、この値は空のままになっています。
図26-65に、製品インベントリの例の最初のノードに対して入力された「ツリーマップの作成」ダイアログを示します。「サンバーストの作成」ダイアログに対する入力も同じようになります。
オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。例外ルールは、ノードのグループ化値が特定の条件を満たす場合に色またはパターンを指定するときに使用します。
一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。
グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を、ノードをパターンで区別する場合は「パターン」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
図26-66に、階層の一番下のレベルに対する一致ルールを使用するデータ・コレクションの「ツリーマップの作成」ダイアログを示します。「サンバーストの作成」ダイアログに対する入力も同じようになります。
この例では、ツリーマップ・ノードは、インベントリ・レベルが許容可能であれば緑(RGB 16進#008000)で表示され、インベントリ・レベルが製品の再発注レベル以下であれば赤(RGB 16進#ff0000)で表示されます。属性グループの「ラベル」フィールドには、凡例表示に対する詳細が含まれます。この場合、フィールドには項目の在庫数に基づいて凡例ラベルを決定する式(#{(row.AmountInStock gt row.ReorderPoint) ? 'Stock Level OK' : 'Reorder Time'})が含まれます。
図26-67は、実行時のツリーマップを示します。
例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。
条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。
ツリーマップとサンバーストの製品インベントリの例では、階層の一番下のレベルに対して3つの例外ルールが定義されています。製品のインベントリ・レベルが再発注レベルをはるかに超えている場合は、図26-62のツリーマップ・ノードと図26-63のサンバースト・ノードは緑で表示されます。ツリーマップとサンバースト・ノードは、インベントリ・レベルが再発注点に近い場合は黄色で、インベントリ・レベルが再発注点に達したか非常に近い場合は赤で表示されます。
図26-68に、階層の一番下のレベルに対する例外ルールを使用する、図26-64のサンプル・データ・コレクションに対する「サンバーストの作成」ダイアログを示します。「ツリーマップの作成」ダイアログに対する入力も同じようになります。
プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を選択します。ノードをパターンで区別する場合は「パターン」を選択します。
プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。
凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。
「OK」をクリックします。
ツリーマップまたはサンバーストを「データ・コントロール」パネルから作成すると、次の処理が行われます。
サンバーストまたはツリーマップに対するバインディングがJSFページのページ定義ファイルに作成されます。
treemapまたはsunburstコンポーネントに必要なタグがJSFページに追加されます。
例26-34に、図26-64のデータ・コレクションを使用してtreemapまたはsunburstコンポーネントに対してJDeveloperにより生成されたバインディングを示します。どちらのコンポーネントも同じデータ・モデルを使用するため、ページ定義ファイル内のバインディングは同じになります。
例26-34 ツリーマップまたはサンバーストに対するサンプル・バインディング
<executables>
<variableIterator id="variables"/>
<iterator Binds="SRegionView1" RangeSize="-1" DataControl="AppModuleDataControl"
id="SRegionView1Iterator"/>
</executables>
<bindings>
<tree IterBinding="SRegionView1Iterator" id="SRegionView1">
<nodeDefinition DefName="model.SRegionView" Name="SRegionView10">
<AttrNames>
<Item Value="Id"/>
<Item Value="Name"/>
<Item Value="CountryCount"/>
</AttrNames>
<Accessors>
<Item Value="SCountriesView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SCountriesView" Name="SRegionView11">
<AttrNames>
<Item Value="Id"/>
<Item Value="Country"/>
<Item Value="RegionId"/>
Item Value="WarehouseCount"/>
</AttrNames>
<Accessors>
<Item Value="SWarehouseView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.SWarehouseView" Name="SRegionView12">
<AttrNames>
<Item Value="Id"/>
<Item Value="Address"/>
<Item Value="City"/>
<Item Value="State"/>
<Item Value="CountryId"/>
<Item Value="ZipCode"/>
<Item Value="Phone"/>
<Item Value="ManagerId"/>
<Item Value="ProductCount"/>
</AttrNames>
<Accessors>
<Item Value="ProductInventoryView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.ProductInventoryView" Name="SRegionView13">
<AttrNames>
<Item Value="ProductId"/>
<Item Value="WarehouseId"/>
<Item Value="AmountInStock"/>
<Item Value="ReorderPoint"/>
<Item Value="MaxInStock"/>
<Item Value="OutOfStockExplanation"/>
<Item Value="RestockDate"/>
<Item Value="Id"/>
<Item Value="Name"/>
<Item Value="ShortDesc"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
ツリーマップまたはサンバーストのノードにデータを移入するためのルールは、ノード定義で定義されています。この例は、階層の各レベルに対して1つずつ、合計で4つのノード定義が生成されたことを示しています。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。階層の次のレベルが存在する場合は、各ノード定義では次のレベルに対するアクセッサも参照しています。
ツリーマップまたはサンバーストの作成後は、「ツリーマップの作成」ダイアログまたは「サンバーストの作成」ダイアログを使用して、各ノードの値、ラベルおよび属性グループを変更できます。ダイアログを開くには、treemapまたはsunburstコンポーネントに対するプロパティ・インスペクタの「編集」アイコンを使用します。コードで値を直接設定するか、プロパティ・インスペクタで値を設定することにより、値をカスタマイズすることもできます。
デフォルトでは、サンバーストまたはツリーマップでは階層の最初の2つのレベルのみが表示され、サンバーストまたはツリーマップでlegendSource属性を構成するまでは凡例は表示されません。図26-69に、図26-64のデータ・コレクションを使用してサンバーストを作成した場合に実行時に表示されるサンバーストを示します。
「ツリーマップの作成」または「サンバーストの作成」ダイアログの入力後は、プロパティ・インスペクタを使用して、ツリーマップまたはサンバーストのレベル表示およびlegendSource属性を構成できます。その他のツリーマップまたはサンバースト属性に対する設定を指定し、サンバーストおよびツリーマップ・タグに関連付けられた子タグを使用してさらにサンバーストおよびツリーマップをカスタマイズすることもできます。
例26-35に、図26-62のツリーマップに対するJSFページ・コード上のコードを示します。この例では、データバインドされたツリーマップは、階層内のすべてのレベル、凡例、およびユーザーがノード上にマウスを移動した場合にはツールチップを表示するように構成されています。
例26-35 ツリーマップに対するJSFページのサンプル・コード
<dvt:treemap id="t1" value="#{bindings.SRegionView1.treeModel}"
var="row" displayLevelsChildren="3"
legendSource="ag1" summary="Sample Treemap">
<af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
<f:facet name="SRegionView11">
<dvt:treemapNode value="#{row.WarehouseCount}" label="#{row.Country}"
id="tn1">
<dvt:attributeGroups id="ag2" value="#{row.WarehouseCount}" type="color"/>
</dvt:treemapNode>
</f:facet>
<f:facet name="SRegionView10">
<dvt:treemapNode value="#{row.CountryCount}" label="#{row.Name}" id="tn2">
<dvt:attributeGroups id="ag3" value="#{row.CountryCount}" type="color"/>
</dvt:treemapNode>
</f:facet>
<f:facet name="SRegionView13">
<dvt:treemapNode value="#{row.AmountInStock}" label="#{row.Name}" id="tn3"
shortDesc="Amount in Stock: #{row.AmountInStock}<br/>Reorder Point: #{row.ReorderPoint}">
<dvt:attributeGroups value="#{row.AmountInStock}" type="color" id="ag1">
<dvt:attributeExceptionRule id="aer1"
condition="#{(row.AmountInStock.value - row.ReorderPoint.value) gt 50}"
label="Stock OK">
<f:attribute name="color" value="#008800"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer2"
condition="#{((row.AmountInStock.value - row.ReorderPoint.value) le 50) and ((row.AmountInStock.value - row.ReorderPoint.value) gt 25)}"
label="Stock Level Getting Low">
<f:attribute name="color" value="#FFFF33"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer3"
condition="#{(row.AmountInStock.value - row.ReorderPoint.value) le 25}"
label="Reorder Time">
<f:attribute name="color" value="#880000"/>
</dvt:attributeExceptionRule>
</dvt:attributeGroups>
</dvt:treemapNode>
</f:facet>
<f:facet name="SRegionView12">
<dvt:treemapNode value="#{row.ProductCount}" label="#{row.City}" id="tn4">
<dvt:attributeGroups id="ag4" value="#{row.ProductCount}" type="color"/>
</dvt:treemapNode>
</f:facet>
</af:switcher>
</dvt:treemap>
例26-36に、図26-63のサンバーストに対するJSFページ・コード上のコードを示します。この例では、データバインドされたサンバーストも、階層内のすべてのレベル、凡例、およびユーザーがノード上にマウスを移動した場合にはツールチップを表示するように構成されています。この例のサンバースト・コードと前の例のツリーマップ・コードの例の類似点に注目してください。
例26-36 サンバーストに対するJSFページのサンプル・コード
<dvt:sunburst id="t1" value="#{bindings.SRegionView1.treeModel}" var="row"
displayLevelsChildren="3"
summary="Sample Sunburst" legendSource="ag3">
<af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
<f:facet name="SRegionView10">
<dvt:sunburstNode value="#{row.CountryCount}" label="#{row.Name}" id="sn1" >
<dvt:attributeGroups value="#{row.CountryCount}" type="color"
label="Country Count" id="ag1"/>
</dvt:sunburstNode>
</f:facet>
<f:facet name="SRegionView11">
<dvt:sunburstNode value="#{row.WarehouseCount}" label="#{row.Country}"
id="sn4">
<dvt:attributeGroups value="#{row.WarehouseCount}" type="color" id="ag4"/>
</dvt:sunburstNode>
</f:facet>
<f:facet name="SRegionView12">
<dvt:sunburstNode value="#{row.ProductCount}" label="#{row.City}" id="sn3">
<dvt:attributeGroups value="#{row.ProductCount}" type="color" id="ag2"/>
</dvt:sunburstNode>
</f:facet>
<f:facet name="SRegionView13">
<dvt:sunburstNode value="#{row.AmountInStock}" label="#{row.Name}" id="sn2"
shortDesc="Amount in Stock: #{row.AmountInStock}<br/>Reorder Point: #{row.ReorderPoint}">
<dvt:attributeGroups value="#{row.AmountInStock}" type="color"
label="Amount in Stock" id="ag3">
<dvt:attributeExceptionRule id="aer1" condition="#{(row.AmountInStock.value - row.ReorderPoint.value) gt 50}"
label="Stock Level OK">
<f:attribute name="color" value="#008800"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer2"
condition="#{((row.AmountInStock.value - row.ReorderPoint.value) le 50) and ((row.AmountInStock.value - row.ReorderPoint.value) gt 25)}"
label="Stock Getting Low">
<f:attribute name="color" value="#FFFF33"/>
</dvt:attributeExceptionRule>
<dvt:attributeExceptionRule id="aer3" condition="#{(row.AmountInStock.value - row.ReorderPoint.value) le 25}"
label="Reorder Time">
<f:attribute name="color" value="#880000"/>
</dvt:attributeExceptionRule>
</dvt:attributeGroups>
</dvt:sunburstNode>
</f:facet>
</af:switcher>
</dvt:sunburst>
サンバーストまたはツリーマップのレベル表示、legendSource属性、ツールチップ、追加の属性または子タグの構成に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFツリーマップおよびサンバースト・コンポーネントの使用方法」を参照してください。
