25 ゲージ・コンポーネントの使用

この章では、簡単なUI優先開発を使用しながら、ADFデータ視覚化コンポーネントのダイアル、LED、評価、ステータス・メーター・ゲージ・コンポーネントを使用する方法について説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。

アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。

この章の内容は次のとおりです。

• 25.1項「ゲージ・コンポーネントの概要」

• 25.2項「ゲージ・コンポーネントの使用方法」

• 25.3項「ゲージ表示要素のカスタマイズ」

• 25.4項「ゲージへの対話性の追加」

25.1 ゲージ・コンポーネントの概要

ゲージは、売上高、在庫レベル、温度または速度など量を示すための計測器です。ゲージには通常1つのデータ値が表示され、多くの場合グラフより効果的です。しきい値を使用すると、ゲージでは、色を使用して許容範囲または非許容範囲などの状態情報を表示できます。たとえば、ゲージ値軸では、赤、黄、緑の色の範囲を示して、低、中、高の状態を表す場合があります。多数のデータ値を一目で比較する必要がある場合、複数のゲージを表セル内に表示できます。

ベスト・プラクティスのヒント: しきい値のテキスト値や現在値など、複数のデータ値が必要な場合は、リストや表コンポーネントの方がゲージより適していることがあります。

ゲージ・コンポーネントには、ダイアル、LED、評価およびステータス・メーターの4種類のゲージ・タイプがあります。

25.1.1 ゲージ・コンポーネントのユースケースおよび例

ゲージは通常、1つのデータ・ポイントを表示するために使用されます。ゲージ・コンポーネントでは、次のタイプのゲージがサポートされています。

• ダイアル: 循環軸上にプロットされたメトリック値を表示します。ゲージの背景の属性は、ゲージの背景を長方形、円または半円のどちらで表示するかを決定します。インジケータは軸上のゲージのメトリック値を指します。

  図25-1に、背景が円、半円および長方形に設定された3つのダイアル・ゲージを示します。3つの例では、ゲージのメトリック値はすべて63です。

  図25-1 ダイアル・ゲージの例

  
  

• LED: キー・パフォーマンス・インジケータ(KPI)などの測定値をグラフィカルに表します。LEDゲージには、ステータスを示すために色を使用する円形または長方形、カラー・インジケータに加えて、よい(上向き)、普通(左または右向き)または悪い(下向き)の状態を示す、上下左右を指す三角形または矢印など、数種の図形を使用できます。

  図25-2に、様々な図形、サイズおよびしきい値で構成されたLEDゲージを示します。

  図25-2 LEDゲージの例

  
  

• 評価: メトリック値を表示し、オプションでメトリック値の入力を受け入れます。このゲージは、通常、星を使用した映画の評価など、製品やサービスの評価の表示に使用します。

  図25-3に、星、ダイアモンド、円、長方形および三角形を使用して構成した5評価ゲージを示します。

  図25-3 評価ゲージの例

  
  

• ステータス・メーター: 水平軸、循環軸または垂直軸上にメトリック値を表示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。オプションで、ステータス・メーターは、メトリック値が事前定義されたしきい値内のどこに含まれるかを色で示します。

  図25-4に、水平ステータス・メーター、円形ステータス・メーター用および垂直ステータス・メーターに構成されたステータス・メーター・ゲージの例を示します。ゲージは、しきい値を使用するように構成されており、これは色でゲージの値が許容範囲内にあるかどうかを示します。

  図25-4 ステータス・メーター・ゲージの例

  
  

表のセル内にゲージを表示して、ユーザーがゲージを関連情報と一緒に見て比較できるようにすることもできます。図25-5に、各国の人口密度を、2010年の最高人口と一緒に比較するステータス・メーター・ゲージの例を示します。この例では、ステータス・メーターは、人口密度が非常に高い国を赤で、人口密度が非常に低い国を緑で示すしきい値で構成されています。

図25-5 表に示したステータス・メーター・ゲージ

25.1.2 ゲージ・コンポーネントのエンド・ユーザー機能およびプレゼンテーション機能

ADFデータ視覚化ゲージ・コンポーネントでは、形状のバリエーション、しきい値の表示、ビジュアル効果、アニメーションおよびカスタマイズ可能な色やラベル・スタイルなど、幅広いプレゼンテーション機能を提供します。

ゲージ・コンポーネントでは、ポップアップおよびコンテキスト・メニューなどの対話機能もサポートしています。すべてのゲージは値の変更もサポートしています。これによって、ユーザーはゲージのメトリック値を変更できます。

25.1.2.1 ゲージの形状のバリエーション

ゲージの形状は構成可能で、ゲージ・タイプによって異なります。

• ダイアル・ゲージ: background属性が形状およびシェーディングを設定します。例25-0に、ダイアル・ゲージに使用可能な背景を示します。これには、円、ドーム型および長方形があり、それぞれ、アルタ、アンティーク、ダーク、ライト・シェーディングの種類があります。

  図25-6 ダイアル・ゲージの背景

  
  

• LEDゲージ: type属性はLEDゲージの形状を設定します。図25-7に、LEDゲージに使用可能なタイプを示します。これには、円、長方形、矢印、三角形、ダイアモンドおよび星があります。

  図25-7 LEDゲージのタイプ

  
  

• ステータス・メーター・ゲージ: orientation属性は、ステータス・メーターを水平軸に沿って表示するのか、循環軸に沿って表示するのかを決定します。図25-4に、長方形および円形として構成されたステータス・メーター・ゲージの例を示します。

• 評価ゲージ: 評価ゲージのshape属性は、評価ゲージの形状を決定します。図25-3に、評価ゲージに使用可能な形状を示します。これには、星、ダイアモンド、円および長方形があります。

25.1.2.2 ゲージのしきい値

ゲージのしきい値には、ステータス・メーター・ゲージまたはLEDゲージの範囲の上限を表す値が含まれています。通常、しきい値は、ゲージのメトリック値が許容範囲内にあるかどうかを示すために定義されます。

図25-8に、3つの水平ステータス・メーターおよび3つの円形ステータス・メーターを示します。それぞれ、ゲージのメトリック値が25以下の場合に赤色のインジケータを、メトリック値が50以下の場合に黄色のインジケータを、50を超える場合に緑色のインジケータを表示するように構成されています。

図25-8 ステータス・メーター・ゲージのしきい値

図25-9に、3つのLEDゲージを示します。それぞれ、ゲージのメトリック値が25以下の場合に赤色で、メトリック値が50以下の場合に黄色で、50を超える場合に緑色で表示するように構成されています。

図25-9 LEDゲージのしきい値

25.1.2.3 ゲージのビジュアル効果

デフォルトでは、ゲージはグラデーションおよびオーバーレイが色の表示に適用されています。ビジュアル効果を無効にすると、平坦なデザインになります。図25-10の2行目に、図25-9の3つのLEDゲージのビジュアル効果を無効にした結果を示します。

図25-10 ビジュアル効果を有効および無効にして表示したLEDゲージ

25.1.2.4 ゲージのアニメーション

HTML5テクノロジをサポートするブラウザの場合、ゲージでは初回表示またはaf:transition子タグによるデータ変更時のアニメーションをサポートしています。

25.1.2.5 ゲージのツールチップ

shortDesc属性を使用すると、ユーザーがカーソルをゲージ上で移動したときに表示する、コンテキスト情報のツールチップを構成できます。図25-11に、ダイアル・ゲージのツールチップを示します。

図25-11 ツールチップを表示するダイアル・ゲージ

25.1.2.6 ゲージのポップアップおよびコンテキスト・メニュー

af:showPopupBehaviorタグを使用して、ポップアップまたはコンテキスト・メニューを表示するようにゲージを構成できます。

図25-12に、ユーザーがゲージをクリックしたときにポップアップを表示するように構成されたダイアル・ゲージを示します。ポップアップはノート・ウィンドウに出力メッセージを表示します。

図25-12 ポップアップを表示するダイアル・ゲージ

図25-13に、ユーザーがゲージを右クリックしたときにコンテキスト・メニューを表示するように構成されたダイアル・ゲージを示します。コンテキスト・メニューはノート・ウィンドウに出力メッセージを表示します。

図25-13 コンテキスト・メニューを表示するダイアル・ゲージ

25.1.2.7 ゲージの値変更のサポート

ユーザーからの入力を受け入れてメトリック値を変更するように、ゲージを構成できます。たとえば、ユーザーが星の数を映画の評価に割り当てることができる、評価ゲージを構成できます。

図25-14に、ユーザーの入力を受け入れるように構成された評価ゲージの例を示します。ゲージの初期メトリック値は、1です。星の上でマウスを動かすと、色が変化し、選択した星の数を示します。変更を確定するには、強調表示されている星の中で、最も大きな値の星をクリックします。

図25-14 値変更のサポートを示す評価ゲージ

25.1.2.8 ゲージの参照線(ステータス・メーター・ゲージ)

参照線を表示するステータス・メーター・ゲージを構成できます。参照線をしきい値と組み合せて使用すると、トレンド情報を表示できます。たとえば、前回の値とターゲット情報を一緒に表示できます。

図25-15に、参照線を表示するように構成した水平ステータス・メーター・ゲージおよび円形ステータス・メーター・ゲージを示します。それぞれのゲージは、白い参照線と黒い参照線を表示するように構成されています。白い参照線の値は45に設定されていて、黒い参照線の値は95に設定されています。

図25-15 参照線を表示するステータス・メーター・ゲージ

25.2 ゲージ・コンポーネントの使用方法

gaugeコンポーネントを使用するには、データを定義し、ゲージをページに追加し、JDeveloperで追加の構成を完了します。

25.2.1 ゲージ・コンポーネントのデータ要件

ゲージでは、次の種類のデータ値を表します。

• メトリック:ゲージがプロットする値。この値はプロパティ・インスペクタでValue属性に静的データとして指定できます。これを、データ・コントロールで指定することもできます。これは、ゲージで唯一の必須データです。

• 最小および最大:ゲージの値軸で最小点と最大点を示すオプションの値。この値は、データ・コレクションからの動的データとして指定できます。ゲージのプロパティ・インスペクタで、「最小」および「最大」フィールドに静的データとしても指定できます。

  すべてのゲージのデフォルトの最小値は0です。ダイアル・ゲージ、LEDゲージおよびステータス・メーター・ゲージのデフォルトの最大値は100で、評価ゲージのデフォルトの最大値は5です。ゲージのメトリック値が最大値を超える場合、ゲージで適切に表示するには、この値を変更する必要があります。

• しきい値: データ・コレクションからの動的データとして指定可能なオプションの値で、ゲージの値軸で許容範囲を示します。プロパティ・インスペクタでゲージのしきい値タグを使用して、静的データとしても指定できます。詳細は、25.3.1項「ゲージしきい値の構成方法」を参照してください。

25.2.2 ページへのゲージの追加方法

簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用してゲージをJSFページに追加します。ページにゲージ・コンポーネントをドラッグ・アンド・ドロップすると、「ゲージの作成」ダイアログに使用可能なゲージ・タイプのカテゴリが説明とともに表示され、ゲージの作成を視覚的に支援します。図25-16に、水平ステータス・メーター・ゲージの作成ダイアログを示します。

図25-16 水平ステータス・メーターのゲージ作成ダイアログ

ダイアログが完了して、ページにゲージが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、ゲージに追加の表示属性を構成できます。

「プロパティ・インスペクタ」で、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明およびオプションを表示できます。図25-17に、ゲージ・コンポーネントのvalue属性の「プロパティ」メニューを示します。

図25-17 プロパティ・インスペクタのゲージ値属性

注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。

始める前に:

ゲージの属性やゲージの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.5項「ゲージの構成」を参照してください。

次のタスクを実行する必要があります。

1. 2.2項「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。

2. 2.4項「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。

ページにゲージを追加する手順:

1. 「コンポーネント・パレット」で、「ADFデータ視覚化」ページの「ゲージ」パネルから希望するゲージをページにドラッグ・アンド・ドロップし、「ゲージの作成」ダイアログを開きます。

2. 「ゲージの作成」ダイアログで、「OK」をクリックしてページにゲージを追加します。

3. 「プロパティ・インスペクタ」で、ゲージの属性を表示します。「コンポーネント・ヘルプ」ボタンを使用して、gaugeコンポーネントの完全なタグ・ドキュメントを表示します。

25.2.3 ページにゲージを追加する場合の処理

「コンポーネント・パレット」からゲージをJSFページにドラッグ・アンド・ドロップした場合は、JDeveloperはタグの最小セットしか生成しません。

評価ゲージ以外のすべてのゲージの場合、JDeveloperではdvt:gaugeMetricLabelタグをページに追加します。しきい値をサポートしているステータス・メーター・ゲージおよびLEDゲージの場合、JDeveloperでは、 ゲージの最大値を表すdvt:gaugeThresholdタグを1つ追加します。

