| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.1.2) E48096-02 |
|
 前 |
 次 |
この章では、ADFデータ視覚化コンポーネントのgaugeを使用し、簡単なUI優先開発を使用してゲージでデータを表示する方法について説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたグラフおよびゲージ・コンポーネントの作成」の章を参照してください。
この章では、次の項目について説明します。
ゲージは、売上高、在庫レベル、温度または速度など量を示すための計測器です。ゲージには通常1つのデータ値が表示され、多くの場合グラフより効果的です。ゲージでは、色を使用して許容範囲または非許容範囲などの状態情報を表示できます。たとえば、ゲージ値軸では、赤、黄、緑の色の範囲を示して、低、中、高の状態を表す場合があります。多くのデータ値を一目で比較する必要がある場合、表のセル内や、縦、横あるいはグリッドのレイアウトで、ゲージ・セットとして複数のゲージを表示することができます。
|
ベスト・プラクティスのヒント: しきい値のテキスト値や現在値など、複数のデータ値が必要な場合は、リストや表コンポーネントの方がゲージより適していることがあります。 |
ゲージ・コンポーネントには、ダイアル、ステータス・メーター、垂直ステータス・メーターおよびLEDの4種類のゲージ・タイプがあります。どのゲージ・タイプでも、タイトル、下部ラベル、データ・ラベルおよび凡例を表示できます。
ゲージは通常、1つのデータ・ポイントを表示するために使用されます。ゲージ・コンポーネントでは、次のタイプのゲージがサポートされています。
ダイアル: 構成可能な弧の値軸に沿ってメトリックを示します。これはデフォルトのゲージ・タイプです。ダイアル・ゲージは、単一のゲージ、しきい値付きのゲージ、またはダイアル・ゲージのセットとして表示できます。
図24-1に、初心者用スキー・ブーツの在庫レベルが許容範囲内にあることを示すしきい値付きダイアル・ゲージを示します。
ステータス・メーター: 矩形の水平バーに沿ってタスクの進捗状況または測定値のレベルを示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。ステータス・メーター・ゲージは、単一のゲージ、しきい値付きゲージまたはステータス・メーター・ゲージのセットとして表示できます。
図24-2に、バニー・ブーツの在庫レベルを、ステータス・メーター・ゲージを使用して示します。
ステータス・メーター(垂直): 垂直の矩形のバーに沿ってタスクの進捗状況または測定値のレベルを示します。垂直ステータス・メーター・ゲージは、単一のゲージ、しきい値付きゲージまたはステータス・メーター・ゲージのセットとして表示できます。
図24-3に、バニー・ブーツの在庫レベルを、垂直ステータス・メーター・ゲージを使用して示します。
LED(発行ダイオード): キー・パフォーマンス・インジケータ(KPI)などの測定値をグラフィカルに表します。LEDゲージには、ステータスを示すために色を使用する円形または矩形、カラー・インジケータに加えて、よい(上向き)、普通(左または右向き)または悪い(下向き)の状態を示す三角形または矢印など、数種のグラフィックスが使用できます。LEDゲージは、ゲージ・セットとしても表示できます。
図24-4に、LEDバブル・インジケータを使用したバニー・ブーツの在庫レベルを示します。色を使用してステータスが示されています。
図24-5に、LED矢印を使用した同じ在庫レベルを示します。
すべてのゲージ・タイプは、ビルトイン・グリッド・レイアウトにゲージ・セットとして表示できます。関連アイテムのグループの個々の値を表示する場合、ゲージ・セットが便利です。図24-6に、3都市での業績測定値を比較するゲージ・セットを示します。
水平ステータス・メーターとLEDゲージは、ユーザーがラベル、リンク、アイコンなどの関連情報とともに見て比較できる表セル内での表示に適しています。図24-7に、各国の人口密度を、2010年の最高人口とともに比較する表を示します。
ゲージをどのように使用し、どのようにカスタマイズできるかを理解するには、次の要素と機能について復習すると役に立ちます。
表示要素には、次のものがあります。
ゲージおよびゲージ・セットの背景
ゲージ・フレーム
ダイアル・ゲージ描画エリア
インジケータとインジケータ・バー
ゲージの上部、下部およびメトリック・ラベル
しきい値とラベル
凡例
ティック・マークとティック・ラベル
ツールチップ: ユーザーが描画エリア、インジケータまたはしきい値リージョンにカーソルを合せると、文脈に即した情報のツールチップが自動的に表示されます。図24-8に、ダイアル・ゲージのインジケータ・ツールチップを示します。
ゲージ・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんゲージ・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。ゲージ・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、ゲージをリフレッシュできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーが実行時にゲージの表示方法を変更できるようになっている場合、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第35章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: ゲージ・コンポーネントをアクセス可能にできます。詳細は、第33章「アクセス可能なADF Facesページの開発」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、ゲージ・コンポーネントの外観をカスタマイズできます。詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、付録D「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされたゲージを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたグラフおよびゲージ・コンポーネントの作成」の章を参照してください。
|
注意: 最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。 |
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、22.2項「データ視覚化コンポーネントの共通機能」を参照してください。
ゲージでは、次の種類のデータ値を表します。
メトリック:ゲージがプロットする値。この値は、「プロパティ」ウィンドウで「ゲージ・データ」属性カテゴリの静的データとして指定できます。データ・コントロールまたはgaugeタグのtabularData属性を使用して指定することもできます。これは、ゲージで唯一の必須データです。指定されるメトリック値の数は、ゲージ・セットに1つのゲージを表示するか、一連のゲージを表示するかに影響します。
最小および最大:ゲージの値軸で最小点と最大点を示すオプションの値。この値は、データ・コレクションからの動的データとして指定できます。これらは、gaugeタグの「プロパティ」ウィンドウで、「ゲージ・データ」属性カテゴリの静的データとしても指定できます。
しきい値:データ・コレクションからの動的データとして指定可能なオプションの値で、ゲージの値軸で許容範囲を示します。「プロパティ」ウィンドウで、ゲージしきい値タグを使用して、これらの値を静的データとして指定することもできます。詳細は、24.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ファセット): このファセットを使用して、コンポーネント内の非選択可能オブジェクトを右クリックするとJSPまたはJSPXページに表示されるコンテキスト・メニューを含む1つのaf:popupコンポーネントをサポートします。コンテキスト・メニューを表示するには、af:popupにaf:menuが含まれている必要があります。Faceletページのファセットは複数のaf:popupコンポーネントをサポートしています。
データ値: カテゴリおよび数値データ値を標準のADFコンバータにより書式設定します。詳細は、24.5項「ゲージの数値データ値の書式設定」を参照してください。
相互作用: 形状属性セット(shapeAttributesSet)を使用して、ゲージの子要素の動作プロパティを構成します。たとえば、ゲージの描画エリアのaltテキストは、ユーザーが実行時にそのエリアにマウスを移動したときにツールチップとして表示できます。詳細は、24.6.3項「ゲージへの相互作用の追加方法」を参照してください。
カスタム形状: ゲージ用に事前に作成された一連のカスタム・スタイルを使用するか、customShapesPath属性を設定して出力用に使用されるベクトル・グラフィックス・ファイルを指定できます。詳細は、24.7項「ゲージのカスタム形状の使用方法」を参照してください。
イメージ形式: ゲージでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。デフォルトでは、新しいアプリケーションのゲージはHTML5で表示されますが、デフォルトのイメージ形式を変更できます。アプリケーションでFlashを無効にしたり、クライアント・プラットフォームで動作をカスタマイズすることもできます。詳細は、24.2.5項「ゲージのイメージ形式に関する必知事項」を参照してください。
簡単なUI優先開発を使用してページを設計しているときには、「コンポーネント」ウィンドウを使用してゲージをJSFページに追加します。ページにゲージ・コンポーネントをドラッグ・アンド・ドロップすると、「ゲージの作成」ダイアログに使用可能なゲージ・タイプのカテゴリが説明とともに表示され、ゲージの作成を視覚的に支援します。ゲージのタイトルおよび凡例のクイックスタート・レイアウトも指定できます。図24-9に、ダイアル・ゲージ・タイプが選択された「ゲージの作成」ダイアログを示します。
ダイアログを完了し、ページにゲージが追加された後、「プロパティ」ウィンドウを使用してデータ値を指定すること、およびゲージに追加の表示属性を構成することができます。
「プロパティ」ウィンドウで、プロパティ・フィールドにマウス・カーソルを合わせると表示されるアイコンをクリックすることで、プロパティの説明や編集オプションを表示できます。図24-10に、ゲージ・コンポーネントのvalue属性の「プロパティ」メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたグラフおよびゲージ・コンポーネントの作成」の章を参照してください。 |
始める前に:
ゲージの属性やゲージの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにゲージを追加する手順:
「コンポーネント」ウィンドウの「ADFデータ視覚化」ページで、「グラフとゲージ」パネルから「ゲージ」をページにドラッグ・アンド・ドロップして、「コンポーネント」ウィンドウで「ゲージの作成」ダイアログを開きます。
ダイアログを使用してゲージのカテゴリおよびタイプと、ゲージ・タイトル、凡例およびラベルの表示用クイック・スタート・レイアウトを選択します。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「ゲージの作成」ダイアログで、「OK」をクリックしてページにゲージを追加します。
「プロパティ」ウィンドウで、ゲージまたはゲージ・セットの属性を確認します。「コンポーネント・ヘルプ」ボタンを使用して、gaugeコンポーネントの完全なタグ・ドキュメントを表示します。
「ゲージ・データ」セクションを開きます。次のフィールドの値を設定して、ゲージのデータ値を指定します。
Value: 単一ゲージの場合は、EL式を使用してデータ・モデルを指定します。指定できるのは、データ・コントロールの1つの属性か、DataModelの1つのインスタンスです。または、メトリック数値をJava.lang.NumberオブジェクトまたはStringのいずれかとして設定します。
TabularData: ゲージ・セットの場合、表形式のデータ・セットをJava.util.Listオブジェクトとして指定します。詳細は、24.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: カスタム形状定義ファイルのパスの指定に使用します。詳細は、24.7項「ゲージのカスタム形状の使用方法」を参照してください。
ShortDesc: ゲージの説明を入力します。この説明は、スクリーン・リーダーのユーザーがアクセスします。
AnimationOnDisplay、AnimationOnDataChange、AnimationDuration (アニメーション・サブセクション): これらの属性の1つ以上を使用して、ゲージのアニメーション効果を設定します。詳細は、24.6.4項「ゲージへのアニメーションの使用」を参照してください。
クライアントがサポートしている場合、ゲージはクライアントにHTML5イメージ形式で表示されます。ゲージのイメージ形式の詳細は、第24.2.5項「ゲージのイメージ形式に関する必知事項」を参照してください。
「コンポーネント」ウィンドウを使用してゲージ・コンポーネントをJSFページに挿入すると、ゲージのカスタマイズをサポートする子タグのセットが自動的に挿入されます。例24-1に、クイック・スタート・レイアウトを備えたダイアル・ゲージのJSFページに挿入されたコードを示します。このレイアウトは、図24-9の「ゲージの作成」ダイアログで選択したレイアウトです。
例24-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属性を使用してデータを参照する必要があります。マネージドBeanの作成と使用の詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
tabularData属性でメトリック値のみを指定すると、グリッド内の各値は個別のゲージによって表されます。この場合、しきい値、最小値または最大値は、「プロパティ」ウィンドウを使用して指定する必要があります。
たとえば、図24-11の表には、Quota、Sales、Margin、CostsおよびUnitsの5つの列と、London、ParisおよびNew Yorkの3つの行があります。このデータから、各行に5つのゲージのあるゲージ・セット(図24-6のゲージ・セットと同様)が生成され、売上げなどの値を3都市で比較できます。
マネージドBeanでは、表形式のデータのリストの構造は、ゲージに渡すデータ値ごとに3メンバーのObject配列で構成されます。各配列のメンバーは次のように編成される必要があります。
1つ目のメンバー(索引0)は、データ値のグリッドの列ラベルです。これは通常Stringです。
2つ目のメンバー(索引1)は、データ値のグリッドの行ラベルです。これは通常Stringです。
3つ目のメンバー(索引2)はデータ値で、通常Doubleです。
例24-2に、図24-11に表示された3都市の年間実績を比較するゲージに必要な表形式データのリストを作成するマネージドBeanメソッド内のコードを示します。
例24-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[][]{
{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;
}
メトリック値としきい値、最小値および最大値を指定するには、データ仕様を使用して、ゲージのvalue属性でデータの列または行を設定します。
たとえば、図24-12のデータでは、2都市のメトリック値と最小値、最大値およびしきい値が提供されています。このデータにより、希望する仕様によって販売実績を比較する2つのゲージのセットが作成されます。
図24-12に表示されている2都市の販売実績を仕様により比較するゲージには、表形式データのリストが必要です。例24-3に、この表形式データのリストを作成するマネージドBeanメソッド内のコードを示します。
例24-3 販売実績の表形式データのリストを作成するためのマネージドBeanメソッド
public GaugeDataModel getGaugeData()
{
// Set up values for data source
Object[] colLabels = { "Sales", "Min", "Max", "Quota", "Target" };
Object[] rowLabels = { "Boston", "Chicago" };
Double[][] values = { {40.0, 60.0}, {0.0,0.0}, {100.0,80.0}, {30.0,35.0}, {50.0,70.0} };
LocalXMLDataSource dataSource =
new LocalXMLDataSource(colLabels, rowLabels, values);
// Set up values for data specification
DataSpecification dataSpec = new DataSpecification();
dataSpec.setMetric("Sales");
dataSpec.setMinimum ("Min");
dataSpec.setMaximum ("Max");
ArrayList threshdata = new ArrayList ();
threshdata.add ("Quota");
threshdata.add ("Target");
dataSpec.setThresholds(threshdata);
return new GaugeDataModel(dataSource, dataSpec);
}
図24-13に、図24-12のメソッドをダイアル・ゲージ・セットに追加した場合にページでレンダリングされるゲージ・セットを示します。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージ・セットが存在している必要があります。ない場合は、この章の指示に従ってゲージ・セットを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
マネージドBeanからの表形式データを使用してゲージ・セットを作成する手順:
表形式データを作成するメソッドをゲージのマネージドBeanに追加します。詳細なヘルプが必要な場合は、3.6項「マネージドBeanの作成と使用」を参照してください。
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「ゲージ・データ」セクションを展開します。
TabularDataまたはValue属性のドロップダウン・メニューから、「式ビルダー」を選択します。
マネージドBeanノードを見つけ、展開します。
表形式データのリストを作成するメソッドを選択し、「OK」をクリックします。
式が作成されます。
たとえば、マネージドBeanの名前がsampleGaugeで、表形式データのリストを作成するメソッドの名前がgetGaugeDataの場合、gaugeコンポーネントのtabularData属性の値として#{sampleGauge.gaugeData}というコードが式ビルダーで生成されます。
「プロパティ」ウィンドウを使用して、ゲージの目的のプロパティを構成します。
たとえば、例24-2のサンプル・メソッドを使用して、各行に5つのゲージを表示するゲージ・セットを作成した場合、「共通」セクションのGaugeSetColumnCountを5に設定します。
ゲージでは、HTML5、FlashおよびPNGなどのイメージ形式がサポートされています。使用されるイメージ形式は、アプリケーションの設定およびクライアント環境によって異なります。
次のパラメータを設定または変更することで、特定のイメージ形式を使用するようにアプリケーションを構成できます。
oracle.adf.view.rich.dvt.DEFAULT_IMAGE_FORMAT
このコンテキスト初期化パラメータは、新しいすべてのアプリケーションのweb.xmlに自動的に追加され、デフォルトではHTML5に設定されます。詳細は、A.2.3.28項「グラフとゲージのイメージ形式」を参照してください。
スキン・スタイル
Skyrosスキンを使用している場合、ゲージはHTML5イメージ形式で表示されます。新しいアプリケーションでは、デフォルトでこのスキンが使用されます。スキニングおよびスタイルの詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
flash-player-usage
adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定すれば、アプリケーション全体にわたってFlashコンテンツの使用を無効にできます。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
指定したイメージ形式がクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash (Flash Playerが使用可能な場合)。
Portable Network Graphics (PNG)出力形式。PNG出力形式は、ゲージの印刷時にも使用されます。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ポップアップのサポート
相互作用力
ゲージ用のすべてのイメージ形式で、双方向ロケールがサポートされます。双方向文字、ラベル位置、凡例表示、ゲージ・セット表示などのテキスト文字列がサポートされます。
表のセル内にゲージを表示して、ユーザーがゲージを関連情報と一緒に見て比較できるようにすることができます。ADF tableコンポーネントの直下の子は、columnコンポーネントであることが必要です。表示されるそれぞれの列コンポーネントは、表の個別の列として表示されます。列コンポーネントには、コンテンツやイメージの表示、またはその他の機能の提供に使用されるコンポーネントが含まれます。
各列の子コンポーネントは、その列の各行のデータを表示します。列では、子コンポーネントは行ごとには作成されませんが、表では各行のレンダリングにスタンプ設定機能が使用されます。各子には、行ごとに一度スタンプが設定され、これがすべての行に対して繰り返されます。各行にスタンプが設定されると、現在行のデータが、EL式を使用して特定可能なプロパティにコピーされます。このプロパティに使用する名前を、表のvarプロパティを使用して指定します。表のレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。
例24-4に、図24-7に示されているOracle ADF表コンポーネントでゲージを表示するためのサンプル・コードを示します。この例では、表のvarプロパティがtestvarであり、表の値はgaugeDataという名前のマネージドBeanに格納されます。ゲージのメトリックは、valueフィールドで#{testvar.density}に設定されています。
例24-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"
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:column sortable="false" width="100" inlineStyle="font-size: 12px;"
headerText="Population" align="center" id="c3">
<af:outputText value="#{testvar.population}" id="ot3">
<af:convertNumber type="number" pattern="#,##0"/>
</af:outputText>
</af:column>
<af:column sortable="false" width="100" inlineStyle="font-size: 12px;"
headerText="Percent with world population" align="center" id="c4">
<af:outputText value="#{testvar.percent}" id="ot4">
<af:convertNumber type="percent" pattern="#.00%"/>
</af:outputText>
</af:column>
</af:table>
例24-5に、gaugeDataマネージドBeanのサンプル・コードを示します。この例では、クラスはGaugeTableDataという名前です。
例24-5 表のゲージのマネージドBeanコードの例
public class GaugeTableData {
private List<CountryData> _gaugeTableData;
public GaugeTableData() {
ArrayList<CountryData> list = new ArrayList<CountryData>(11);
list.add(new CountryData("China", 1338134000,139.434));
list.add(new CountryData("India", 1182276000, 359.654));
list.add(new CountryData("USA", 309527000,32.145));
list.add(new CountryData("Indonesia", 231369500,121.481));
list.add(new CountryData("Brazil", 193087500, 22.676));
list.add(new CountryData("Pakistan", 169784000, 211.19));
list.add(new CountryData("Bangladesh", 162221000,1126.55));
list.add(new CountryData("Nigeria", 154729000, 167.498));
list.add(new CountryData("Russia", 141927000,8.301));
list.add(new CountryData("Japan", 127380000,337.097));
list.add(new CountryData("Mexico", 107550500,54.923));
_gaugeTableData = list;
}
public List<CountryData> getGaugeTableData(){
return _gaugeTableData;
}
public static class CountryData {
private String _name;
private long _population;
private double _percent;
private double _density;
private static long worldPopulation = 6697254000L;
public CountryData(String name, int population, double density) {
_name = name;
_population = population;
_density = density;
_percent = (double)population / (double)worldPopulation;
}
public String getName() {
return _name;
}
public double getPercent() {
return _percent;
}
public long getPopulation() {
return _population;
}
public double getDensity() {
return _density;
}
}
}
表のセルでゲージを構成する場合、次のガイドラインを使用して、操作性を改善します。
水平ステータス・メーター、ダイアルまたはLEDゲージを使用します。垂直ステータス・メーターの使用は避けます。これは、垂直ステータス・メーターに対応するために、表の行の縦の長さが非常に長くなるためです。
読みやすさを維持しながらも、ゲージはできるだけ小さくします。
スペースを最大限に利用するには、ゲージ・タイトルや下部ラベルを使用するかわりに、表の列や行のヘッダーを使用してゲージを説明します。
1列または1行につき1タイプのゲージのみを使用し、同じ軸値としきい値を使用します。
列には水平のステータス・メーターを、行または列にはダイアル・ゲージおよびLEDゲージを表示します。
表示するゲージが多すぎるとユーザーはスクロールしないと全部を見られなくなるので避けます。
アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してデータ・バインドされたADF表を作成すること、および表作成中にゲージを追加することができます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたグラフおよびゲージ・コンポーネントの作成」の章を参照してください。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
次のタスクを実行する必要があります。
表およびゲージのデータを含むマネージドBeanを作成します。
図24-7に表示されている表を複製するには、gaugeDataという名前のマネージドBeanを作成し、例24-5のコードを追加します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
ADF表を作成します。
例24-4に、図24-7の表を表示するために使用するコードを示します。デフォルトでは、ゲージ・コンポーネントは、表作成中にオプションとしてリストされません。ゲージを有効なコンポーネントとして含む列を構成します。表にゲージを追加する場合、コンポーネントを削除します。
表作成のヘルプが必要な場合は、12.3.4項「ページへの表の表示方法」を参照してください。
表にゲージを追加する手順:
「構造」ウィンドウで、「af:table」ノードを展開します。
ゲージに置き換えるコンポーネントを右クリックし、「削除」を選択します。
たとえば、af:outputTextを使用するように表の列を構成していた場合、それを右クリックし、「削除」を選択します。
ゲージを含める列を右クリックし、「列の中に挿入」→「ADFデータ視覚化」→「ゲージ」を選択します。
「ゲージの作成」ダイアログで、ゲージ・タイプおよびラベルを含まないクイック・スタート・レイアウトを選択します。
「OK」をクリックして表にゲージを追加します。
構造ウィンドウでdvt:gaugeノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウの「値」フィールドに、ゲージに表示するメトリック値を入力します。
たとえば、図24-7のゲージで使用されている値にゲージを設定するには、#{testvar.density}と入力します。
しきい値を含むクイック・スタート・レイアウトを選択した場合、「プロパティ」ウィンドウで、各しきい値の値を入力します。
しきい値の構成のヘルプが必要な場合は、24.3.1項「ゲージしきい値の構成方法」を参照してください。
必要に応じてゲージ・スタイル要素を書式設定します。
たとえば、例24-4のサンプル・コードでは、高さとサイズの値が以下に設定されます。
inlineStyle="height:22px" styleClass="AFStretchWidth"
ゲージ・スタイル要素の構成のヘルプが必要な場合は、24.4項「ゲージ・スタイル要素の書式設定」を参照してください。
しきい値、ラベル、インジケータ、ティック・マークなど、ゲージの表示要素をカスタマイズできます。
しきい値は、特定の範囲の値を強調表示するゲージの数値データ値です。しきい値はゲージの最小値と最大値の間の値である必要があります。しきい値で識別された範囲は、他の範囲と異なる色で塗りつぶされます。
ゲージがデータ・バインドされている場合、ゲージのデータ・コレクションでしきい値の動的値を指定できます。しきい値の動的値の使用の詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたグラフおよびゲージ・コンポーネントの作成」の章を参照してください。
ゲージを作成したら、ゲージ内にthreshold子コンポーネントをいくつでもラップできるthresholdSet子コンポーネントを構成することで、静的しきい値も指定できます。しきい値がデータ・コレクションとthresholdコンポーネントの両方で指定された場合、ゲージはthresholdコンポーネントの値を受け入れます。しきい値セットに凡例を追加して、ユーザーにしきい値の定義を視覚的に示すこともできます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: 「ゲージの作成」ダイアログで、しきい値付きのゲージ・タイプを使用してゲージを作成する場合、dvt:thresholdSetコンポーネントとdvt:thresholdコンポーネントの子が、「構造」ウィンドウでdvt:gaugeコンポーネントに自動的に追加されます。 凡例を含むクイック・スタート・レイアウトを選択した場合、dvt:gaugeLegendTitleおよびdvt:gaugeLegendAreaも、「構造」ウィンドウでdvt:gaugeコンポーネントに自動的に追加されます。 |
静的しきい値をゲージに追加する手順:
「構造」ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「ADFデータ視覚化」→「しきい値セット」を選択します。
「dvt:thresholdSet」コンポーネントを右クリックし、「しきい値セットの中に挿入」→「しきい値」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
ThresholdMaxValue: 構成中のしきい値セクションの最大値を指定します。値として整数またはEL式を使用できます。
|
注意: 最終しきい値の場合、最終しきい値のThresholdMaxValue属性に入力した値に関係なく、ゲージの最大値がしきい値の最大値として使用されます。 |
FillColorおよびBorderColor: オプションで、構成中のしきい値セクションに塗りつぶしの色と枠線の色をそれぞれRGB値で指定します。色を不透明から透明に変更することもできます。詳細は、24.4.2項「ゲージ要素の透明度の指定」を参照してください。
Text: オプションで、このしきい値を識別するために凡例で表示されるテキストを指定します。テキストをテキスト・リソースにバインドすることもできます。テキストの書式設定の詳細は、24.4.3項「ゲージ・テキストの書式設定方法」を参照してください。テキスト・リソースの詳細は、24.4.4項「ゲージのテキスト・リソースの指定方法」を参照してください。
ステップ2とステップ3を繰り返して、ゲージの各しきい値を最小値から最大値まで作成します。
|
注意: ゲージには任意の数のしきい値を追加できます。ただし、矢印ゲージや三角形LEDゲージは、それらが指し示す3つの方向のみのしきい値をサポートします。 |
オプションの凡例をゲージのしきい値セットに追加する手順:
「構造」ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「ADFデータ視覚化」→「凡例エリア」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
位置: ゲージを基準とした凡例の位置を指定します。
デフォルトでは、凡例の位置はLAP_BOTTOMに設定され、凡例はゲージの下に表示されます。凡例をゲージの左、右または上に表示するには、LAP_LEFT、LAP_RIGHTまたはLAP_TOPをそれぞれ使用します。
BorderColorおよびFillColor: オプションで、凡例の境界の色と塗りつぶりの色を設定します。
16進表記でRGB値を指定するか(たとえば、#000000)、属性のドロップダウン・メニューから「編集」を選択して、「境界プロパティの編集」ダイアログで色を設定します。
凡例にタイトルを追加する手順:
「構造」ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「ADFデータ視覚化」→「凡例タイトル」を選択します。
「dvt:gaugeLegendTitle」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「テキスト」フィールドに凡例のタイトルを入力します。
凡例テキストを構成する手順:
「構造」ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「ADFデータ視覚化」→「凡例テキスト」を選択します。
「dvt:gaugeLegendText」コンポーネントを右クリックし、「プロパティに移動」を選択します。
MinLengthフィールドに、表示するテキストの最小長を指定します。使用可能なスペースにテキストを収めるためにテキストを切り捨てる必要がある場合、この長さに切り捨てられます。
NumberTypeフィールドで、属性のドロップダウン・メニューを使用して、凡例の数値タイプをNT_PERCENT(デフォルト)またはNT_NUMBERに設定します。
|
注意:
|
デフォルトでは、ゲージに、子コンポーネントmetricLabel、topLabelおよびbottomLabelを使用して、メトリック・ラベルとオプションの上部ラベルおよび下部ラベルが表示されます。各ラベルの表示および配置のカスタマイズや、オプションの上部および下部ゲージ・ラベルのフレームの塗りつぶしや枠線の色の制御ができます。
上部または下部ラベルで表されるカテゴリ・データ値も、attributeFormatタグとADF Facesコンバータ・タグを使用して、パーセントの書式設定、数値の位取り、小数部の桁の制御、記号の配置などのカスタマイズができます。詳細は、24.5.1項「ゲージの数値データ値の書式設定方法」を参照してください。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.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_LABEL: メトリック・ラベルのデフォルト値です。ラベルを下部ラベルの横に表示します。
Text: 上部または下部ラベルに表示されるテキスト。属性メニューで、表示するテキストを入力するか、ダイアログで「テキスト・リソースの選択」を選択して、テキストをアプリケーション・テキスト・リソースに関連付けます。詳細は、24.4.4項「ゲージのテキスト・リソースの指定方法」を参照してください。
NumberType、ScalingおよびAutoPrecision: メトリック・ラベルに対してのみ使用可能です。これらの属性を使用して、ゲージでの数値データ値の表示を構成します。詳細は、24.5.2項「自動位取りおよび精度に関する必知事項」を参照してください。
ゲージ・ラベルで使用するテキスト・フォントを構成する場合は、次のようにします。
「構造」ウィンドウで、構成するゲージの子ラベル・コンポーネント(dvt:metricLabel、dvt:topLabelまたはdvt:bottomLabel)を右クリックし、「ラベルの中に挿入」→「ADFデータ視覚化」→「フォント」を選択します。
「dvt:gaugeFont」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、フォントの属性を設定します。詳細は、24.4.3項「ゲージ・テキストの書式設定方法」を参照してください。
上部または下部ゲージ・ラベルの周りのフレームを構成する場合は、次のようにします。
「構造」ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「上のラベル・フレーム」または「下のラベル・フレーム」と選択します。
「dvt:upperLabelFrame」または「dvt:lowerLabelFrame」を右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、構成するラベル・フレームのFillColorおよびBorderColor属性にRGB値を指定します。色を不透明から透明に変更することもできます。詳細は、24.4.2項「ゲージ要素の透明度の指定」を参照してください。
ゲージでは、グラフィックを使用して正確なゲージ値を示します。デフォルトでは、ゲージに子コンポーネントindicatorを使用してダイアル・ゲージの線が表示され、子コンポーネントindicatorBarを使用してステータス・メーターまたは垂直ステータス・メーター・ゲージ内にバーが表示されます。子コンポーネントindicatorBaseは、ダイアル・ゲージのすべてのインジケータの円形ベースの塗りつぶしプロパティを設定するために使用されます。ゲージ・インジケータの外観はカスタマイズできます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、ゲージの子インジケータ・コンポーネントが、「ゲージの作成」ダイアログで選択したゲージ・タイプに基づき、 |
ゲージ・インジケータの外観をカスタマイズする手順:
ダイアル・ゲージ・インジケータの場合は、次のようにします。
構造ウィンドウでdvt:indicatorノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
Type: インジケータの種類(線(デフォルト)、塗りつぶしまたは針)を指定します。
BorderColor: インジケータの枠の色を指定します。
FillColor: インジケータの塗りつぶしの色を指定します。
UseThresholdFillColor: インジケータが指すしきい値領域の色が、インジケータの指定した色をオーバーライドするかどうかを指定します。
「構造」ウィンドウで「dvt:indicatorBase」を右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
レンダリング済: インジケータ・ベースが表示されるかどうかを示します。デフォルト値はtrueです。
BorderColor: インジケータの枠の色を指定します。
FillColor: インジケータの塗りつぶしの色を指定します。
ステータス・メーターおよび垂直ステータス・メーター・ゲージの場合は、次のようにします。
構造ウィンドウで「dvt:indicatorBar」コンポーネントを選択します。
「プロパティ」ウィンドウで次の属性を設定します。
BorderColor: インジケータの枠の色を指定します。
FillColor: インジケータの塗りつぶしの色を指定します。
|
注意: インジケータ・バーが指すしきい値領域の色がインジケータの指定した色をオーバーライドするように指定する場合、ゲージに |
ティック・マークは、ダイアル、ステータス・メーターおよび垂直ステータス・メーター・ゲージのゲージ値軸に沿って表示される増分マークです。LEDゲージにはティック・マークはありません。デフォルトでは、主および副ティック・マークの表示、スペース、色を指定するゲージの子のtickMarkコンポーネントを使用して、ゲージにティック・マークが表示されます。
ゲージの子のtickLabelコンポーネントでは、主ティック・ラベルを指定し、ラベルの位置(ゲージの内側か外側か)とティック・ラベルに表示される数値の書式を指定します。副ティック・マークにはラベルは付けられません。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.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: しきい値のティック・マークを表示します。
Contentに値を指定しない場合、ティック・マーク表示はデフォルトでTC_MIN_MAX TC_INCREMENTSに設定され、最小値、増分値および最大値に対してティック・マークが表示されます。
ゲージのティック・ラベルをカスタマイズするには、「構造」ウィンドウで「dvt:tickLabel」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次の属性に値を設定します。
Position: デフォルトで、ダイアル・ゲージにはゲージがゲージ・フレーム内に完全に含まれる場合に見やすくするため、内側のティック・ラベルが表示されます。ティック・ラベルは描画エリア内にあるため、ティック・ラベルの長さはこの領域に合うように制限される必要があります。この属性の値をデフォルトのTLP_INTERIORからTLP_EXTERIORに設定することで、外側のラベルを使用するようにゲージをカスタマイズできます。
Content: ゲージのどのティック・マークでラベルを使用するかを指定します。有効値は、スペースまたはカンマで区切られた次の値の任意の組合せです。
TC_INCREMENTS: 増分ごとのティック・ラベルを表示します。
TC_MAJOR_TICK: 最小値、最大値および増分値のティック・ラベルを表示します。
TC_MIN_MAX: 最小値および最大値のティック・ラベルを表示します。
TC_METRIC: 実際のメトリック値のティック・ラベルを表示します。
TC_NONE: ティック・ラベルを表示しません。
TC_THRESHOLD: しきい値のティック・ラベルを表示します。
Contentに値を指定しない場合、ティック・ラベル表示はデフォルトでTC_MAJOR_TICKに設定され、最小値、増分値および最大値に対してティック・ラベルが表示されます。
NumberType、ScalingおよびAutoPrecision: メトリックおよびティック・ラベルに対してのみ使用可能です。これらの属性を使用して、ゲージでの数値データ値の表示を構成します。詳細は、24.5.1項「ゲージの数値データ値の書式設定方法」を参照してください。
初期サイズまたはゲージを変更するためにゲージのスタイルをカスタマイズしたり、ゲージの表示領域にぴったり合うように動的サイズ変更を指定したり、スタイル要素を適用したりできます。テキストの書式設定およびテキスト・リソース、ゲージ内の透明度も使用できます。
ゲージは、200 X 200ピクセルのデフォルト・サイズで表示されます。ゲージのサイズをカスタマイズしたり、様々なブラウザ・ウィンドウ・サイズに領域がぴったり合うように、動的サイズ変更を指定したりできます。水平または垂直に制限された領域(Webページのサイドバーなど)にゲージが表示される場合、ゲージは小さいイメージ・サイズで表示されます。機能は揃っていますが、イメージの小さい簡易表示になります。
ゲージの幅と高さはカスタマイズでき、コンテナのサイズ変更に基づいて動的にサイズ変更することができます。ゲージのこれらの2つの側面は、ともにゲージのinlineStyle属性を使用するという点で関連性があります。
active、focus、hover、linkおよびvisitedなどのCSSスタイルを適用して、ゲージに使用できます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのサイズを指定する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「スタイル」セクションを展開します。「InlineStyle」属性でゲージの初期サイズを指定します。ゲージの動的サイズ変更を指定しない場合、初期サイズが、ゲージの唯一の表示サイズです。たとえば、次のようになります。
width:200px;height:200px
ゲージの動的サイズ変更を指定する場合、固定数のピクセル、または幅と高さの両方の相対的パーセントを入力できます。たとえば、コンテナの50%の幅で200ピクセルの高さのゲージを作成するには、InlineStyle属性に次のように設定します。
width:50%;height:200px
|
ベスト・プラクティスのヒント:
|
ゲージに動的サイズ変更を指定する場合、「動作」セクションを開きます。DynamicResize属性のドロップダウン・リストから、「DYNAMIC_SIZE」を選択します。
ゲージにCSSスタイルを適用する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「スタイル」セクションを展開し、StyleClassフィールドにスタイル・クラスの名前を入力します。
CSSスタイルの適用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ゲージの様々な要素がデフォルトの不透明な色のかわりに透明な色を表示するように、それらの要素に関連するゲージの子コンポーネントで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です。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、タイトルまたはラベルのゲージの子コンポーネントが、「ゲージの作成」ダイアログでの選択に基づき、 |
ゲージ・タイトルまたはラベル・コンポーネントのテキスト・フォントを指定する手順:
「構造」ウィンドウで、タイトルまたはラベルのゲージの子コンポーネントを右クリックし、「タイトルの中に挿入」または「ラベルの中に挿入」→「フォント」を選択します。
たとえば、ゲージのメトリック・ラベルのテキスト・フォントを指定するには、「メトリック・ラベルの中に挿入」→「フォント」を選択します。そのコンポーネントが使用できない場合は、「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「ADFデータ視覚化」→ゲージの子のタイトルまたはラベル・コンポーネントを選択します。
「dvt:gaugeFont」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、1つ以上のdvt:gaugeFontコンポーネント属性に値を設定します。「ヘルプ」をクリックするか、[F1]を押すと、dvt:gaugeFontコンポーネントの完全なタグ・ドキュメントが表示されます。
カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、ゲージ・コンポーネントのフォント属性も設定できます。ゲージ・コンポーネントで使用フォントを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。詳細は、24.4.5項「スキンを使用してゲージ・スタイルをグローバルに設定する方法」を参照してください。
JDeveloperは、抽象クラスjava.util.ResourceBundleを使用してロケール固有のリソースを提供し、データ視覚化コンポーネントをローカライズしやすいようにサポートします。ゲージでタイトルおよびラベルを表すそれらのゲージの子コンポーネントに対して、アプリケーション・リソース・バンドルで参照されるテキスト・リソースを関連付けることができます。詳細は、第32章「ページの国際化およびローカライズ」を参照してください。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージ・タイトルまたはラベル・コンポーネントのテキスト・リソースを指定する手順:
「構造」ウィンドウで、ゲージの子ラベルまたはタイトル・コンポーネントを選択し、「プロパティに移動」を選択します。
たとえば、ゲージの上部ラベルのプロパティにアクセスするには、「dvt:topLabel」を右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウのtext属性のメニューで、「テキスト・リソースの選択」を選択します。
「テキスト・リソースの選択」ダイアログで、コンポーネント・テキストをテキスト・リソースに関連付けます。
ダイアログのヘルプを参照するには、「ヘルプ」をクリックするか、[F1]を押します。
カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、ゲージ・コンポーネントのフォント属性およびその他のスタイル属性をグローバルに設定できます。ゲージ・コンポーネントで使用されるスタイルを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。
ADFデータ視覚化ツール・スキン・セレクタを使用して、ゲージ・コンポーネントのスタイルを定義できます。スタイルの設定をサポートするゲージ・コンポーネントのスキン・セレクタには、次のものがあります。
af|dvt-gauge
af|dvt-bottomLabel
af|dvt-gaugeBackground
af|dvt-gaugeFrame
af|dvt-gaugeSetBackground
af|dvt-indicator
af|dvt-indicatorBar
af|dvt-indicatorBase
af|dvt-gaugeLegendArea
af|dvt-gaugeLegendText
af|dvt-gaugeLegendTitle
af|dvt-lowerLabelFrame
af|dvt-metricLabel
af|dvt-gaugePlotArea
af|dvt-threshold
af|dvt-tickLabel
af|dvt-tickMark
af|dvt-topLabel
af|dvt-upperLabelFrame
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
カスタム・スキンを使用してゲージ・スタイルを設定する手順:
ゲージ・サブコンポーネント用に定義されたスキン・スタイル・セレクタを含むアプリケーションに、カスタム・スキンを追加します。
たとえば、mySkin.cssファイルのすべての上部ラベル用フォント・ファミリは次のように指定します。
af|dvt-topLabel
{
-tr-font-family:SansSerif;
}
カスタム・スキン作成のヘルプが必要な場合は、『Oracle ADFスキン・エディタによるADFスキンの作成』のADFスキン・ファイルの作成に関する項を参照してください。
カスタム・スキンを使用するようにtrinidad-config.xmlファイルでアプリケーションを構成します。
アプリケーションの構成のヘルプが必要な場合は、『Oracle ADFスキン・エディタによるADFスキンの作成』の「完成したADFスキンのWebアプリケーションへの適用」の章を参照してください。
スタイルおよびスキンの使用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
metricLabel、tickLabel、gaugeLegendTextなど、ゲージの子コンポーネントにより、ゲージの数値データ値が表示されます。各コンポーネントには、numberType属性があり、値自体を表示するか、値が表す割合を表示するかを指定できます。数値の書式設定としては、これで十分な場合もあります。
ゲージ・メトリックまたはティック・ラベル値の書式をさらに設定する場合は、ADF Faces標準コンバータaf:convertNumberを使用できます。たとえば、値を通貨として表示したり、特定の小数設定を表示したりできます。
ゲージで表示されるメトリックは数値データ値です。これらの値には、特定の書式設定のルールを適用できます。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、構成可能なデータ値を表示するゲージの子コンポーネントが、「ゲージの作成」ダイアログでの選択に基づき、 |
ゲージの数値データ値の書式を設定する手順:
「構造」ウィンドウで、構成するデータ値を表示するゲージの子コンポーネント(dvt:metricLabel、dvt:tickLabelまたはdvt:gaugeLegendText)を選択し、「プロパティに移動」を選択します。
コンポーネントが使用不可の場合、「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「ADFデータ視覚化」→(「メトリック・ラベル」、「ティック・ラベル」または「凡例テキスト」)を選択します。
「プロパティ」ウィンドウで、データ値を値としてではなくパーセンテージとして表示する場合、コンポーネントのNumberType属性をNT_PERCENTに設定します。
ゲージ・メトリックまたはティック・ラベルで表示されるデータ値に追加の書式設定を指定する場合は、次のようにします。
「構造」ウィンドウで、「dvt:metricLabel」または「dvt:tickLabel」を右クリックし、「メトリック・ラベルの中に挿入」または「ティック・ラベルの中に挿入」→「数値の変換」を選択します。
「af:convertNumber」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、af:convertNumberコンポーネントの属性の値を指定して、追加の書式設定を行います。「ヘルプ」をクリックするか、[F1]を押すと、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コンポーネントに追加されます。
グラデーション特殊効果の定義に使用する方法は、この効果がサポートされるゲージの各子コンポーネントで同じです。この手順は、グラデーション特殊効果をゲージに追加する方法を定義します。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
|
注意: ページにゲージを追加すると、ゲージの子コンポーネントが、「ゲージの作成」ダイアログで選択したゲージ・タイプに基づき、 |
グラデーション特殊効果をゲージに追加する手順:
「構造」ウィンドウで、グラデーション特殊効果をサポートするノード(たとえば、dvt:gaugeBackground)を選択し、必要な場合は展開して子ノードを表示します。
選択したノードの子にdvt:specialEffectsコンポーネントが含まれない場合、ノードを右クリックし、「ノードの中に挿入」→「特殊効果」を選択します。
dvt:specialEffectsノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで次の属性を設定します。
FillType: ドロップダウン・リストから「FT_GRADIENT」を選択します。
GradientDirection: ドロップダウン・リストから、グラデーションの塗りつぶしに使用する変化の方向を選択します。デフォルト値はGD_RIGHTです。
NumStops: グラデーションに使用するストップの数を入力します。
必要に応じて、「プロパティ」ウィンドウで「グラデーション終了の構成」をクリックして、最初のグラデーション・ストップの色および変化率を制御します。
「プロパティ」ウィンドウで次の属性を設定します。
StopIndex: コンポーネントの索引としてゼロベースの整数を入力します。
GradientStopColor: グラデーションに沿ってこの特殊ポイントで使用する色のRGB値を指定します。色を不透明から透明に変更することもできます。詳細は、24.4.2項「ゲージ要素の透明度の指定」を参照してください。
GradientStopPosition: 指定した停止色のグラデーションでの相対的距離を入力します。グラデーションのスケールは0から100です。0または100が指定されない場合、これらのポイントにはデフォルトの位置が使用されます。
追加のグラデーション・ストップを構成する場合は、「構造」ウィンドウで「dvt:specialEffects」コンポーネントを右クリックし、「特殊効果の中に挿入」→「グラデーション終了スタイル」を選択します。
ゲージの背景にグラデーションの塗りつぶしを追加し、2つのストップを指定して、ストップごとに色および変化の率を構成すると、XMLコードが生成されます。例24-6に、生成されるXMLコードを示します。
例24-6 グラデーションをゲージの背景に追加する場合に生成される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など、相互作用の基本的な設定を制御します。
たとえば、例24-7は、ユーザーがインジケータをクリックすると、インジケータのツールチップが「インジケータ」から「インジケータがクリックされました」に変わり、ユーザーが実行時にマウスをラベルに移動すると、ゲージのメトリック・ラベルのツールチップに「メトリック・ラベル」と表示されるダイアル・ゲージのコードを示しています。
例24-7 ゲージの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メソッドを使用することもできます。例24-8に、マネージドBeanのサンプル・コードを示します。
例24-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\";"); }
例24-9に、shapeAttributesコンポーネントのマネージドBeanを参照するためのサンプル・コードを示します。
例24-9 マネージド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>
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
マネージドBeanがJDeveloperでどのように使用されるかを理解しておくと役立ちます。詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージ・サブコンポーネントに相互作用を追加する手順:
「構造」ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ゲージの中に挿入」→「ADFデータ視覚化」→「形状属性セット」を選択します。
「dvt:shapeAttributesSet」ノードを右クリックし、「形状属性セットの中に挿入」→「形状属性」を選択します。
「dvt:shapeAttributes」ノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを展開します。Component属性に対し、ドロップダウン・リストを使用して、相互作用を追加するゲージ・サブコンポーネントを選択します。
たとえば、ゲージのインジケータに相互作用を追加するには、「コンポーネント」ドロップダウン・リストから「GAUGE_INDICATOR」を選択します。
このセクションでその他の属性を1つ以上設定し、サブコンポーネントの相互作用プロパティを指定します。
|
注意: このセクションでは、属性で属性ドロップダウン・メニューを使用して、マネージドBeanへの参照を作成する際に、「メソッド式ビルダー」ダイアログを選択することができます。一部の属性については、「編集」→「プロパティの編集」を選択して、ドロップダウン・リストから使用可能なマネージドBeanを選択することも、「新規」を選択して、「マネージドBeanの作成」ダイアログを使用してマネージドBeanを作成することもできます。 |
「動作」セクションを開きます。このセクションを使用して、接頭辞onが付き、JavaScriptコードまたはJavaScriptコードを値として返すマネージドBeanへの参照を含む文字列をとるこれらの属性を1つ以上設定します。
ゲージ・サブコンポーネントに追加の相互作用効果を構成する場合は、サブコンポーネントごとにステップ2からステップ6を繰り返します。
初期表示で、またはデータの変更を示すために、ゲージ(ゲージ・セットではない)をアニメーション化できます。アニメーション効果は、ゲージのanimationOnDisplayおよびanimationOnDataChangeプロパティで指定します。たとえば、ダイアル・ゲージ・インジケータは、初期表示や、データ値の増減時に色を変えることができます。図24-15に、各しきい値レベルでデータの変化をアニメーションで表示するダイアル・インジケータの付いたダイアル・ゲージを示します。
アニメーション効果は、アクティブ・データを使用して実行することもできます。アクティブ・データ・サービス(ADS)では、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがソースで更新されたデータを表示できるようにする必要があります。あるいは、あらかじめ決められた間隔で変更のデータ・ソースをポーリングするようにアプリケーションを構成することもできます。
ゲージのアニメーション効果は、初期表示、または部分ページ・レンダリング(PPR)またはアクティブ・データ・サービス(ADS)に関連付けられたデータ変更で設定できます。PPRの詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。ADSの詳細は、第38章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Facesコンポーネントを使用して追加できる機能について理解しておくことをお薦めします。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのアニメーション効果を指定する手順:
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、必要に応じて「外観」セクションを展開します。「アニメーション」サブセクションを使用して、次の属性を設定します。
AnimationOnDisplay: 適用する初期レンダリング効果のタイプの指定に使用します。有効な値は次のとおりです。
NONE: (デフォルト)初期レンダリング効果は表示されません。
AUTO: グラフ・タイプまたはゲージ・タイプに基づいて自動的に選択された初期レンダリング効果が適用されます。
AnimationOnDataChange: 適用するデータ変化のアニメーションでデータ・タイプの指定に使用します。有効な値は次のとおりです。
NONE: データ変更のアニメーション効果は適用されません。
AUTO: (デフォルト)アクティブ・データ・サービス(ADS)のデータ変化のアニメーション・イベントが適用されます。ADSの詳細は、24.6.6項「アクティブ・データを表示するためのゲージの構成方法」を参照してください。
ON: 部分ページ・リフレッシュ(PPR)データ変化のアニメーション・イベントを適用します。この設定を使用して、所定の間隔で変更のデータ・ソースをポーリングするように、アプリケーションを構成します。
AnimationDuration: アニメーション効果をミリ秒で指定するために使用します。デフォルト値は1000です。
カスケード・スタイル・シート(CSS)を使用してスキンを作成することで、ADFデータ視覚化ツールのスキン・セレクタを使用して、アプリケーション内のすべてのページに対してアニメーション効果およびスタイルをグローバルに定義できます。アニメーションを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。
例24-10に、アニメーション効果を定義するスキニング・キーの使用例を示します。
例24-10 アニメーション効果を定義するスキニング・キーの使用
af:dvt-gauge
{
-tr-animation-duration:500;
-tr-animation-indicators:auto;
-tr-animation-on-data-change:on;
-tr-animation-on-display:auto;
}
スキニングおよびスタイルの使用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
アクティブ・データ・サービス(ADS)を使用したアニメーション効果は、ダイアル・メーター・ゲージ・タイプおよびステータス・メーター・ゲージ・タイプに追加できます。ADSでは、ADFモデル・レイヤーを使用して、ADF Facesコンポーネントをアクティブ・データ・ソースにバインドできます。このためには、コンポーネントとバインディングを構成して、コンポーネントがデータ・ソースで更新されたデータを表示できるようにする必要があります。ADSの詳細およびアプリケーションの構成の詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「アクティブ・データ・サービスの使用」の章を参照してください。
データ・バインドされたゲージを構成し、対応するページ定義ファイルでバインディング要素に値を設定することによってアクティブ・データを表示します。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Facesコンポーネントを使用して追加できる機能について理解しておくことをお薦めします。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
データが変更されたときにイベントを公開するデータ・ソースが必要であり、それらのイベントに反応するビジネス・サービスと、それらのサービスを表示するための関連のデータ・コントロールを作成しておく必要があります。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「アクティブ・データ・サービスの使用」の章を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
アクティブ・データを表示するデータ・バインドされたゲージを構成する手順:
「構造」ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「ページ定義に移動」を選択します。
「構造」ウィンドウで「バインディング」を展開し、コンポーネントの属性バインディングを表すノードを選択します。
「プロパティ」ウィンドウで「拡張」セクションを展開し、ChangeEventPolicy属性のドロップダウン・リストから「プッシュ」を選択します。
ゲージ・コンポーネントには、事前作成されたカスタム形状スタイルのセットが用意されています。ゲージのカスタム形状を作成するために、グラフィック・ファイルを作成して使用することもできます。ゲージ・コンポーネントのcustomShapesPath属性を設定して、使用可能なカスタム形状を使用するか、出力に使用するグラフィックに加工されるベクトル・グラフィック・ファイルを指定します。
事前作成されたカスタム形状スタイルのセットから選択して、ゲージのカスタム形状を指定できます。カスタム形状スタイルは、次のとおりです。
角丸矩形
完全な円
立体的な円
図24-16に、カスタム形状スタイルを適用して表示されたダイアル・ゲージを示します。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.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"に変更できます。
表24-1に、ゲージ・コンポーネントIDとその説明を示します。
表24-1 カスタム形状のゲージ・コンポーネントID
| ID | 説明 |
|---|---|
|
|
ゲージによって表される値を指します。指定されていない場合、ゲージではアプリケーションで指定されたインジケータが使用されます。 ダイアル・ゲージでは、形状が適切に回転されるように、上を示して(90度) ステータス・メーター・ゲージでは、インジケータを完全に指定する必要があり、ゲージはメトリック値を指すようにトリミングされます。 |
|
|
ダイアル・ゲージの場合は、 |
|
|
|
|
|
位置が |
|
|
ダイアル・ゲージの場合は、インジケータが移動する円形エリアを指します。 ステータス・メーター・ゲージの場合は、インジケータが含まれるエリアを指します。 LEDゲージの場合は、LEDの塗りつぶし色で塗りつぶされないグラフィックが含まれるエリアを指します。
|
|
|
ゲージの増分の定義に使用します。 |
|
|
位置が |
表24-2に、内部計算に使用され、ゲージにはレンダリングされないメタデータIDとその説明を示します。
表24-2 カスタム形状のメタデータID
| ID | 説明 |
|---|---|
|
|
インジケータ・バーの最小範囲および最大範囲を含むボックスを指定します。指定されていない場合、バウンディング・ボックスは入力ファイルで指定されたとおり、インジケータ全体に広がります。 |
|
|
ダイアル・ゲージ内で回転するインジケータの回転の中央を指定します。このIDを持つ形状の中央がインジケータの中央とみなされます。指定されていない場合、180度のダイアル・ゲージでは描画エリアの下端の中央、N度のダイアル・ゲージでは描画エリアの中央とみなされます。 |
|
|
適切なしきい値の色で塗りつぶされる必要のあるLEDゲージの領域を指定します。指定されていない場合、グラフィック・ファイルで指定された |
|
|
複雑な |
|
|
|
|
|
しきい値の色で塗りつぶされる領域を定義します。 ダイアル・ゲージの場合は、 ステータス・メーター・ゲージの場合は、ステータス・メーター・ゲージの向きに基づいて塗りつぶされる |
|
|
ティック・マークを描画するパスを定義します。これが指定されていない場合、ゲージはカスタム描画エリアでティック・マークを描画する場所を計算する必要があり、ゲージは |
|
|
複雑な |
例24-11に、ゲージのコンポーネントにカスタム形状を指定する場合に使用するサンプルSVGファイルを示します。
例24-11 ゲージのカスタム形状に使用するサンプル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>
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.1項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる他の機能について理解しておくことをお薦めします。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ページにすでにゲージが存在している必要があります。ない場合は、この章の指示に従ってゲージを作成します。詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージの既存のカスタム形状グラフィック・ファイルを使用する手順:
アプリケーションにSVGファイルをインポートし、その場所をメモします。
ファイルのインポートについてのヘルプが必要な場合は、『Oracle Jdeveloperによるアプリケーションの開発』のアプリケーションおよびプロジェクトの管理に関する項を参照してください。
構造ウィンドウで「dvt:gauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで「外観」セクションを開きます。
CustomShapesPath属性のドロップダウン・メニューから、「式ビルダー」を選択し、ゲージのカスタム形状を指定するために使用するSVGファイルへの相対パスを入力します。
たとえば、プロジェクト構造のWeb Contentディレクトリの下位のImagesディレクトリにファイルをインポートした場合、CustomShapesPathフィールドに次のパスを入力します。
Images/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パーサーでは、エラー・チェックや、正しい形式でないファイルのエラー・リカバリは実行されず、ファイルでエラーが発生すると解析を停止します。
