FLEX: is possible to use AreaStroke and AreaFill in a css file? - apache-flex

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;
}