Flex4 Rect and Style Metadata

有時候Layout時只是想用到border或是只想要用到BackgroundColor的時候可以考慮在Group中使用Rect，並加上Style Medatata就可以達到而不用使用到SkinnableContner或是BorderContainer，用法如下。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      minWidth="955" minHeight="600"    
      xmlns:itemrenderers="itemrenderers.*"
      >
 <fx:Style source="css/Test.css"/>
 <s:HGroup paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">  
  <itemrenderers:Rect_Style_BackgroundColor width="200" height="200"/>
  <itemrenderers:Rect_Style_Border width="200" height="200"/>  
 </s:HGroup> 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   >
 <fx:Metadata>
  [Style(name="backgroundColors", inherit="no", type="uint" ,  theme="spark")]
 </fx:Metadata>
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   override public function styleChanged(styleProp:String):void
   {
    super.styleChanged(styleProp);
    if(styleProp == "backgroundColors")
    {
     invalidateDisplayList();
    }
   }
   
   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    myBackgroundColor.color = getStyle("backgroundColors");
   }
    
  ]]>
 </fx:Script>
 <s:Rect left="0" right="0" top="0" bottom="0">
  <s:fill>
   <s:SolidColor id="myBackgroundColor" color="0x00ff00"/>
  </s:fill>
 </s:Rect>
</s:Group>

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
   xmlns:s="library://ns.adobe.com/flex/spark" 
   xmlns:mx="library://ns.adobe.com/flex/mx"
   width="100%"
   >
 <fx:Metadata>
  [Style(name="borders", inherit="no", type="uint")]
 </fx:Metadata>
 
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   override public function styleChanged(styleProp:String):void
   {
    super.styleChanged(styleProp);
    if(styleProp == "borders")
    {
     invalidateDisplayList();
    }
   }
   
   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
   {
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    myBorder.color = getStyle("borders");
   }
   
  ]]>
 </fx:Script> 
 <s:Rect 
   left="0" right="0" top="0" bottom="0"
   radiusX="5" radiusY="5">
  <s:stroke>   
   <s:SolidColorStroke id="myBorder"  weight="2" color="0x00ff00"/>
  </s:stroke>
 </s:Rect> 
</s:Group>

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace itemrenderers "itemrenderers.*";
@namespace spark "spark.skins.spark.*";


itemrenderers|Rect_Style_BackgroundColor
{
 backgroundColors:#f63b5e;
}

itemrenderers|Rect_Style_Border
{
 borders:#3e95ef;
}