Customizing the Colors and Borders of Gauge Labels

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