例25-1に、ダイアル・ゲージ、LEDゲージ、ステータス・メーター・ゲージおよび評価ゲージのページにJDeveloperが追加するデフォルト・コードを示します。この例では、各ゲージはaf:panelGridLayoutコンポーネントのグリッド・セルに含まれています。ゲージ関連のタグは太字で強調されています。

例25-1 UI優先開発におけるゲージのサンプル・コード

<af:panelGridLayout id="pgl1">
  <af:gridRow marginTop="5px" height="auto" id="gr1">
    <af:gridCell marginStart="5px" width="50%" id="gc1">
      <dvt:dialGauge id="dialGauge1" value="10">
        <dvt:gaugeMetricLabel rendered="true" id="gml1"/>
      </dvt:dialGauge>
    </af:gridCell>
    <af:gridCell marginStart="5px" width="50%" id="gc2">
      <dvt:ledGauge id="ledGauge1" type="circle" value="10">
        <dvt:gaugeThreshold id="thr1" color="#d62800"/>
        <dvt:gaugeMetricLabel rendered="true" id="gml2"/>
      </dvt:ledGauge>
    </af:gridCell>
  </af:gridRow>
  <af:gridRow marginTop="5px" height="auto" marginBottom="5px" id="gr2">
    <af:gridCell marginStart="5px" width="50%" id="gc4">
      <dvt:statusMeterGauge id="statusMeterGauge1" value="10">
        <dvt:gaugeThreshold id="thr3" color="#d62800"/>
          <dvt:gaugeMetricLabel rendered="true" id="gml3"/>
        </dvt:statusMeterGauge>
    </af:gridCell>
    <af:gridCell marginStart="5px" width="50%" marginEnd="5px" id="gc6">
      <dvt:ratingGauge id="ratingGauge1" value="10" />
    </af:gridCell>
  </af:gridRow>
</af:panelGridLayout>

パネル・グリッド・レイアウト・コンポーネントの詳細は、8.5.1項「panelGridLayout、gridRowおよびgridCellコンポーネントを使用してグリッドベースのレイアウトを作成する方法」を参照してください。

25.2.4 データをゲージに追加する方法

ゲージのメトリック値はゲージで唯一の必須データです。この値をゲージのvalue属性で指定します。プロパティ・インスペクタまたはゲージの数値を返すマネージドBeanで、value属性の値を静的な数値として指定できます。あるいは、データ・コントロールをゲージにバインドすることによって指定することもできます。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

データをゲージに追加する手順:

1. オプションで、ゲージのメトリック値を返すマネージドBeanを作成します。

   クラス作成のヘルプが必要な場合は、JDeveloperオンライン・ヘルプのJavaコードの使用に関する項を参照してください。マネージドBeanの詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。

2. 「構造」ウィンドウで「dvt:typeGauge」ノードを右クリックし、「プロパティに移動」を選択します。

3. 「プロパティ・インスペクタ」で次のいずれかを行います。

   • ゲージにデータを静的に追加したり、ゲージのメトリック値を返すマネージドBeanを参照するには、「共通」セクションを開き、「値」フィールドにメトリック値を指定します。

     静的な数値を入力するか、マネージドBeanおよびメトリック値を参照するEL式を指定します。

     たとえば、getGaugeMetric()という名前のメソッドにゲージのメトリック値を返すgaugeという名前のマネージドBeanにEL式を指定するには、「値」フィールドに#{gauge.gaugeMetric}と入力します。

     EL式の作成のヘルプについては、第2.5.1項「EL式の作成方法」を参照してください。

   • ゲージをデータ・コントロールにバインドするには、「ADFコントロールにバインド」をクリックしてデータ・コレクションを選択します。

     データ・コントロールを使用したデータのゲージへの提供についての詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。

4. 必要な場合、「プロパティ・インスペクタ」で、「外観」セクションを開き、「最小」および「最大」フィールドの値を入力します。

   静的な数値を入力するか、マネージドBeanを参照するEL式、および最小値または最大値を指定します。

   
   

   注意: ゲージのメトリック値がデフォルトの最大値を超える場合、最大値を変更する必要があります。変更しないと、ゲージは適切に表示されません。

   
   

LEDゲージまたはステータス・メーター・ゲージに事前定義された範囲のしきい値を表示する場合、しきい値ごとにdvt:gaugeThresholdタグを追加します。詳細は、25.3.1項「ゲージしきい値の構成方法」を参照してください。

25.2.5 ゲージの構成

ゲージ・コンポーネントのプロパティはゲージを作成するのに十分ですが、ゲージのプロパティを変更してゲージの表示および動作をさらにカスタマイズできます。子コンポーネントまたはサポートされているファセットを追加および構成して、ゲージの表示および動作をカスタマイズすることもできます。接頭辞dvt:は、各ゲージ・コンポーネント名の先頭に付いて、そのコンポーネントがOracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Facesのタグ・ライブラリに属することを示します。

構成可能な要素は、ゲージ・タイプによって異なります。すべてまたは複数のゲージ・タイプに使用可能な要素もあります。使用可能な要素は次のとおりです。

• minimumおよびmaximum: ゲージの最小値および最大値を指定する属性。

• inlineStyle: コンポーネントの外側の要素(enclosing div)のスタイルを指定する属性。

• shortDesc: このコンポーネントの短い説明を指定する属性。ユーザーがマウスをゲージの上に置いたときに表示されるツールチップ・テキストをカスタマイズする際に使用します。

• visualEffects: グラデーションおよびオーバーレイを表示するかどうかを指定する属性。デフォルトでは、これはautoに設定されていますが、noneに設定してビジュアル効果を無効にすることもできます。

• styleClass: このコンポーネント使用する場合にCSSスタイル・クラスを設定する属性。

• gaugeMetricLabel: メトリック・ラベルのスタイル、可視性、スケーリングおよびテキスト・タイプを決定する子コンポーネント。この属性は、メトリック値として形状の数を使用する評価ゲージでは使用できません。

• readOnly: ユーザーがゲージのメトリック値を変更できるかどうかを決定する、ダイアル・ゲージ、評価ゲージおよびステータス・メーター・ゲージの属性。

• gaugeThreshold: LEDゲージまたはステータス・メーター・ゲージのしきい値を指定する子コンポーネント。

• borderColor: LEDゲージまたはステータス・メーター・ゲージのインジケータの枠の色を指定する属性。

• color: LEDゲージまたはステータス・メーター・ゲージのインジケータの塗りつぶしの色を指定する属性。

ゲージの「プロパティ・インスペクタ」で「コンポーネント・ヘルプ」をクリックすると、ゲージ・タグおよびサポートされている子コンポーネントの完全なリストを表示できます。

