0 Replies Latest reply on Dec 8, 2006 12:36 PM by jvolk123

    UIComponent sizing issue

    jvolk123
      First off, I'm new to Flex / Actionscript - so I hope I'm not mangling things too badly!

      My issue is I'm trying to draw a square on a canvas. I want to implement my own class (Rectangle which extends UIComponent) to do this. So, in my mxml, I have the following:

      var square:Rectangle = new Rectangle(name);
      square.setDimensions(50, 50);
      square.setFillColor(0xFFCC00);
      square.setStrokeThickness(1);
      square.setStrokeColor(0x000000);
      square.setLabel(label);
      square.draw(100, 100);
      panel1.addChild(square);

      Most of these are just setting properties - the meat happens in the draw method:

      public function draw(x:int, y:int):void
      {
      var mySprite:Sprite = new Sprite();
      mySprite.name = this.name + "_" + "sprite";
      mySprite.graphics.beginFill(this._fillColor);
      mySprite.graphics.lineStyle(this._strokeThick, this._strokeColor);
      mySprite.graphics.drawRect(0, 0, this._width, this._height);
      if (this._label != "")
      {
      var label:TextField = new TextField();
      label.text = this._label;
      label.name = this.name + "_label";
      // where to put this?
      label.x = 5;
      label.y = 5;
      mySprite.addChild(label);
      }
      this.addChild(mySprite);
      this.opaqueBackground = 0xFF0000;
      this.move(x, y);
      }

      So, you can see that I'm basically just drawing the square and adding a label - this works just fine. I stick this on my panel and everything works great.

      The problem is that I will ultimately need to do stuff with this object which will require me to detect its boundaries. For example, if I want to draw a line from this square to another, I need to know its edges, height, width, etc.

      When I do something like panel1.getChildByName("squarename") - I get the object as a DisplayObject (which is fine, right?). I tried looking at, say, mySquare.transform.pixelBounds and that gives me the bounds of the enclosing UIComponent - not the actual drawn square.

      I can test this by setting the opaqueBackground property - I see a large, 100 x 100 UIComponent "container" with a 50 x 50 drawn square.

      My problems are the following:

      1) I can't ever get back to that drawn sprite for whatever reason...I don't see it as a child. This is actually ok but...

      2) I can't resize the parent UIComponent, either at creation or after the fact. It is ALWAYS 100x100 pixels. If I could resize this then I could just resize it to the size of my square and use pixelBounds.

      So...I'm kinda stumped. Does this seem like a totally backwards way of doing things? Is there something I'm missing? Or perhaps I'm just not overriding a necessary function in my Rectangle class? Any help is much appreciated!