| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
 戻る |
 次へ |
| Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1（11.1.1） B52029-02 |
|
戻る |
次へ |
この章では、データ・バインドされたADFゲージ・コンポーネントを使用してデータを表示する方法とゲージのカスタマイズ・オプションについて説明します。
この章に含まれる項は次のとおりです。
ゲージのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADFゲージの作成に関する項を参照してください。
ゲージは、データ内の問題を示します。ゲージは通常1つのデータ・ポイントをプロットし、データ・ポイントが許容範囲にあるか、非許容範囲にあるかを示します。1つのゲージ・セットに複数のゲージを表示する場合も多くあります。セット内のゲージは通常構成可能なレイアウトのグリッド状の形式で表示されます。
コンポーネント・ギャラリには、使用可能なゲージのカテゴリ、タイプおよび説明が表示され、ゲージの作成およびクイック・スタート・レイアウトの使用が視覚的にサポートされます。図25-1に、ゲージのコンポーネント・ギャラリを示します。
コンポーネント・ギャラリを使用してゲージ・コンポーネントをJSFページに挿入すると、ゲージのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例25-1に、図25-1のコンポーネント・ギャラリでクイック・スタート・レイアウトを選択したダイアル・ゲージ用にJSFページに挿入されたコードを示します。
例25-1 ゲージのサンプル・コード
<dvt:gauge id="gauge2" value="#{bindings.Gaugedemo1View1.gaugeModel}"
gaugeType="DIAL" imageFormat="FLASH">
<dvt:gaugeBackground>
<dvt:specialEffects fillType="FT_GRADIENT">
<dvt:gradientStopStyle/>
</dvt:specialEffects>
</dvt:gaugeBackground>
<dvt:gaugeFrame/>
<dvt:indicator/>
<dvt:indicatorBase/>
<dvt:gaugePlotArea/>
<dvt:tickLabel/>
<dvt:tickMark/>
<dvt:topLabel/>
<dvt:bottomLabel/>
<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/>
<dvt:thresholdSet>
<dvt:threshold fillColor="#d62800"/>
<dvt:threshold fillColor="#00ff00"/>
</dvt:thresholdSet>
</dvt:gauge>
ゲージ・コンポーネントでは、次のタイプのゲージがサポートされています。
ダイアル: 220度の弧に沿ってメトリックを示します。これはデフォルトのゲージ・タイプです。図25-2に、プラズマ・ハード・ディスク・テレビの在庫レベルが許容範囲内にあることを示すダイアル・ゲージを示します。
ステータス・メーター: 矩形のバーに沿ってタスクの進度または測定値のレベルを示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。図25-3に、プラズマ・ハード・ディスク・テレビの在庫レベルを、ステータス・メーター・ゲージを使用して示します。
ステータス・メーター（垂直）: 垂直の矩形のバーに沿ってタスクの進度または測定値のレベルを示します。図25-4に、プラズマ・ハード・ディスク・テレビの在庫レベルを、垂直のステータス・メーター・ゲージを使用して示します。
LED（発光ダイオード）: 重要業績評価指標（KPI）などの測定値をグラフィカルに表します。LEDゲージには、よい（上矢印）、普通（左または右矢印）、悪い（下矢印）を示す矢印など、数種のグラフィクスが使用できます。図25-5に、プラズマ・ハード・ディスク・テレビの在庫レベルを、LEDバルブ・インジケータを使用して示します。図25-6では、同じ在庫レベルを、LED矢印を使用して示します。
ゲージの用語は、ゲージおよびゲージ・セットのカスタマイズ可能な様々な点を示します。ゲージ・コンポーネントには、このカスタマイズ用のオプションを提供する約20の子タグが含まれています。
次のリストでは、ゲージの構成可能な各箇所をグループにまとめて示します。
全体的なゲージのカスタマイズ: このグループの各項目はゲージの子タグで表されます。
ゲージ背景色: ゲージの背景の枠の色と塗りつぶしの色を制御します。
ゲージ・セット背景色: ゲージ・セットの背景の枠の色と塗りつぶしの色を制御します。
ゲージ・フレーム: ダイアル・ゲージの背景のフレームのことです。
描画エリア: ゲージ自体の内側の領域を表します。
インジケータ: ダイアル・ゲージにプロットされた値を指します。通常、線または矢印の形をしています。
インジケータ・バー: ステータス・メーター・ゲージの内側の矩形。
インジケータ・ベース: ダイアル・ゲージの線形または針形のインジケータの円形ベース。
しきい値セット: ゲージのメトリックのしきい値セクションを指定します。ゲージのしきい値はいくつでも作成できます。
データ値: これには、メトリック（ゲージがプロットする実際の値）、最小値、最大値、しきい値などがあります。25.2項「ゲージのデータ要件の理解」で、これらの値について説明します。
ラベル: ゲージでは次の要素がサポートされ、各要素は別個の子タグです。
下位ラベル: オプションのラベルで、ゲージの下に表示され、下のラベル・フレームで囲まれます。
下のラベル・フレーム: 下位ラベルを含むフレームの背景と枠の色を制御します。メトリック・ラベルも下のラベル・フレーム（下位ラベルの右）に表示されます。
メトリック・ラベル: メトリックの値を示し、ゲージにテキストでプロットされます。
ティック・ラベル: ゲージのティック・マークを示すために表示されるテキスト。
ティック・マーク: ゲージの値軸上のマークのことです。一定の間隔で最小値から最大値までを示し、しきい値も示します。
上位ラベル: ゲージの上部に表示されるラベルのことです。デフォルトでは、ゲージの上に、ラベルと組み合せてタイトル・セパレータが使用されます。
上のラベル・フレーム: 上位ラベルを囲むフレームの背景と枠のことです。このフレームの枠の色と塗りつぶしの色を指定できます。このフレームを使用する場合は、デフォルトのタイトル・セパレータを無効にします。
凡例: ゲージでは、ゲージの凡例の領域、テキストおよびタイトルがサポートされ、各々別の子タグです。
形状属性セット: ゲージは、子要素の相互作用プロパティをサポートします。たとえば、ゲージの描画エリアのaltテキストは、要素にマウスを置いたときのツールチップとして表示できます。
メトリック: ゲージがプロットする値。この値は、プロパティ・インスペクタで「ゲージ・データ」属性カテゴリの静的データとして指定できます。データ・コントロールまたはdvt:gaugeタグのtabularData属性を使用して指定することもできます。これは、ゲージで唯一の必須データです。指定されるメトリック値の数は、ゲージ・セットに1つのゲージを表示するか、一連のゲージを表示するかに影響します。
最小および最大: ゲージの値軸で最小点と最大点を示すオプションの値。この値は、データ・コレクションからの動的データとして指定できます。プロパティ・インスペクタでdvt:gaugeタグの「ゲージ・データ」属性カテゴリの静的データとしても指定できます。詳細は、25.4.4項「しきい値のゲージへの追加」を参照してください。
しきい値: データ・コレクションからの動的データとして指定可能なオプションの値で、ゲージの値軸で許容範囲を示します。プロパティ・インスペクタでゲージのしきい値タグを使用して、静的データとしても指定できます。詳細は、25.4.4項「しきい値のゲージへの追加」を参照してください。
必須データ要素はメトリック値のみです。その他のデータ値はオプションです。
次のいずれの方法でも、ゲージ・コンポーネントにデータを指定できます。
ADFデータ・コントロール: ADFデータ・コントロール・パネルからデータ・コレクションをドラッグ・アンド・ドロップして、データ・バインドされたゲージを宣言的に作成します。図25-7に、作成するゲージにメトリック値と、オプションの最小値、最大値およびしきい値を構成する「ゲージの作成」ダイアログ・ボックスを示します。
詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADFゲージの作成に関する項を参照してください。
表形式データ: dvt:gaugeタグのtabularData属性を使用してCSV（カンマ区切りの値）データをゲージに使用できます。
表形式データからゲージを作成するプロセスのステップは次のとおりです。
ゲージのマネージドBeanのメソッドでのデータの格納。
マネージドBeanに格納されたデータを使用するゲージの作成。
ゲージ・コンポーネントのtabularData属性には、グリッドの作成やデータの移入にゲージで使用するメトリック値のリストを指定できます。tabularData属性では、メトリック値のみを指定できます。したがって、しきい値、最小値または最大値は、プロパティ・インスペクタを使用して指定する必要があります。
ゲージ・コンポーネントにはゲージの行と列が表示されます。列ラベルとして指定したテキストは、ゲージの上位ラベルに表示されます。行ラベルとして指定したテキストは、ゲージの下位ラベルに表示されます。
表形式データを含むリストは、ゲージに渡すデータ値ごとに3メンバーのObject配列で構成されます。各配列のメンバーは次のように編成される必要があります。
1つ目のメンバー（索引0）は、データ値のグリッドの列ラベルです。これは通常Stringです。
2つ目のメンバー（索引1）は、データ値のグリッドの行ラベルです。これは通常Stringです。
3つ目のメンバー（索引2）はデータ値で、通常Doubleです。
図25-8には、Quota、Sales、Margin、Costs、Unitsの5つの列があります。例には、London、Paris、New Yorkの3つの行があります。このデータから、各行に5つのゲージのあるゲージ・セットが生成され、売上げなどの値を3都市で比較できます。
例25-2に、3都市の年間実績を比較するゲージに必要な表形式データのリストを作成するコードを示します。
例25-2 ゲージ用の表形式データのリストを作成するコード
public List getGaugeData()
{
ArrayList list = new ArrayList();
String[] rowLabels = new String[] {"London", "Paris", "New York"};
String[] colLabels = new String[] {"Quota", "Sales", "Margin", "Costs", "Units"};
double [] [] values = new double[][]{
{60, 90, 135},
{50, -100, -150},
{130, 140, 150},
{70, 80, -130},
{110, 120, 130}
};
for (int c = 0; c < colLabels.length; c++)
{
for (int r = 0; r < rowLabels.length; r++)
{
list.add (new Object [] {colLabels[c], rowLabels[r],
new Double (values [c][r])});
}
}
return list;
}
ゲージ・タグのtabularData属性を使用して、マネージドBeanに格納された表形式データを参照します。
マネージドBeanからの表形式データを使用してゲージを作成する手順:
コンポーネント・パレットから、dvt:gaugeタグをページにドラッグします。
コンポーネント・ギャラリで、作成するゲージのカテゴリ、タイプおよびクイック・スタート・レイアウト・スタイルを選択します。
プロパティ・インスペクタの「ゲージ・データ」カテゴリで、tabularData属性のドロップダウン・アイコンをクリックし、「式ビルダー」を選択します。
「式ビルダー」ダイアログで検索ボックスを使用してマネージドBeanを検索します。
マネージドBeanのノードを展開し、表形式データのリストを作成するメソッドを選択します。
「OK」をクリックします。式が作成されます。
マネージドBeanの名前がsampleGaugeで、表形式データのリストを作成するメソッドの名前がgetGaugeDataの場合、dvt:gaugeタグのtabularData属性の値として#{sampleGauge.gaugeData}というコードが式ビルダーで生成されます。
ゲージ・コンポーネントは次のようにカスタマイズできます。
ゲージ・タイプの変更。
ゲージ・セットでのゲージのレイアウトの指定。
ゲージ・サイズとスタイルの変更。
しきい値の追加。
数値とテキストの書式設定。
N度のダイアル・ゲージの指定。
ゲージ・ラベルのカスタマイズ。
インジケータとティック・マークのカスタマイズ
dvt:gaugeタグのgaugeType属性を使用してゲージのタイプを変更できます。使用できる値は、DIAL、LED、STATUSMETER、VERTICALSTATUSMETERです。ゲージ・タイプは、ビジュアル・エディタのデフォルト・ゲージに反映されます。
単一ゲージには、ゲージ・コンポーネントにバインドされている1行のデータが表示されます。ゲージ・セットでは、データ・コレクションの複数行のデータの各行が1つのゲージに表示されます。
dvt:gaugeタグの属性の値を指定すると、ゲージ・セット内のゲージの場所を指定できます。
ゲージ・セットでのゲージのレイアウトを指定する手順:
構造ウィンドウで「dvt:gauge」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「共通」属性カテゴリを選択します。
ゲージ・セットに表示するゲージの列の数を決めるには、gaugeSetColumnCount属性の値を指定します。
ゼロに設定すると、すべてのゲージが1行に表示されます。正の整数で、ゲージが表示される列の数が決まります。-1を設定すると、列の数がデータ・ソースから自動的に決定されます。
列でのゲージの配置を決めるには、gaugeSetDirection属性の値を指定します。
「GSD_ACROSS」を選択した場合、ゲージのデフォルト・レイアウトが使用され、左から右、上から下にゲージが表示されます。「GSD_DOWN」を選択した場合、ゲージのレイアウトは、上から下、左から右になります。
ゲージ・セット内のゲージの位置合せを制御するには、gaugeSetAlignment属性の値を指定します。
この属性のデフォルトは「GSA_NONE」で、使用できる領域がゲージ・セットのゲージ間で均等に分割されます。他のオプションでは、使用可能な領域と、ゲージ・セット内で左から右、上から下に配置するために最適なゲージ・サイズが使用されます。ゲージ・セットの中央にゲージを配置する「GSA_CENTER」も選択できます。
ゲージの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。ゲージで使用されるスタイルシートを制御することもできます。ゲージのこれらの2つの側面は、ともにゲージのinlineStyle属性を使用するという点で関連性があります。
dvt:gaugeタグの属性の値を指定すると、ゲージの初期サイズを指定できます。ゲージの動的サイズ変更を指定しない場合、初期サイズが、ゲージの唯一の表示サイズです。
ゲージが初めて表示される際のサイズを指定する手順:
構造ウィンドウで「dvt:gauge」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、dvt:gaugeタグのInlineStyle属性に値を入力します。次に例を示します。
inlineStyle="width:200px;height:200px"
JSFページでのコンテナのサイズが変更されたときにゲージがサイズ変更されるようにするには、dvt:gaugeタグの2つの属性のそれぞれに値を入力する必要があります。この機能用に指定する値は、サイズの異なるブラウザ・ウィンドウの領域を使用するゲージ・コンポーネントの作成にも有用です。
ゲージの動的サイズ変更を有効にする手順:
構造ウィンドウで「dvt:gauge」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「動作」属性カテゴリで、DynamicResize属性に「DYNAMIC_SIZE」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、InlineStyle属性の幅と高さの両方に、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナと同じ幅で200ピクセルの高さのゲージを作成するには、inlineStyle属性に"width:100%;height:200px;"と設定します。
ゲージに使用するカスタム・スタイル・クラスを指定できます。ただし、幅と高さをinlineStyle属性で指定する必要があります。
ゲージにカスタム・スタイル・クラスを指定する手順:
構造ウィンドウで「dvt:gauge」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、StyleClass属性に、「プロパティ」メニュー項目から「編集」を選択し、このゲージに使用するCSSスタイル・クラスを選択します。
InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナと同じ幅で200ピクセルの高さのゲージを作成するには、inlineStyle属性に"width:100%;height:200px;"と設定します。
しきい値は、特定の範囲の値を強調表示するゲージのデータ値です。しきい値はゲージの最小値と最大値の間の値である必要があります。しきい値で指定される範囲は、他の範囲と異なる色で色付けされます。
ゲージがデータ・バインドされている場合、ゲージのデータ・コレクションでしきい値の動的値を指定できます。ゲージの作成後、dvt:thresholdSetタグと、個々のdvt:thresholdタグを挿入して静的しきい値を作成できます。しきい値がデータ・コレクションとしきい値タグの両方で指定された場合、ゲージはしきい値タグの値を受け入れます。
ゲージのしきい値はいくつでも作成できます。各しきい値は、1つのdvt:thresholdタグで表されます。1つのdvt:thresholdSetタグですべてのしきい値タグをラップする必要があります。
静的しきい値をゲージに追加する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「しきい値セット」と選択します。
dvt:thresholdSetタグの属性に値を指定する必要はありません。
「dvt:thresholdSet」ノードを右クリックし、「dvt:thresholdSetの中に挿入」→「しきい値」と選択します。
プロパティ・インスペクタで、このしきい値でカスタマイズする属性の値を入力します。
しきい値に関連するゲージのセクションに、特定の塗りつぶしの色と枠の色を入力できます。しきい値の最大値と、しきい値を示す凡例に表示するテキストも指定できます。
|
注意: 最終しきい値の場合、最終しきい値のしきい値タグに入力した値に関係なく、ゲージの最大値がしきい値の最大値として使用されます。 |
ステップ2とステップ3を繰り返して、ゲージの各しきい値を最小値から最大値まで作成します。
ゲージのdvt:metricLabel、dvt:tickLabelおよびdvt:legendTextタグには、数値の書式設定が必要です。
メトリック・ラベル・タグには、numberType属性があり、値自体を表示するか、値が表す割合を表示するかを指定できます。数値の書式設定としては、これで十分な場合もあります。
dvt:numberFormatタグを使用してメトリック・ラベルの数値の書式を指定することもできます。たとえば、dvt:numberFormatタグで、データ値を通貨として書式設定したり、正または負の記号を表示できます。
数値の書式はdvt:numberFormatタグに直接指定できます。また、af:convertNumberタグをdvt:numberFormatの子タグとして使用できます。
ゲージ・メトリック・ラベルの数値を書式設定する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「metricLabel」と選択します。
メトリック値を値ではなく、割合として表示する場合、dvt:metricLabelタグのNumberType属性を「NT_PERCENT」に設定します。
メトリック・ラベルの数値にその他の書式を指定する場合は、次のようにします。
「metricLabel」ノードを右クリックし、「dvt:metricLabelの中に挿入」→「numberFormat」と選択します。
プロパティ・インスペクタで、numberFormatタグの属性に値を指定し、その他の書式を指定します。
|
注意: ゲージのティック・ラベルの数値を書式設定する手順は、メトリック・ラベルの数値を書式設定する手順と似ています。dvt:tickLabelタグをゲージの子タグとして挿入する点が異なります。 |
テキストは、ゲージのサブコンポーネントを表す次のタグで書式設定できます。
dvt:bottomLabel
dvt:gaugeMetricLabel
dvt:gaugeLegendText
dvt:gaugeLegendTitle
dvt:tickLabel
dvt:topLabel
dvt:metricLabelタグでdvt:gaugeFont子タグを使用して、ゲージ・メトリック・ラベルのフォント・サイズ、色、およびテキストが太字かイタリックかを指定できます。
ゲージ・メトリック・ラベルのテキストを書式設定する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「metricLabel」と選択します。
「metricLabel」ノードを右クリックし、「dvt:metricLabelの中に挿入」→「フォント」と選択します。
プロパティ・インスペクタで、dvt:gaugeFontタグの属性に値を指定し、必要な書式を指定します。
|
注意: 他のゲージ・ラベルとタイトルのテキストを書式設定する手順は、メトリック・ラベルのテキストを書式設定する手順と似ています。ゲージ・ラベルまたはタイトルを表す適切な子タグを挿入する点が異なります。 |
例25-4に、gaugeFontタグを使用してゲージ・メトリック・ラベルのテキストを書式設定する場合に生成されるコードを示します。
ダイアル・ゲージに標準の220度の弧以外の角度でスイープするゲージを指定できます。angleExtent属性を設定して、ゲージの角度の範囲を指定します。
たとえば、270度のダイアル・ゲージを作成するには、angleExtent属性を<dvt:gauge angleExtent="270"/>のように設定します。
ゲージ・ラベルの位置を制御できます。ゲージ・ラベル・フレームの色と枠も制御できます。
適切なラベル・タグのposition属性を使用して、ラベルをゲージの外側に表示するか、内側に表示するかを指定できます。dvt:gaugeの子タグとして、ラベル・タグdvt:bottomLabel、dvt:metricLabelおよびdvt:topLabelを使用できます。
下位ラベルの位置を指定する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「下位ラベル」と選択します。
プロパティ・インスペクタで、position属性に対して、ラベルの位置を選択します。
text属性に、ラベルに表示するテキストを入力します。
適切なラベル・タグをゲージの子タグとして挿入する点以外は同じ手順を使用して他のゲージ・ラベルを配置します。
上位ラベルと下位ラベルのフレームの塗りつぶしの色と枠の色を制御できます。ゲージの子タグdvt:upperLabelFrameおよびdvt:lowerLabelFrameをこれらのラベルのフレームとして使用できます。
上のラベル・フレームの色と枠をカスタマイズする手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「上のラベル・フレーム」と選択します。
プロパティ・インスペクタで、borderColor属性とfillColor属性の色を選択します。
ゲージの子としてdvt:bottomLabelタグを挿入する点以外は同じ手順を使用して下位ラベル・フレームの色と枠をカスタマイズします。
ゲージのインジケータ、およびティック・マークの位置とラベルのカスタマイズに使用できるオプションが多数あります。
ゲージのインジケータのカスタマイズには、ゲージの次の子タグを使用できます。
dvt:indicator: ゲージ・インジケータの針またはステータス・メーター・バーの外観上のプロパティを指定します。次の属性があります。
borderColor: インジケータの枠の色を指定します。
fillColor: インジケータの塗りつぶしの色を指定します。
type: インジケータの種類（線、塗りつぶしまたは針）を指定します。
useThresholdFillColor: インジケータが指すしきい値領域の色が、インジケータの指定した色をオーバーライドするかどうかを指定します。
dvt:indicatorBar: ステータス・メーター・ゲージの内側の矩形（バー）の塗りつぶしのプロパティが含まれます。
dvt:indicatorBase: ダイアル・ゲージの線形または針形のインジケータの円形ベースの塗りつぶしプロパティが含まれます。
ゲージ・インジケータの外観をカスタマイズする手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「インジケータ」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
ステータス・メーター・ゲージの内側のバーの塗りつぶし属性をカスタマイズする場合は、構造ウィンドウでゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「インジケータ・バー」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
ダイアル・ゲージの線形インジケータの円形ベースをカスタマイズする場合は、構造ウィンドウでゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「インジケータ・ベース」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
ゲージのティック・マークとティック・ラベルをカスタマイズするには、次の子タグを使用します。
dvt:tickMark: ティック・マークの位置、数および色を指定します。
dvt:tickLabel: ラベルを持つティック・マークを指定し、ラベルの位置（ゲージの内側か外側か）とティック・ラベルに表示される数値の書式を指定します。
ゲージのティック・マークとティック・ラベルをカスタマイズする手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「ティック・マーク」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「ティック・ラベル」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
デフォルトで、ダイアル・ゲージにはゲージがゲージ・フレーム内に完全に含まれる場合に見やすくするため、内側のティック・ラベルが表示されます。ティック・ラベルは描画エリア内にあるため、ティック・ラベルの長さはこの領域に合うように制限される必要があります。ゲージは外側のラベルを使用してカスタマイズできます。
ゲージで内側のティック・ラベルを作成する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「ティック・マーク」と選択します。
プロパティ・インスペクタで、Position属性にTLP_POSITIONを選択します。
これらのゲージの機能は、一般的な機能ほど頻繁には使用されません。これらの特殊な機能には、ゲージの特定箇所へのグラデーション効果の適用、ゲージへのアニメーションの使用、ゲージでのアクティブ・データのサポートの利用などがあります。
グラデーションは、オブジェクトの色が段階的に変わる特殊効果です。グラデーションの各色は、ストップで表します。最初のストップはストップ0、2番目はストップ1のようになります。特殊効果をサポートするゲージのサブコンポーネントに、特殊効果のストップの数を指定する必要があります。
ゲージの次のサブコンポーネントにグラデーション特殊効果を定義できます。
ゲージの背景: dvt:gaugeBackgroundタグを使用します。
ゲージ・セットの背景: dvt:gaugeSetBackgroundタグを使用します。
ゲージの描画エリア: dvt:gaugePlotAreaタグを使用します。
ゲージのフレーム: dvt:gaugeFrameタグを使用します。
ゲージの凡例エリア: dvt:gaugeLegendAreaタグを使用します。
下のラベル・フレーム: dvt:lowerLabelFrameタグを使用します。
上のラベル・フレーム: dvt:upperLabelFrameタグを使用します。
インジケータ: dvt:indicatorタグを使用します。
インジケータ・バー: dvt:indicatorBarタグを使用します。
インジケータ・ベース: dvt:indicatorBaseタグを使用します。
しきい値: dvt:thresholdタグを使用します。
グラデーション特殊効果を使用する方法は、この効果がサポートされるゲージの各部分で同じです。
特殊効果を追加するゲージのサブコンポーネントごとに、dvt:specialEffectsタグをサブコンポーネントの子タグとして挿入する必要があります。たとえば、グラデーションをゲージの背景に追加する場合、dvt:backgroundタグの子であるdvt:specialEffectsタグを1つ作成します。dvt:specialEffectsタグのfillTypeプロパティをFT_FGRADIENTに設定する必要もあります。
その後、オプションでサブコンポーネントの塗りつぶし色の変化の割合を制御する場合は、コンポーネントの塗りつぶしの色と変化の割合の制御に必要な数のdvt:gradientStopStyleタグを追加します。このdvt:gradientStopStyleタグは、1つのdvt:specialEffectsタグの子タグとして入力する必要があります。
グラデーション特殊効果をゲージの背景に追加する手順:
dvt:gaugeBackgroundタグをゲージの子タグとして挿入していない場合は、構造ウィンドウでゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「ゲージの背景」と選択します。
構造ウィンドウで、背景のノードを右クリックし、「dvt:gaugeBackgroundの中に挿入」→「特殊効果」と選択します。
プロパティ・インスペクタを使用してdvt:specialEffectsタグの属性に値を入力します。
fillType属性には、FT_GRADIENTを選択します。
gradientDirection属性には、グラデーションの塗りつぶしに使用する変化の方向を選択します。
numStops属性には、グラデーションに使用するストップの数を入力します。
オプションで各グラデーション・ストップの色と変化の割合を制御する場合は、特殊効果のノードを右クリックし、dvt:specialEffects内に挿入→「dvt:gradientStopStyle」と選択します。
プロパティ・インスペクタを使用してdvt:gradientStopStyleタグの属性に値を入力します。
stopIndex属性には、dvt:specialEffectsタグ内に含まれるdvt:gradientStopStyleタグ内の索引としてゼロベースの整数を入力します。
gradientStopColor属性には、グラデーション内のこの部分に使用する色を入力します。
gradientStopPosition属性には、指定したストップ色のグラデーションでの相対距離を入力します。グラデーションのスケールは0〜100です。0または100が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。
指定するグラデーション・ストップごとに、ステップ3とステップ4を繰り返します。
例25-5に、グラデーションの塗りつぶしをゲージの背景に追加し、2つのストップを指定する場合に生成されるXMLコードを示します。
例25-5 グラデーションをゲージの背景に追加する場合に生成されるXMLコード
<dvt:gauge >
<dvt:gaugeBackground borderColor="#848284">
<dvt:specialEffects fillType="FT_GRADIENT" gradientDirection="GD_RADIAL">
<dvt:gradientStopStyle stopIndex="0" gradientStopPosition="60"
gradientStopColor="FFFFCC"/>
<dvt:gradientStopStyle stopIndex="1" gradientStopPosition="90"
gradientStopColor="FFFF99"/>
</dvt:specialEffects>
</dvt:gaugeBackground>
</dvt:gauge>
たとえば、データ値が増減すると、ダイアル・ゲージ・インジケータの色が変わるなどのように、ゲージ（ゲージ・セットではなく）にアニメーションを使用してデータの変化を表示できます。図25-9に、各しきい値レベルでデータの変化をアニメーションで表示するダイアル・インジケータの付いたダイアル・ゲージを示します。
次に、ゲージにアニメーション効果を設定する属性に含まれるものを示します。
animationOnDisplay: 適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。
NONE: （デフォルト）初期レンダリング効果は表示されません。
AUTO: グラフ・タイプまたはゲージ・タイプに基づいて自動的に選択された初期レンダリング効果が適用されます。
animationOnDataChange: 適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値は次のとおりです。
NONE: データ変化のアニメーション効果は適用されません。
AUTO: （デフォルト）アクティブ・データ・サービス（ADS）のデータ変化のアニメーション・イベントが適用されます。ADSの詳細は、25.5.3項を参照してください。
ON: 部分ページ・リフレッシュ（PPR）のデータ変化のアニメーション・イベントが適用されます。
animationUpColor: データ値が増加したことを示すために使用するRGB16色の指定に使用します。
animationDownColor: データ値が減少したことを示すために使用するRGB16色の指定に使用します。
アクティブ・データ・サービス（ADS）を使用したアニメーション効果は、ダイアル・メーター・ゲージ・タイプおよびステータス・メーター・ゲージ・タイプに追加できます。ADSでは、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがデータ・ソースで更新されたデータを表示できるようにする必要があります。
アクティブ・データ・サービスを使用するには、データが変化したときにイベントを公開するデータ・ソースが必要です。また、これらのサービスを表すために、これらのイベントと関連付けられたデータ・コントロールに対応するビジネス・サービスを作成する必要があります。ADSおよびアプリーケーションの構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のアクティブ・データ・サービスの使用に関する章を参照してください。
データ・バインドされたゲージを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
アクティブ・データを表示するゲージを構成する手順:
構造ウィンドウでグラフのノードを選択します。
プロパティ・インスペクタで、「ID」フィールドに一意の値を入力します。
識別子を選択しないと、1つ自動的に入力されます。
そのページの関連ページ定義ファイルを開きます。
ページ定義ファイルの構造ウィンドウで、コンポーネントにバインドされた属性を表すノードを選択します。プロパティ・インスペクタで、ChangeEventPolicy属性にPushを選択します。
ゲージのグラフィックを直接指定して、カスタムのゲージ形状を作成できます。customShapesPath属性がベクター・グラフィック・ファイルを指すように設定されます。このベクター・グラフィック・ファイルが処理され、出力に使用されるグラフィックになります。JDeveloperでは、customShapesPath属性を使用してアクセスできるカスタム形状スタイルのセットも提供されます。
描画エリアやティック・マークなど、ゲージのコンポーネントの回転およびサイズ変更のための要件があるため、カスタム形状グラフィック・ファイルを作成する場合は、ベクター・グラフィック・ファイルが必要です。スケーラブル・ベクター・グラフィック（SVG）が、ゲージのカスタム形状作成のためのファイル形式としてサポートされています。
ゲージを設計してSVGファイルにエクスポートしたら、ゲージ形状およびコンポーネントを識別、スケールおよび位置設定し、処理に使用されるその他のメタデータを指定するための情報を追加します。
SVGファイルで、ゲージ・コンポーネントはIDを使用して識別されます。たとえば、<polygon id="indicator"/>と指定されたSVGファイルは、indicatorコンポーネントに多角形形状を使用するものと解釈されます。複数の形状を指定してコンポーネントに必要なビジュアルを作成するには、IDをid="indicator_0"、id="indicator_1"およびid="indicator_2"に変更できます。
表25-1に、ゲージ・コンポーネントIDとその説明を示します。
表25-1 カスタム形状のゲージ・コンポーネントID
| ID | 説明 |
|---|---|
|
|
ゲージによって表される値を指します。指定されていない場合、ゲージではアプリケーションで指定されたインジケータが使用されます。 ダイアル・ゲージでは、形状が適切に回転されるように、上を示して（90度） ステータス・メーター・ゲージでは、インジケータを完全に指定する必要があり、ゲージはメトリック値を指すようにトリミングされます。 |
|
|
ダイアル・ゲージの場合は、 |
|
|
|
|
|
位置が |
|
|
ダイアル・ゲージの場合は、インジケータが移動する円形エリアを指します。 ステータス・メーター・ゲージの場合は、インジケータが含まれるエリアを指します。 LEDゲージの場合は、LEDの塗りつぶし色で塗りつぶされないグラフィックが含まれるエリアを指します。
|
|
|
ゲージの増分の定義に使用します。 |
|
|
位置が |
表25-2に、内部計算に使用され、ゲージにはレンダリングされないメタデータIDとその説明を示します。
表25-2 カスタム形状のメタデータID
| ID | 説明 |
|---|---|
|
|
インジケータ・バーの最小範囲および最大範囲を含むボックスを指定します。指定されていない場合、バウンディング・ボックスは入力ファイルで指定されたとおり、インジケータ全体に広がります。 |
|
|
ダイアル・ゲージ内で回転するインジケータの回転の中央を指定します。このIDを持つ形状の中央がインジケータの中央とみなされます。指定されていない場合、180度のダイアル・ゲージでは描画エリアの下端の中央、N度のダイアル・ゲージでは描画エリアの中央とみなされます。 |
|
|
適切なしきい値の色で塗りつぶされる必要のあるLEDゲージの領域を指定します。指定されていない場合、グラフィック・ファイルで指定された |
|
|
複雑な |
|
|
|
|
|
しきい値の色で塗りつぶされる領域を定義します。 ダイアル・ゲージの場合は、 ステータス・メーター・ゲージの場合は、ステータス・メーター・ゲージの向きに基づいて塗りつぶされる |
|
|
ティック・マークを描画するパスを定義します。これが指定されていない場合、ゲージはカスタム描画エリアでティック・マークを描画する場所を計算する必要があり、ゲージは |
|
|
複雑な |
例25-6に、ゲージのコンポーネントにカスタム形状を指定する場合に使用するサンプルSVGファイルを示します。
例25-6 ゲージのカスタム形状に使用するサンプルSVGファイル
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0">
<rect width="264.72726" height="179.18887" rx="8.2879562"
ry="10.368411" x="152.76225" y="202.13995"
style="fill:#c83737;fill-opacity:1;stroke:none"
id="gaugeFrame"/>
<rect width="263.09058" height="42.581127" rx="3.0565372"
ry="3.414634" x="155.11697" y="392.35468"
fill="#c83737"
id="lowerLabelFrame" />
<rect width="241.79999" height="120.13961"
x="164.2415" y="215.94714"
style="fill:#ffeeaa"
id="plotAreaBounds"/>
<rect width="74.516975" height="44.101883"
rx="2.6630435" ry="3.5365853"
x="247.883" y="325.4415"
style="fill:#ffd5d5;fill-opacity:1;stroke:none"
id="indicatorBase"/>
<rect width="6.0830183" height="98.849045" rx="2.6630435"
ry="2.2987804" x="282.86035" y="237.23772"
style="fill:#00aa00;fill-opacity:1;stroke:none"
id="indicator"/>
</svg>
ゲージのカスタム形状の指定に使用するSVGファイルを作成したら、そのファイルを指すcustomShapesPath属性を設定します。
カスタム形状ファイルを指定する手順:
構造ウィンドウで「dvt:gauge」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「外観」属性カテゴリで、CustomShapesPath属性に、カスタム形状ファイルへのパスを入力します。たとえば、customShapesPath="/path/customShapesFile.svg"のようになります。
使用可能なカスタム形状では、次のSVG機能がサポートされています。
変換
パス
基本的な形状
塗りつぶしとストローク・ペインティング
線形および放射状のグラデーション
JDeveloperのカスタム形状によってサポートされていないSVG機能には次のものがあります。
ユニット識別子: ユニット識別子がない場合は、すべての座標と長さを指定する必要があり、単位はピクセルとみなされます。特定の単位では使用されるディスプレイに基づいてサイズが異なるため、パーサーでユニット識別子はサポートされていません。たとえば、異なるディスプレイでは1インチに対応するピクセル数が異なる場合があります。この唯一の例外がグラデーション調整でパーセンテージとして指定できます。
テキスト: ゲージ上のすべてのテキストはデータとみなされ、タグまたはデータ・バインディングを使用して指定される必要があります。
ペイントの指定: サポートされているオプションはnone、6桁の16進数、およびグラデーションへの<uri>参照です。
塗りつぶしのプロパティ: fill-rule属性はサポートされていません。
ストロークのプロパティ: stroke-linecap、stroke-linejoin、stroke-miterlimit、stroke-disarrayおよびstroke-opacity属性はサポートされていません。
線形および放射状のグラデーション: gradientUnits、gradientTransform、spreadMethodおよびxlink:hrefはサポートされていません。また、放射状のグラデーションに関するr属性、fx属性およびfy属性はサポートされていません。
楕円弧および範囲外のパラメータ: rx、ryおよびx-axis-rotが小さすぎて解が得られない場合、正確に1つの解が得られるまで楕円を均等に拡大する必要があります。SVGパーサーはこれをサポートしていません。
一般的なエラー条件: SVG入力は適切な形式でエラーがないことが想定されています。SVGパーサーではエラー・チェックや形式の誤ったファイルに対するエラー回復は実行されません。また、ファイル内でエラーが発生すると解析が停止します。
ゲージへのカスタム形状指定機能以外にも、ゲージ・コンポーネントに使用できる事前作成のカスタム形状スタイルのセットがあります。使用可能なスタイルは次のとおりです。
立体的な円
完全な円
角丸矩形
図25-10に、カスタム形状スタイルを適用して表示されたダイアル・ゲージを示します。
ゲージにカスタム形状スタイルを適用する手順:
構造ウィンドウで「dvt:gauge」ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「外観」属性カテゴリで、CustomShapesPath属性ドロップダウン・リストからカスタム形状スタイルを選択します。