25.2.5.1 ダイアル・ゲージの構成

ダイアル・ゲージに固有の構成可能な要素は次のとおりです。

• background: ダイアル・ゲージの形状および背景スタイルを決定する属性

• indicator: ダイアル・ゲージのインジケータ・スタイルを指定する属性

• gaugeTickLabel: ティック・ラベルのスタイル、可視性、スケーリングおよびテキスト・タイプを決定する子コンポーネント

25.2.5.2 LEDゲージの構成

LEDゲージに固有の構成可能な要素は次のとおりです。

• type: LED ゲージの形状を指定する属性

• size: LEDゲージの相対的なサイズを決定する属性

• rotation: 矢印または三角形の形状を使用するように構成されたLEDゲージの回転を指定します。

25.2.5.3 評価ゲージの構成

評価ゲージに固有の構成可能な要素は次のとおりです。

• shape: 評価ゲージの増分の形状を決定する属性

• inputIncrement:ユーザーがメトリック値を編集する際の変更の増分を指定します。

• unselectedShape: 選択されていないゲージの増分の形状を決定する属性

• changedStyle: 値が変化した後の選択されたゲージの増分の色および枠の色を決定する属性。

• selectedStyle: 選択されたゲージの増分の色および枠の色を決定する属性。

• unselectedStyle: 選択されていないゲージの増分の色および枠の色を決定する属性。

• hoverStyle: マウスが置かれているがまだ選択されていないゲージの増分の色および枠の色を決定する属性。

25.2.5.4 ステータス・メーター・ゲージの構成

ステータス・メーター・ゲージに固有の構成可能な要素は次のとおりです。

• orientation: ゲージを水平ステータス・メーター・ゲージ、円形ステータス・メーター・ゲージまたは垂直ステータス・メーター・ゲージとして表示するかを決定する属性。

• indicatorSize: インジケータの相対的なサイズを決定する属性

• plotArea: 描画エリアを表示するかどうかを決定する属性

• thresholdDisplay: しきい値の表示方法を決定する属性

25.2.6 表へのゲージの追加方法

表のセル内にゲージを表示して、ユーザーがゲージを関連情報と一緒に見て比較できるようにすることができます。ADF tableコンポーネントの直下の子は、columnコンポーネントであることが必要です。表示されるそれぞれの列コンポーネントは、表の個別の列として表示されます。列コンポーネントには、コンテンツやイメージの表示、またはその他の機能の提供に使用されるコンポーネントが含まれます。

各列の子コンポーネントは、その列の各行のデータを表示します。列では、子コンポーネントは行ごとには作成されませんが、表では各行のレンダリングにスタンプ設定機能が使用されます。各子には、行ごとに一度スタンプが設定され、これがすべての行に対して繰り返されます。各行にスタンプが設定されると、現在行のデータが、EL式を使用して特定可能なプロパティにコピーされます。このプロパティに使用する名前を、表のvarプロパティを使用して指定します。表のレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。

例25-2に、図25-5に示されているOracle ADF表コンポーネントでゲージを表示するためのサンプル・コードを示します。この例では、表のvarプロパティがrowであり、表の値はgaugeDataという名前のマネージドBeanに格納されています。ゲージのメトリックは、valueフィールドで#{row.density}に設定されています。ゲージに関連するコードは強調されています。

例25-2 表の列にスタンプ設定されたゲージ・コンポーネント

<af:table var="row" rowBandingInterval="0" id="t1"
          value="#{gaugeData.gaugeTableData}"
          summary="Status Meter Gauges in Table"
          inlineStyle="height:400px;" styleClass="AFStretchWidth"
          columnStretching="last">
  <af:column sortable="false" headerText="Country" id="c1" rowHeader="true"
             align="center" inlineStyle="font-weight:bold">
    <af:outputText value="#{row.name}" id="ot1"/>
  </af:column>
  <af:column sortable="false" headerText="Density (1/km^2)" id="c2"
             align="center" width="300">
    <dvt:statusMeterGauge id="statusMeterGauge1" value="#{row.density}"
                          inlineStyle="height:22px"
                          styleClass="AFStretchWidth"
                          maximum="1200.0" thresholdDisplay="all"
                          indicatorSize="0.5">
      <dvt:gaugeThreshold id="gt1" maximum="300" color="#86B132"/>
      <dvt:gaugeThreshold id="gt2" maximum="700" color="#FFF200"/>
      <dvt:gaugeThreshold id="thr1" color="#F23300"/>
      <dvt:gaugeMetricLabel rendered="false" id="gml1"/>
    </dvt:statusMeterGauge>
  </af:column>
  <af:column sortable="false" headerText="Population" id="c3" align="center">
    <af:outputText value="#{row.population}" id="ot3">
      <af:convertNumber pattern="#,##0"/>
    </af:outputText>
  </af:column>
  <af:column sortable="false" headerText="Percent with World Population"
             id="c4" align="center">
    <af:outputText value="#{row.percent}" id="ot4">
      <af:convertNumber type="percent" pattern="#.00%"/>
    </af:outputText>
  </af:column>
</af:table>

例25-3に、gaugeDataマネージドBeanのサンプル・コードを示します。この例では、クラスはGaugeTableDataという名前です。

例25-3 表のゲージのマネージドBeanコードの例

import java.util.ArrayList;
import java.util.List;
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;
    }
  }
}

表のセルでゲージを構成する場合、次のガイドラインを使用して、操作性を改善します。

• 読みやすさを維持しながらも、ゲージはできるだけ小さくします。

• 1列につき1タイプのゲージのみを使用し、同じ軸値としきい値を使用します。

• 表示するゲージが多すぎるとユーザーはスクロールしないと全部を見られなくなるので避けます。

アプリケーションでFusionテクノロジ・スタックを使用する場合、データ・コントロールを使用してデータ・バインドされたADF表を作成すること、および表作成中にゲージを追加することができます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。

始める前に:

ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.5項「ゲージの構成」を参照してください。

次のタスクを実行する必要があります。

1. 表およびゲージのデータを含むマネージドBeanを作成します。

   図25-5に表示されている表を複製するには、gaugeDataという名前のマネージドBeanを作成し、例25-3のコードを追加します。マネージドBeanの詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。

2. ADF表を作成します。

   例25-2に、図25-5の表を表示するために使用するコードを示します。デフォルトでは、ゲージ・コンポーネントは、表作成中にオプションとしてリストされません。ゲージを有効なコンポーネントとして含む列を構成します。表にゲージを追加する場合、コンポーネントを削除します。

   表作成のヘルプが必要な場合は、10.2.4項「ページへの表の表示方法」を参照してください。

