Controlling the Position of Gauge Labels

25-18 Web User Interface Developers Guide for Oracle Application Development Framework ■ 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.

25.5.1.1 Adding 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_GRADIENT. 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. Before you begin: If you have not inserted a dvt:gaugeBackground tag as a child of the gauge, in the Structure window, right-click the gauge node and choose Insert inside dvt:gauge ADF Data Visualization Gauge Background. To add a gradient special effect to the background of a gauge:

1. In the Structure window, right-click the gauge background node and choose Insert

inside dvt:gaugeBackground Special Effects. 2. Use the Property Inspector to enter values for the attributes of the dvt:specialEffects tag: a. For fillType attribute, select FT_GRADIENT. b. For gradientDirection attribute, select the direction of change that you want to use for the gradient fill. c. For the numStops attribute, enter the number of stops to use for the gradient. 3. Optionally, in the Structure window, right-click the special effects node and choose Insert within dvt:specialEffects dvt:gradientStopStyle if you want to control the color and rate of change for each gradient stop. 4. Use the Property Inspector to enter values for the attributes of the dvt:gradientStopStyle tag: a. 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. b. For the gradientStopColor attribute, enter the color that you want to use at this specific point along the gradient. c. 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. 5. Repeat Step 3 and Step 4 for each gradient stop that you want to specify. Using ADF Gauge Components 25-19

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

When you add a gradient fill to the background of a gauge and specify two stops, XML code is generated. Example 25–5 shows the XML code that is generated. Example 25–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

25.5.3 How to Add Interactivity to Gauges

You can specify interactivity properties on subcomponents of a gauge using one or more dvt:shapeAttributes tags wrapped in a dvt:shapeAttributesSet tag. The interactivity provides a connection between a specific subcomponent and an HTML attribute or a JavaScript event. Each dvt:shapeAttributes tag must contain a subcomponent and at least one attribute in order to be functional. For example, Example 25–6 shows the code for a dial gauge where the tooltip of the indicator changes from Indicator to Indicator is Clicked when the user clicks the indicator, and the tooltip for the gauge metric label displays Metric Label when the user mouses over that label at runtime. Example 25–6 Sample Code for Gauge shapeAttributes Tag dvt:gauge dvt:shapeAttributesSet dvt:shapeAttributes component=GAUGE_INDICATOR alt=Indicator onClick=document.title=onClick; dvt:shapeAttributes component=GAUGE_METRICLABEL alt=Metric Label onMouseMove=document.title=onMouseMove; dvt:shapeAttributesSet dvt:gauge You can also use a backing bean method to return the value of the attribute. Example 25–7 shows sample code for referencing a backing bean and Example 25–8 shows the backing bean sample code. Example 25–7 Gauge shapeAttributes Tag Referencing a Backing Bean dvt:gauge dvt:shapeAttributesSet dvt:shapeAttributes component=GAUGE_INDICATOR alt={sampleGauge.alt} onClick={sampleGauge.onClick} dvt:shapeAttributes component=GAUGE_METRICLABEL alt={sampleGauge.alt} onMouseMove={sampleGauge.onMouseMove} dvt:shapeAttributesSet dvt:gauge