| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
前 |
次 |
この章では、ADFデータ視覚化gaugeコンポーネントを使用して、ゲージでデータを表示する方法について説明します。アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。
この章では、次の項目について説明します。
ゲージは、売上高、在庫レベル、温度または速度など量を示すための計測器です。ゲージには通常1つのデータ値が表示され、多くの場合グラフより効果的です。ゲージでは、色を使用して許容範囲または非許容範囲などの状態情報を表示できます。たとえば、ゲージ値軸では、赤、黄、緑の色の範囲を示して、低、中、高の状態を表す場合があります。多くのデータ値を一目で比較する必要がある場合、表のセル内や、縦、横あるいはグリッドのレイアウトで、ゲージ・セットとして複数のゲージを表示することができます。
|
ベスト・プラクティスのヒント: しきい値のテキスト値や現在値など、複数のデータ値が必要な場合は、リストや表コンポーネントの方がゲージより適していることがあります。 |
ゲージ・コンポーネントには、ダイアル、ステータス・メーター、垂直ステータス・メーターおよびLEDの4種類のゲージ・タイプがあります。どのゲージ・タイプでも、タイトル、下部ラベル、データ・ラベルおよび凡例を表示できます。
ゲージをどのように使用し、どのようにカスタマイズできるかを理解するには、次の要素と機能について復習すると役に立ちます。
表示要素には、次のものがあります。
ゲージおよびゲージ・セットの背景
ゲージ・フレーム
ダイアル・ゲージ描画エリア
インジケータとインジケータ・バー
ゲージの上部、下部およびメトリック・ラベル
しきい値とラベル
凡例
ティック・マークとティック・ラベル
ツールチップ: ユーザーが描画エリア、インジケータまたはしきい値リージョンにカーソルを合せると、文脈に即した情報のツールチップが自動的に表示されます。図23-1に、ダイアル・ゲージのインジケータ・ツールチップを示します。
ゲージは通常、1つのデータ・ポイントを表示するために使用されます。ゲージ・コンポーネントでは、次のタイプのゲージがサポートされています。
ダイアル: 構成可能な弧の値軸に沿ってメトリックを示します。これはデフォルトのゲージ・タイプです。ダイアル・ゲージは、単一のゲージ、しきい値付きのゲージ、またはダイアル・ゲージのセットとして表示できます。
図23-2に、許容範囲内にあるプラズマ・ハイビジョン・テレビの在庫レベルを示すしきい値付きダイアル・ゲージを示します。
ステータス・メーター: 矩形の水平バーに沿ってタスクの進捗状況または測定値のレベルを示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。ステータス・メーター・ゲージは、単一のゲージ、しきい値付きゲージまたはステータス・メーター・ゲージのセットとして表示できます。
図23-3に、プラズマ・ハード・ディスク・テレビの在庫レベルを、ステータス・メーター・ゲージを使用して示します。
ステータス・メーター(垂直): 垂直の矩形のバーに沿ってタスクの進捗状況または測定値のレベルを示します。垂直ステータス・メータ・ゲージは、単一のゲージ、しきい値付きゲージまたはステータス・メーター・ゲージのセットとして表示できます。
図23-4に、プラズマ・ハード・ディスク・テレビの在庫レベルを、垂直のステータス・メーター・ゲージを使用して示します。
LED(発行ダイオード): キー・パフォーマンス・インジケータ(KPI)などの測定値をグラフィカルに表します。LEDゲージには、ステータスを示すために色を使用する円形または矩形、カラー・インジケータに加えて、よい(上向き)、普通(左または右向き)または悪い(下向き)の状態を示す三角形または矢印など、数種のグラフィックスが使用できます。LEDゲージは、ゲージ・セットとしても表示できます。
図23-5に、ステータスを示すために色を使用するLEDバブル・インジケータを使用してプラズマ・ハイビジョン・テレビの在庫レベルを示します。
図23-6に、LED矢印を使用した同じ在庫レベルを示します。
すべてのゲージ・タイプは、ビルトイン・グリッド・レイアウトにゲージ・セットとして表示できます。関連アイテムのグループの個々の値を表示する場合、ゲージ・セットが便利です。図23-7に、3都市での業績測定値を比較するゲージ・セットを示します。
水平ステータス・メーターとLEDゲージは、ユーザーがラベル、リンク、アイコンなどの関連情報とともに見て比較できる表セル内での表示に適しています。図23-8に、各国の人口密度を、2010年の最高人口とともに比較する表を示します。
ゲージ・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんゲージ・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。ゲージ・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、ゲージをリフレッシュできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーが実行時にゲージの表示方法を変更できるようになっている場合、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: ゲージ・コンポーネントをアクセス可能にできます。詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、ゲージ・コンポーネントの外観をカスタマイズできます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされたゲージを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。
|
注意: 最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。 |
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、21.2項「データ視覚化コンポーネントの共通機能」を参照してください。
ゲージでは、次の種類のデータ値を表します。
メトリック:ゲージがプロットする値。この値は、プロパティ・インスペクタで「ゲージ・データ」属性カテゴリの静的データとして指定できます。データ・コントロールまたはgaugeタグのtabularData属性を使用して指定することもできます。これは、ゲージで唯一の必須データです。指定されるメトリック値の数は、ゲージ・セットに1つのゲージを表示するか、一連のゲージを表示するかに影響します。
最小および最大:ゲージの値軸で最小点と最大点を示すオプションの値。この値は、データ・コレクションからの動的データとして指定できます。プロパティ・インスペクタでgaugeタグの「ゲージ・データ」属性カテゴリの静的データとしても指定できます。詳細は、23.3.1項「ゲージしきい値の構成方法」を参照してください。
しきい値:データ・コレクションからの動的データとして指定可能なオプションの値で、ゲージの値軸で許容範囲を示します。プロパティ・インスペクタでゲージのしきい値タグを使用して、静的データとしても指定できます。詳細は、23.3.1項「ゲージしきい値の構成方法」を参照してください。
gaugeコンポーネントのプロパティはゲージを作成するのに十分ですが、子コンポーネントまたはサポートされているファセットを追加し構成することで、ゲージまたはゲージ・セットの表示および動作をさらにカスタマイズできます。接頭辞dvt:は、各ゲージ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。ゲージの子コンポーネントとサポートされているファセットを次のエリアで構成できます。
ゲージ表示要素:
ゲージの背景(gaugeBackground)およびゲージ・セットの背景(gaugeSetBackground): ゲージまたはゲージ・セットの後ろの境界のあるエリア。
ゲージ・フレーム(gaugeFrame): ダイアル・ゲージの描画エリアを囲む装飾的なフレームのことです。
描画エリア(gaugePlotArea): ゲージのメトリック値のグラフィカルな表現を示します。
インジケータ(indicator): ダイアル・ゲージにプロットされた値を示し、通常、線または矢印の形をしています。
インジケータ・バー(indicatorBar): ステータス・メーター・ゲージの内側の矩形。
インジケータ・ベース(indicatorBase): ダイアル・ゲージの線形または針形のインジケータの円形ベース。
ゲージ・ラベル:
上部ラベル(topLabel): ゲージの上または内側に表示されるゲージ・タイトルを示します。このラベルの上部ラベル・フレーム(upperLabelFrame)を構成して、境界の色と塗りつぶりの色を指定できます。このフレームを使用する場合は、デフォルトのタイトル・セパレータを無効にします。
下部ラベル(bottomLabel): ゲージの下または内側に表示されるオプションのラベルのことです。デフォルトでは、データ行のラベルを表示します。このラベルの下部ラベル・フレーム(lowerLabelFrame)を構成して、境界の色と塗りつぶりの色を指定できます。
メトリック・ラベル(metricLabel): ゲージにテキストでプロットされるメトリックの値を示します。
しきい値と凡例: しきい値セット(thresholdSet)を使用して、ゲージのメトリックのしきい値セクション(しきい値)を指定します。ゲージのしきい値はいくつでも作成できます。
凡例には、各しきい値の色と名前または範囲とともに、しきい値セットの説明が表示されます。凡例要素には、凡例エリア(gaugeLegendArea)、テキスト(gaugeLegendText)およびタイトル(gaugeLegendTitle)があります。
ティック・マーク(tickMark): ゲージの値軸上のマークのことです。一定の間隔で最小値から最大値までを示し、しきい値も示します。ティック・マークにより、主増分(ティック・マーク・ラベル(tickLabel)を含む場合もある)または副増分を指定できます。
コンテキスト・メニュー(bodyContextMenu facet): このファセットを使用して、コンポーネント内の非選択可能オブジェクトを右クリックすると表示されるコンテキスト・メニューを含む1つのaf:popupコンポーネントをサポートします。コンテキスト・メニューを表示するには、af:popupにaf:menuが含まれている必要があります。
データ値: カテゴリおよび数値データ値を標準のADFコンバータにより書式設定します。詳細は、23.5項「ゲージの数値データ値の書式設定」を参照してください。
相互作用: 形状属性セット(shapeAttributesSet)を使用して、ゲージの子要素の動作プロパティを構成します。たとえば、ゲージの描画エリアのaltテキストは、ユーザーが実行時にそのエリアにマウスを移動したときにツールチップとして表示できます。詳細は、23.6.3項「ゲージへの相互作用の追加方法」を参照してください。
カスタム形状: ゲージ用に事前に作成された一連のカスタム・スタイルを使用するか、customShapesPath属性を設定して出力用に使用されるベクトル・グラフィックス・ファイルを指定しできます。詳細は、23.7項「ゲージのカスタム形状の使用方法」を参照してください。
イメージ形式: ゲージでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。デフォルトでは、ゲージはFlashで表示されますが、デフォルトのイメージ形式を変更できます。アプリケーションでFlashを無効にしたり、クライアント・プラットフォームで動作をカスタマイズすることもできます。詳細は、23.2.5項「ゲージのイメージ形式について」を参照してください。
簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用してゲージをJSFページに追加します。ページにゲージ・コンポーネントをドラッグ・アンド・ドロップすると、コンポーネント・ギャラリに使用可能なゲージ・タイプのカテゴリが説明とともに表示され、ゲージの作成時に視覚的に支援します。ゲージのタイトルおよび凡例のクイックスタート・レイアウトも指定できます。図23-9に、ダイアル・ゲージ・タイプが選択されたゲージのコンポーネント・ギャラリを示します。
ダイアログが完了して、ページにゲージが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、ゲージに追加の表示属性を構成できます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図23-10に、ゲージ・コンポーネントのvalue属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。 |
始める前に:
ゲージの属性やゲージの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、23.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにゲージを追加する手順:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「ゲージ」パネルから「ゲージ」をページにドラッグ・アンド・ドロップし、コンポーネント・ギャラリに「ゲージの作成」ダイアログを開きます。
ダイアログを使用してゲージのカテゴリおよびタイプと、ゲージ・タイトル、凡例およびラベルの表示用クイック・スタート・レイアウトを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、ゲージまたはゲージ・セットの属性を表示します。ヘルプ・ボタンを使用して、gaugeコンポーネントの完全なタグ・ドキュメントを表示します。
「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
GaugeType: コンポーネント・ギャラリで選択されているゲージ・タイプのカテゴリを変更する場合は、ドロップダウン・リストを使用して、有効な値のDIAL、LED、STATUSMETERまたはVERTICALSTATUSMETERのいずれかを選択します。
GaugeSetColumnCount、GaugeSetAlignmentおよびGaugeSetDirection: これらの属性の1つ以上を使用して、ゲージ・セット内のゲージのレイアウトを指定します。詳細は、23.3.4項「ゲージ・セット内のゲージのレイアウトの指定方法」を参照してください。
「ゲージ・データ」セクションを開きます。次のフィールドの値を設定して、ゲージのデータ値を指定します。
Value: 単一ゲージの場合、EL式を使用してデータ・モデル(DataModelのインスタンス)を指定します。または、メトリック値をJava.lang.NumberオブジェクトまたはStringのいずれかとして設定します。
TabularData: ゲージ・セットの場合、表形式のデータ・セットをJava.util.Listオブジェクトとして指定します。詳細は、23.2.4項「表形式のデータを使用したゲージの作成方法」を参照してください。
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: カスタム形状定義ファイルのパスの指定に使用します。詳細は、23.7項「ゲージのカスタム形状の使用方法」を参照してください。
ShortDesc: ゲージの説明を入力します。この説明は、スクリーン・リーダーのユーザーがアクセスします。
AnimationOnDisplay、AnimationOnDataChange、AnimationDuration (アニメーション・サブセクション): これらの属性の1つ以上を使用して、ゲージのアニメーション効果を設定します。詳細は、23.6.4項「ゲージへのアニメーションの使用」を参照してください。
デフォルトでは、ゲージはFlashのイメージ形式で表示されます。デフォルトのイメージ形式を変更したり、Flashコンテンツに使用を制限する場合、23.2.5項「ゲージのイメージ形式について」を参照してください。
コンポーネント・ギャラリを使用してゲージ・コンポーネントをJSFページに挿入すると、ゲージのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例23-1に、図23-9のコンポーネント・ギャラリでクイック・スタート・レイアウトを選択したダイアル・ゲージ用にJSFページに挿入されたコードを示します。
例23-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>
ゲージ・コンポーネントにデータのグリッドが使用される場合、ゲージ・セットが作成されます。ゲージ・コンポーネントのtabularData属性には、グリッドの作成やデータの移入にゲージで使用する値のリストを指定できます。表形式のデータを使用してゲージを作成するには、ゲージのマネージドBeanのメソッドにデータを格納し、ゲージ・コンポーネントのtabularData属性を使用してデータを参照する必要があります。
tabularData属性でメトリック値のみを指定すると、グリッド内の各値は個別のゲージによって表されます。この場合、しきい値、最小値または最大値は、プロパティ・インスペクタを使用して指定する必要があります。
たとえば、図23-11の表には、Quota、Sales、Margin、CostsおよびUnitsの5つの列と、London、ParisおよびNew Yorkの3つの行があります。このデータから、各行に5つのゲージのあるゲージ・セットが生成され、売上げなどの値を3都市で比較できます。
マネージドBeanでは、表形式のデータのリストの構造は、ゲージに渡すデータ値ごとに3メンバーのObject配列で構成されます。各配列のメンバーは次のように編成される必要があります。
1つ目のメンバー(索引0)は、データ値のグリッドの列ラベルです。これは通常Stringです。
2つ目のメンバー(索引1)は、データ値のグリッドの行ラベルです。これは通常Stringです。
3つ目のメンバー(索引2)はデータ値で、通常Doubleです。
例23-2に、図23-11に表示された3都市の年間実績を比較するゲージに必要な表形式データのリストを作成するマネージドBean内のコードを示します。
例23-2 年間実績の表形式データのリストを作成するためのマネージドBean
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属性でデータの列または行を設定します。
たとえば、図23-12のデータでは、2都市のメトリック値と最小値、最大値およびしきい値が提供されています。このデータにより、希望する仕様によって販売実績を比較する2つのゲージのセットが作成されます。
例23-3に、図23-12に表示された2都市の販売実績を仕様により比較するゲージに必要な表形式データのリストを作成するマネージドBean内のコードを示します。
例23-3 販売実績の表形式データのリストを作成するためのマネージドBean
CommonGauge gauge = new CommonGauge();
Object[] specs = { DataSpecification.METRIC, DataSpecification.MINIMUM, DataSpecification.MAXIMUM, DataSpecification.THRESHOLD, DataSpecification.THRESHOLD };
String[] colLabels = new String[] { "Sales", "Min", "Max", "Quota", "Target" };
String[] rowLabels = new String[] { "Boston", "Chicago" };
double[][] values = new double[][] { {40, 60}, {0,0}, {100,80}, {30,35}, {50,70} };
List gaugeData = new ArrayList();
for (int c = 0; c < colLabels.length; c++) {
for (int r = 0; r < rowLabels.length; r++) {
gaugeData.add(new Object[] { colLabels[c], rowLabels[r], new Double(values[c][r]) });
}
}
gauge.setTabularData(specs, gaugeData);
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
すでに表形式データのリストを作成するマネージドBeanが存在している必要があります。ない場合は、3.6項「マネージドBeanの作成と使用」の指示に従ってください。
ページにすでにゲージ・セットが存在している必要があります。ない場合は、この章の指示に従ってゲージ・セットを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
マネージドBeanからの表形式データを使用してゲージ・セットを作成する手順:
構造ウィンドウで、「dvt:gauge」コンポーネントを選択します。
プロパティ・インスペクタで、「ゲージ・データ」セクションを開きます。
TabularData属性のメニューから、「式ビルダー」を選択します。
「式ビルダー」ダイアログで検索ボックスを使用してゲージのマネージドBeanを検索します。
マネージドBeanのノードを展開し、表形式データのリストを作成するメソッドを選択します。
「OK」をクリックします。
式が作成されます。
たとえば、マネージドBeanの名前がsampleGaugeで、表形式データのリストを作成するメソッドの名前がgetGaugeDataの場合、gaugeコンポーネントのtabularData属性の値として#{sampleGauge.gaugeData}というコードが式ビルダーで生成されます。
ゲージでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。使用されるイメージ形式は、アプリケーションの設定およびクライアント環境によって異なります。デフォルトでは、ゲージはFlashで表示されますが、次のパラメータを設定して、特定のイメージ形式を使用するようにアプリケーションを構成できます。
oracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMAT
HTML5のイメージ形式を使用するには、このパラメータをweb.xmlファイルに追加し、これをHTML5に設定します。詳細は、A.2.3.26項「グラフとゲージのイメージ形式」を参照してください。
flash-player-usage
adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定すれば、アプリケーション全体にわたってFlashコンテンツの使用を無効にできます。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
指定したイメージ形式がクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash(Flash Playerが使用可能な場合)。
Portable Network Graphics (PNG)出力形式。ゲージを印刷する場合、PNG出力形式も使用されます。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ポップアップのサポート
相互作用力
ブラウザでURIがサポートされ、イメージが十分に小さい場合、パフォーマンスを改善するには、データURIを使用するインラインPNGイメージが使用されます。ただし、gaugeコンポーネントでimageSource属性を使用してアプリケーションで格納されたイメージのパスを指定すると、これが尊重され、インライン・イメージは送信されません。
表のセル内にゲージを表示して、ユーザーがゲージを関連情報と一緒に見て比較できるようにすることができます。ADF tableコンポーネントの直下の子は、columnコンポーネントであることが必要です。表示されるそれぞれの列コンポーネントは、表の個別の列として表示されます。列コンポーネントには、コンテンツやイメージの表示、またはその他の機能の提供に使用されるコンポーネントが含まれます。
各列の子コンポーネントは、その列の各行のデータを表示します。列では、子コンポーネントは行ごとには作成されませんが、表では各行のレンダリングにスタンプ設定機能が使用されます。各子には、行ごとに一度スタンプが設定され、これがすべての行に対して繰り返されます。各行にスタンプが設定されると、現在行のデータが、EL式を使用して特定可能なプロパティにコピーされます。このプロパティに使用する名前を、表のvarプロパティを使用して指定します。表のレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。
例23-4に、ADF表コンポーネント内にゲージを表示するためのサンプル・コードを示します。
例23-4 表の列にスタンプ設定されたゲージ・コンポーネント
<af:table summary="table" value="#{gaugeData.gaugeTableData}" var="testvar"
rowBandingInterval="0" id="t1" columnStretching="last"
inlineStyle="height:400px" styleClass="AFStretchWidth">
<af:column rowHeader="true" sortable="false" headerText="Country"
align="center" id="c1" width="120"
inlineStyle="font-weight:bold; font-size: 12px;">
<af:outputText value="#{testvar.name}" id="ot1"/>
</af:column>
<af:column sortable="true" headerText="Density (1/km^2)"
align="center" id="c2" width="300"
sortProperty="density">
<dvt:gauge shortDesc="Gauge" id="gauge77" gaugeType="STATUSMETER"
binding="#{editor.component}" dynamicResize="DYNAMIC_SIZE"
value="#{testvar.density}"
inlineStyle="height:22px" styleClass="AFStretchWidth"
minValue="0.0" maxValue="1200.0">
<dvt:indicatorBar/>
<dvt:thresholdSet>
<dvt:threshold fillColor="#00aa00" thresholdMaxValue="300"/>
<dvt:threshold fillColor="#ffcc00" thresholdMaxValue="700"/>
<dvt:threshold fillColor="#cc2255"/>
</dvt:thresholdSet>
<dvt:topLabel position="LP_NONE"/>
<dvt:bottomLabel position="LP_NONE"/>
<dvt:metricLabel position="LP_NONE"/>
</dvt:gauge>
</af:column>
</af:table>
表のセルでゲージを構成する場合、次のガイドラインを使用して、操作性を改善します。
垂直のステータス・メーター・ゲージは、表の行に十分な高さが必要なため、表のセルでの使用はお薦めできません。
読みやすさを維持しながらも、ゲージはできるだけ小さくします。
スペースを最大限に利用するには、ゲージ・タイトルや下部ラベルを使用するかわりに、表の列や行のヘッダーを使用してゲージを説明します。
1列または1行につき1タイプのゲージのみを使用し、同じ軸値としきい値を使用します。
列には水平のステータス・メーターを、行または列にはダイアル・ゲージおよびLEDゲージを表示します。
表示するゲージが多すぎるとユーザーはスクロールしないと全部を見られなくなるので避けます。
しきい値、ラベル、インジケータ、ティック・マーク、ゲージ・セットのレイアウトなど、ゲージの表示要素をカスタマイズできます。
しきい値は、特定の範囲の値を強調表示するゲージの数値データ値です。しきい値はゲージの最小値と最大値の間の値である必要があります。しきい値で識別された範囲は、他の範囲と異なる色で塗りつぶされます。
ゲージがデータ・バインドされている場合、ゲージのデータ・コレクションでしきい値の動的値を指定できます。しきい値の動的な値の使用方法の詳細は、参照してください。
ゲージを作成したら、ゲージ内にthreshold子コンポーネントをいくつでもラップできるthresholdSet子コンポーネントを構成することで、静的しきい値も指定できます。しきい値がデータ・コレクションとthresholdコンポーネントの両方で指定された場合、ゲージはthresholdコンポーネントの値を受け入れます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: コンポーネント・ギャラリのしきい値付きのゲージ・タイプを使用してゲージを作成する場合、dvt:thresholdSetコンポーネントとdvt:thresholdコンポーネントの子が、構造ウィンドウでdvt:gaugeコンポーネントに自動的に追加されます。 |
静的しきい値をゲージに追加する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「しきい値セット」を選択します。
「dvt:thresholdSet」コンポーネントを右クリックし、「dvt:thresholdSetの中に挿入」→「しきい値」を選択します。
プロパティ・インスペクタで次の属性を設定します。
ThresholdMaxValue: 構成中のしきい値セクションの最大値を指定します。有効な値は整数です。
|
注意: 最終しきい値の場合、最終しきい値のThresholdMaxValue属性に入力した値に関係なく、ゲージの最大値がしきい値の最大値として使用されます。 |
FillColorおよびBorderColor: オプションで、構成中のしきい値セクションに塗りつぶしの色と枠線の色をそれぞれRGB値で指定します。色を不透明から透明に変更することもできます。詳細は、23.4.2項「ゲージ要素の透明度の指定」を参照してください。
Text: オプションで、このしきい値を識別するために凡例で表示されるテキストを指定します。テキストをテキスト・リソースにバインドすることもできます。詳細は、23.4.3項「ゲージ・テキストの書式設定方法およびテキスト・リソースの使用方法」を参照してください。
ステップ2とステップ3を繰り返して、ゲージの各しきい値を最小値から最大値まで作成します。
|
注意: ゲージには任意の数のしきい値を追加できます。ただし、矢印および三角のLEDゲージでは、指し示す3方向に対してのみしきい値をサポートします。 |
デフォルトでは、ゲージに、子コンポーネントmetricLabel、topLabelおよびbottomLabelを使用して、メトリック・ラベルとオプションの上部ラベルおよび下部ラベルが表示されます。各ラベルの表示および配置のカスタマイズや、オプションの上部および下部ゲージ・ラベルのフレームの塗りつぶしや枠線の色の制御ができます。
上部または下部ラベルで表されるカテゴリ・データ値も、attributeFormatタグとADF Facesコンバータ・タグを使用して、パーセントの書式設定、数値の位取り、小数部の桁の制御、記号の配置などのカスタマイズができます。詳細は、23.5.1項「ゲージの数値データ値の書式設定方法」を参照してください。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、ゲージの子ラベル・コンポーネントが |
ゲージ・ラベルをカスタマイズする手順:
構造ウィンドウで、構成するゲージ・ラベル・コンポーネント(dvt:metricLabel、dvt:topLabelまたはdvt:bottomLabel)を選択します。
プロパティ・インスペクタで次の属性を設定します。
Position: ゲージ・ラベルの位置(ある場合)の指定に使用します。有効な値は、次のとおりです。
LP_NONE: ラベルは表示されません。
LP_INSIDE_GAUGE: ラベルはゲージの描画エリア内に表示されます。ラベルはゲージの水平方向に中央揃えされます。この値に設定すると、上部および下部ラベルは描画エリア内で垂直方向にも中央揃えされます。LEDゲージに適した選択です。
LP_INSIDE_GAUGE_RIGHTおよびLP_INSIDE_GAUGE_LEFT: メトリック・ラベルは、描画エリアの右または左に表示されます。
LP_ABOVE_GAUGE: 上部ラベルのデフォルト値です。ゲージの上にラベルを表示します。
LP_BELOW_GAUGE: 下部ラベルのデフォルト値です。ゲージの下にラベルを表示します。下部ラベルとメトリック・ラベルの両方の位置をこの値に設定した場合、どちらのラベルもゲージの下に表示されます。ただし、下位ラベルはメトリック・ラベルの上に表示されます。
LP_WITH_BOTTOM_GAUGE: メトリック・ラベルのデフォルト値です。ラベルを下部ラベルの横に表示します。
Text: 上部または下部ラベルに表示されるテキスト。属性メニューで、ダイアログに対して「テキスト・リソースの選択」を選択して、テキストをアプリケーション・テキスト・リソースに関連付けます。詳細は、23.4.3項「ゲージ・テキストの書式設定方法およびテキスト・リソースの使用方法」を参照してください。
NumberType、ScalingおよびAutoPrecision: メトリック・ラベルに対してのみ使用可能です。これらの属性を使用して、ゲージでの数値データ値の表示を構成します。詳細は、23.5.2項「自動位取りおよび精度について」を参照してください。
ゲージ・ラベルで使用するテキスト・フォントを構成する場合は、次のようにします。
構成ウィンドウで構成するゲージの子ラベル・コンポーネント(dvt:metricLabel、dvt:topLabelまたはdvt:bottomLabel)を右クリックし、「label componentの中に挿入」→「フォント」を選択します。
プロパティ・インスペクタで、フォントの属性を設定します。詳細は、23.4.3項「ゲージ・テキストの書式設定方法およびテキスト・リソースの使用方法」を参照してください。
上部または下部ゲージ・ラベルの周りのフレームを構成する場合は、次のようにします。
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「dvt:gaugeの中に挿入」→「上のラベル・フレーム」または「下のラベル・フレーム」と選択します。
プロパティ・インスペクタで、構成中のラベル・フレームの「FillColor」および「BorderColor」属性にRGB値を指定します。色を不透明から透明に変更することもできます。詳細は、23.4.2項「ゲージ要素の透明度の指定」を参照してください。
ゲージでは、グラフィックを使用して正確なゲージ値を示します。デフォルトでは、ゲージに子コンポーネントindicatorを使用してダイアル・ゲージの線が表示され、子コンポーネントindicatorBarを使用してステータス・メーターまたは垂直ステータス・メーター・ゲージ内にバーが表示されます。子コンポーネントindicatorBaseは、ダイアル・ゲージのすべてのインジケータの円形ベースの塗りつぶしプロパティを設定するために使用されます。ゲージ・インジケータの外観はカスタマイズできます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、ゲージの子インジケータ・コンポーネントが、コンポーネント・ギャラリで選択したゲージ・タイプに基づき、 |
ゲージ・インジケータの外観をカスタマイズする手順:
ダイアル・ゲージ・インジケータの場合は、次のようにします。
構造ウィンドウで、「dvt:indicator」コンポーネントを選択します。
プロパティ・インスペクタで次の属性を設定します。
Type: インジケータの種類(線(デフォルト)、塗りつぶしまたは針)を指定します。
BorderColor: インジケータの枠の色を指定します。
FillColor: インジケータの塗りつぶしの色を指定します。
UseThresholdFillColor: インジケータが指すしきい値領域の色が、インジケータの指定した色をオーバーライドするかどうかを指定します。
構造ウィンドウで「dvt:indicatorBase」コンポーネントを選択します。
プロパティ・インスペクタで次の属性を設定します。
Rendered: インジケータの種類(線(デフォルト)、塗りつぶしまたは針)を指定します。
BorderColor: インジケータの枠の色を指定します。
FillColor: インジケータの塗りつぶしの色を指定します。
ステータス・メーターおよび垂直ステータス・メーター・ゲージの場合は、次のようにします。
構造ウィンドウで「dvt:indicatorBar」コンポーネントを選択します。
プロパティ・インスペクタで次の属性を設定します。
BorderColor: インジケータの枠の色を指定します。
FillColor: インジケータの塗りつぶしの色を指定します。
|
注意: インジケータ・バーが指すしきい値領域の色がインジケータの指定した色をオーバーライドするように指定する場合、ゲージに |
ティック・マークは、ダイアル、ステータス・メーターおよび垂直ステータス・メーター・ゲージのゲージ値軸に沿って表示される増分マークです。LEDゲージにはティック・マークはありません。デフォルトでは、主および副ティック・マークの表示、スペース、色を指定するゲージの子のtickMarkコンポーネントを使用して、ゲージにティック・マークが表示されます。
ゲージの子のtickLabelコンポーネントでは、主ティック・ラベルを指定し、ラベルの位置(ゲージの内側か外側か)とティック・ラベルに表示される数値の書式を指定します。副ティック・マークにはラベルは付けられません。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、ゲージの子のティック・マークおよびティック・マーク・ラベル・コンポーネントが、コンポーネント・ギャラリでの選択に基づき、 |
ゲージのティック・マークとティック・ラベルをカスタマイズする手順:
構造ウィンドウで、「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」コンポーネントを選択します。
プロパティ・インスペクタで、次の属性の値を設定します。
Position: デフォルトで、ダイアル・ゲージにはゲージがゲージ・フレーム内に完全に含まれる場合に見やすくするため、内側のティック・ラベルが表示されます。ティック・ラベルは描画エリア内にあるため、ティック・ラベルの長さはこの領域に合うように制限される必要があります。この属性の値をデフォルトのTLP_INTERIORからTLP_EXTERIORに設定することで、外側のラベルを使用するようにゲージをカスタマイズできます。
Content: ゲージ・セット内のどこにティック・ラベルを表示するかを指定します。有効値は、スペースまたはカンマで区切られた次の値の任意の組合せです。
TC_INCREMENTS: 増分ごとのティック・ラベルを表示します。
TC_MAJOR_TICK: 最小値、最大値および増分値のティック・ラベルを表示します。
TC_MIN_MAX: 最小値および最大値のティック・ラベルを表示します。
TC_METRIC: 実際のメトリック値のティック・ラベルを表示します。
TC_NONE: ティック・ラベルを表示しません。
TC_THRESHOLD: しきい値のティック・ラベルを表示します。
NumberType、ScalingおよびAutoPrecision: メトリック・ラベルに対してのみ使用可能です。これらの属性を使用して、ゲージでの数値データ値の表示を構成します。詳細は、23.5.1項「ゲージの数値データ値の書式設定方法」を参照してください。
単一ゲージには、ゲージ・コンポーネントにバインドされている1行のデータが表示されます。ゲージ・セットでは、データ・コレクションの複数行のデータの各行が1つのゲージに表示されます。
gaugeコンポーネントの属性の値を指定すると、ゲージ・セット内のゲージの場所を指定できます。
始める前に:
ゲージの属性やゲージの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージ・セットが存在している必要があります。ない場合は、この章の指示に従ってゲージ・セットを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージ・セットでのゲージのレイアウトを指定する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
GaugeSetColumnCount: ゲージ・セットに表示されるゲージの列数を指定します。
ゼロに設定すると、すべてのゲージが1行に表示されます。正の整数で、ゲージが表示される列の数が決まります。-1を設定すると、列の数がデータ・ソースから自動的に決定されます。
GaugeSetDirection: ドロップダウン・リストを使用して、列内のゲージの配置の値を選択します。
「GSD_ACROSS」を選択した場合、ゲージのデフォルト・レイアウトが使用され、左から右、上から下にゲージが表示されます。「GSD_DOWN」を選択した場合、ゲージのレイアウトは、上から下、左から右になります。
GaugeSetAlignment: ドロップダウン・リストを使用して、ゲージ・セット内のゲージの配置の値を選択します。
この属性のデフォルトは「GSA_NONE」で、使用できる領域がゲージ・セットのゲージ間で均等に分割されます。他のオプションでは、使用可能な領域と、ゲージ・セット内で左から右、上から下に配置するために最適なゲージ・サイズが使用されます。ゲージ・セットの中央にゲージを配置する「GSA_CENTER」も選択できます。
ゲージ・セットの表示を構成する場合、次のガイドラインを使用して、操作性を改善します。
ゲージ・セット内の個々のゲージにタイトルまたは軸がない場合、データ・セットの名前および測定単位(「2010年の人口(百万)」など)を表示するゲージ・セットの上のラベルを指定します。
しきい値が定義されている場合、凡例を含めます。詳細は、23.3.1項「ゲージしきい値の構成方法」を参照してください。
表示するゲージが多すぎるとユーザーはスクロールしないとすべてのゲージを見られなくなるので避けます。
初期サイズまたはゲージを変更するためにゲージのスタイルをカスタマイズしたり、ゲージの表示領域にぴったり合うように動的サイズ変更を指定したり、スタイル要素を適用したりできます。テキストの書式設定およびテキスト・リソース、ゲージ内の透明度も使用できます。
ゲージは、200 X 200ピクセルのデフォルト・サイズで表示されます。ゲージのサイズをカスタマイズしたり、様々なブラウザ・ウィンドウ・サイズに領域がぴったり合うように、動的サイズ変更を指定したりできます。水平または垂直に制限された領域(Webページのサイドバーなど)にゲージが表示される場合、ゲージは小さいイメージ・サイズで表示されます。機能は揃っていますが、イメージの小さい簡易表示になります。
ゲージの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。ゲージのこれらの2つの側面は、ともにゲージのinlineStyle属性を使用するという点で関連性があります。
active、focus、hover、linkおよびvisitedなどのCSSスタイルを適用して、ゲージに使用できます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのサイズを指定する手順:
構造ウィンドウで、「dvt:gauge」コンポーネントを選択します。
プロパティ・インスペクタで、「スタイル」セクションを開きます。「InlineStyle」属性でゲージの初期サイズを指定します。ゲージの動的サイズ変更を指定しない場合、初期サイズが、ゲージの唯一の表示サイズです。たとえば、次のようになります。
width:200px;height:200px
ゲージの動的サイズ変更を指定する場合、固定数のピクセル、または幅と高さの両方の相対的パーセントを入力できます。たとえば、コンテナの50%の幅で200ピクセルの高さのゲージを作成するには、InlineStyle属性に次のように設定します。
width:50%;height:200px
|
ベスト・プラクティスのヒント:
|
ゲージに動的サイズ変更を指定する場合、「動作」セクションを開きます。「DynamicResize」属性のドロップダウン・リストから、「DYNAMIC_SIZE」を選択します。
ゲージにCSSスタイルを適用する手順:
構造ウィンドウで、「dvt:gauge」コンポーネントを選択します。
プロパティ・インスペクタで、「スタイル」セクションを開きます。「StyleClass」属性メニューから、「編集」を選択し、プロパティ・エディタ・ダイアログを使用して、ゲージに適用するCSSスタイルを選択します。
ゲージの様々な要素がデフォルトの不透明な色のかわりに透明な色を表示するように、それらの要素に関連するゲージの子コンポーネントでborderColor属性およびfillColor属性を設定することで指定できます。これらの色プロパティには、6桁または8桁のRGB16進数値を指定できます。8桁値を使用する場合、最初の2桁が透明度を表します。たとえば、00FFFFFFの値を使用して透明度を設定できます。
borderColor属性またはfillColor属性をサポートするゲージの子コンポーネントならば、透明に設定できます。透明度をサポートするゲージの子コンポーネントの例は、次のとおりです。
gaugeBackground
gaugeFrame
gaugePlotArea
gaugeLegendArea
ゲージ内のタイトルやラベルを表す次のゲージの子コンポーネントのいずれに対しても、gaugeFontコンポーネントを子として使用して、ゲージ内のテキストの書式を設定できます。
bottomLabel
metricLabel
gaugeLegendText
gaugeLegendTitle
tickLabel
topLabel
gaugeFontコンポーネントの属性により、ゲージの子要素に対して次のフォント属性を指定できます。
name: フォント名(San Serifなど)を指定します。
size: フォント・サイズをピクセル単位で(11など)指定します。
color: フォントの色を指定します。この色プロパティには、6桁または8桁のRGB16進数値を指定できます。8桁値を使用する場合、最初の2桁が透明度を表します。たとえば、00FFFFFFの値を使用して透明度を設定できます。
bold: フォントが太字かどうかを指定します。デフォルト値はFALSEです。
italic: テキストがイタリックかどうかを指定します。デフォルト値はFALSEです。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、タイトルまたはラベルのゲージの子コンポーネントが、コンポーネント・ギャラリでの選択に基づき、 |
ゲージ・タイトルまたはラベル・コンポーネントのテキスト・フォントを指定する手順:
構造ウィンドウでタイトルまたはラベルのゲージの子コンポーネント(dvt:metricLabelなど)を右クリックし、「dvt:metricLabelの中に挿入」→「フォント」を選択します。
そのコンポーネントが使用できない場合は、「dvt:gauge」コンポーネントを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→ゲージの子のタイトルまたはラベル・コンポーネントを選択します。
プロパティ・インスペクタで、1つ以上のdvt:gaugeFontコンポーネント属性の値を設定します。ヘルプ・ボタンを使用して、dvt:gaugeFontコンポーネントの完全なタグ・ドキュメントを表示します。
カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、ゲージ・コンポーネントのフォント属性も設定できます。ゲージ・コンポーネントで使用フォントを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
JDeveloperは、抽象クラスjava.util.ResourceBundleを使用してロケール固有のリソースを提供し、DVTコンポーネントをローカライズしやすいようにサポートします。ゲージでタイトルおよびラベルを表すそれらのゲージの子コンポーネントに対して、アプリケーション・リソース・バンドルで参照されるテキスト・リソースを関連付けることができます。詳細は、第29章「ページの国際化およびローカライズ」を参照してください。
ゲージ・タイトルまたはラベル・コンポーネントのテキスト・リソースを指定する手順:
構造ウィンドウで、タイトルまたはラベルのゲージの子コンポーネント(dvt:metricLabelなど)を選択します。
プロパティ・インスペクタの「text」属性メニューで、「テキスト・リソースの選択」を選択して、「テキスト・リソースの選択」ダイアログを開きます。
ダイアログを使用して、コンポーネント・テキストをテキスト・リソースに関連付けます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
metricLabel、tickLabelおよびgaugeLgendTextを含むゲージの子コンポーネントにより、ゲージの数値データ値が表示されます。各コンポーネントには、numberType属性があり、値自体を表示するか、値が表す割合を表示するかを指定できます。数値の書式設定としては、これで十分な場合もあります。
ゲージ・メトリックまたはティック・ラベル値の書式をさらに設定する場合は、ADF Faces標準コンバータaf:convertNumberを使用できます。たとえば、値を通貨として表示したり、特定の小数設定を表示したりできます。
ゲージで表示されるメトリックは数値データ値です。これらの値には、特定の書式設定のルールを適用できます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、構成可能なデータ値を表示するゲージの子コンポーネントが、コンポーネント・ギャラリでの選択に基づき、 |
ゲージの数値データ値の書式を設定する手順:
構造ウィンドウで、構成するデータ値(metricLabel、tickLabelまたはgaugeLegendText)を表示するゲージの子コンポーネントを選択します。
そのコンポーネントが使用できない場合は、「dvt:gauge」コンポーネントを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→(metricLabel、tickLabelまたはgaugeLegendText)を選択します。
プロパティ・インスペクタで、データ値を値としてではなくパーセンテージとして表示する場合、コンポーネントの「NumberType」属性を「NT_PERCENT」に設定します。
ゲージ・メトリックまたはティック・ラベルで表示されるデータ値に追加の書式設定を指定する場合は、次のようにします。
構造ウィンドウで「dvt:metricLabel」または「dvt:tickLabel」を右クリックし、「(dvt:metricLabelまたはdvt:tickLabel)の中に挿入」→「数値の変換」を選択します。
プロパティ・インスペクタで、「af:convertNumber」コンポーネントの属性の値を指定して、追加の書式設定を行います。ヘルプ・ボタンを使用して、af:convertNumberコンポーネントの完全なタグ・ドキュメントを表示します。
|
注意: メトリックまたはティック・ラベルの |
コンパクトできれいな表示を実現するために、ゲージでは、メトリック・ラベルおよびティック・ラベルに表示される値の位取りおよび精度が自動的に決まります。たとえば、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に設定されていないかぎり無視されます。
ゲージの特定部分へのグラデーション効果の適用、ゲージへの相互作用の追加、ゲージへのアニメーションの使用、ゲージでのアクティブ・データのサポートなどの特殊機能をゲージに追加できます。
グラデーションは、オブジェクトの色が段階的に変わる特殊効果です。グラデーションの各色は、ストップで表します。最初のストップはストップ0、2番目はストップ1のようになります。特殊効果をサポートするゲージの子コンポーネントに、特殊効果のストップの数を指定する必要があります。
ゲージの次の子コンポーネントにグラデーション特殊効果を定義できます。
gaugeBackground
gaugeSetBackground
gaugePlotArea
gaugeFrame
gaugeLegendArea
lowerLabelFrame
upperLabelFrame
indicator
indicatorBar
indicatorBase
threshold
特殊効果を追加するゲージの子コンポーネントごとに、子のspecialEffectsコンポーネントを挿入する必要があります。たとえば、グラデーションをゲージの背景に追加する場合、backgroundコンポーネントに子のspecialEffectsコンポーネントタグを1つ追加します。specialEffectsコンポーネントのfillType属性もFT_GRADIENTに設定する必要があります。
その後、オプションで子コンポーネントの塗りつぶし色の変化の割合を制御する場合は、コンポーネントの塗りつぶしの色と変化の割合の制御に必要な数のgradientStopStyleコンポーネントを追加します。gradientStopStyleコンポーネントが子コンポーネントとしてspecialEffectsコンポーネントに追加されます。
グラデーション特殊効果の定義に使用する方法は、この効果がサポートされるゲージの各子コンポーネントで同じです。この手順は、グラデーション特殊効果をゲージの背景に追加する方法を定義します。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、ゲージの子コンポーネントが、コンポーネント・ギャラリで選択したゲージ・タイプに基づき、 |
グラデーション特殊効果をゲージの背景に追加する手順:
構造ウィンドウで、グラデーション特殊効果をサポートするゲージの子コンポーネント(dvt:gaugeBackgroundなど)を右クリックし、「dvt:gaugeBackgroundの中に挿入」→「特殊効果」を選択します。
プロパティ・インスペクタで次の属性を設定します。
FillType: ドロップダウン・リストから「FT_GRADIENT」を選択します。
GradientDirection: ドロップダウン・リストから、グラデーションの塗りつぶしに使用する変化の方向を選択します。デフォルト値はGD_RIGHTです。
NumStops: グラデーションに使用するストップの数を入力します。
必要に応じて、プロパティ・インスペクタで「グラデーション終了の構成」をクリックして、最初のグラデーション・ストップの色および変化率を制御します。
プロパティ・インスペクタで次の属性を設定します。
StopIndex: コンポーネントの索引としてゼロベースの整数を入力します。
GradientStopColor: グラデーションに沿ってこの特殊ポイントで使用する色のRGB値を指定します。色を不透明から透明に変更することもできます。詳細は、23.4.2項「ゲージ要素の透明度の指定」を参照してください。
GradientStopPosition: 指定した停止色のグラデーションでの相対的距離を入力します。グラデーションのスケールは0から100です。0または100が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。
追加のグラデーション・ストップを構成する場合は、構造ウィンドウで「dvt:specialEffects」コンポーネントを右クリックし、「dvt:specialEffectsの中に挿入」→「dvt:gradientStopStyle」を選択します。
構成するグラデーション・ストップごとに、ステップ4を繰り返します。
ゲージの背景にグラデーションの塗りつぶしを追加し、2つのストップを指定して、ストップごとに色および変化の率を構成すると、XMLコードが生成されます。例23-5に、生成されるXMLコードを示します。
例23-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>
ゲージでの相互作用には、ゲージの指定した部分をハイパーリンクなどのHTML属性、またはユーザーがカーソルをゲージのその部分に移動するなどのJavaScriptイベントと関連付ける必要があります。たとえば、ゲージ・インジケータはハイバーリンクと関連付けることができ、ゲージ・インジケータのツールチップは、ユーザーがインジケータをクリックすると「インジケータ」から「インジケータがクリックされました」に変えることもできます。
ゲージの子のshapeAttributesSetコンポーネントにラップされている1つ以上のshapeAttributesコンポーネントで、相互作用プロパティを指定します。相互作用は、shapeAttributesコンポーネントのcomponent属性、HTML属性またはJavaScriptイベントで指定されているように、ゲージのサブコンポーネントを結び付けます。各shapeAttributesコンポーネントが機能するには、サブコンポーネントおよび少なくとも1つの属性が含まれている必要があります。
shapeAttributesコンポーネントのcomponent属性で指定されているゲージ・サブコンポーネントの有効な値は、次のとおりです。
GAUGE_BOTTOMLABEL: ゲージの下のラベル
GAUGE_INDICATOR: ゲージのインジケータ
GAUGE_LEGENDAREA: ゲージの凡例エリア
GAUGE_LEGENDTEXT: 凡例エリアのテキスト・ラベル
GAUGE_METRICLABEL: メトリック値を示すラベル
GAUGE_TOPLABEL: ゲージの上のラベル
GAUGE_PLOTAREA: ゲージの内側のエリア
GAUGE_THRESHOLD: ゲージのしきい値のエリア
ゲージのサブコンポーネントと関連付けられた相互作用属性は、次のいずれかです。
動作属性: onClick、onMouseMove、onKeyDownなどの属性、または接頭辞onが付き、JavaScriptコードまたはJavaScriptコードを値として返すマネージドBeanへの参照を含む文字列をとる任意の属性などの属性。値がマネージドBeanメソッドの場合、メソッドは入力パラメータとしてサブコンポーネント・ハンドルをとります。
共通属性: 文字列か値として文字列を返すマネージドBeanをとるalt、href、nohref、target、titleおよびtabindixなどのHTML属性。値は属性に応じて文字列またはブール値を指定できます。その他の属性は、クリック・イベントを制御するclickable、clickActionおよびclickListenerや、サブコンポーネントを参照するidなど、相互作用の基本的な設定を制御します。
たとえば、例23-6は、ユーザーがインジケータをクリックすると、インジケータのツールチップが「インジケータ」から「インジケータがクリックされました」に変わり、ユーザーが実行時にマウスをラベルに移動すると、ゲージのメトリック・ラベルのツールチップに「メトリック・ラベル」と表示されるダイアル・ゲージのコードを示しています。
例23-6 ゲージの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メソッドを使用することもできます。例23-7に、マネージドBeanのサンプル・コードを示します。
例23-7 マネージド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\";"); }
例23-8に、shapeAttributesコンポーネントのマネージドBeanを参照するためのサンプル・コードを示します。
例23-8 マネージド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>
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
マネージドBeanがJDeveloperでどのように使用されるかを理解しておくと役立ちます。詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージ・サブコンポーネントに相互作用を追加する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「dvt:gaugeの中に挿入」→「ADFデータ視覚化」→「形状属性セット」を選択します。
「dvt:shapeAttributesSet」コンポーネントを右クリックし、「dvt:shapeAttributesSetの中に挿入」→「形状属性」を選択します。
プロパティ・インスペクタで、「共通」セクションを開きます。「Component」属性に、ドロップダウン・リストを使用して、相互作用を追加するゲージ・サブコンポーネント(GAUGE_INDICATORなど)を選択します。
このセクションでその他の属性を1つ以上設定し、サブコンポーネントの相互作用プロパティを指定します。
|
注意: このセクションでは、属性で属性ドロップダウン・メニューを使用して、マネージドBeanへの参照を作成する際に、「メソッド式ビルダー」ダイアログを選択することができます。一部の属性については、「編集」→「プロパティの編集」を選択して、ドロップダウン・リストから使用可能なマネージドBeanを選択することも、「新規」を選択して、「マネージドBeanの作成」ダイアログを使用してマネージドBeanを作成することもできます。 |
「動作」セクションを開きます。このセクションを使用して、接頭辞onが付き、JavasScriptコードまたはJavaScriptコードを値として返すマネージドBeanへの参照を含む文字列をとるこれらの属性を1つ以上設定します。
ゲージ・サブコンポーネントに追加の相互作用効果を構成する場合は、サブコンポーネントごとにステップ2からステップ5を繰り返します。
初期表示で、またはデータの変更を示すために、ゲージ(ゲージ・セットではない)をアニメーション化できます。アニメーション効果は、ゲージのanimationOnDisplayおよびanimationOnDataChangeプロパティで指定します。たとえば、ダイアル・ゲージ・インジケータは、初期表示や、データ値の増減時に色を変えることができます。図23-13に、各しきい値レベルでデータの変化をアニメーションで表示するダイアル・インジケータの付いたダイアル・ゲージを示します。
アニメーション効果は、アクティブ・データを使用して実行することもできます。アクティブ・データ・サービス(ADS)では、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがソースで更新されたデータを表示できるようにする必要があります。
あるいは、あらかじめ決められた間隔で変更のデータ・ソースをポーリングするようにアプリケーションを構成することもできます。
ゲージのアニメーション効果は、初期表示、または部分ページ・レンダリング(PPR)またはアクティブ・データ・サービス(ADS)に関連付けられたデータ変更で設定できます。PPRの詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。ADSの詳細は、第35章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのアニメーション効果を指定する手順:
構造ウィンドウで、「dvt:gauge」コンポーネントを選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。「アニメーション」サブセクションを使用して、次の属性を設定します。
AnimationOnDisplay: 適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。
NONE: (デフォルト)初期レンダリング効果は表示されません。
AUTO: グラフ・タイプまたはゲージ・タイプに基づいて自動的に選択された初期レンダリング効果が適用されます。
AnimationOnDataChange: 適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値は次のとおりです。
NONE: データ変化のアニメーション効果は適用されません。
AUTO: (デフォルト)アクティブ・データ・サービス(ADS)のデータ変化のアニメーション・イベントが適用されます。ADSの詳細は、23.6.6項「アクティブ・データを表示するためのゲージの構成方法」を参照してください。
ON: 部分ページ・リフレッシュ(PPR)のデータ変化のアニメーション・イベントが適用されます。この設定を使用して、あらかじめ決められた間隔で変更のデータ・ソースをポーリングするようにアプリケーションを構成します。
アクティブ・データ・サービス(ADS)を使用したアニメーション効果は、ダイアル・メーター・ゲージ・タイプおよびステータス・メーター・ゲージ・タイプに追加できます。ADSでは、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがデータ・ソースで更新されたデータを表示できるようにする必要があります。ADSおよびアプリケーションの構成の詳細は、第35章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。
データ・バインドされたゲージを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
始める前に:
データが変更されたときにイベントを公開するデータ・ソースが必要であり、それらのイベントに反応するビジネス・サービスと、それらのサービスを表示するための関連のデータ・コントロールを作成しておく必要があります。
アクティブ・データを表示するゲージを構成する手順:
構造ウィンドウで、「dvt:gauge」コンポーネントを選択します。
プロパティ・インスペクタで、「共通」セクションを開き、「ID」属性に一意の値を入力します。
識別子を選択しないと、1つ自動的に入力されます。
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ページ定義に移動」を選択します。
構造ウィンドウで「バインディング」フォルダを開き、コンポーネントの属性バインディングを表すノードを選択します。
プロパティ・インスペクタで拡張セクションを開き、「ChangeEventPolicy」属性のドロップダウン・リストから「送信」を選択します。
ゲージ・コンポーネントには、事前作成されたカスタム形状スタイルのセットが用意されています。ゲージのカスタム形状を作成するために、グラフィック・ファイルを作成して使用することもできます。ゲージ・コンポーネントのcustomShapesPath属性を設定して、使用可能なカスタム形状を使用するか、出力に使用するグラフィックに加工されるベクトル・グラフィック・ファイルを指定します。
事前作成されたカスタム形状スタイルのセットから選択して、ゲージのカスタム形状を指定できます。カスタム形状スタイルは、次のとおりです。
角丸矩形
完全な円
立体的な円
図23-14に、カスタム形状スタイルを適用して表示されたダイアル・ゲージを示します。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージにカスタム形状スタイルを適用する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「外観」セクションを開き、「CustomShapesPath」属性のドロップダウン・リストからカスタム形状スタイルを選択します。有効な値は、Rounded Rectangle、Full CircleおよびBeveled Circleです。
描画エリアやティック・マークなど、ゲージのコンポーネントの回転およびサイズ変更のための要件があるため、カスタム形状グラフィック・ファイルを作成する場合は、ベクター・グラフィック・ファイルが必要です。スケーラブル・ベクター・グラフィック(SVG)が、ゲージのカスタム形状作成のためのファイル形式としてサポートされています。
ゲージを設計してSVGファイルにエクスポートしたら、ゲージの形状およびコンポーネントを識別し、スケールおよび位置設定し、処理に使用されるその他のメタデータを指定するための情報を設計者は追加できます。
SVGファイルで、ゲージ・コンポーネントはIDを使用して識別されます。たとえば、<polygon id="indicator"/>と指定されたSVGファイルは、indicatorコンポーネントに多角形形状を使用するものと解釈されます。複数の形状を指定してコンポーネントに必要なビジュアルを作成するには、IDをid="indicator_0"、id="indicator_1"およびid="indicator_2"に変更できます。
表23-1に、ゲージ・コンポーネントIDおよびその説明を示します。
表23-1 カスタム形状のゲージ・コンポーネントID
| ID | 説明 |
|---|---|
|
|
ゲージによって表される値を指します。指定されていない場合、ゲージではアプリケーションで指定されたインジケータが使用されます。 ダイアル・ゲージでは、形状が適切に回転されるように、上を示して(90度) ステータス・メーター・ゲージでは、インジケータを完全に指定する必要があり、ゲージはメトリック値を指すようにトリミングされます。 |
|
|
ダイアル・ゲージの場合は、 |
|
|
|
|
|
位置が |
|
|
ダイアル・ゲージの場合は、インジケータが移動する円形エリアを指します。 ステータス・メーター・ゲージの場合は、インジケータが含まれるエリアを指します。 LEDゲージの場合は、LEDの塗りつぶし色で塗りつぶされないグラフィックが含まれるエリアを指します。
|
|
|
ゲージの増分の定義に使用します。 |
|
|
位置が |
表23-2に、内部計算に使用され、ゲージにはレンダリングされないメタデータIDとその説明を示します。
表23-2 カスタム形状のメタデータID
| ID | 説明 |
|---|---|
|
|
インジケータ・バーの最小範囲および最大範囲を含むボックスを指定します。指定されていない場合、バウンディング・ボックスは入力ファイルで指定されたとおり、インジケータ全体に広がります。 |
|
|
ダイアル・ゲージ内で回転するインジケータの回転の中央を指定します。このIDを持つ形状の中央がインジケータの中央とみなされます。指定されていない場合、180度のダイアル・ゲージでは描画エリアの下端の中央、N度のダイアル・ゲージでは描画エリアの中央とみなされます。 |
|
|
適切なしきい値の色で塗りつぶされる必要のあるLEDゲージの領域を指定します。指定されていない場合、グラフィック・ファイルで指定された |
|
|
複雑な |
|
|
|
|
|
しきい値の色で塗りつぶされる領域を定義します。 ダイアル・ゲージの場合は、 ステータス・メーター・ゲージの場合は、ステータス・メーター・ゲージの向きに基づいて塗りつぶされる |
|
|
ティック・マークを描画するパスを定義します。これが指定されていない場合、ゲージはカスタム描画エリアでティック・マークを描画する場所を計算する必要があり、ゲージは |
|
|
複雑な |
例23-9に、ゲージのコンポーネントにカスタム形状を指定する場合に使用するサンプルSVGファイルを示します。
例23-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>
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、23.2.1項「ゲージの構成」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージ・セットを作成します。詳細は、23.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのカスタム形状グラフィック・ファイルを使用する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「外観」セクションを開き、「CustomShapesPath」属性フィールドで、ゲージのカスタム形状を指定するために使用されるSVGファイルのパスを入力します。次に例を示します。
/path/customShapesFile.svg
使用可能なカスタム形状では、次のSVG機能がサポートされています。
変換
パス
基本的な形状
塗りつぶしとストローク・ペインティング
線形および放射状のグラデーション
カスタム形状によってサポートされていない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パーサーでは、エラー・チェックや、正しい形式でないファイルのエラー・リカバリは実行されず、ファイルでエラーが発生すると解析を停止します。
