1 Reply Latest reply on Jan 19, 2010 12:49 AM by Aplamon

    UIComponent resize

    Aplamon

      I'm a total newbie and am trying to learn Flex. Something's been bothering me for quite some time. I created a simple UIComponent derived class that all it does is draws a box. Now If I resize this component it will redraw the new box. But it will also leave the old box displayed:

      Untitled.jpg

       

      Here's the xml code i use

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      xmlns:myGui="aplamon.myGui.*">
          <mx:Script>
              <![CDATA[
                 
              public function doBtn(event:Event):void
              {
                  box.width = box.width - 5;;
              }   
              ]]>
          </mx:Script>
          <mx:VBox>
              <mx:Canvas width="100" height="100">
              <myGui:ABox id="box" width="100%" height="100%" />
              </mx:Canvas>
              <mx:Button label="click" click="doBtn(event)" />
          </mx:VBox>
      </mx:Application>

       

      and here's the component code:

       

          import mx.core.UIComponent;
         
          public class ABox extends UIComponent
          {
             
              public function ABox()
              {
                 
              }

       

              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
             
                  graphics.lineStyle(2, 0, 1.0);
                  graphics.moveTo(0, 0);
                  graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);       
              }               
          }

       

      Its driving me crazy this thing and I don't knwo why it behaves as this. Moving the component does not leave this "trail" of old versions.

       

      Thank you

      Daniel

        • 1. Re: UIComponent resize
          RK... Level 3

          Use graphics.clear()

           

          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
               super.updateDisplayList(unscaledWidth, unscaledHeight);
               graphics.clear();
               graphics.lineStyle(2, 0, 1.0);
               graphics.moveTo(0, 0);
               graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);        
          }