6 Replies Latest reply on Mar 24, 2010 1:53 PM by ghalex


    hidarikani Level 2

      I want to create a custom UI component that:

      1. looks like a rectangle (has a border, a fill and I can change it's dimensions)
      2. behaves like a UI component (I can add it to a HBox container in MXML, it dispatches mouseOver, mouseOut event)


      Where should I start? Which class should my custom component inherit from?

        • 1. Re: Rectangle

          Try this:


          public class RectangleShape extends Canvas


          public function RectangleShape( x:Number=0, y:Number=0, w:Number=144,

          h:Number=108 )



          this.x = x;

          this.y = y;

          this.width = w;

          this.height = h;


          public function draw() : void



          graphics.lineStyle( 1 )

          graphics.beginFill( 0x000000,  1);

          graphics.drawRect(0, 0, width, height);



          override protected function updateDisplayList(w:Number, h:Number) : void






          1 person found this helpful
          • 2. Re: Rectangle
            Flex harUI Adobe Employee


            • 3. Re: Rectangle
              Flex harUI Adobe Employee

              That will work but is very heavy if you are going to have a lot of them.

              Starting from UIComponent will be much more lightweight but a bit more work.

              See the custom components chapter in the doc.

              1 person found this helpful
              • 4. Re: Rectangle
                ghalex Level 1

                Using Canvas instead of UIComponent will help you if you want to develop

                more shapes later for example if you want to use composite pattern and make

                a GroupShape that contains 3 basic shapes, Canvas will auto resize his width

                and height

                but UIComponent will not do that.

                • 5. Re: Rectangle
                  hidarikani Level 2

                  Although I've overridden the measure method:

                  override protected function measure():void {
                      measuredMinWidth = 18;
                      measuredMinHeight = 18;


                  unscaledWidth and unscaledHeight are equal to 0 so the rectangle isn't visible

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                       trace(unscaledWidth); //0
                       trace(unscaledHeight); //0
                       super.updateDisplayList(unscaledWidth, unscaledHeight);
                       graphics.beginFill(0x000000, 1);
                       graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);


                  I don't understand how the unscaledWidth and unscaledHeight are determined. Do I have to add code to the parent that computes unscaledWidth and unscaledHeight?

                  • 6. Re: Rectangle
                    ghalex Level 1

                    measuredMinWidth = 18;

                    measuredMinHeight = 18;


                    reprezents the min size you must set width and height to have something in

                    unscaledWidth, unscaledHeight