Chris Callendar - 2009-09-03

In version 2.1.4 there are CSS styles that can be defined on the DefaultNodeRenderer and DefaultArcRenderer
classes to let you customize the look of the nodes and arcs using CSS.

You can now set the drop shadow enabled/color properties using styles too:
- dropShadowEnabled = true|false
- dropShadowColor = #00000

-------------
NODES:
-------------
See the INodeRenderer or DefaultNodeRenderer classes for the full list of defined styles.
There are four states for nodes: normal, over (mouse over), selected, and matching (search results).
The following styles are defined for each state:
- normalBackgroundAlpha - the background alpha for nodes (defaults to 1)
- normalBackgroundColor - the background color for nodes (undefined by default)
- normalBackgroundAlphas - the background alpha values when used with normalBackgroundColors
- normalBackgroundColors - the background colors which render a gradient (undefined)
- normalBorderAlpha - the border alpha (defaults to 1)
- normalBorderColor - the border color (undefined by default), if not defined then the colorProvider
    (see DefaultColorProvider) is used to determine the color based on the node type
- normalBorderThickness - the thickness of the node border
- normalBorderStyle - "none" or "solid" (default) - defines the border style
- normalColor - the node label color
- normalCornerRadius - the corner radius of the node
- normalFontSize - the font size for the node label
- normalFontWeight - "normal" or "bold" - the font weight for the node label
- normalFontStyle - "normal" or "italic" - the font style for the node label
- normalTextDecoration - "none" or "underline" - the text decoration for the node label

Same properties for "over", "selected", and "matching":
- overBackgroundAlpha ...
- selectedBackgroundAlpha ...
- matchingBackgroundAlpha ...

----------
ARCS:
----------
See the IArcRenderer or DefaultArcRenderer classes for the full list of defined styles.
For arcs there are three states: normal, over (highlight), and selected.
- normalLineAlpha - the alpha value for the arc (defaults to 1)
- normalLineColor - the arc color (undefined) - by default the colorProvider is used to determine the color
- normalLineThickness - the thickness of the line (undefined)
- normalColor - the arc label color (defaults to the same as the line color)
-normalFontStyle - the arc label font style ("normal" or "italic")
- normalFontWeight - the arc label font weight ("normal" or "bold")
- normalTextDecoration - the arc label text decoration ("none" or "underline")

There are the same styles for the "over" and "selected" states:
overLineAlpha ...
selectedLineAlpha ...

Also note - the DefaultNodeRenderer uses the "nodeRenderer" styleName by default, and the
DefaultArcRenderer uses the "arcRenderer" styleName.
So if you want to easily define your own node/arc styles you can use a style block in your MXML like this:
<mx:Style>
    .nodeRenderer {
        normal-border-alpha: 0.5;
        over-border-alpha: 0.75;
        selected-border-alpha: 1;
        matching-border-alpha: 1;
    }
    .arcRenderer {
        normal-line-alpha: 0.5;
        over-line-alpha: 0.75;
        selected-line-alpha: 1;
    }
   
</mx:Style>

See the src/FlexVizStylesTest.mxml application for an example.