Skip Headers
Oracle® Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework
11g Release 1 (11.1.1)

Part Number B31973-02
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
View PDF

24 Using ADF Gauge Components

This chapter describes how to use a databound ADF Gauge component to display data, and the options for gauge customization.

This chapter includes the following sections:

For information about the data binding of ADF gauges, see the "Creating Databound ADF Gauges" section in the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework.

24.1 Introduction to the ADF Gauge Component

Gauges identify problems in data. A gauge usually plots one data point with indication of whether that point falls in an acceptable or unacceptable range. Frequently you display multiple gauges in a single gauge set. The gauges in a set usually appear in a grid-like format with a configurable layout.

A Component Gallery displays available gauge categories, types, and descriptions to provide visual assistance when creating gauges and using a quick-start layout. Figure 24-1 shows the Component Gallery for gauges.

Figure 24-1 Component Gallery for Gauges

Gauge Component Gallery.

When an ADF Gauge component is inserted into a JSF page using the Component Gallery, a set of child tags that support customization of the gauge is automatically inserted. Example 24-1 shows the code inserted in the JSF page for a dial gauge with the quick-start layout selected in the Component Gallery in Figure 24-1.

Example 24-1 ADF Gauge Sample Code

<dvt:gauge id="gauge2" value="#{bindings.Gaugedemo1View1.gaugeModel}"
                 gaugeType="DIAL" imageFormat="FLASH">
        <dvt:gaugeBackground>
          <dvt:specialEffects fillType="FT_GRADIENT">
            <dvt:gradientStopStyle/>
          </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:thresholdSet>
          <dvt:threshold fillColor="#d62800"/>
          <dvt:threshold fillColor="#00ff00"/>
        </dvt:thresholdSet>
      </dvt:gauge>

24.1.1 Types of Gauges

The following types of gauges are supported by the ADF Gauge component:

  • Dial: Indicates its metric along a 220 degree arc. This is the default gauge type. Figure 24-2 shows a dial gauge indicating a Plasma HD TV stock level within an acceptable range.

    Figure 24-2 Dial Gauge with Thresholds

    Gauge dial with thresdholds.
  • Status Meter: Indicates the progress of a task or the level of some measurement along a rectangular bar. An inner rectangle shows the current level of a measurement against the ranges marked on an outer rectangle. Figure 24-3 shows the Plasma HD TV stock level using a status meter gauge.

    Figure 24-3 Status Meter Gauge with Thresholds

    Status meter gauge with thresholds.
  • Status Meter (vertical): Indicates the progress of a task or the level of some measurement along a vertical rectangular bar. Figure 24-4 shows the Plasma HD TV stock level using a vertical status meter gauge.

    Figure 24-4 Vertical Status Meter Gauge with Thresholds

    Vertical status meter gauge with thresholds.
  • LED (light-emitting diode): Depicts graphically a measurement, such as key performance indicator (KPI). Several styles of graphics are available for LED gauges such as arrows that indicate good (up arrow), fair (left- or right-pointing arrow), or poor (down arrow). Figure 24-5 shows the Plasma HD TV stock level using a LED bulb indicator and Figure 24-6 shows the same stock level using a LED arrow.

    Figure 24-5 LED Bulb Gauge

    LED gauge using bulb..

    Figure 24-6 LED Arrow Gauge

    LED gauge using arrow.

24.1.2 Gauge Terminology

Gauge terms identify the many aspects of a gauge and gauge set that you can customize. The ADF Gauge component includes approximately 20 child tags that provide options for this customization.