表にゲージを追加する手順:

1. 「構造」ウィンドウで、「af:table」ノードを展開します。

2. ゲージに置き換えるコンポーネントを右クリックし、「削除」を選択します。

   たとえば、af:outputTextを使用するように表の列を構成していた場合、それを右クリックし、「削除」を選択します。

3. ゲージを含める列を右クリックし、「列の中に挿入」→「ADFデータ視覚化」→「dvt:gaugeType」を選択します。

   たとえば、水平ステータス・メーター・ゲージを表に追加するには、「列の中に挿入」→「ADFデータ視覚化」→「dvt:statusMeterGauge」を選択します。

4. 「ゲージの作成」ダイアログでゲージのタイプを選択し、「OK」をクリックして表にゲージを追加します。

5. 「構造」ウィンドウで「dvt:gaugeType」ノードを右クリックして、「プロパティに移動」を選択します。

6. 「プロパティ・インスペクタ」で、「値」フィールドにゲージが表示するメトリック値を入力します。

   たとえば、図25-5のゲージで使用されている値にゲージを設定するには、#{row.density}と入力します。

7. オプションで、「プロパティ・インスペクタ」で、「最小」および「最大」フィールドにゲージの最大値を入力します。

8. しきい値をサポートしているゲージを作成した場合、オプションで、必要な数値のしきい値をゲージに追加します。

   たとえば、図25-5のステータス・メーター・ゲージは、人口密度が非常に高い国を赤で、人口密度が非常に低い国を緑で示すしきい値で構成されています。しきい値の構成のヘルプが必要な場合は、25.3.1項「ゲージしきい値の構成方法」を参照してください。

9. 必要に応じてゲージ要素を書式設定します。

   たとえば、例25-2のサンプル・コードでは、高さとサイズの値が次のように設定されています。

   inlineStyle="height:22px" styleClass="AFStretchWidth"
   

   ゲージ・スタイル要素の構成のヘルプが必要な場合は、25.3.2項「ゲージ・スタイル要素の書式設定」を参照してください。

25.3 ゲージ表示要素のカスタマイズ

しきい値、スタイル、数値データ値、ビジュアル効果、アニメーションおよび参照線など、多数のゲージ表示要素をカスタマイズできます。

25.3.1 ゲージしきい値の構成方法

しきい値は、特定の範囲の値を強調表示するステータス・メーター・ゲージまたはLEDゲージの数値データ値です。しきい値はゲージの最小値と最大値の間の値である必要があります。

ステータス・メーター・ゲージでは、しきい値で指定される範囲は、他の範囲と異なる色で色付けされます。しきい値はインジケータまたは描画エリアで表示できます。

図25-18に、しきい値用に構成した水平ステータス・メーター・ゲージおよび円形ステータス・メーター・ゲージを示します。1行目のゲージは、インジケータでしきい値を表示するように構成されています。2行目では、ゲージは描画エリアに現在のしきい値を表示するように構成されています。3行目では、ゲージは描画エリアにすべてのしきい値を表示するように構成されています。

図25-18 ステータス・メーター・ゲージのしきい値の表示オプション

LEDゲージでは、背景は、メトリック値を含むしきい値の範囲のために定義された色で塗りつぶされています。図25-19に、図25-18に示したステータス・メーターと同じ最大値および色の値を使用するしきい値で構成された3つのLEDゲージを示します。

図25-19 3つのしきい値で構成されたLEDゲージ

「コンポーネント・パレット」からゲージをページにドラッグして、ステータス・メーター・ゲージまたはLEDゲージを作成すると、JDeveloperでは、ゲージの子としてdvt:gaugeThresholdタグが1つ追加されます。追加のdvt:gaugeThresholdタグを挿入し、しきい値のvalueおよびcolor属性を定義すると、しきい値を追加できます。

ゲージがデータ・バインドされている場合、ゲージのデータ・コレクションでしきい値の動的値を指定できます。しきい値に対する動的値の使用の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたゲージの作成に関する項を参照してください。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ステータス・メーター・ゲージまたはLEDゲージのしきい値を構成する手順:

1. 「構造」ウィンドウで「dvt:statusMeterGauge」または「dvt:LEDGauge」コンポーネントを右クリックして、「(ステータス・メーター・ゲージまたはLEDゲージ)の中に挿入」→「dvt:gaugeThreshold」を選択します。

   ゲージの作成方法によっては、すでにdvt:gaugeThresholdコンポーネントが1つ定義されていることがあります。その場合は、そのしきい値の次の手順に進むことができます。

2. 「dvt:gaugeThreshold」ノードを右クリックして、「プロパティに移動」を選択します。

3. 「プロパティ・インスペクタ」で、次の値を設定します。

   • Maximum: しきい値の最大値を指定します。整数値を入力したり、ドロップダウン・メニューを使用して「式ビルダー」を選択して最大値を表すEL式を入力できます。

     ゲージの最大値を表すしきい値に値を入力する必要はありません。この値は、ゲージのmaximum属性の値から自動的に導出されます。

   • Color: 16進数でRGB値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択してRGB値に評価される式を入力します。

     たとえば、#0000FFと入力すると、しきい値は青色でレンダリングされます。

   • BorderColor: 16進数でRGB値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択してRGB値に評価される式を入力します。

     たとえば、#000000と入力すると、しきい値の枠の色を黒でレンダリングします。

   • ShortDesc: しきい値に対するカスタムのホバー・テキストをプレーン・テキストで指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択してテキスト値を含むEL式を入力します。

4. 構成するしきい値ごとに、手順1から手順3を繰り返します。

5. ステータス・メーター・ゲージの場合、次の属性を設定して、しきい値の表示をカスタマイズします。

   1. 「構造」ウィンドウで「dvt:statusMeterGauge」を右クリックして、「プロパティに移動」を選択します。

   2. 「プロパティ・インスペクタ」の「ThresholdDisplay」フィールドで、ドロップダウン・メニューを使用してしきい値の配置および外観をカスタマイズします。

      デフォルトでは、しきい値はインジケータで表示されています。現在のしきい値を描画エリアに表示する場合、「currentOnly」を選択します。すべてのしきい値を描画エリアに表示するには、「all」を選択します。

   3. 「PlotArea」フィールドで、ドロップダウン・メニューを使用して描画エリアの表示を有効または無効にします。

      デフォルトでは、「PlotArea」は「auto」に設定されています。これによって、しきい値が構成されていて、「ThresholdDisplay」が「currentOnly」または「all」に設定されている場合に描画エリアが表示されます。この値を「on」または「off」に設定することもできます。

   4. 「インジケータ」フィールドで、0から1までの値を入力して、インジケータの相対的なサイズを変更します。

      たとえば、描画エリアの50%を使用するようにインジケータを設定するには、0.5と入力します。図25-20に、インジケータのサイズを0.5に変更した効果を示します。

      図25-20 0.5に設定されたステータス・メーター・ゲージのインジケータ

      
      

