| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
前 |
次 |
この章では、ADFゲージ・コンポーネントを使用してデータを表示する方法とゲージのカスタマイズ・オプションについて説明します。
この章では、次の項目について説明します。
ゲージのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。
ゲージはデータの問題点を示します。ゲージは通常、1つのデータ・ポイントをプロットし、そのポイントが許容範囲内か許容範囲外かを表します。1つのゲージ・セットに複数のゲージを表示する場合も多くあります。セット内のゲージは通常構成可能なレイアウトのグリッド状の形式で表示されます。
コンポーネント・ギャラリには、使用可能なゲージのカテゴリ、タイプおよび説明が表示され、ゲージの作成およびクイック・スタート・レイアウトの使用が視覚的にサポートされます。図25-1に、ゲージのコンポーネント・ギャラリを示します。
コンポーネント・ギャラリを使用してゲージ・コンポーネントをJSFページに挿入すると、ゲージのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例25-1に、図25-1のコンポーネント・ギャラリでクイック・スタート・レイアウトを選択したダイアル・ゲージ用にJSFページに挿入されたコードを示します。
例25-1 ゲージのサンプル・コード
<dvt:gauge id="gauge1" gaugeType="DIAL">
<dvt:gaugeBackground>
<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:gauge>
ゲージは、200 X 200ピクセルのデフォルト・サイズで表示されます。ゲージのサイズをカスタマイズしたり、様々なブラウザ・ウィンドウ・サイズに領域がぴったり合うように、動的サイズ変更を指定したりできます。水平または垂直に制限された領域(Webページのサイドバーなど)にゲージが表示される場合、ゲージは小さいイメージ・サイズで表示されます。機能は揃っていますが、イメージの小さい簡易表示になります。
Skyrosスキンが使用されている場合、デフォルトではゲージはHTML5イメージ形式を使用して表示されます。新しいアプリケーションでは、デフォルトでこのスキンが使用されます。また、ゲージをFlashまたはPortable Network Graphics (PNG)出力形式で表示することもできます。ゲージのイメージ形式の詳細は、第25.3.5項「ゲージのイメージ形式に関する必知事項」を参照してください。
ゲージ用のHTML5、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開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。
表形式データ: dvt:gaugeタグのtabularData属性を使用してCSV(カンマ区切りの値)データをゲージに使用できます。
簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用してゲージをJSFページに追加します。ページにゲージ・コンポーネントをドラッグ・アンド・ドロップすると、「ゲージの作成」ダイアログに使用可能なゲージ・タイプのカテゴリが説明とともに表示され、ゲージの作成を視覚的に支援します。ゲージのタイトルおよび凡例のクイックスタート・レイアウトも指定できます。図25-9に、ダイアル・ゲージ・タイプが選択された「ゲージの作成」ダイアログを示します。
ダイアログが完了して、ページにゲージが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、ゲージに追加の表示属性を構成できます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図25-10に、ゲージ・コンポーネントのvalue属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。 |
ページにゲージを追加する手順:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「ゲージ」パネルから「ゲージ」をページにドラッグ・アンド・ドロップし、コンポーネント・パレットに「ゲージの作成」ダイアログを開きます。
ダイアログを使用してゲージのカテゴリおよびタイプと、ゲージ・タイトル、凡例およびラベルの表示用クイック・スタート・レイアウトを選択します。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、ゲージまたはゲージ・セットの属性を表示します。ヘルプ・ボタンを使用して、gaugeコンポーネントの完全なタグ・ドキュメントを表示します。
「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
GaugeType: ゲージ・タイプのカテゴリを変更する場合は、ドロップダウン・リストを使用して、有効な値であるDIAL、LED、STATUSMETER、VERTICALSTATUSMETERのいずれかを選択します。
GaugeSetColumnCount、GaugeSetAlignmentおよびGaugeSetDirection: これらの属性の1つ以上を使用して、ゲージ・セット内のゲージのレイアウトを指定します。詳細は、第25.4.2項「ゲージ・セット内のゲージのレイアウトの決定方法」を参照してください。
「ゲージ・データ」セクションを開きます。次のフィールドの値を設定して、ゲージのデータ値を指定します。
Value: 単一ゲージの場合は、EL式を使用してデータ・モデルを指定します。指定できるのは、データ・コントロールの1つの属性か、DataModelの1つのインスタンスです。または、メトリック値をJava.lang.NumberオブジェクトまたはStringのいずれかとして設定します。
TabularData: ゲージ・セットの場合、表形式のデータ・セットをJava.util.Listオブジェクトとして指定します。詳細は、25.3.3項「表形式のデータを使用したゲージの作成方法」を参照してください。
MinValueおよびMaxValue: オプションで、ゲージ軸の最小値および最大値を設定します。指定しない場合、これらの値は自動的に設定されます。
「外観」セクションを開きます。次のフィールドの値を設定して、表示属性を指定します。
LedStyle: LEDゲージの形状を変更する場合は、ドロップダウン・リストを使用して、有効な値であるLS_DOT、LS_ARROW、LS_RECTANGLE、LS_TRIANGLEのいずれかを選択します。カスタム・イメージを指定する場合は、LS_CUSTOM値も使用できます。
ThresholdDialStyle: ダイアル・ゲージのしきい値のデフォルト・スタイル(TDS_SEGMENTS)を変更する場合は、ドロップダウン・リストを使用して、有効な値のTDS_PIE_FILL、TDS_RING_FILLのいずれかを選択します。
AngleExtent: ダイアル・ゲージで標準の220度の弧以外の角度でスイープする度数の範囲の指定に使用します。
CustomShapesPath: カスタム形状定義ファイルのパスの指定に使用します。詳細は、第25.6項「ゲージでのカスタム形状の使用」を参照してください。
ShortDesc: ゲージの説明を入力します。この説明は、スクリーン・リーダーのユーザーがアクセスします。
AnimationOnDisplay、AnimationOnDataChange、AnimationDuration (アニメーション・サブセクション): これらの属性の1つ以上を使用して、ゲージのアニメーション効果を設定します。詳細は、第25.5.4項「ゲージにアニメーションを使用する方法」を参照してください。
クライアントがHTML5をサポートしており、アプリケーションがデフォルトのSkyrosスキンを使用している場合、ゲージはHTML5イメージ形式でクライアントに表示されます。ゲージのイメージ形式の詳細は、第25.3.5項「ゲージのイメージ形式に関する必知事項」を参照してください。
表形式データからゲージを作成するプロセスのステップは次のとおりです。
ゲージのマネージドBeanのメソッドでのデータの格納。
マネージドBeanに格納されたデータを使用するゲージの作成。
ゲージ・コンポーネントのtabularData属性には、グリッドの作成やデータの移入にゲージで使用するメトリック値のリストを指定できます。tabularData属性では、メトリック値のみを指定できます。したがって、しきい値、最小値または最大値は、プロパティ・インスペクタを使用して指定する必要があります。
ゲージ・コンポーネントにはゲージの行と列が表示されます。列ラベルとして指定したテキストは、ゲージの上位ラベルに表示されます。行ラベルとして指定したテキストは、ゲージの下位ラベルに表示されます。
表形式データを含むリストは、ゲージに渡すデータ値ごとに3メンバーのObject配列で構成されます。各配列のメンバーは次のように編成される必要があります。
1つ目のメンバー(索引0)は、データ値のグリッドの列ラベルです。これは通常Stringです。
2つ目のメンバー(索引1)は、データ値のグリッドの行ラベルです。これは通常Stringです。
3つ目のメンバー(索引2)はデータ値で、通常Doubleです。
図25-11には、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[][]{
{20, 90, 135},
{50, 20, 80},
{130, 140, 150},
{70, 80, 90},
{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およびPNGなどのイメージ形式がサポートされています。使用されるイメージ形式は、アプリケーションの設定およびクライアント環境によって異なります。Skyrosスキンが使用されている場合、デフォルトではゲージはHTML5イメージ形式を使用して表示されます。新しいアプリケーションでは、デフォルトでこのスキンが使用されます。
アプリケーションがカスタム・スキンを使用している場合は、アプリケーションのweb.xmlファイルにパラメータoracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMATを追加することにより、アプリケーションがHTML5形式を使用するように構成できます。web.xmlのパラメータの詳細は、第A.2.3.24項「グラフとゲージのイメージ形式」を参照してください。スキニングとスタイルの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
指定したイメージ形式をクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash (Flash Playerが使用可能な場合)。
adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定すれば、アプリケーション全体にわたってFlashコンテンツの使用を無効にできます。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
Portable Network Graphics (PNG)出力形式。ゲージを印刷する場合、PNG出力形式も使用されます。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ポップアップのサポート
相互作用力
ゲージ・コンポーネントは、次の方法でカスタマイズできます。
ゲージ・タイプの変更
ゲージ・セットでのゲージのレイアウトの指定
ゲージ・サイズとスタイルの変更
しきい値の追加
数値とテキストの書式設定
N度のダイアル・ゲージの指定
ゲージ・ラベルのカスタマイズ
インジケータとティック・マークのカスタマイズ
ゲージの透明度の指定
dvt:gaugeタグのgaugeType属性を使用してゲージのタイプを変更できます。ゲージ・タイプは、ビジュアル・エディタのデフォルト・ゲージに反映されます。
ゲージのタイプの変更手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「ゲージ・タイプ」属性ドロップダウン・リストからゲージ・タイプを選択します。有効な値は、DIAL、LED、STATUSMETERまたはVERTICALSTATUSMETERです。
単一ゲージには、ゲージ・コンポーネントにバインドされている1行のデータが表示されます。ゲージ・セットでは、データ・コレクションの複数行のデータの各行が1つのゲージに表示されます。
dvt:gaugeタグの属性の値を指定すると、ゲージ・セット内のゲージの場所を指定できます。
ゲージ・セットでのゲージのレイアウトを指定する手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「共通」属性カテゴリを選択します。
ゲージ・セットに表示するゲージの列の数を決めるには、gaugeSetColumnCount属性の値を指定します。
ゼロに設定すると、すべてのゲージが1行に表示されます。正の整数で、ゲージが表示される列の数が決まります。デフォルトでは、レイアウトは自動的に決定されます。
列でのゲージの配置を決めるには、gaugeSetDirection属性の値を指定します。
「GSD_ACROSS」を選択した場合、ゲージのデフォルト・レイアウトが使用され、左から右、上から下にゲージが表示されます。「GSD_DOWN」を選択した場合、ゲージのレイアウトは、上から下、左から右になります。
ゲージ・セット内のゲージの位置合せを制御するには、gaugeSetAlignment属性の値を指定します。
この属性のデフォルトは「GSA_NONE」で、使用できる領域がゲージ・セットのゲージ間で均等に分割されます。他のオプションでは、使用可能な領域と、ゲージ・セット内で左から右、上から下に配置するために最適なゲージ・サイズが使用されます。ゲージ・セットの中央にゲージを配置する「GSA_CENTER」も選択できます。
ゲージは、200 X 200ピクセルのデフォルト・サイズで表示されます。ゲージのサイズをカスタマイズしたり、様々なブラウザ・ウィンドウ・サイズに領域がぴったり合うように、動的サイズ変更を指定したりできます。水平または垂直に制限された領域(Webページのサイドバーなど)にゲージが表示される場合、ゲージは小さいイメージ・サイズで表示されます。機能は揃っていますが、イメージの小さい簡易表示になります。
ゲージの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。ゲージのこれらの2つの側面は、ともにゲージのinlineStyle属性を使用するという点で関連性があります。
active、focus、hover、linkおよびvisitedなどのCSSスタイルを適用して、ゲージに使用できます。
dvt:gaugeタグの属性の値を指定すると、ゲージの初期サイズを指定できます。ゲージの動的サイズ変更を指定しない場合、初期サイズが、ゲージの唯一の表示サイズです。
ゲージが初めて表示される際のサイズを指定する手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、dvt:gaugeタグのInlineStyle属性に値を入力します。次に例を示します。
inlineStyle="width:200px;height:200px"
DynamicResize属性に値を入力すると、JSFページでコンテナのサイズが変更されたときにゲージのサイズが変更されるようにできます。この機能用に指定する値は、サイズの異なるブラウザ・ウィンドウの領域を使用するゲージ・コンポーネントの作成にも有用です。
ゲージの動的サイズ変更を有効にする手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「動作」属性カテゴリで、DynamicResize属性にDYNAMIC_SIZEを選択します。
InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナの50%の幅で200ピクセルの高さのゲージを作成するには、inlineStyle属性に"width:50%;height:200px;"という設定を使用します。
|
ベスト・プラクティスのヒント: 100%の幅を指定する場合は、 |
ゲージに使用するカスタム・スタイル・クラスを指定できます。ただし、幅と高さをinlineStyle属性で指定する必要があります。
ゲージにカスタム・スタイル・クラスを指定する手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「スタイル」属性カテゴリで、StyleClass属性に、このゲージに使用するCSSスタイル・クラスを入力します。
InlineStyle属性の幅と高さに、ピクセルの定数または相対的割合を入力します。
たとえば、コンテナの50%の幅で200ピクセルの高さのゲージを作成するには、inlineStyle属性に"width:50%;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:metricLabelまたはdvt:tickLabelノードを右クリックし、「プロパティに移動」を選択します。
メトリック値を値ではなく割合として表示する場合は、プロパティ・インスペクタでdvt:metricLabelタグのNumberType属性をNT_PERCENTに設定します。
メトリック・ラベルまたはティック・ラベルの数値に追加で書式を指定する場合は、次のようにします。
構造ウィンドウでdvt:metricLabelまたはdvt:tickLabelノードを右クリックし、「dvt:<type>Labelの中に挿入」→「数値の変換」と選択します。
プロパティ・インスペクタで、af:convertNumberタグの属性に値を指定し、その他の書式を指定します。
|
注意: メトリックまたはティック・ラベルの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子タグを使用して、ゲージ・メトリック・ラベルのフォント・サイズ、色、およびテキストが太字かイタリックかを指定できます。
ゲージ・メトリック・ラベルのテキストを書式設定する手順:
構造ウィンドウで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ノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、position属性に対して、ラベルの位置を選択します。
text属性に、ラベルに表示するテキストを入力します。
上位ラベルやメトリック・ラベルの位置をカスタマイズする場合も同様の手順を使用してください。
上位ラベルと下位ラベルのフレームの塗りつぶしの色と枠の色を制御できます。ゲージの子タグdvt:upperLabelFrameおよびdvt:lowerLabelFrameは、これらのラベルのフレームとして機能します。
上のラベル・フレームの色と枠をカスタマイズする手順:
構造ウィンドウで、ゲージのノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「上のラベル・フレーム」と選択します。
プロパティ・インスペクタで、borderColor属性とfillColor属性の色を選択します。
同様の手順を使用して、ゲージ・ノードの子としてdvt:bottomLabelタグで、下位ラベル・フレームの色と枠をカスタマイズします。
ゲージのインジケータ、およびティック・マークの位置とラベルのカスタマイズに使用できるオプションが多数あります。
ゲージのインジケータのカスタマイズには、ゲージの次の子タグを使用できます。
dvt:indicator: ゲージ・インジケータの針またはステータス・メーター・バーの外観上のプロパティを指定します。次の属性があります。
borderColor: インジケータの枠の色を指定します。
fillColor: インジケータの塗りつぶしの色を指定します。
type: インジケータの種類(線、塗りつぶしまたは針)を指定します。
useThresholdFillColor: インジケータが指すしきい値領域の色が、インジケータの指定した色をオーバーライドするかどうかを指定します。
dvt:indicatorBar: ステータス・メーター・ゲージの内側の矩形(バー)の塗りつぶしのプロパティが含まれます。
dvt:indicatorBase: ダイアル・ゲージの線形または針形のインジケータの円形ベースの塗りつぶしプロパティが含まれます。
ゲージ・インジケータの外観をカスタマイズする手順:
構造ウィンドウでdvt:indicatorノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、属性に値を指定します。
ステータス・メーター・ゲージの内側のバーの塗りつぶし属性をカスタマイズする場合は、構造ウィンドウでdvt:gaugeノードを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「インジケータ・バー」と選択します。
プロパティ・インスペクタで、属性に値を指定します。
ダイアル・ゲージの線のスタイル・インジケータの円形ベースをカスタマイズする場合は、構造ウィンドウでdvt:indicatorBaseノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、属性に値を指定します。
ゲージのティック・マークとティック・ラベルをカスタマイズするには、ゲージの次の子タグを使用できます。
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:tickMarkノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、属性に値を指定します。
構造ウィンドウでdvt:tickLabelノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、属性に値を指定します。
ゲージの各箇所に関連するゲージ子タグにborderColorおよびfillColor属性を設定することで、ゲージの様々な箇所で透明色を表示するよう指定できます。これらの色プロパティには、6桁または8桁のRGB16進数値を指定できます。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:indicatorタグの子であるdvt:specialEffectsタグを1つ作成します。dvt:specialEffectsタグのfillTypeプロパティをFT_GRADIENTに設定する必要もあります。
その後、オプションでサブコンポーネントの塗りつぶし色の変化の割合を制御する場合は、コンポーネントの塗りつぶしの色と変化の割合の制御に必要な数のdvt:gradientStopStyleタグを追加します。このdvt:gradientStopStyleタグは、1つのdvt:specialEffectsタグの子タグとして入力する必要があります。
グラデーション特殊効果をゲージ・インジケータに追加するには:
構造ウィンドウでdvt:indicatorノードを右クリックし、「dvt:indicatorの中に挿入」→「特殊効果」と選択します。
プロパティ・インスペクタを使用して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は、ユーザーがインジケータをクリックすると、インジケータのツールチップが「インジケータ」から「インジケータがクリックされました」に変わり、ユーザーが実行時にマウスをラベルに移動すると、ゲージのメトリック・ラベルのツールチップに「メトリック・ラベル」と表示されるダイアル・ゲージのコードを示しています。
例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-12に、各しきい値レベルでデータの変化をアニメーションで表示するダイアル・インジケータの付いたダイアル・ゲージを示します。
ゲージにアニメーション効果を設定する属性は次のとおりです。
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開発者ガイド』の「アクティブ・データ・サービスの使用」の章を参照してください。
データ・バインドされたゲージを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
アクティブ・データを表示するゲージを構成する手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「ページ定義に移動」を選択します。
プロパティ・インスペクタで、「拡張」セクションを開き、ChangeEventPolicy属性に「プッシュ」を選択します。
ゲージ・コンポーネントでアクティブ・データが表示されるように構成したら、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-13に、カスタム形状スタイルを適用して表示されたダイアル・ゲージを示します。
ゲージにカスタム形状スタイルを適用する手順:
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「外観」属性カテゴリで、CustomShapesPath属性ドロップダウン・リストからカスタム形状スタイルを選択します。