The following list groups the various parts of a gauge that can be configured:

  • Overall gauge customization: Each item in this group is represented by a gauge child tag:

    • Gauge Set Background: Controls border color and fill color for the background of a gauge set.

    • Gauge Frame: Refers to the frame behind the dial gauge.

    • Plot Area: Represents the area inside the gauge itself.

    • Indicator: Points to the value that is plotted in a dial gauge. It is typically in the form of a line or an arrow.

    • Indicator Bar: The inner rectangle in a status meter gauge.

    • Indicator Base: The circular base of a line or needle style indicator in a dial gauge.

  • Data values: These include the metric (which is the actual value that the gauge is plotting), minimum value, maximum value, and threshold values. Section 24.2, "Understanding Data Requirements for Gauges" describes these values.

  • Labels: The gauge supports the following elements with a separate child tag for each item:

    • Bottom Label: Refers to an optional label that appears below the gauge and is surrounded by the lower label frame.

    • Lower Label Frame: Controls the colors for the background and border of the frame that contains the bottom label. The metric label can also appear inside the lower label frame, to the right of the bottom label.

    • Metric Label: Shows the value of the metric that the gauge is plotting in text.

    • Tick Labels: Displays text that is displayed to identify tick marks on a gauge.

    • Tick Marks: Refers to the markings along the value axis of the gauge. These can identify regular intervals, from minimum value to maximum value, and can also indicate threshold values.

    • Top Label: Refers to the label that appears at the top of a gauge. By default a title separator is used with a label above the gauge.

    • Upper Label Frame: Refers to the background and border of the frame that encloses the top label. You can specify border color and fill color for this frame. Turn off the default title separator when using this frame.

  • Legend: The gauge supports the gauge legend area, text, and title elements with a separate child tag for each item.

24.2 Understanding Data Requirements for Gauges

You can provide the following kinds of data values for a gauge:

The only required data element is the metric value. All other data values are optional.

24.3 Creating an ADF Gauge

You can use any of the following ways to supply data to an ADF Gauge component:

24.3.1 Creating a Gauge Using Tabular Data

The process of creating a gauge from tabular data includes the following steps:

  • Storing the data in a method in the gauge's managed bean.

  • Creating a gauge that uses the data stored in the managed bean.

24.3.1.1 Storing Tabular Data for a Gauge in a Managed Bean

The tabularData attribute of a gauge component lets you specify a list of metric values that the gauge uses to create a grid and to populate itself. You can provide only the metric value through the tabularData attribute. Therefore, you must specify any desired thresholds and minimum or maximum values through the Property Inspector.

An ADF Gauge component displays rows and columns of gauges. The text that you specify as column labels appears in the top label of the gauges. The text that you specify as row labels appears in the bottom label of the gauges.

24.3.1.2 Structure of the List of Tabular Data

The list that contains the tabular data consists of a three-member Object array for each data value to be passed to the gauge. The members of each array must be organized as follows:

  • The first member (index 0) is the column label, in the grid, of the data value. This is generally a String.

  • The second member (index 1) is the row label, in the grid, of the data value. This is generally a String.

  • The third member (index 2) is the data value, which is usually Double.

Figure 24-8 has five columns: Quota, Sales, Margin, Costs, and Units. The example has three rows: London, Paris, and New York. This data produces a gauge set with five gauges in each row and lets you compare values such as sales across the three cities.

Figure 24-8 Comparison of Annual Results

Comparison of annual results for 3 cities.

Example 24-2 shows code that creates the list of tabular data required for the gauge that compares annual results for three cities.

Example 24-2 Code to Create a List of Tabular Data for a Gauge

public List getGaugeData() 
{
    ArrayList list = new ArrayList();
    String[] rowLabels  = new String[] {"London", "Paris", "New York"};
    String[] colLabels  = new String[] {"Quota", "Sales", "Margin", "Costs", "Units"};
    double [] [] values = new double[][]{
        {60, 90, 135},
        {50, -100, -150},
        {130, 140, 150},
        {70, 80, -130},
        {110, 120, 130}
        };
    for (int c = 0; c < colLabels.length; c++)
    {
     for (int r = 0; r < rowLabels.length; r++)
       {
        list.add (new Object [] {colLabels[c], rowLabels[r], 
            new Double (values [c][r])});
       }
    }
    return list;
}

24.3.2 How to Create a Gauge Using Tabular Data

Use the tabularData attribute of the gauge tag to reference the tabular data that is stored in a managed bean.

To create a gauge that uses tabular data from a managed bean:

  1. From the Component Palette, drag the dvt:gauge tag to a page.

  2. In the Component Gallery, select the category, type, and quick-start layout style for the gauge that you are creating.

  3. In the Gauge Data category of the Property Inspector, click the tabularData attribute dropdown icon and select Expression Builder.

  4. In the Expression Builder dialog, use the search box to locate the managed bean.

  5. Expand the managed bean node and select the method that creates the list of tabular data.

  6. Click OK. The Expression is created.

    If the name of the managed bean is sampleGauge and the name of the method that creates the list of static data is getGaugeData, the Expression Builder generates the code #{sampleGauge.gaugeData} as the value for the tabularData attribute of the dvt:gauge tag.