25.3.2 ゲージ・スタイル要素の書式設定

ゲージのスタイルをカスタマイズして、ゲージの初期サイズを変更したり、スタイル要素をラベルおよび他のプレゼンテーション機能に適用したりできます。

25.3.2.1 ゲージ・サイズの変更方法およびCSSスタイルの適用方法

CSSスタイルを適用したり、ゲージのinlineStyle属性に値を指定して、ゲージの幅および高さをカスタマイズできます。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ゲージのサイズを指定する手順:

1. 「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」で、「スタイル」セクションを開きます。「InlineStyle」属性でゲージの初期サイズを指定します。固定サイズを指定したり、幅と高さの両方に対して相対的割合を指定できます。

   たとえば、コンテナの50%の幅で200ピクセルの高さのゲージを作成するには、InlineStyle属性に次のように設定します。

   width:50%;height:200px
   

   
   

   ベスト・プラクティスのヒント: inlineStyle属性に100%の幅を指定するかわりに、styleClass属性をAFStretchWidthに設定します。

   
   

ゲージにCSSスタイルを適用する手順:

1. 「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」で、「スタイル」セクションを開き、「styleClass」フィールドにスタイル・クラスの名前を入力します。

   たとえば、コンテナの幅を100%使用するようにゲージの幅を設定するには、StyleClass属性に次の設定を使用します。

   AFStretchWidth
   

   CSSスタイルの適用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

25.3.2.2 ゲージ・テキストの書式設定方法

次のゲージの子コンポーネントでテキストを書式設定できます。

• gaugeMetricLabel

• gaugeTickLabel

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ゲージのテキストを書式設定する手順:

1. 「構造」ウィンドウで「dvt:gaugeMetricLabel」または「dvt:gaugeTickLabel」を右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」で、LabelStyleの値を入力します。

   このプロパティは、font-weightおよびfont-sizeなどのフォント関連のCSS属性を受け入れます。たとえば、ラベルを太字に設定するには、「LabelStyle」に次を入力します。

   font-weight:bold;
   

カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、ゲージ・コンポーネントのスタイル属性も設定できます。ゲージ・コンポーネントで使用されるスタイルを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。詳細は、25.3.2.3項「スキニングおよびゲージのスタイル要素に関する必知事項」を参照してください。

25.3.2.3 スキニングおよびゲージのスタイル要素に関する必知事項

カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、ゲージ・コンポーネントのフォント属性およびその他のスタイル属性をグローバルに設定できます。ゲージ・コンポーネントで使用されるスタイルを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。

ADFデータ視覚化ツール・スキン・セレクタを使用して、ゲージ・コンポーネントのスタイルを定義できます。スタイルの設定をサポートするゲージ・コンポーネントのスキン・セレクタには、次のものがあります。

• af|dvt-dialGauge

• af|dvt-ledGauge

• af|dvt-ratingGauge

• af|dvt-ratingGauge::selected-shape

• af|dvt-ratingGauge::unselected-shape

• af|dvt-ratingGauge::hover-shape

• af|dvt-ratingGauge::changed-shape

• af|dvt-statusMeterGauge

• af|dvt-gaugeMetricLabel

• af|dvt-gaugeTickLabel

• af|dvt-gaugeThreshold

• af|dvt-gaugeThreshold::index$

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

カスタム・スキンを使用してゲージ・スタイルを設定する手順:

1. ゲージ・サブコンポーネント用に定義されたスキン・スタイル・セレクタを含むアプリケーションに、カスタム・スキンを追加します。

   たとえば、mySkin.cssファイルのすべてのゲージのメトリック・ラベル用フォント・ファミリは次のように指定します。

   af|dvt-gaugeMetricLabel
   {
     -tr-font-weight:bold;
   }
   

2. trinidad-config.xmlファイルでカスタム・スキンを使用するようにアプリケーションを構成します。

スタイルおよびスキンの使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

25.3.3 ゲージの数値データ値の書式設定方法

ゲージのgaugeMetricLabel子コンポーネントを使用すると、ダイアル・ゲージ、LEDゲージおよびステータス・メーター・ゲージのメトリック値の外観を書式設定できます。gaugeTickLabel子タグを使用して、ダイアル・ゲージのティック・ラベルの外観も書式設定できます。各コンポーネントには、textType属性があり、メトリック値自体を表示するか、値が表す割合を表示するかを指定できます。

数値の書式設定で十分な場合もありますが、コンポーネントのプロパティを使用して、スケーリングを変更できます。

ゲージ・メトリックまたはティック・ラベル値の書式をさらに設定する場合は、ADF Faces標準コンバータaf:convertNumberを使用できます。たとえば、値を通貨として表示したり、特定の小数設定を表示したりできます。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ダイアル、LEDまたはステータス・メーター・ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ゲージの数値を書式設定する手順:

1. ダイアル・ゲージのティック・ラベルを書式設定する場合、「構造」ウィンドウで、「dvt:dialGauge」コンポーネントを右クリックし、「ダイアル・ゲージの中に挿入」→「dvt:gaugeMetricLabel」または「dvt:gaugeTickLabel」を選択します。

2. 構造ウィンドウで「dvt:gaugeMetricLabel」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。

3. 「プロパティ・インスペクタ」で、次の値を設定します。

   • Scaling: 属性のドロップダウン・リストを使用して、デフォルトのスケーリングを「auto」から変更します。使用可能なスケーリング・オプションのいずれかを選択するか、「none」を選択してスケーリングを無効にできます。

   • TextType: 属性のドロップダウン・リストを使用して、デフォルトのテキスト・タイプを「numberから「percent」に変更します。

4. ゲージ・メトリックまたはティック・ラベルで表示されるデータ値に追加の書式設定を指定する場合は、次のようにします。

   1. 「構造」ウィンドウで、「dvt:gaugeMetricLabel」または「dvt:gaugeTickLabel」ノードを右クリックし、「(ゲージのメトリック・ラベルまたはゲージのティック・ラベル)の中に挿入」→「af:convertNumber」を選択します。

   2. 「af:convertNumber」ノードを右クリックし、「プロパティに移動」を選択します。

   3. プロパティ・インスペクタで、「af:convertNumber」コンポーネントの属性の値を指定して、追加の書式設定を行います。「ヘルプ」をクリックするか、[F1]を押すと、af:convertNumberコンポーネントの完全なタグ・ドキュメントが表示されます。

