4 Replies Latest reply on Jun 16, 2009 12:53 AM by xandesign

    Need help with custom component reflecting tag change in design mode

    xandesign

      Hi,

       

      I'm relatively new to flex and I've been trying to build a simple actionscript component which draws a shape with a gradient fill. The actionscript code I've written draws a shape with a gradient using default settings, runtime and in design mode and when I change the width or height it is reflected both runtime and in design mode. The issue is that when I change the fill color of the gradient using the fillColor attribute in the MXML tag it is reflected runtime but not in design mode.

       

      If anyone can have a look at my code below and show me how to get the fillColor to be reflected in design mode I would be very grateful.

       

       

      Thanks in advance,

       

       

      Xander

       

       

      MXML Code

      -------------------

       

      <ns1:ColourBar id="testComp" width="100%" height="10" fillColor="[0x51cf51, 0x36cf36]" />

       

      ColourBar.as

      -------------------

       

      package components {

      import flash.display.GradientType;

       

      import mx.core.UIComponent;

       

       

       

      [IconFile("ColourBar.png")]

       

      public class ColourBar extends UIComponent {

      include "Version.as";

       

       

      public static const DEFAULT_MEASURED_WIDTH:Number = 100;

      public static const DEFAULT_MEASURED_MIN_WIDTH:Number = 1;

      public static const DEFAULT_MEASURED_HEIGHT:Number = 10;

      public static const DEFAULT_MEASURED_MIN_HEIGHT:Number = 1;

       

      private var _fillAlphas:Array = [100, 100];

      private var _fillColors:Array = [0x6289ba, 0x3670ba];

      private static const _ratios:Array = [0, 255];

       

       

      public function ColourBar() {

      super();

      }

       

       

      override protected function commitProperties():void {

      super.commitProperties();

      }

       

       

      override protected function measure():void {

      super.measure();

       

       

      measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;

      measuredMinHeight = DEFAULT_MEASURED_MIN_HEIGHT;

              measuredWidth = DEFAULT_MEASURED_WIDTH;

              measuredHeight = DEFAULT_MEASURED_HEIGHT;

      }

       

       

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

      super.updateDisplayList(unscaledWidth, unscaledHeight);

       

      graphics.beginGradientFill(GradientType.LINEAR, _fillColors, _fillAlphas, _ratios);

      graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);

      }

       

       

      public function set fillAlphas(value:Array):void {

      _fillAlphas = value;

      invalidateProperties();

      }

       

       

      public function get fillAlphas():Array {

      return _fillAlphas;

      }

       

       

      public function set fillColors(value:Array):void {

      _fillColors = value;

      invalidateProperties();

      }

       

       

      public function get fillColors():Array {

      return _fillColors;

      }

      }

      }