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

    Need help with custom component reflecting tag change in design mode




      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,






      MXML Code



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





      package components {

      import flash.display.GradientType;


      import mx.core.UIComponent;






      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() {





      override protected function commitProperties():void {





      override protected function measure():void {




      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;





      public function get fillAlphas():Array {

      return _fillAlphas;




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

      _fillColors = value;





      public function get fillColors():Array {

      return _fillColors;