25.3.4 ゲージのビジュアル効果を無効にする方法

図25-10に示すように、デフォルトでは、ゲージはグラデーションの色およびオーバーレイが設定されて表示されます。これらのビジュアル効果を無効にするには、ゲージのvisualEffects属性をnoneに設定します。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ゲージのビジュアル効果を無効にする手順:

1. 「構造」ウィンドウで「dvt:typeGauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」で「外観」セクションを開き、VisualEffects属性のドロップダウン・リストから「none」を選択します。

25.3.5 ゲージのアニメーションを構成する方法

ゲージのアニメーションを構成するには、af:transitionタグをゲージ・コンポーネントの子として追加し、トリガー・タイプおよび遷移効果を構成します。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ゲージのアニメーションを構成する手順:

1. 「構造」ウィンドウで、ゲージ・コンポーネントをクリックします。

2. 次の例に示すように、ソース・エディタで、強調表示したゲージ・コンポーネントの子としてaf:transitionタグを追加します。

   <af:transition triggerType="display" transition="auto"/>
   

25.3.6 ステータス・メーター・ゲージの参照線を構成する方法

ステータス・メーター・ゲージの軸上に指定した値で、参照線を追加できます。参照線を構成するには、dvt:referenceLineコンポーネントをステータス・メーター・ゲージに追加し、必要に応じて構成します。

例25-4に、図25-15のゲージおよび参照線を作成するJSFページのコードを示します。

例25-4 ステータス・メーター・ゲージの参照線のコード例

<af:panelGroupLayout id="pgl1" layout="horizontal">
  <af:spacer width="5" id="s1"/>
  <dvt:statusMeterGauge value="90" indicatorSize="0.5" plotArea="on" id="smg1">
    <dvt:referenceLine color="#FFFFFF" value="75" id="rl1"/>
    <dvt:referenceLine color="#000000" value="95" id="rl2"/>
    <dvt:gaugeThreshold maximum="33" id="gt1"/>
    <dvt:gaugeThreshold maximum="67" id="gt2"/>
    <dvt:gaugeThreshold id="gt3"/>
  </dvt:statusMeterGauge>
  <af:spacer width="25" id="s2"/>
  <dvt:statusMeterGauge inlineStyle="width:50px;height:50px;"
                        orientation="circular" value="90" id="smg2">
    <dvt:referenceLine color="#FFFFFF" value="75" id="rl3"/>
    <dvt:referenceLine color="#000000" value="95" id="rl4"/>
    <dvt:gaugeThreshold maximum="33" id="gt4"/>
    <dvt:gaugeThreshold maximum="67" id="gt5"/>
    <dvt:gaugeThreshold id="gt6"/>
  </dvt:statusMeterGauge>
</af:panelGroupLayout>

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

参照線をステータス・メーター・ゲージに追加する手順:

1. 「構造」ウィンドウで「dvt:statusMeterGauge」を右クリックして、「ステータス・メーター・ゲージの中に挿入」→「dvt:referenceLine」を選択します。

2. 「dvt:referenceLine」ノードを右クリックして、「プロパティに移動」を選択します。

3. 「プロパティ・インスペクタ」で、次の値を入力します。

   • Value: 参照線の値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択して参照線の値に評価される式を入力します。

   • Color: 16進数でRGB値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択してRGB値に評価される式を入力します。

     たとえば、参照線を白色でレンダリングするには、#000000と入力します。

   • LineStyle: 属性のドロップダウン・リストを使用して、線を「solid」から「dashed」または「dotted」に変更します。

   • LineWidth: 線の幅を指定します。

25.4 ゲージへの対話性の追加

ツールチップ、ポップアップおよびコンテキスト・メニューおよび値変更のサポートを追加すると、ゲージに対話性を追加できます。

25.4.1 ゲージのツールチップを構成する方法

ゲージのshortDesc属性の値を設定して、ゲージのツールチップを構成します。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ツールチップをゲージに追加する手順:

1. 「構造」ウィンドウで「dvt:typeGauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。

2. 「プロパティ・インスペクタ」で、「アクセシビリティ」セクションを開きます。

3. 「ShortDesc」フィールドで、ゲージの説明を入力します。属性のドロップダウン・メニューを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを開き、テキスト・リソースまたはゲージの説明を含むEL式を選択することもできます。

25.4.2 ポップアップまたはコンテキスト・メニューをゲージに追加する方法

ポップアップまたはコンテキスト・メニューを追加するプロセスは、基本的に同じです。af:showPopupBehaviorタグをゲージ・コンポーネントの子として追加し、ポップアップ・メニューの場合はトリガー・タイプをclickとして、コンテキスト・メニューの場合はcontextMenuとして定義し、ページに必要な動作が含まれるaf:popupを追加します。

例25-5に、図25-12で示したポップアップ・メニュー用のページのコードを示します。この例では、af:showPopupBehaviorコンポーネントがpopupIdを使用してaf:popupコンポーネントを参照しています。af:popupコンポーネントがaf:noteWindowコンポーネントを使用して構成されていて、これはaf:outputFormattedコンポーネントで簡単なメッセージを表示するように構成されています。af:showPopupBehaviorタグのtriggerTypeはclickに設定されており、ユーザーがゲージの任意の場所をクリックしたときにノート・ウィンドウが起動されます。

例25-5 ゲージのポップアップ・メニューのコード例

<af:group id="g1">
  <dvt:dialGauge id="dialGauge1" value="63" shortDesc="Dial Gauge with Popup">
    <af:showPopupBehavior popupId="::noteWindowPopup" triggerType="click"/>
    <dvt:gaugeMetricLabel rendered="true" id="gml1"/>
  </dvt:dialGauge>
  <af:popup childCreation="deferred" autoCancel="disabled"
            id="noteWindowPopup" launcherVar="source"
            clientComponent="true" eventContext="launcher">
    <af:noteWindow id="nw1">
      <af:outputFormatted value="This is an example of a gauge popup." id="of1"
                          shortDesc="Gauge Popup Example"/>
    </af:noteWindow>
  </af:popup>
</af:group>

次のコード・スニペットに示すように、af:showPopupBehaviorコンポーネントのトリガー・タイプをcontextMenuに変更すると、図25-13に示したコンテキスト・メニューにポップアップを変更できます。

