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 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("professional_flex_code_14_StyledRectangle"))
            {
                // If 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("professional_flex_code_14_StyledRectangle",newStyleDeclaration, true);
            }
            return true;
        }
    
        // Constructor    
        public function 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);
            }
        }
    }

}