24.3.3 What Happens When You Create a Gauge Using Tabular Data

When you create a gauge tag that is powered by data obtained from a list referenced in the tabularData attribute, the following results occur:

  • A gauge is generated with a setting in its tabularData attribute. The settings for all other attributes for this gauge are provided by default.

  • You have the option of changing the setting of the gaugeType attribute in the Property Inspector to DIAL, LED, STATUSMETER, or VERTICALSTATUSMETER.

24.4 Customizing Common Gauge Features

You can customize ADF Gauge components to:

24.4.1 Changing the Type of the Gauge

You can change the type of a gauge using the gaugeType attribute of the dvt:gauge tag. The acceptable values are DIAL, LED, STATUSMETER, or VERTICALSTATUSMETER. The gauge type is reflected in the visual editor default gauge.

24.4.2 Determining the Layout of Gauges in a Gauge Set

A single gauge can display one row of data bound to an ADF Gauge component. A gauge set displays a gauge for each row in multiple rows of data in a data collection.

You can specify the location of gauges within a gauge set by specifying values for attributes in the dvt:gauge tag.

To specify the layout of gauges in a gauge set:

  1. In the Structure window, right-click the dvt:gauge node and select Go to Properties.

  2. In the Property Inspector, select the Common attributes category.

  3. To determine the number of columns of gauges that will appear in a gauge set, specify a value for the gaugeSetColumnCount attribute.

    A setting of zero causes all gauges to appear in a single row. Any positive integer determines the exact number of columns in which the gauges are displayed. A setting of -1 causes the number of columns to be determined automatically from the data source.

  4. To determine the placement of gauges in columns, specify a value for the gaugeSetDirection attribute.

    If you select GSD_ACROSS, then the default layout of the gauges is used and the gauges appear from left to right, then top to bottom. If you select GSD_DOWN, the layout of the gauges is from top to bottom, then left to right

  5. To control the alignment of gauges within a gauge set, specify a value for the gaugeSetAlignment attribute.

    This attribute defaults to the setting GSA_NONE, which divides the available space equally among the gauges in the gauge set. Other options use the available space and optimal gauge size to allow for alignment towards the left or right and the top or bottom within the gauge set. You can also select GSA_CENTER to center the gauges within the gauge set.

24.4.3 Changing Gauge Size and Style

You can customize the width and height of a gauge and you can allow for dynamic resizing of a gauge based on changes to the size of its container. You can also control the style sheet used by a gauge. These two aspects of a gauge are interrelated in that they share the use of the gauge inlineStyle attribute.

24.4.3.1 How to Specify the Size of a Gauge at Initial Display

You can specify the initial size of a gauge by setting values for attributes of the dvt:gauge tag. If you do not also provide for dynamic resizing of the gauge, then the initial size becomes the only display size for the gauge.

To specify the size of a gauge at its initial display:

  1. In the Structure window, right-click the dvt:gauge node and select Go to Properties.

  2. In the Style attributes category of the Property Inspector, enter a value for the InlineStyle attribute of the dvt:gauge tag. For example:

    inlineStyle="width:200px;height:200px"
    

24.4.3.2 How to Provide For Dynamic Resizing of a Gauge

You must enter values in each of two attributes of the dvt:gauge tag to allow for a gauge to resize when its container in a JSF page changes in size. The values that you specify for this capability also are useful for creating a gauge component that fills an area across different browser window sizes.

To allow dynamic resizing of a gauge:

  1. In the Structure window, right-click the dvt:gauge node and select Go to Properties.

  2. In the Behavior attributes category of the Property Inspector for the DynamicResize attribute, select the value DYNAMIC_SIZE.

  3. In the Style attributes category of the Property Inspector, for the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height.

    For example, to create a gauge that fills its container's width and has a height of 200 pixels, use the following setting for the inlineStyle attribute: "width:100%;height:200px;".

24.4.3.3 How to Use a Custom Style Class for a Gauge

You have the option of specifying a custom style class for use with a gauge. However, you must specify width and height in the inlineStyle attribute.

