Update UIComponent size

Question

Hi,

I've created a AS3 class which extends UIComponent so that I can easily add it to my MXML layout. It works fine, but I'm trying to figure out how to update the UIComponent width and height dynamically. I want my super UIComponent to draw a border around the content, so I need get the specific 'content' dimensions in order to do this.

I understand the idea of UIComponent is that you are supposed to specifically set the width and height... but I am literally only extending it so that I am able to use my custom component with MXML easily.

Is there a method in which I can get the width and height of a UIComponents 'content'?

Thanks

Answer 1

Not sure what you mean by the "content" of your UIComponent. Do you mean the UIComponent's dimensions, or a child container's?

One place you can look for the size of any component is in its updateDisplayList method, which is a protected method you would have to override, as so:

override protected function updateDisplayList(width:Number, height:Number) {
  super.updateDisplaylist(width, height);
  // your statements here
}

You say you are extending UIComponent only so that you are able to use your custom component "with MXML easily." But you still need to extend it as much as you need to in order to do what you need to do. For that you should learn about the lifecycle of a component, when to overrwrite the createChildren(), commitProperties(), measure() and other methods, and so on. It's really not hard, and you've already taken the first step. Good luck!

Answer 2

Like Robusto described in his comment, the Canvas is probably a better choice if you're trying to add children to it. The Canvas instantiates a CanvasLayout, which handles all the complex logic for sizing itself and children.

The width and height of a UIComponent's content is determined in the measure() method, unless the UIComponent has explicit or percent sizes defined. Measure is one of those methods that aren't well documented. I suggest Diving Deep into the Flex Component Lifecycle with EffectiveUI. They go into the lifecycle methods and really explain how to use them.

The measure() method is called if the parent (your component) doesn't have any sizing defined. Then it goes through all of its children, calculates their sizes, and sums them up into measuredWidth and measuredHeight. The parent's sizes are then set to those values.

If you extend UIComponent, you have to do a lot in the measure method to handle all the edge cases: explicit, percent, constraints (top, left...), padding, whether or not includeInLayout = true, etc. Canvas does all that. Same with the other container components: Box, HBox, VBox, List, etc.

Hope that helps, Lance