package
  {
       import mx.core.UIComponent;
      import mx.styles.CSSStyleDeclaration;
      import mx.styles.StyleManager;
      import flash.display.GradientType;
  
      // Insert the [Style] metadata tag to define the name, type 
      // and other information about the style property for the 
      // MXML compiler.
    // Style(name="fillColors",type="Array",format="Color",inherit="no")]
      public class @ax-professional-flex-code-14-StyledRectangle extends UIComponent
      {
      
          // Define a static variable for initializing the style property.
          private static var classConstructed:Boolean = classConstruct();
      
          // Define a static method to initialize the style.
          private static function classConstruct():Boolean {
              if (!StyleManager.getStyleDeclaration("@ax-professional-flex-code-14-StyledRectangle"))
              {
                  // If @ax-professional-flex-code-14-StyledRectangle has no CSS definition, 
                  // create one and set the default value.
                  var newStyleDeclaration:CSSStyleDeclaration = new CSSStyleDeclaration();
                  newStyleDeclaration.setStyle("fillColors", [0xFF0000, 0x0000FF]);
                  StyleManager.setStyleDeclaration("@ax-professional-flex-code-14-StyledRectangle",newStyleDeclaration, true);
              }
              return true;
          }
      
          // Constructor    
          public function @ax-professional-flex-code-14-StyledRectangle() {
              super();    
          }        
          
          // Define a default size of 100 x 100 pixels.
          override protected function measure():void {
              super.measure();
  
              measuredWidth = measuredMinWidth = 100;
              measuredHeight = measuredMinHeight = 100;
          }
  
          // Define the variable to hold the current gradient fill colors.
          private var fillColorsData:Array;
          // Define the flag that indicates a change to fillColors.
          private var bFillColorsChanged:Boolean = true;
  
          // Define variables for additional controls on the fill.
          // You can create style properties for these as well.
          private var alphas:Array = [1.0, 1.0];
          private var ratios:Array = [0x00, 0xFF];
          
          // Override styleChanged() to detect changes in your new style.
          override public function styleChanged(styleProp:String):void {
  
              super.styleChanged(styleProp);
  
              // Check to see if style changed. 
              if (styleProp=="fillColors") 
              {
                  bFillColorsChanged=true; 
                  invalidateDisplayList();
                  return;
              }
          }
      
          // Override updateDisplayList() to update the component 
          // based on the style setting.
          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  
              super.updateDisplayList(unscaledWidth, unscaledHeight);
  
              // Check to see if style changed. 
              if (bFillColorsChanged==true) 
              {
                  // Redraw gradient fill only if style changed.
                  fillColorsData=getStyle("fillColors");
                  graphics.beginGradientFill(GradientType.LINEAR,fillColorsData, alphas, ratios);  
                  graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
              }
          }
      }
  
  }