To specify a custom style class for a gauge:

  1. In the Structure window, right-click the dvt:gauge node and select Go to Properties.

  2. In the Style attributes category of the Property Inspector, for the StyleClass attribute, select Edit from the Property menu choices, and select the CSS style class to use for this gauge.

  3. In the InlineStyle attribute, enter a fixed number of pixels or a relative percent for both width and height.

    For example, to create a gauge that fills its container's width and has a height of 200 pixels, use the following setting for the inlineStyle attribute: "width:100%;height:200px;".

24.4.4 Adding Thresholds to Gauges

Thresholds are data values in a gauge that highlight a particular range of values. Thresholds must be values between the minimum and the maximum value for a gauge. The range identified by a threshold is filled with a color that is different from the color of other ranges.

The data collection for a gauge can provide dynamic values for thresholds when the gauge is databound. After the gauge is created, you can also insert a dvt:thresholdSet tag and individual dvt:threshold tags to create static thresholds. If threshold values are supplied in both the data collection and in threshold tags, then the gauge honors the values in the threshold tags.

24.4.4.1 How to Add Static Thresholds to Gauges

You can create an indefinite number of thresholds in a gauge. Each threshold is represented by a single dvt:threshold tag. One dvt:thresholdSet tag must wrap all the threshold tags,

To add static thresholds to a gauge:

  1. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Threshold Set.

    You do not need to specify values for attributes on the dvt:thresholdSet tag.

  2. Right-click the dvt:thresholdSet node and select Insert inside dvt:thresholdSet then threshold.

  3. In the Property Inspector, enter values for the attributes that you want to customize for this threshold.

    You have the option of entering a specific fill color and border color for the section of the gauge related to the threshold. You can also identify the maximum value for the threshold and any text that you want to display in the legend to identify the threshold.

    Note:

    For the final threshold, the maximum value of the gauge is used as the threshold maximum value regardless of any entry you make in the threshold tag for the final threshold.
  4. Repeat Step 2 and Step 3 to create each threshold in the gauge from the lowest minimum value to the highest maximum value.

24.4.4.2 What You May Need to Know About Adding Thresholds to Gauges

You have the option of adding any number of thresholds for dial or status meter gauges. However, an LED gauge supports only three thresholds.

24.4.5 Formatting Numbers in Gauges

For gauges, the dvt:metricLabel, dvt:tickLabel, and dvt:legendText tags may require numeric formatting.

24.4.5.1 How to Format the Number in a Gauge Metric Label

The metric label tag has a numberType attribute that lets you specify whether you want to display the value itself or a percentage that the value represents. In some cases, this might be sufficient numeric formatting.

You can also use the dvt:numberFormat tag to specify formatting for numeric values in the metric label. For example, the dvt:numberFormat tag lets you format data values as currency or display positive or negative signs.

You can specify number formatting directly in the dvt:numberFormat tag, or you can use the af:convertNumber tag as a child tag of dvt:numberFormat.

To format numbers in a gauge metric label:

  1. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then metricLabel.

  2. If you want to display the metric value as a percentage rather than as a value, then set the NumberType attribute of the dvt:metricLabel tag to NT_PERCENT.

  3. If you want to specify additional formatting for the number in the metric label, then do the following:

    1. Right-click the metricLabel node and select Insert inside dvt:metricLabel. then numberFormat.

    2. In the Property Inspector, specify values in the attributes of the numberFormat tag to produce additional formatting.

Note:

The procedure for formatting numbers in gauge tick labels is similar to that of formatting numbers in the metric label except that you insert the dvt:tickLabel tag as a child of the gauge.

24.4.5.2 What Happens When You Format the Number in a Gauge Metric Label

Example 24-3 shows the XML code that is generated when you add a metric label and number formatting to a gauge.

Example 24-3 XML Code Generated When Formatting a Number in a Metric Label

<dvt:gauge> 
    <dvt:metricLabel position="LP_BELOW_GAUGE" numberType="NT_PERCENT">
         <dvt:numberFormat posNumFmt="POS_NUMFMT_NUM_POS"/>
    </dvt:metricLabel>
</dvt:gauge> 

24.4.6 Formatting Text in Gauges

You can format text in any of the following tags that represent subcomponents of a gauge:

  • dvt:bottomLabel

  • dvt:gaugeMetricLabel

  • dvt:gaugeLegendText

  • dvt:gaugeLegendTitle

  • dvt:tickLabel

  • dvt:topLabel

24.4.6.1 How to Format Text in a Gauge Metric Labels

The dvt:metricLabel tag has a gaugeFont attribute that lets you specify gauge metric label font size, color, and if the text should be bold or italic.

To format text in a gauge metric label:

  1. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then metricLabel.

  2. Right-click the metricLabel node and select Insert inside dvt:metricLabel, then Font.

  3. In the Property Inspector, specify values in the attributes of the dvt:gaugeFont tag to produce the desired formatting.

Note:

The procedure for formatting text in other gauge labels and titles is similar to that of formatting text in the metric label except that you insert the appropriate child tag that represents the gauge label or title.

24.4.6.2 What Happens When You Format Text in a Gauge Metric Label

Example 24-4 shows the code that is generated when you format text in a gauge metric label using the gaugeFont tag.

Example 24-4 XML Code Generated When You Format Text in a Gauge Metric Label

<dvt:gauge> 
    <dvt:metricLabel>
         <dvt:gaugeFont name="Tahoma" size="11" color="#3C3C3C" bold="true"/>
    </dvt:metricLabel>
</dvt:gauge> 

24.4.7 Customizing Gauge Labels

You can control the positioning of gauge labels. You can also control the colors and borders of the gauge label frames.

24.4.7.1 How to Control the Position of Gauge Labels

You can specify whether you want labels to appear outside or inside a gauge by using the position attribute of the appropriate label tag. The following label tags are available as child tags of dvt:gauge: dvt:bottomLabel, dvt:metricLabel, and dvt:topLabel.

To specify the position of the bottom label:

  1. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Bottom Label.

  2. In the Property Inspector, for the position attribute, select the desired location of the label.

  3. In the text attribute, enter the text that you want the label to display.

Use a similar procedure to position the other gauge labels except that you insert the appropriate label tag as a child of the gauge.

24.4.7.2 How to Customize the Colors and Borders of Gauge Labels

You can control the fill color and border color of the frames for the top label and the bottom label. The following gauge child tags serve as frames for these labels: dvt:upperLabelFrame and dvt:lowerLabelFrame.

To customize the color and border of the upper label frame:

  1. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Upper Label Frame.

  2. In the Property Inspector, select the desired colors for the borderColor attribute and the fillColor attribute.

Use a similar procedure to customize the color and border of the bottom label frame except that you insert the dvt:bottomLabel tag as a child of the gauge

24.4.8 Customizing Indicators and Tick Marks

There are a variety of options available for customizing the indicators of gauges and the location and labeling of tick marks.

24.4.8.1 How to Control the Appearance of Gauge Indicators

The following gauge child tags are available to customize the indicator of a gauge:

  • dvt:indicator: Specifies the visual properties of the dial gauge indicator needle or the status meter bar. Includes the following attributes:

    • borderColor: Specifies the color of the border of the indicator

    • fillColor: Specifies the color of the fill for the indicator.

    • type: Identifies the kind of indicator: a line indicator, a fill indicator, or a needle indicator.

    • useThresholdFillColor: Determines if the color of the threshold area in which the indicator falls should override the specified color of the indicator.

  • dvt:indicatorBar: Contains the fill properties of the inner rectangle (bar) of a status meter gauge.

  • dvt:indicatorBase: Contains the fill properties of the circular base of a line and needle style indicator of a dial gauge.

To customize the appearance of gauge indicators:

  1. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Indicator.

  2. In the Property Inspector, specify values for the desired attributes.

  3. If you want to customize the fill attributes of the inner bar on a status meter gauge, then in the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Indicator Bar.

  4. In the Property Inspector, specify values for the desired attributes.

  5. If you want to customize the circular base of a line style indicator on a dial gauge, then in the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Indicator Base.

  6. In the Property Inspector, specify values for the desired attributes.

24.4.8.2 How to Specify Tick Marks and Labels

