Creating the Gauge Components (Cont'd)
Step 4: Running the application
It's now time to test the wind speed widget; the complete source code for everything that has been discussed till now can be obtained from WeatherWidget Source zip package. Setup the project as discussed earlier and then compile the WeatherWidget_example1.mxml file. Now, run the application to see the gauge in action.
Step 5: Adding annotations (visual elements used for decoration or adding more description)
Now, that we have built and tested the basic application, let's make it better by adding annotations to it. We will add a new XML element called annotations to our existing XML data file. Here's the code:
<annotations>
<annotationGroup id='Grp1' xScale='200' yScale='120' ... >
<annotation type='circle' color='FFFFFF' radius='2' ... />
</annotationGroup>
</annotations>
Here's how annotations are appended to the XML structure:
<chart ... >
<dials> ... </dials>
<annotations> ... </annotations>
</chart>
We've created a circular annotation of radius 2 pixels and adjusted its coordinates in order to position the annotation above the base of the dial. This gives the dial a glittery look.
Step 6: Adding Styles (Visual configuration for gauge)
Now that our wind speed gauge has annotations, it's time to spice things up with the help of styles. To add styles you'll have to append the XML with yet another <styles> element. Adding styles to a gauge requires following configurations:
- Definition elements through which styles are defined
- Application elements through which styles are mapped onto various parts of the gauge
Following is the XML code for declaring styles:
<styles>
<definition>
...
<style name='circleBlur' type='blur'/>
</definition>
<application>
...
<apply toObject='Grp1' styles='circleBlur' />
</application>
</styles>
The style definition <style name='circleBlur' type='blur'/> helps in creating a blur effect. The name attribute is used to define a unique identifier for each style and the type attribute is used for specifying the effect that the style will create. Additional attributes may be used depending on the nature of the style definition.
After the styles have been defined, they must be mapped onto various elements of the gauge. The style application XML <apply toObject='Grp1' styles='circleBlur' />, applies the style named circleBlur to a gauge element named Grp1.
Styles are appended to the XML structure in the following manner:
<chart ... >
<dials> ... </dials>
<annotations> ... </annotations>
<styles> ... </styles>
</chart>
You can get the modified XML code from the WindSpeed_Annotations.xml file. The stylized gauge will look like this:
