Controlling the Appearance of Gauge Indicators

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 25-20 Web User Interface Developers Guide for Oracle Application Development Framework Example 25–8 Sample Backing Bean Code public String altoracle.dss.dataView.ComponentHandle handle { return handle.getName; } public String onClickoracle.dss.dataView.ComponentHandle handle { return document.title=\onClick\;; } public String onMouseMoveoracle.dss.dataView.ComponentHandle handle { return document.title=\onMouseMove\;; } The following gauge subcomponents support the dvt:shapeAttributes tag: ■ GAUGE_BOTTOMLABEL - the label below the gauge ■ GAUGE_INDICATOR - the indicator in the gauge ■ GAUGE_LEGENDAREA - the legend area of the gauge ■ GAUGE_LEGENDTEXT - the text label of the legend area ■ GAUGE_METRICLABEL - the label showing the metric value ■ GAUGE_TOPLABEL - the label above the gauge ■ GAUGE_PLOTAREA - the area inside the gauge ■ GAUGE_THRESHOLD - the threshold area of the gauge

25.5.4 How to Animate Gauges

You can animate gauges not gauge sets to show changes in data, for example, a dial gauge indicator can change color when a data value increases or decreases. Figure 25–10 shows a dial gauge with the dial indicator animated to display the data change at each threshold level. Figure 25–10 Animated Dial Gauge The attributes for setting animation effects on gauges are: ■ animationOnDisplay: Use to specify the type of initial rendering effect to apply. Valid values are: – NONE default: Do not show any initial rendering effect. – AUTO: Apply an initial rendering effect automatically chosen based on graph or gauge type. ■ animationOnDataChange: Use to specify the type of data change animation to apply. Valid values are: – NONE: Apply no data change animation effects. – AUTO default: Apply Active Data Service ADS data change animation events. For more information about ADS, see Section 25.5.5, How to Animate Gauges with Active Data.