| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
前 |
次 |
この章では、データ・バインドされた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>
ゲージは、200 X 200ピクセルのデフォルト・サイズで表示されます。ブラウザ・ウィンドウの各種サイズのエリアに合うように、ゲージのサイズをカスタマイズしたり、動的なサイズ変更を指定したりすることができます。ゲージが縦または横に制限された領域で表示される場合(Webページのサイドバーなど)、ゲージは小さなイメージ・サイズで表示されます。小さなイメージは、十分な機能がありますが、簡略化されて表示されます。
デフォルトでは、ゲージ・コンポーネントの属性imageFormatで指定するように、ゲージはFlash Playerを使用して表示されます。あるいは、プラグインがクライアント・マシンで許可されない場合や双方向ロケールでは、ポータブル・ネットワーク・グラフィックス(Portable Network Graphics: PNG)出力形式を使用してゲージを表示することもできます。PNG出力形式を使用する場合、静的レンダリングは十分にサポートされますが、次の特定のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ドラッグ・アンド・ドロップ・ジェスチャー
円グラフのスライスのインタラクティブ動作
参照オブジェクトのホバー動作
ポップアップのサポート
選択項目
系列のロールオーバー動作
時間セレクタ
ズームとスクロール(クライアント側の実況スクロール)
ゲージのイメージ形式は、FlashとPNGのどちらの場合も、双方向ロケールをサポートします。双方向文字、ラベル位置、凡例表示、ゲージ・セット表示などのテキスト文字列がサポートされます。
ゲージ・コンポーネントでは、次のタイプのゲージがサポートされています。
ダイアル:220度の弧に沿ってメトリックを示します。これはデフォルトのゲージ・タイプです。図25-2に、プラズマ・ハード・ディスク・テレビの在庫レベルが許容範囲内にあることを示すダイアル・ゲージを示します。
ステータス・メーター:矩形のバーに沿ってタスクの進度または測定値のレベルを示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。図25-3に、プラズマ・ハード・ディスク・テレビの在庫レベルを、ステータス・メーター・ゲージを使用して示します。
ステータス・メーター(垂直): 垂直の矩形のバーに沿ってタスクの進度または測定値のレベルを示します。図25-4に、プラズマ・ハード・ディスク・テレビの在庫レベルを、垂直のステータス・メーター・ゲージを使用して示します。
LED(発行ダイオード): キー・パフォーマンス・インジケータ(KPI)などの指標を図示します。LEDゲージには、よい(上矢印)、普通(左または右矢印)、悪い(下矢印)を示す矢印など、数種のグラフィクスが使用できます。図25-5に、プラズマ・ハード・ディスク・テレビの在庫レベルを、LEDバルブ・インジケータを使用して示します。
図25-6に、同じ在庫レベルを、LED矢印を使用して示します。
ダイアル・ゲージおよびステータス・メーター・ゲージの場合、ユーザーが描画エリア、インジケータまたはしきい値領域にマウスを合せると、コンテキスト情報のツールチップが自動で表示されます。図25-7に、ダイアル・ゲージのインジケータ・ツールチップを示します。
ゲージの用語は、ゲージおよびゲージ・セットのカスタマイズ可能な様々な点を示します。ゲージ・コンポーネントには、このカスタマイズ用のオプションを提供する約20の子タグが含まれています。
カスタマイズ可能なゲージの箇所は次のとおりです。
全体的なゲージのカスタマイズ:このグループの各項目はゲージの子タグで表されます。
ゲージ背景色:ゲージの背景の枠の色と塗りつぶしの色を制御します。
ゲージ・セット背景色:ゲージ・セットの背景の枠の色と塗りつぶしの色を制御します。
ゲージ・フレーム:ダイアル・ゲージの背景のフレームのことです。
描画エリア:ゲージ自体の内側の領域を表します。
インジケータ:ダイアル・ゲージにプロットされた値を指します。通常、線または矢印の形をしています。
インジケータ・バー:ステータス・メーター・ゲージの内側の矩形。
インジケータ・ベース:ダイアル・ゲージの線形または針形のインジケータの円形ベース。
しきい値セット:ゲージのメトリックのしきい値セクションを指定します。ゲージのしきい値はいくつでも作成できます。
データ値:これには、メトリック(ゲージがプロットする実際の値)、最小値、最大値、しきい値などがあります。25.2項「ゲージのデータ要件の理解」で、これらの値について説明します。
ラベル:ゲージでは次の要素がサポートされ、各要素は別個の子タグです。
下位ラベル: ゲージの下部または内部に表示されるオプションのラベルのことです。デフォルトでは、データ行のラベルが表示されます。
下のラベル・フレーム:下位ラベルを含むフレームの背景と枠の色を制御します。メトリック・ラベルも下のラベル・フレーム(下位ラベルの右)に表示されます。
メトリック・ラベル:メトリックの値を示し、ゲージにテキストでプロットされます。
ティック・マーク:ゲージの値軸上のマークのことです。一定の間隔で最小値から最大値までを示し、しきい値も示します。ティック・マークは、ラベルや副増分を含む主増分を指定できます。
ティック・ラベル: ゲージの主ティック・マークを示すために表示されるテキストを表示します。
上位ラベル: ゲージの上部または内部に表示されるラベルのことです。デフォルトでは、ゲージの上に、ラベルと組み合せてタイトル・セパレータが使用されます。デフォルトでは、データ列のラベルが表示されます。
上のラベル・フレーム:上位ラベルを囲むフレームの背景と枠のことです。このフレームの枠の色と塗りつぶしの色を指定できます。このフレームを使用する場合は、デフォルトのタイトル・セパレータを無効にします。
凡例:ゲージでは、ゲージの凡例の領域、テキストおよびタイトルがサポートされ、各々別の子タグです。
形状属性セット:ゲージは、子要素の相互作用プロパティをサポートします。たとえば、ゲージの描画エリアのaltテキストは、実行時に該当のエリアにマウスを置いたときのツールチップとして表示できます。詳細は、25.5.3項「ゲージへの相互作用の追加方法」を参照してください。
ゲージには次の種類のデータ値を使用できます。
メトリック:ゲージがプロットする値。この値は、プロパティ・インスペクタで「ゲージ・データ」属性カテゴリの静的データとして指定できます。データ・コントロールまたはdvt:gaugeタグのtabularData属性を使用して指定することもできます。これは、ゲージで唯一の必須データです。指定されるメトリック値の数は、ゲージ・セットに1つのゲージを表示するか、一連のゲージを表示するかに影響します。
最小および最大:ゲージの値軸で最小点と最大点を示すオプションの値。この値は、データ・コレクションからの動的データとして指定できます。プロパティ・インスペクタでdvt:gaugeタグの「ゲージ・データ」属性カテゴリの静的データとしても指定できます。詳細は、25.4.4項「グラフへのしきい値の追加方法」を参照してください。
しきい値:データ・コレクションからの動的データとして指定可能なオプションの値で、ゲージの値軸で許容範囲を示します。プロパティ・インスペクタでゲージのしきい値タグを使用して、静的データとしても指定できます。詳細は、25.4.4項「グラフへのしきい値の追加方法」を参照してください。
必須データ要素はメトリック値のみです。その他のデータ値はオプションです。
次のいずれの方法でも、ゲージ・コンポーネントにデータを指定できます。
ADFデータ・コントロール: ADFデータ・コントロール・パネルからデータ・コレクションをドラッグ・アンド・ドロップして、データ・バインドされたゲージを宣言的に作成します。図25-8に、作成するゲージにメトリック値と、オプションの最小値、最大値およびしきい値を構成する「ゲージの作成」ダイアログ・ボックスを示します。
詳細は、『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-9には、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からの表形式データを使用してゲージを作成する手順:
コンポーネント・パレットの「ADFデータ視覚化」ページで、「ゲージ」をページにドラッグ・アンド・ドロップします。
コンポーネント・ギャラリで、作成するゲージのカテゴリ、タイプおよびクイック・スタート・レイアウト・スタイルを選択します。
プロパティ・インスペクタの「ゲージ・データ」カテゴリで、tabularData属性のドロップダウン・メニューから、「式ビルダー」を選択します。
「式ビルダー」ダイアログで検索ボックスを使用してマネージドBeanを検索します。
マネージドBeanのノードを展開し、表形式データのリストを作成するメソッドを選択します。
「OK」をクリックします。
式が作成されます。
たとえば、マネージドBeanの名前がsampleGaugeで、表形式データのリストを作成するメソッドの名前がgetGaugeDataの場合、dvt:gaugeタグのtabularData属性の値として#{sampleGauge.gaugeData}というコードが式ビルダーで生成されます。
tabularData属性で参照されるリストから取得したデータを持つゲージ・タグを作成した場合、次のような結果になります。
ゲージがtabularData属性の設定で生成されます。このゲージのその他の属性の設定にはデフォルト値が使用されます。
プロパティ・インスペクタでgaugeType属性の設定をDIAL、LED、STATUSMETERまたはVERTICALSTATUSMETERに変更できます。
デフォルトでは、ゲージは次のイメージ形式を使用して表示されます。
サポートされる場合は、HTML5が使用されます。
それ以外では、Flash Playerが可能な場合はFlashが使用されます。HTML5が十分にサポートされないブラウザの場合、Flashも使用されます。
それ以外は、プラグインがクライアント・マシンで許可されない場合や双方向ロケールでは、ポータブル・ネットワーク・グラフィックス(Portable Network Graphics: PNG)出力形式などがかわりに使用されます。グラフを印刷する場合は、PNG出力形式も使用されます。PNG出力形式を使用する場合、静的レンダリングは十分にサポートされますが、次の特定のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ポップアップのサポート
相互作用力
web.xmlコンテキスト・パラメータ、oracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMATを使用してデフォルトの出力形式を変更できます。ブラウザでHTML5が十分にサポートされない場合、FlashまたはPNGイメージがかわりに使用されます。詳細は、A.2.3.22項「グラフとゲージのイメージ形式」を参照してください。
アプリケーション全体でFlashコンテンツの使用を無効にするには、adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定します。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
ゲージ・コンポーネントは、次の方法でカスタマイズできます。
ゲージ・タイプの変更
ゲージ・セットでのゲージのレイアウトの指定
ゲージ・サイズとスタイルの変更
しきい値の追加
数値とテキストの書式設定
N度のダイアル・ゲージの指定
ゲージ・ラベルのカスタマイズ
インジケータとティック・マークのカスタマイズ
ゲージの透明度の指定
dvt:gaugeタグのgaugeType属性を使用してゲージのタイプを変更できます。ゲージ・タイプは、ビジュアル・エディタのデフォルト・ゲージに反映されます。
ゲージのタイプの変更手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「ゲージ・タイプ」属性ドロップダウン・リストからゲージ・タイプを選択します。有効な値は、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を繰り返して、ゲージの各しきい値を最小値から最大値まで作成します。
ゲージには、任意の数のしきい値を追加できます。ただし、矢印ゲージや三角形LEDゲージは、それらが指し示す3つの方向のみのしきい値をサポートします。
ゲージの場合、dvt:metricLabelおよびdvt:tickLabelタグには、数値の書式設定が必要です。
メトリック・ラベル・タグには、numberType属性があり、値自体を表示するか、値が表す割合を表示するかを指定できます。数値の書式設定としては、これで十分な場合もあります。
af:convertNumberタグを使用して、メトリック・ラベルの数値の書式を指定することもできます。たとえば、af:convertNumberタグで、データ値を通貨として書式設定したり、正または負の記号を表示できます。
ゲージ・メトリック・ラベルの数値を書式設定する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→metricLabelと選択します。
メトリック値を値ではなく、割合として表示する場合、dvt:metricLabelタグのNumberType属性を「NT_PERCENT」に設定します。
メトリック・ラベルの数値にその他の書式を指定する場合は、次のようにします。
metricLabelノードを右クリックし、「dvt:metricLabelの中に挿入」→「数値の変換」と選択します。
プロパティ・インスペクタで、af:convertNumberタグの属性に値を指定し、その他の書式を指定します。
ゲージのティック・ラベルの数値を書式設定する手順は、メトリック・ラベルの数値を書式設定する手順と似ています。dvt:tickLabelタグをゲージの子タグとして挿入する点が異なります。
|
注意: メトリックまたはティック・ラベルのnumberType属性をパーセント(NT_PERCENT)に設定する場合、子タグ |
ゲージにメトリック・ラベルと数値の書式設定を追加すると、XMLコードが生成されます。例25-3に、生成されるXMLコードのサンプルを示します。
コンパクトで明確な表示を実現するために、ゲージでは、メトリック・ラベルとティック・ラベルに表示する値のスケールと精度が自動的に決定されます。たとえば、値40,000の書式は40Kに設定され、0.230546は、小数点第2位までの0.23と表示されます。
自動書式設定は、af:convertNumberを指定しても行われます。af:convertNumber子タグをサポートするゲージ・タグには、scalingやautoPrecision属性があり、これらの属性を使用して、グラフの自動数値書式設定を制御できます。これらの属性は、デフォルトでscaling="auto"およびautoPrecision="on"に設定されています。af:convertNumberで指定される小数の桁数設定(minFractionDigits、maxFractionDigitsまたはpatternなど)は、autoPrecisionをoffに設定する場合を除き、無視されます。
テキストの書式は、ゲージのタイトルとラベルを表す次のゲージ・タグのいずれかで設定できます。
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タグの属性に値を指定し、必要な書式を指定します。
gaugeFontタグを使用してゲージ・メトリック・ラベルのテキストを書式設定する場合、XMLコードが生成されます。例25-4に、生成されるXMLコードのサンプルを示します。
ダイアル・ゲージに標準の220度の弧以外の角度でスイープするゲージを指定できます。angleExtent属性を設定して、ゲージの角度の範囲を指定します。
たとえば、270度のダイアル・ゲージを作成するには、angleExtent属性を<dvt:gauge angleExtent="270"/>のように設定します。
ゲージ・ラベルの位置を制御できます。ゲージ・ラベル・フレームの色と枠も制御できます。
適切なラベル・タグのposition属性を使用して、ラベルをゲージの外側に表示するか、内側に表示するかを指定できます。次のラベル・タグは、dvt:gaugeの子タグとして使用できます。
dvt:bottomLabel
dvt:metricLabel
dvt:topLabel
ゲージ・ラベルの位置を制御する手順は、ゲージ・ラベルを表す適切な子タグを挿入する点を除き同様です。たとえば、dvt:bottomLabel子タグを使用して、ゲージを配置し、ラベル・テキストを指定できます。
下位ラベルの位置を指定する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「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: 主ティック・マークおよび副ティック・マークの表示、間隔および色を指定します。主ティック・マークにのみ値ラベルを入れることができます。次の属性があります。
majorIncrementおよびminorIncrement: 2つの主ティック・マークと2つの副ティック・マークの間の距離をそれぞれ設定します。いずれかの属性の値がゼロ未満の場合、ティック・マークは表示されません。
majorTickColorおよびminorTickColor: 主ティック・マークと副ティック・マークの16進数の色を設定します。
content: ゲージ・セット内のどこにティック・マークを表示するかを指定します。有効な値は、空白またはカンマで区切られた次のような組合せです。
TC_INCREMENTS: 増分ごとのティック・マークを表示します。
TC_MAJOR_TICK: 最小値、最大値および増分値のティック・マークを表示します。
TC_MIN_MAX: 最小値および最大値のティック・マークを表示します。
TC_METRIC: 実際のメトリック値のティック・マークを表示します。
TC_NONE: ティック・マークを表示しません。
TC_THRESHOLD: しきい値のティック・マークを表示します。
dvt:tickLabel: ラベルを持つ主ティック・マークを指定し、ラベルの位置(ゲージの内側か外側か)とティック・ラベルに表示される数値の書式を指定します。
ゲージのティック・マークとティック・ラベルをカスタマイズする手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「ティック・マーク」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「ティック・ラベル」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
デフォルトで、ダイアル・ゲージにはゲージがゲージ・フレーム内に完全に含まれる場合に見やすくするため、内側のティック・ラベルが表示されます。ティック・ラベルは描画エリア内にあるため、ティック・ラベルの長さはこの領域に合うように制限される必要があります。ゲージは外側のラベルを使用してカスタマイズできます。
ゲージで内側のティック・ラベルを作成する手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「ティック・マーク」と選択します。
プロパティ・インスペクタで、Position属性にTLP_POSITIONを選択します。
ゲージの各箇所に関連するゲージ子タグにborderColorおよびfillColor属性を設定することで、ゲージの様々な箇所で透明色を表示するよう指定できます。これらの色プロパティは、6または8 RGBの16進数の値を受け入れます。8桁の値を使用する場合、最初の2桁が透明色を表します。たとえば、値00FFFFFFを使用して透明色を設定できます。
borderColorまたはfillColor属性をサポートするすべてのゲージ子タグを透明色に設定できます。次のリストは、透明色をサポートするゲージの箇所の例です。
ゲージの背景: dvt:gaugeBackgroundタグを使用します。
ゲージ・フレーム: dvt:gaugeFrameタグを使用します。
ゲージの描画エリア: dvt:gaugePlotAreaタグを使用します。
ゲージの凡例エリア: dvt:gaugeLegendAreaタグを使用します。
これらのゲージの機能は、一般的な機能ほど頻繁には使用されません。これらの特殊な機能には、ゲージの特定箇所へのグラデーション効果の適用、ゲージへの相互作用の追加、ゲージへのアニメーションの使用、ゲージでのアクティブ・データのサポートの利用などがあります。
グラデーションは、オブジェクトの色が段階的に変わる特殊効果です。グラデーションの各色は、ストップで表します。最初のストップはストップ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を繰り返します。
グラデーションの塗りつぶしをゲージの背景に追加し、2つのストップを指定する場合、XMLコードが生成されます。例25-5に、生成される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>
dvt:shapeAttributesSetタグにラップされたdvt:shapeAttributesタグを1つ以上使用して、ゲージのサブコンポーネントで相互作用のプロパティを指定できます。相互作用は、特定のサブコンポーネントとHTML属性またはJavaScriptイベントとの間の接続を提供します。各dvt:shapeAttributesタグが機能するには、そのタグにサブコンポーネントおよび少なくとも1つの属性が含まれている必要があります。
たとえば、例25-6に、ユーザーがインジケータをクリックすると、インジケータのツールチップが「Indicator」から「Indicator is Clicked」に変わり、実行時に該当ラベルの上にマウス・ポインタを置くと、ゲージ・メトリック・ラベルのツールチップに「Metric Label」と表示されるダイアル・ゲージのコードを示します。
例25-6 Gauge shapeAttributesタグのサンプル・コード
<dvt:gauge >
<dvt:shapeAttributesSet>
<dvt:shapeAttributes component="GAUGE_INDICATOR" alt="Indicator" onClick="document.title="onClick";"/>
<dvt:shapeAttributes component="GAUGE_METRICLABEL" alt="Metric Label" onMouseMove="document.title="onMouseMove";"/>
</dvt:shapeAttributesSet>
</dvt:gauge>
バッキングBeanのメソッドを使用して、属性の値を戻すこともできます。例25-7に、バッキングBeanを参照するサンプル・コードを示し、例25-8に、バッキングBeanのサンプル・コードを示します。
例25-7 バッキングBeanを参照するゲージのshapeAttributesタグ
<dvt:gauge >
<dvt:shapeAttributesSet>
<dvt:shapeAttributes component="GAUGE_INDICATOR" alt="#{sampleGauge.alt}" onClick="#{sampleGauge.onClick}"/>
<dvt:shapeAttributes component="GAUGE_METRICLABEL" alt="#{sampleGauge.alt}" onMouseMove="#{sampleGauge.onMouseMove}"/>
</dvt:shapeAttributesSet>
</dvt:gauge>
例25-8 バッキングBeanのサンプル・コード
public String alt(oracle.dss.dataView.ComponentHandle handle) {
return handle.getName(); }
public String onClick(oracle.dss.dataView.ComponentHandle handle) {
return ("document.title=\"onClick\";"); }
public String onMouseMove(oracle.dss.dataView.ComponentHandle handle) {
return ("document.title=\"onMouseMove\";"); }
次のゲージ・サブコンポーネントは、dvt:shapeAttributesタグをサポートします。
GAUGE_BOTTOMLABEL: ゲージの下のラベル
GAUGE_INDICATOR: ゲージのインジケータ
GAUGE_LEGENDAREA: ゲージの凡例エリア
GAUGE_LEGENDTEXT: 凡例エリアのテキスト・ラベル
GAUGE_METRICLABEL: メトリック値を示すラベル
GAUGE_TOPLABEL: ゲージの上のラベル
GAUGE_PLOTAREA: ゲージの内側のエリア
GAUGE_THRESHOLD: ゲージのしきい値エリア
たとえば、データ値が増減すると、ダイアル・ゲージ・インジケータの色が変わるなどのように、ゲージ(ゲージ・セットではなく)にアニメーションを使用してデータの変化を表示できます。図25-10に、各しきい値レベルでデータの変化をアニメーションで表示するダイアル・インジケータの付いたダイアル・ゲージを示します。
ゲージにアニメーション効果を設定する属性は次のとおりです。
animationOnDisplay: 適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。
NONE: (デフォルト)初期レンダリング効果は表示されません。
AUTO: グラフ・タイプまたはゲージ・タイプに基づいて自動的に選択された初期レンダリング効果が適用されます。
animationOnDataChange: 適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値は次のとおりです。
NONE: データ変化のアニメーション効果は適用されません。
AUTO: (デフォルト)アクティブ・データ・サービス(ADS)のデータ変化のアニメーション・イベントが適用されます。ADSの詳細は、25.5.5項「アクティブ・データによるゲージへのアニメーションの使用方法」を参照してください。
ON: 部分ページ・リフレッシュ(PPR)のデータ変化のアニメーション・イベントが適用されます。この設定を使用して、あらかじめ決められた間隔で変更のデータ・ソースをポーリングするようにアプリケーションを構成します。
アクティブ・データ・サービス(ADS)を使用したアニメーション効果は、ダイアル・メーター・ゲージ・タイプおよびステータス・メーター・ゲージ・タイプに追加できます。ADSでは、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがデータ・ソースで更新されたデータを表示できるようにする必要があります。
作業を始める前に、次のようにします。
アクティブ・データ・サービスを使用するには、次の手順を実行する必要があります。
データの変更時にイベントを公開するデータ・ソースの保持
これらのイベントと、そのサービスを表す関連データ・コントロールに対応するビジネス・サービスの作成
ADSとアプリケーションの構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アクティブ・データ・サービスの使用」の章を参照してください。
データ・バインドされたゲージを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
アクティブ・データを表示するゲージを構成する手順:
構造ウィンドウでゲージのノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「ID」フィールドに一意の値を入力します。
識別子を選択しないと、1つ自動的に入力されます。
そのページの関連ページ定義ファイルを開きます。
ページ定義ファイルの構造ウィンドウで、コンポーネントにバインドされた属性を表すノードを選択します。プロパティ・インスペクタで、ChangeEventPolicy属性にPushを選択します。
ゲージ・コンポーネントでアクティブ・データが表示されるように構成したら、25.5.4項「ゲージへのアニメーションの使用方法」で定義した属性を使用してアニメーション効果を設定します。
ゲージのカスタム形状を作成するには、ゲージのグラフィックを直接指定できます。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-9に、ゲージのコンポーネントにカスタム形状を指定する場合に使用するサンプルSVGファイルを示します。
例25-9 ゲージのカスタム形状に使用するサンプル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-11に、カスタム形状スタイルを適用して表示されたダイアル・ゲージを示します。
ゲージにカスタム形状スタイルを適用する手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「外観」属性カテゴリで、CustomShapesPath属性ドロップダウン・リストからカスタム形状スタイルを選択します。