<af:showPopupBehavior popupId="::noteWindowPopup" triggerType="contextMenu"/>

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

ポップアップ・コンポーネントをページに追加します。af:popupコンポーネントの構成の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

ポップアップまたはコンテキスト・メニューをゲージに追加する手順:

1. 「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「ゲージのタイプの中に挿入」→「af:showPopupBehavior」を選択します。

2. 「af:showPopupBehavior」を右クリックし、「プロパティに移動」を選択します。

3. 「プロパティ・インスペクタ」で、次の値を入力します。

   • PopupId: af:popupコンポーネントのIDを指定します。

   • TriggerType: ポップアップ・メニューの場合、clickと入力します。コンテキスト・メニューの場合、contextMenuと入力します。

   オプションで、Align、AlignIdおよびDisabledの値を設定します。af:showPopupBehaviorコンポーネントの詳細は、「コンポーネント・ヘルプ」をクリックしてください。

25.4.3 ゲージに値変更のサポートを構成する方法

ゲージのreadOnly属性をfalseに設定すると、ユーザーがダイアル・ゲージまたは評価ゲージでメトリック値を変更できるようになります。

サーバーで変更を処理するには、ゲージのvalueChangeListener属性でリスナーを指定します。

例25-6に、サーバーで値変更を処理するように構成した評価ゲージの値変更リスナーの例を示します。この例では、評価ゲージおよびリスナーはgaugeDataという名前のマネージドBeanに含まれています。リスナーの名前はratingChangedListenerで、新しい値をコンソールに出力します。

例25-6 ゲージに対するサーバー側の値変更リスナー

import javax.faces.event.ValueChangeEvent;

public class GaugeData {
  private Double gaugeValue = 3.0;
  public void ratingChangedListener (ValueChangeEvent e){
    if (e != null){
      gaugeValue = (Double) e.getNewValue();
      System.out.println("You clicked on " + gaugeValue + " stars");
    }
  }
  public Double getGaugeValue(){
    return gaugeValue;
  }
}

例25-7に、gaugeDataマネージドBeanを使用するように構成された評価ゲージのためのJSFページのコードを示します。

例25-7 値変更リスナーで構成された評価ゲージのためのJSFページのコード

<dvt:ratingGauge id="ratingGauge1" readOnly="false" value="#{gaugeData.gaugeValue}"
                valueChangeListener="#{gaugeData.ratingChangedListener}">
</dvt:ratingGauge>

valueChangeおよびinputイベント・タイプ用に構成したaf:clientListenerコンポーネントを使用して、クライアントで変更を処理することもできます。このメソッドを使用するには、変更イベントの処理を実行するJavaScript関数を作成する必要があります。

例25-8に、2つのaf:clientListenerコンポーネント(1つはvalueChangeイベントを処理し、もう1つはinputイベントを処理)を使用して構成した評価ゲージの例を示します。この例では、valueChangeListener関数はアラートをブラウザに送信し、inputListener関数はメッセージをブラウザのコンソール・ログに送信します。

例25-8 クライアント側イベントの処理用に構成した評価ゲージのためのJSFページのコード

<script type="text/javascript" xmlns="http://www.w3.org/1999/xhtml">
  function valueChangeListener(event) {
  alert("valueChange for " + event.getSource().getId() + ": " +
         event.getOldValue() + " --> " + event.getNewValue());
  }
  function inputListener(event) {
    console.log("input for " + event.getSource().getId() + ": " +
                 event.getValue());
  }
</script>
<dvt:ratingGauge id="ratingGauge1" readOnly="false" value="#{gauge.gaugeValue}">
  <af:clientListener method="valueChangeListener" type="valueChange"/>
  <af:clientListener method="inputListener" type="input"/>
</dvt:ratingGauge>

注意: この例では、表示のみのためにインラインJavaScriptを使用しています。インラインJavaScriptは、レスポンス・ペイロード・サイズを増加させる可能性があり、ブラウザにまったくキャッシュされないため、ブラウザのレンダリングをブロックすることがあります。インラインJavaScriptを使用するかわりに、すべてのスクリプトをJavaScriptライブラリに配置することを検討してください。JavaScriptのページへの追加の詳細は、3.3項「JavaScriptのページへの追加」を参照してください。クライアント側イベントの処理の詳細は、3.2項「クライアント・イベントのリスニング」を参照してください。

始める前に:

ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、25.2.5項「ゲージの構成」を参照してください。

ゲージをページに追加します。ゲージのページへの追加の詳細は、25.2.2項「ページへのゲージの追加方法」を参照してください。

サーバー側イベントの処理を構成する場合、値変更リスナーをゲージのマネージドBeanに追加します。マネージドBeanについてのヘルプが必要な場合、2.6項「マネージドBeanの作成と使用」を参照してください。

クライアント側イベントの処理を構成する場合、valueChangeおよびinputイベントを処理するJavaScript関数を作成します。クライアント側イベントの処理の詳細は、3.2項「クライアント・イベントのリスニング」を参照してください。

値変更サポートをゲージに構成する手順:

1. サーバー側の変更サポートを構成する場合、次のようにします。

   1. 「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。

   2. 必要な場合、「プロパティ・インスペクタ」で、「共通」セクションを開きます。

   3. ReadOnly属性のドロップダウン・リストから、「False」を選択します。

   4. 「動作」セクションを開きます。

   5. ValueChangeListener属性のドロップダウン・メニューから、「編集」を選択してゲージのマネージドBeanおよびリスナーを選択します。

      たとえば、 gaugeDataサンプルBeanを参照するには、「マネージドBean」フィールドのドロップダウン・リストから、「gaugeData」を選択し、このメソッドに対して「ratingChangedListener」を選択します。ValueChangeListener属性のドロップダウン・メニューから「式ビルダー」を選択して、ゲージのリスナーに評価されるEL式を入力することもできます。

2. クライアント側のイベント・サポートを構成する場合、次のようにします。

   1. 「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「ゲージのタイプの中に挿入」→「af:clientListener」を選択します。

   2. クライアント・リスナーの挿入ダイアログで、イベントおよびイベント・タイプを処理するJavaScript関数の名前を入力します。

      たとえば、例25-8で示したvalueChangeListener()関数の例を使用するには、メソッドにvalueChangeListenerを、イベント・タイプにvalueChangeを入力します。

   3. 必要に応じてクライアント・リスナーを追加するには、手順1および手順2を繰り返します。

   4. 「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。

   5. 必要な場合、「プロパティ・インスペクタ」で、「共通」セクションを開きます。

   6. ReadOnly属性のドロップダウン・リストから、「False」を選択します。