Question

I would like to simplify my code and add the possible to the css file:

<mx:AreaSeries styleName="timeArea" name="A" yField="A" areaStroke="{new Stroke(0x0033CC, 2)}" areaFill="{new SolidColor(0x0033CC, 0.5)}" />

Can I move areaStroke and areaFill to css ? What would be the resulting css ?

thanks

Answer 1

So, while you can’t specify the strokes in css, you can specify the properties of the strokes, ie:

<mx:Metadata>
 [Style(name="areaFillColor",format="Color",type="Number)]
 [Style(name="areaStrokeColor",format="Color",type="Number)]
</mx:Metadata>
<mx:Script>
<![CDATA[
    [Bindable]
    protected var strokeColor:Number;

    [Bindable]
    protected var fillColor:Number;

    override public function styleChanged(styleProp:String):void{
         super.styleChanged(styleProp);
         //you really ought to do this in a switch statement
         strokeColor = getStyle("areaStrokeColor");
         fillColor = getStyle("areaFillColor");
    }
]]>
</mx:Script>

<mx:AreaSeries styleName="timeArea" name="A" yField="A" areaStroke="{myStroke}" areaFill="{myFill}" />

<mx:SolidColor id="myFill" color="{fillColor}" alpha=".3"/>    
<mx:Stroke id="s1" color="{strokeColor}" weight="2"/>

And your CSS would look like (where myAreaChart is the styleName set on the parent area chart):

.myAreaChart{
   areaFillColor: #f3f3f3;
   areaStrokeColor: #333333;
}