To customize tick marks and tick labels for a gauge, the following gauge child tags are available:

  • dvt:tickMark: Specifies the location of tick marks, the number, and the color of tick marks.

  • dvt:tickLabel: Identifies which tick marks will have labels, the location of the labels (interior or exterior of the gauge), and the format for numbers displayed in the tick labels.

To customize the tick marks and tick labels of a gauge:

  1. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Tick Mark.

  2. In the Property Inspector, specify values for the desired attributes.

  3. In the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Tick Label.

  4. In the Property Inspector, specify values for the desired attributes.

24.5 Customizing Specialized Gauge Features

These gauge features are used less frequently than the common gauge features. These special features include applying gradient effects to parts of a gauge and taking advantage of the gauge support for active data.

24.5.1 Using Gradient Special Effects in a Gauge

A gradient is a special effect in which an object changes color gradually. Each color in a gradient is represented by a stop. The first stop is stop 0, the second is stop 1, and so on. You must specify the number of stops in the special effects for a subcomponent of a gauge that supports special effects.

You can define gradient special effects for the following subcomponents of a gauge:

  • Gauge background: Uses the dvt:gaugeBackground tag.

  • Gauge set background: Uses the dvt:gaugeSetBackground tag.

  • Gauge plot area: Uses the dvt:gaugePlotArea tag.

  • Gauge frame: Uses the dvt:gaugeFrame tag.

  • Gauge legend area: Uses the dvt:gaugeLegendArea tag.

  • Lower label frame: Uses the dvt:lowerLabelFrame tag.

  • Upper label frame: Uses the dvt:upperLabelFrame tag.

  • Indicator: Uses the dvt:indicator tag.

  • Indicator bar: Uses the dvt:indicatorBar tag.

  • Indicator base: Uses the dvt:indicatorBase tag.

  • Threshold: Uses the dvt:threshold tag.

The approach that you use to define gradient special effects is identical for each part of the gauge that supports these effects.

24.5.1.1 How to Add Gradient Special Effects to a Gauge

For each subcomponent of a gauge to which you want to add special effects, you must insert a dvt:specialEffects tag as a child tag of the subcomponent. For example, if you want to add a gradient to the background of a gauge, then you would create one dvt:specialEffects tag that is a child of the dvt:background tag. You must also set the dvt:specialEffects tag fillType property to FT_FGRADIENT.

Then, optionally if you want to control the rate of change for the fill color of the subcomponent, you would add as many dvt:gradientStopStyle tags as you need to control the color and rate of change for the fill color of the component. These dvt:gradientStopStyle tags then must be entered as child tags of the single dvt:specialEffects tag.

To add a gradient special effect to the background of a gauge:

  1. If you have not inserted a dvt:gaugeBackground tag as a child of the gauge, then, in the Structure window, right-click the gauge node and select Insert inside dvt:gauge, then ADF Data Visualization, then Gauge Background.

  2. In the Structure window, right-click the gauge background node then select Insert inside dvt:gaugeBackground, then Special Effects.

  3. Use the Property Inspector to enter values for the attributes of the dvt:specialEffects tag:

    1. For fillType attribute, select FT_GRADIENT.

    2. For gradientDirection attribute, select the direction of change that you want to use for the gradient fill.

    3. For the numStops attribute, enter the number of stops to use for the gradient.

  4. Optionally, in the Structure window, right-click the special effects node and select Insert within dvt:specialEffects, then dvt:gradientStopStyle if you want to control the color and rate of change for each gradient stop.

  5. Use the Property Inspector to enter values for the attributes of the dvt:gradientStopStyle tag:

    1. For the stopIndex attribute, enter a zero-based integer as an index within the dvt:gradientStopStyle tags that are included within the dvt:specialEffects tag.

    2. For the gradientStopColor attribute, enter the color that you want to use at this specific point along the gradient.

    3. For the gradientStopPosition attribute, enter the proportional distance along a gradient for the identified stop color. The gradient is scaled from 0 to 100. If 0 or 100 is not specified, default positions are used for those points.

  6. Repeat Step 3 and Step 4 for each gradient stop that you want to specify.

24.5.1.2 What Happens When You Add a Gradient Special Effect to a Gauge

Example 24-5 shows the XML code that is generated when you add a gradient fill to the background of a gauge and specify two stops.

Example 24-5 XML Code Generated for Adding a Gradient to the Background of a Gauge

<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>