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

    Rectangle

    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
          ghalex

          Try this:

           

          public class RectangleShape extends Canvas

          {

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

          h:Number=108 )

          {

          super();

          this.x = x;

          this.y = y;

          this.width = w;

          this.height = h;

          }

          public function draw() : void

          {

          graphics.clear();

          graphics.lineStyle( 1 )

          graphics.beginFill( 0x000000,  1);

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

          graphics.endFill();

          }

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

          {

          super.updateDisplayList(w,h);

          draw();

          }

          }

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

            UIComponent

            • 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 {
                      super.measure();
                             
                      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