| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.1.3) E59439-02 |
|
 前 |
 次 |
この章では、簡単なUI優先開発を使用しながら、ADFデータ視覚化コンポーネントのダイアル、LED、評価、ステータス・メーター・ゲージ・コンポーネントを使用する方法について説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたゲージの作成に関する項を参照してください。
この章の内容は次のとおりです。
ゲージは、売上高、在庫レベル、温度または速度など量を示すための計測器です。ゲージには通常1つのデータ値が表示され、多くの場合グラフより効果的です。しきい値を使用すると、ゲージでは、色を使用して許容範囲または非許容範囲などの状態情報を表示できます。たとえば、ゲージ値軸では、赤、黄、緑の色の範囲を示して、低、中、高の状態を表す場合があります。多数のデータ値を一目で比較する必要がある場合、複数のゲージを表セル内に表示できます。
|
ベスト・プラクティスのヒント: しきい値のテキスト値や現在値など、複数のデータ値が必要な場合は、リストや表コンポーネントの方がゲージより適していることがあります。 |
ゲージ・コンポーネントには、ダイアル、LED、評価およびステータス・メーターの4種類のゲージ・タイプがあります。
ゲージは通常、1つのデータ・ポイントを表示するために使用されます。ゲージ・コンポーネントでは、次のタイプのゲージがサポートされています。
ダイアル: 循環軸上にプロットされたメトリック値を表示します。ゲージの背景の属性は、ゲージの背景を長方形、円または半円のどちらで表示するかを決定します。インジケータは軸上のゲージのメトリック値を指します。
図24-1に、背景が円、半円および長方形に設定された3つのダイアル・ゲージを示します。3つの例では、ゲージのメトリック値はすべて63です。
LED: キー・パフォーマンス・インジケータ(KPI)などの測定値をグラフィカルに表します。LEDゲージには、ステータスを示すために色を使用する円形または長方形、カラー・インジケータに加えて、よい(上向き)、普通(左または右向き)または悪い(下向き)の状態を示す、上下左右を指す三角形または矢印など、数種の図形を使用できます。
図24-2に、様々な図形、サイズおよびしきい値で構成されたLEDゲージを示します。
評価: メトリック値を表示し、オプションでメトリック値の入力を受け入れます。このゲージは、通常、星を使用した映画の評価など、製品やサービスの評価の表示に使用します。
図24-3に、星、ダイアモンド、円および長方形を使用して構成した評価ゲージを示します。
ステータス・メーター: 水平軸または循環軸上にメトリック値を表示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。オプションで、ステータス・メーターは、メトリック値が事前定義されたしきい値内のどこに含まれるかを色で示します。
図24-4に、水平ステータス・メーターおよび円形ステータス・メーター用に構成されたステータス・メーター・ゲージの例を示します。ゲージは、しきい値を使用するように構成されており、これは色でゲージの値が許容範囲内にあるかどうかを示します。
表のセル内にゲージを表示して、ユーザーがゲージを関連情報と一緒に見て比較できるようにすることもできます。図24-5に、各国の人口密度を、2010年の最高人口と一緒に比較するステータス・メーター・ゲージの例を示します。この例では、ステータス・メーターは、人口密度が非常に高い国を赤で、人口密度が非常に低い国を緑で示すしきい値で構成されています。
ADFデータ視覚化ゲージ・コンポーネントでは、形状のバリエーション、しきい値の表示、ビジュアル効果、アニメーションおよびカスタマイズ可能な色やラベル・スタイルなど、幅広いプレゼンテーション機能を提供します。
ゲージ・コンポーネントでは、ポップアップおよびコンテキスト・メニューなどの対話機能もサポートしています。すべてのゲージは値の変更もサポートしています。これによって、ユーザーはゲージのメトリック値を変更できます。
ゲージの形状は構成可能で、ゲージ・タイプによって異なります。
ダイアル・ゲージ: background属性が形状およびシェーディングを設定します。例24-0に、ダイアル・ゲージに使用可能な背景を示します。これには、円、ドーム型および長方形があり、それぞれ、アルタ、アンティーク、ダーク、ライト・シェーディングの種類があります。
LEDゲージ: type属性はLEDゲージの形状を設定します。図24-7に、LEDゲージに使用可能なタイプを示します。これには、円、長方形、矢印、三角形、ダイアモンドおよび星があります。
ステータス・メーター・ゲージ: orientation属性は、ステータス・メーターを水平軸に沿って表示するのか、循環軸に沿って表示するのかを決定します。図24-4に、長方形および円形として構成されたステータス・メーター・ゲージの例を示します。
評価ゲージ: 評価ゲージのshape属性は、評価ゲージの形状を決定します。図24-3に、評価ゲージに使用可能な形状を示します。これには、星、ダイアモンド、円および長方形があります。
ゲージのしきい値には、ステータス・メーター・ゲージまたはLEDゲージの範囲の上限を表す値が含まれています。通常、しきい値は、ゲージのメトリック値が許容範囲内にあるかどうかを示すために定義されます。
図24-8に、3つの水平ステータス・メーターおよび3つの円形ステータス・メーターを示します。それぞれ、ゲージのメトリック値が25以下の場合に赤色のインジケータを、メトリック値が50以下の場合に黄色のインジケータを、50を超える場合に緑色のインジケータを表示するように構成されています。
図24-9に、3つのLEDゲージを示します。それぞれ、ゲージのメトリック値が25以下の場合に赤色で、メトリック値が50以下の場合に黄色で、50を超える場合に緑色で表示するように構成されています。
デフォルトでは、ゲージはグラデーションおよびオーバーレイが色の表示に適用されています。ビジュアル効果を無効にすると、平坦なデザインになります。図24-10の2行目に、図24-9の3つのLEDゲージのビジュアル効果を無効にした結果を示します。
HTML5テクノロジをサポートするブラウザの場合、ゲージでは初回表示またはaf:transition子タグによるデータ変更時のアニメーションをサポートしています。
shortDesc属性を使用すると、ユーザーがカーソルをゲージ上で移動したときに表示する、コンテキスト情報のツールチップを構成できます。図24-11に、ダイアル・ゲージのツールチップを示します。
af:showPopupBehaviorタグを使用して、ポップアップまたはコンテキスト・メニューを表示するようにゲージを構成できます。
図24-12に、ユーザーがゲージをクリックしたときにポップアップを表示するように構成されたダイアル・ゲージを示します。ポップアップはノート・ウィンドウに出力メッセージを表示します。
図24-13に、ユーザーがゲージを右クリックしたときにコンテキスト・メニューを表示するように構成されたダイアル・ゲージを示します。コンテキスト・メニューはノート・ウィンドウに出力メッセージを表示します。
ユーザーからの入力を受け入れてメトリック値を変更するように、ゲージを構成できます。たとえば、ユーザーが星の数を映画の評価に割り当てることができる、評価ゲージを構成できます。
図24-14に、ユーザーの入力を受け入れるように構成された評価ゲージの例を示します。ゲージの初期メトリック値は、1です。星の上でマウスを動かすと、色が変化し、選択した星の数を示します。変更を確定するには、強調表示されている星の中で、最も大きな値の星をクリックします。
参照線を表示するステータス・メーター・ゲージを構成できます。参照線をしきい値と組み合せて使用すると、トレンド情報を表示できます。たとえば、前回の値とターゲット情報を一緒に表示できます。
図24-15に、参照線を表示するように構成した水平ステータス・メーター・ゲージおよび円形ステータス・メーター・ゲージを示します。それぞれのゲージは、白い参照線と黒い参照線を表示するように構成されています。白い参照線の値は45に設定されていて、黒い参照線の値は95に設定されています。
ゲージ・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんゲージ・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。ゲージ・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、ゲージをリフレッシュできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーが実行時にゲージの表示方法を変更できるようになっている場合、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第34章「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コンポーネントを使用するには、データを定義し、ゲージをページに追加し、JDeveloperで追加の構成を完了します。
ゲージでは、次の種類のデータ値を表します。
メトリック:ゲージがプロットする値。この値は、「プロパティ」ウィンドウでValue属性の静的データとして指定できます。これを、データ・コントロールで指定することもできます。これは、ゲージで唯一の必須データです。
最小および最大:ゲージの値軸で最小点と最大点を示すオプションの値。この値は、データ・コレクションからの動的データとして指定できます。これらは、ゲージの「プロパティ」ウィンドウの「最小値」および「最大値」フィールドで静的データとして指定することもできます。
すべてのゲージのデフォルトの最小値は0です。ダイアル・ゲージ、LEDゲージおよびステータス・メーター・ゲージのデフォルトの最大値は100で、評価ゲージのデフォルトの最大値は5です。ゲージのメトリック値が最大値を超える場合、ゲージで適切に表示するには、この値を変更する必要があります。
しきい値: データ・コレクションからの動的データとして指定可能なオプションの値で、ゲージの値軸で許容範囲を示します。「プロパティ」ウィンドウで、ゲージしきい値タグを使用して、これらの値を静的データとして指定することもできます。詳細は、24.3.1項「ゲージしきい値の構成方法」を参照してください。
簡単なUI優先開発を使用してページを設計しているときには、「コンポーネント」ウィンドウを使用してゲージをJSFページに追加します。ページにゲージ・コンポーネントをドラッグ・アンド・ドロップすると、「ゲージの作成」ダイアログに使用可能なゲージ・タイプのカテゴリが説明とともに表示され、ゲージの作成を視覚的に支援します。図24-16に、水平ステータス・メーター・ゲージの作成ダイアログを示します。
ダイアログを完了し、ページにゲージが追加された後、「プロパティ」ウィンドウを使用してデータ値を指定すること、およびゲージに追加の表示属性を構成することができます。
「プロパティ」ウィンドウで、プロパティ・フィールドにマウス・カーソルを合わせると表示されるアイコンをクリックすることで、プロパティの説明や編集オプションを表示できます。図24-17に、ゲージ・コンポーネントのvalue属性の「プロパティ」メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してゲージを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたゲージの作成に関する項を参照してください。 |
始める前に:
ゲージの属性やゲージの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
次のタスクを実行する必要があります。
第3章「アプリケーション・ワークスペースの作成」で説明されているように、アプリケーション・ワークスペースを作成します。
第3章「ビュー・ページの作成」で説明されているように、ビュー・ページを作成します。
ページにゲージを追加する手順:
「コンポーネント」ウィンドウで、「ADFデータ視覚化」ページの「ゲージ」パネルから希望するゲージをページにドラッグ・アンド・ドロップし、「ゲージの作成」ダイアログを開きます。
「ゲージの作成」ダイアログで、「OK」をクリックしてページにゲージを追加します。
「プロパティ」ウィンドウで、ゲージの属性を確認します。「コンポーネント・ヘルプ」ボタンを使用して、gaugeコンポーネントの完全なタグ・ドキュメントを表示します。
「コンポーネント」ウィンドウからゲージをJSFページにドラッグ・アンド・ドロップした場合は、JDeveloperはタグの最小セットしか生成しません。
評価ゲージ以外のすべてのゲージの場合、JDeveloperではdvt:gaugeMetricLabelタグをページに追加します。しきい値をサポートしているステータス・メーター・ゲージおよびLEDゲージの場合、JDeveloperでは、 ゲージの最大値を表すdvt:gaugeThresholdタグを1つ追加します。
例24-1に、ダイアル・ゲージ、LEDゲージ、ステータス・メーター・ゲージおよび評価ゲージのページにJDeveloperが追加するデフォルト・コードを示します。この例では、各ゲージはaf:panelGridLayoutコンポーネントのグリッド・セルに含まれています。ゲージ関連のタグは太字で強調されています。
例24-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">
<dvt:gaugeMetricLabel rendered="true" id="gml1"/>
</dvt:dialGauge>
</af:gridCell>
<af:gridCell marginStart="5px" width="50%" id="gc2">
<dvt:ledGauge id="ledGauge1" type="circle">
<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">
<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"/>
</af:gridCell>
</af:gridRow>
</af:panelGridLayout>
パネル・グリッド・レイアウト・コンポーネントの詳細は、9.3.1項「panelGridLayout、gridRowおよびgridCellコンポーネントを使用してグリッドベースのレイアウトを作成する方法」を参照してください。
ゲージのメトリック値はゲージで唯一の必須データです。この値をゲージのvalue属性で指定します。「プロパティ」ウィンドウまたはゲージの数値を返すマネージドBeanで、value属性の値を静的な数値として指定できます。あるいは、データ・コントロールをゲージにバインドすることによって指定することもできます。
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
データをゲージに追加する手順:
オプションで、ゲージのメトリック値を返すマネージドBeanを作成します。
クラス作成のヘルプが必要な場合は、『Oracle JDeveloperによるアプリケーションの開発』のJavaコードの使用に関する項を参照してください。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
「構造」ウィンドウで「dvt:typeGauge」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次のいずれかを実行します。
ゲージにデータを静的に追加したり、ゲージのメトリック値を返すマネージドBeanを参照するには、「共通」セクションを開き、「値」フィールドにメトリック値を指定します。
静的な数値を入力するか、マネージドBeanおよびメトリック値を参照するEL式を指定します。
たとえば、getGaugeMetric()という名前のメソッドにゲージのメトリック値を返すgaugeという名前のマネージドBeanにEL式を指定するには、「値」フィールドに#{gauge.gaugeMetric}と入力します。
EL式の作成のヘルプについては、第3.5.1項「EL式の作成方法」を参照してください。
ゲージをデータ・コントロールにバインドするには、「ADFコントロールにバインド」をクリックしてデータ・コレクションを選択します。
データ・コントロールを使用してデータをゲージに指定する方法の詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたゲージの作成に関する項を参照してください。
必要に応じて、「プロパティ」ウィンドウで、「外観」セクションを開き、「最小値」および「最大値」フィールドに値を入力します。
静的な数値を入力するか、マネージドBeanを参照するEL式、および最小値または最大値を指定します。
|
注意: ゲージのメトリック値がデフォルトの最大値を超える場合、最大値を変更する必要があります。変更しないと、ゲージは適切に表示されません。 |
LEDゲージまたはステータス・メーター・ゲージに事前定義された範囲のしきい値を表示する場合、しきい値ごとにdvt:gaugeThresholdタグを追加します。詳細は、24.3.1項「ゲージしきい値の構成方法」を参照してください。
ゲージ・コンポーネントのプロパティはゲージを作成するのに十分ですが、ゲージのプロパティを変更してゲージの表示および動作をさらにカスタマイズできます。子コンポーネントまたはサポートされているファセットを追加および構成して、ゲージの表示および動作をカスタマイズすることもできます。接頭辞dvt:は、各ゲージ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)Oracle ADF Facesデータ視覚化ツールのタグ・リファレンスのタグ・ライブラリに属することを示します。
構成可能な要素は、ゲージ・タイプによって異なります。すべてまたは複数のゲージ・タイプに使用可能な要素もあります。使用可能な要素は次のとおりです。
minimumおよびmaximum: ゲージの最小値および最大値を指定する属性。
inlineStyle: コンポーネントの外側の要素(enclosing div)のスタイルを指定する属性。
shortDesc: このコンポーネントの短い説明を指定する属性。ユーザーがマウスをゲージの上に置いたときに表示されるツールチップ・テキストをカスタマイズする際に使用します。
visualEffects: グラデーションおよびオーバーレイを表示するかどうかを指定する属性。デフォルトでは、これはautoに設定されていますが、noneに設定してビジュアル効果を無効にすることもできます。
styleClass: このコンポーネント使用する場合にCSSスタイル・クラスを設定する属性。
gaugeMetricLabel: メトリック・ラベルのスタイル、可視性、スケーリングおよびテキスト・タイプを決定する子コンポーネント。この属性は、メトリック値として形状の数を使用する評価ゲージでは使用できません。
readOnly: ユーザーがゲージのメトリック値を変更できるかどうかを決定する、ダイアル・ゲージ、評価ゲージおよびステータス・メーター・ゲージの属性。
gaugeThreshold: LEDゲージまたはステータス・メーター・ゲージのしきい値を指定する子コンポーネント。
borderColor: LEDゲージまたはステータス・メーター・ゲージのインジケータの枠の色を指定する属性。
color: LEDゲージまたはステータス・メーター・ゲージのインジケータの塗りつぶしの色を指定する属性。
ゲージの「プロパティ」ウィンドウで「コンポーネント・ヘルプ」をクリックすると、ゲージ・タグおよびサポートされている子コンポーネントの完全なリストを表示できます。
ダイアル・ゲージに固有の構成可能な要素は次のとおりです。
background: ダイアル・ゲージの形状および背景スタイルを決定する属性
indicator: ダイアル・ゲージのインジケータ・スタイルを指定する属性
gaugeTickLabel: ティック・ラベルのスタイル、可視性、スケーリングおよびテキスト・タイプを決定する子コンポーネント
LEDゲージに固有の構成可能な要素は次のとおりです。
type: LED ゲージの形状を指定する属性
size: LEDゲージの相対的なサイズを決定する属性
rotation: 矢印または三角形の形状を使用するように構成されたLEDゲージの回転を指定します。
表のセル内にゲージを表示して、ユーザーがゲージを関連情報と一緒に見て比較できるようにすることができます。ADF tableコンポーネントの直下の子は、columnコンポーネントであることが必要です。表示されるそれぞれの列コンポーネントは、表の個別の列として表示されます。列コンポーネントには、コンテンツやイメージの表示、またはその他の機能の提供に使用されるコンポーネントが含まれます。
各列の子コンポーネントは、その列の各行のデータを表示します。列では、子コンポーネントは行ごとには作成されませんが、表では各行のレンダリングにスタンプ設定機能が使用されます。各子には、行ごとに一度スタンプが設定され、これがすべての行に対して繰り返されます。各行にスタンプが設定されると、現在行のデータが、EL式を使用して特定可能なプロパティにコピーされます。このプロパティに使用する名前を、表のvarプロパティを使用して指定します。表のレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。
例24-2に、図24-5に示されているOracle ADF表コンポーネントでゲージを表示するためのサンプル・コードを示します。この例では、表のvarプロパティがrowであり、表の値はgaugeDataという名前のマネージドBeanに格納されています。ゲージのメトリックは、valueフィールドで#{row.density}に設定されています。ゲージに関連するコードは強調されています。
例24-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>
例24-3に、gaugeDataマネージドBeanのサンプル・コードを示します。この例では、クラスはGaugeTableDataという名前です。
例24-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 Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたゲージの作成に関する項を参照してください。
始める前に:
ゲージの属性やゲージの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
次のタスクを実行する必要があります。
表およびゲージのデータを含むマネージドBeanを作成します。
図24-5に表示されている表を複製するには、gaugeDataという名前のマネージドBeanを作成し、例24-3のコードを追加します。マネージドBeanの詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。
ADF表を作成します。
例24-2に、図24-5の表を表示するために使用するコードを示します。デフォルトでは、ゲージ・コンポーネントは、表作成中にオプションとしてリストされません。ゲージを有効なコンポーネントとして含む列を構成します。表にゲージを追加する場合、コンポーネントを削除します。
表作成のヘルプが必要な場合は、12.3.4項「ページへの表の表示方法」を参照してください。
表にゲージを追加する手順:
「構造」ウィンドウで、「af:table」ノードを展開します。
ゲージに置き換えるコンポーネントを右クリックし、「削除」を選択します。
たとえば、af:outputTextを使用するように表の列を構成していた場合、それを右クリックし、「削除」を選択します。
ゲージを含める列を右クリックし、「列の中に挿入」→「ADFデータ視覚化」→「ゲージのタイプ」を選択します。
たとえば、水平ステータス・メーター・ゲージを表に追加するには、「列の中に挿入」→「ADFデータ視覚化」→「ステータス・メーター・ゲージ」を選択します。
「ゲージの作成」ダイアログでゲージのタイプを選択し、「OK」をクリックして表にゲージを追加します。
「構造」ウィンドウで「dvt:gaugeType」ノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウの「値」フィールドに、ゲージに表示するメトリック値を入力します。
たとえば、図24-5のゲージで使用されている値にゲージを設定するには、#{row.density}と入力します。
オプションで、「プロパティ」ウィンドウの「最小値」および「最大値」フィールドでゲージの最大値を入力します。
しきい値をサポートしているゲージを作成した場合、オプションで、必要な数値のしきい値をゲージに追加します。
たとえば、図24-5のステータス・メーター・ゲージは、人口密度が非常に高い国を赤で、人口密度が非常に低い国を緑で示すしきい値で構成されています。しきい値の構成のヘルプが必要な場合は、24.3.1項「ゲージしきい値の構成方法」を参照してください。
必要に応じてゲージ要素を書式設定します。
たとえば、例24-2のサンプル・コードでは、高さとサイズの値が次のように設定されています。
inlineStyle="height:22px" styleClass="AFStretchWidth"
ゲージ・スタイル要素の構成のヘルプが必要な場合は、24.3.2項「ゲージ・スタイル要素の書式設定」を参照してください。
しきい値、スタイル、数値データ値、ビジュアル効果、アニメーションおよび参照線など、多数のゲージ表示要素をカスタマイズできます。
しきい値は、特定の範囲の値を強調表示するステータス・メーター・ゲージまたはLEDゲージの数値データ値です。しきい値はゲージの最小値と最大値の間の値である必要があります。
ステータス・メーター・ゲージでは、しきい値で指定される範囲は、他の範囲と異なる色で色付けされます。しきい値はインジケータまたは描画エリアで表示できます。
図24-18に、しきい値用に構成した水平ステータス・メーター・ゲージおよび円形ステータス・メーター・ゲージを示します。1行目のゲージは、インジケータでしきい値を表示するように構成されています。2行目では、ゲージは描画エリアに現在のしきい値を表示するように構成されています。3行目では、ゲージは描画エリアにすべてのしきい値を表示するように構成されています。
LEDゲージでは、背景は、メトリック値を含むしきい値の範囲のために定義された色で塗りつぶされています。図24-19に、図24-18に示したステータス・メーターと同じ最大値および色の値を使用するしきい値で構成された3つのLEDゲージを示します。
「コンポーネント」ウィンドウからゲージをページにドラッグして、ステータス・メーター・ゲージまたはLEDゲージを作成すると、JDeveloperでは、ゲージの子としてdvt:gaugeThresholdタグが1つ追加されます。追加のdvt:gaugeThresholdタグを挿入し、しきい値のvalueおよびcolor属性を定義すると、しきい値を追加できます。
ゲージがデータ・バインドされている場合、ゲージのデータ・コレクションでしきい値の動的値を指定できます。しきい値の動的値の使用の詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたゲージの作成に関する項を参照してください。
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ステータス・メーター・ゲージまたはLEDゲージのしきい値を構成する手順:
「構造」ウィンドウで「dvt:statusMeterGauge」または「dvt:LEDGauge」コンポーネントを右クリックして、「(ステータス・メーター・ゲージまたはLEDゲージ)の中に挿入」→「しきい値」を選択します。
ゲージの作成方法によっては、すでにdvt:gaugeThresholdコンポーネントが1つ定義されていることがあります。その場合は、そのしきい値の次の手順に進むことができます。
「dvt:gaugeThreshold」ノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次の項目に値を設定します。
Maximum: しきい値の最大値を指定します。整数値を入力したり、ドロップダウン・メニューを使用して「式ビルダー」を選択して最大値を表すEL式を入力できます。
ゲージの最大値を表すしきい値に値を入力する必要はありません。この値は、ゲージのmaximum属性の値から自動的に導出されます。
Color: 16進数でRGB値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択してRGB値に評価される式を入力します。
たとえば、#0000FFと入力すると、しきい値は青色でレンダリングされます。
BorderColor: 16進数でRGB値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択してRGB値に評価される式を入力します。
たとえば、#000000と入力すると、しきい値の枠の色を黒でレンダリングします。
ステータス・メーター・ゲージの場合、次の属性を設定して、しきい値の表示をカスタマイズします。
「構造」ウィンドウで「dvt:statusMeterGauge」を右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウの「ThresholdDisplay」フィールドで、ドロップダウン・メニューを使用してしきい値の配置および外観をカスタマイズします。
デフォルトでは、しきい値はインジケータで表示されています。現在のしきい値を描画エリアに表示する場合、「currentOnly」を選択します。すべてのしきい値を描画エリアに表示するには、「all」を選択します。
「PlotArea」フィールドで、ドロップダウン・メニューを使用して描画エリアの表示を有効または無効にします。
デフォルトでは、「PlotArea」は「auto」に設定されています。これによって、しきい値が構成されていて、「ThresholdDisplay」が「currentOnly」または「all」に設定されている場合に描画エリアが表示されます。この値を「on」または「off」に設定することもできます。
「インジケータ」フィールドで、0から1までの値を入力して、インジケータの相対的なサイズを変更します。
たとえば、描画エリアの50%を使用するようにインジケータを設定するには、0.5と入力します。図24-20に、インジケータのサイズを0.5に変更した効果を示します。
ゲージのスタイルをカスタマイズして、ゲージの初期サイズを変更したり、スタイル要素をラベルおよび他のプレゼンテーション機能に適用したりできます。
CSSスタイルを適用したり、ゲージのinlineStyle属性に値を指定して、ゲージの幅および高さをカスタマイズできます。
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのサイズを指定する手順:
「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「スタイル」セクションを展開します。「InlineStyle」属性でゲージの初期サイズを指定します。固定サイズを指定したり、幅と高さの両方に対して相対的割合を指定できます。
たとえば、コンテナの50%の幅で200ピクセルの高さのゲージを作成するには、InlineStyle属性に次のように設定します。
width:50%;height:200px
|
ベスト・プラクティスのヒント: inlineStyle属性に100%の幅を指定するかわりに、styleClass属性をAFStretchWidthに設定します。 |
ゲージにCSSスタイルを適用する手順:
「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「スタイル」セクションを展開し、StyleClassフィールドにスタイル・クラスの名前を入力します。
たとえば、コンテナの幅を100%使用するようにゲージの幅を設定するには、StyleClass属性に次の設定を使用します。
AFStretchWidth
CSSスタイルの適用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
次のゲージの子コンポーネントでテキストを書式設定できます。
gaugeMetricLabel
gaugeTickLabel
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのテキストを書式設定する手順:
「構造」ウィンドウで「dvt:gaugeMetricLabel」または「dvt:gaugeTickLabel」を右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「LabelStyle」の値を入力します。
このプロパティは、font-weightおよびfont-sizeなどのフォント関連のCSS属性を受け入れます。たとえば、ラベルを太字に設定するには、「LabelStyle」に次を入力します。
font-weight:bold;
カスケード・スタイル・シート(CSS)を使用してスキンを作成し、アプリケーションでそのスキンを使用するように構成することにより、アプリケーション内のすべてのページにわたり、ゲージ・コンポーネントのスタイル属性も設定できます。ゲージ・コンポーネントで使用されるスタイルを定義するスキンを適用することで、アプリケーション内のページは、CSSファイルの変更で簡単に変更できる一貫したスタイルで、より小さく整理されたものになります。詳細は、24.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$
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
カスタム・スキンを使用してゲージ・スタイルを設定する手順:
ゲージ・サブコンポーネント用に定義されたスキン・スタイル・セレクタを含むアプリケーションに、カスタム・スキンを追加します。
たとえば、mySkin.cssファイルのすべてのゲージのメトリック・ラベル用フォント・ファミリは次のように指定します。
af|dvt-gaugeMetricLabel
{
-tr-font-weight:bold;
}
カスタム・スキン作成のヘルプが必要な場合は、『Oracle ADFスキン・エディタによるADFスキンの開発』のADFスキン・ファイルの作成に関する項を参照してください。
trinidad-config.xmlファイルでカスタム・スキンを使用するようにアプリケーションを構成します。
アプリケーションの構成のヘルプが必要な場合は、『Oracle ADFスキン・エディタによるADFスキンの開発』の「完成したADFスキンのWebアプリケーションへの適用」の章を参照してください。
スタイルおよびスキンの使用の詳細は、第31章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ゲージのgaugeMetricLabel子コンポーネントを使用すると、ダイアル・ゲージ、LEDゲージおよびステータス・メーター・ゲージのメトリック値の外観を書式設定できます。gaugeTickLabel子タグを使用して、ダイアル・ゲージのティック・ラベルの外観も書式設定できます。各コンポーネントには、textType属性があり、メトリック値自体を表示するか、値が表す割合を表示するかを指定できます。
数値の書式設定で十分な場合もありますが、コンポーネントのプロパティを使用して、スケーリングを変更できます。
ゲージ・メトリックまたはティック・ラベル値の書式をさらに設定する場合は、ADF Faces標準コンバータaf:convertNumberを使用できます。たとえば、値を通貨として表示したり、特定の小数設定を表示したりできます。
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ダイアル、LEDまたはステータス・メーター・ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージの数値を書式設定する手順:
ダイアル・ゲージのティック・ラベルを書式設定する場合、「構造」ウィンドウで、「dvt:dialGauge」コンポーネントを右クリックし、「ダイアル・ゲージの中に挿入」→「ゲージのティック・ラベル」を選択します。
構造ウィンドウで「dvt:gaugeMetricLabel」または「dvt:sunburst」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次の項目に値を設定します。
Scaling: 属性のドロップダウン・リストを使用して、デフォルトのスケーリングを「auto」から変更します。使用可能なスケーリング・オプションのいずれかを選択するか、「none」を選択してスケーリングを無効にできます。
TextType: 属性のドロップダウン・リストを使用して、デフォルトのテキスト・タイプを「numberから「percent」に変更します。
ゲージ・メトリックまたはティック・ラベルで表示されるデータ値に追加の書式設定を指定する場合は、次のようにします。
「構造」ウィンドウで、「dvt:gaugeMetricLabel」または「dvt:gaugeTickLabel」ノードを右クリックし、「(ゲージのメトリック・ラベルまたはゲージのティック・ラベル)の中に挿入」→「数値の変換」を選択します。
「af:convertNumber」ノードを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、af:convertNumberコンポーネントの属性の値を指定して、追加の書式設定を行います。「ヘルプ」をクリックするか、[F1]を押すと、af:convertNumberコンポーネントの完全なタグ・ドキュメントが表示されます。
図24-10に示すように、デフォルトでは、ゲージはグラデーションの色およびオーバーレイが設定されて表示されます。これらのビジュアル効果を無効にするには、ゲージのvisualEffects属性をnoneに設定します。
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのビジュアル効果を無効にする手順:
「構造」ウィンドウで「dvt:typeGauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで「外観」セクションを開き、VisualEffects属性のドロップダウン・リストから「none」を選択します。
ゲージのアニメーションを構成するには、af:transitionタグをゲージ・コンポーネントの子として追加し、トリガー・タイプおよび遷移効果を構成します。
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ゲージのアニメーションを構成する手順:
「構造」ウィンドウで、ゲージ・コンポーネントをクリックします。
次の例に示すように、ソース・エディタで、強調表示したゲージ・コンポーネントの子としてaf:transitionタグを追加します。
<af:transition triggerType="display" transition="auto"/>
ステータス・メーター・ゲージの軸上に指定した値で、参照線を追加できます。参照線を構成するには、dvt:referenceLineコンポーネントをステータス・メーター・ゲージに追加し、必要に応じて構成します。
例24-4に、図24-15のゲージおよび参照線を作成するJSFページのコードを示します。
例24-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>
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
参照線をステータス・メーター・ゲージに追加する手順:
「構造」ウィンドウで「dvt:statusMeterGaugeを右クリックして、「ステータス・メーター・ゲージの中に挿入」→「参照線」を選択します。
「dvt:referenceLine」ノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次の値を入力します。
Value: 参照線の値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択して参照線の値に評価される式を入力します。
Color: 16進数でRGB値を指定するか、属性のドロップダウン・メニューから「式ビルダー」を選択してRGB値に評価される式を入力します。
たとえば、参照線を白色でレンダリングするには、#000000と入力します。
LineStyle: 属性のドロップダウン・リストを使用して、線を「solid」から「dashed」または「dotted」に変更します。
LineWidth: 線の幅を指定します。
ツールチップ、ポップアップおよびコンテキスト・メニューおよび値変更のサポートを追加すると、ゲージに対話性を追加できます。
ゲージのshortDesc属性の値を設定して、ゲージのツールチップを構成します。
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ツールチップをゲージに追加する手順:
「構造」ウィンドウで「dvt:typeGauge」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「アクセシビリティ」セクションを開きます。
「ShortDesc」フィールドで、ゲージの説明を入力します。属性のドロップダウン・メニューを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを開き、テキスト・リソースまたはゲージの説明を含むEL式を選択することもできます。
ポップアップまたはコンテキスト・メニューを追加するプロセスは、基本的に同じです。af:showPopupBehaviorタグをゲージ・コンポーネントの子として追加し、ポップアップ・メニューの場合はトリガー・タイプをclickとして、コンテキスト・メニューの場合はcontextMenuとして定義し、ページに必要な動作が含まれるaf:popupを追加します。
例24-5に、図24-12で示したポップアップ・メニュー用のページのコードを示します。この例では、af:showPopupBehaviorコンポーネントがpopupIdを使用してaf:popupコンポーネントを参照しています。af:popupコンポーネントがaf:noteWindowコンポーネントを使用して構成されていて、これはaf:outputFormattedコンポーネントで簡単なメッセージを表示するように構成されています。af:showPopupBehaviorタグのtriggerTypeはclickに設定されており、ユーザーがゲージの任意の場所をクリックしたときにノート・ウィンドウが起動されます。
例24-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に変更すると、図24-13に示したコンテキスト・メニューにポップアップを変更できます。
<af:showPopupBehavior popupId="::noteWindowPopup" triggerType="contextMenu"/>
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
ポップアップ・コンポーネントをページに追加します。af:popupコンポーネントの構成の詳細は、第16章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
ポップアップまたはコンテキスト・メニューをゲージに追加する手順:
「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「ゲージのタイプの中に挿入」→「ポップアップ表示動作」を選択します。
「af:showPopupBehavior」を右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、次の値を入力します。
PopupId: af:popupコンポーネントのIDを指定します。
TriggerType: ポップアップ・メニューの場合、clickと入力します。コンテキスト・メニューの場合、contextMenuと入力します。
オプションで、Align、AlignIdおよびDisabledの値を設定します。af:showPopupBehaviorコンポーネントの詳細は、「コンポーネント・ヘルプ」をクリックしてください。
ゲージのreadOnly属性をfalseに設定すると、ユーザーがダイアル・ゲージまたは評価ゲージでメトリック値を変更できるようになります。
サーバーで変更を処理するには、ゲージのvalueChangeListener属性でリスナーを指定します。
例24-6に、サーバーで値変更を処理するように構成した評価ゲージの値変更リスナーの例を示します。この例では、評価ゲージおよびリスナーはgaugeDataという名前のマネージドBeanに含まれています。リスナーの名前はratingChangedListenerで、新しい値をコンソールに出力します。
例24-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;
}
}
例24-7に、gaugeDataマネージドBeanを使用するように構成された評価ゲージのためのJSFページのコードを示します。
例24-7 値変更リスナーで構成された評価ゲージのためのJSFページのコード
dvt:ratingGauge id="ratingGauge1" readOnly="false" value="#{gaugeData.gaugeValue}"
valueChangeListener="#{gaugeData.ratingChangedListener}">
</dvt:ratingGauge>
valueChangeおよびinputイベント・タイプ用に構成したaf:clientListenerコンポーネントを使用して、クライアントで変更を処理することもできます。このメソッドを使用するには、変更イベントの処理を実行するJavaScript関数を作成する必要があります。
例24-8に、2つのaf:clientListenerコンポーネント(1つはvalueChangeイベントを処理し、もう1つはinputイベントを処理)を使用して構成した評価ゲージの例を示します。この例では、valueChangeListener関数はアラートをブラウザに送信し、inputListener関数はメッセージをブラウザのコンソール・ログに送信します。
例24-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のページへの追加の詳細は、4.2項「JavaScriptのページへの追加」を参照してください。クライアント側イベントの処理の詳細は、4.4項「クライアント・イベントのリスニング」を参照してください。 |
始める前に:
ゲージの属性および子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。ゲージの構成の詳細は、24.2.5項「ゲージの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、24.1.3項「ゲージ・コンポーネントの追加機能」を参照してください。
ゲージをページに追加します。ゲージのページへの追加の詳細は、24.2.2項「ページへのゲージの追加方法」を参照してください。
サーバー側イベントの処理を構成する場合、値変更リスナーをゲージのマネージドBeanに追加します。マネージドBeanについてのヘルプが必要な場合、3.6項「マネージドBeanの作成と使用」を参照してください。
クライアント側イベントの処理を構成する場合、valueChangeおよびinputイベントを処理するJavaScript関数を作成します。クライアント側イベントの処理の詳細は、4.4項「クライアント・イベントのリスニング」を参照してください。
値変更サポートをゲージに構成する手順:
サーバー側の変更サポートを構成する場合、次のようにします。
「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、必要に応じて「共通」セクションを開きます。
ReadOnly属性のドロップダウン・リストから、「False」を選択します。
「動作」セクションを開きます。
ValueChangeListener属性のドロップダウン・メニューから、「編集」を選択してゲージのマネージドBeanおよびリスナーを選択します。
たとえば、 gaugeDataサンプルBeanを参照するには、「マネージドBean」フィールドのドロップダウン・リストから、「gaugeData」を選択し、このメソッドに対して「ratingChangedListener」を選択します。ValueChangeListener属性のドロップダウン・メニューから「式ビルダー」を選択して、ゲージのリスナーに評価されるEL式を入力することもできます。
クライアント側のイベント・サポートを構成する場合、次のようにします。
「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「ゲージのタイプの中に挿入」→「クライアント・リスナー」を選択します。
クライアント・リスナーの挿入ダイアログで、イベントおよびイベント・タイプを処理するJavaScript関数の名前を入力します。
たとえば、例24-8で示したvalueChangeListener()関数の例を使用するには、メソッドにvalueChangeListenerを、イベント・タイプにvalueChangeを入力します。
必要に応じてクライアント・リスナーを追加するには、手順1および手順2を繰り返します。
「構造」ウィンドウで、ゲージ・コンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、必要に応じて「共通」セクションを開きます。
ReadOnly属性のドロップダウン・リストから、「False」を選択します。
