Flex binding and AS3

Question

I have a degrafa surface into a canvas container. I want to link both width and height. When i use binding like it works as expected:

// binding
   BindingUtils.bindProperty(rect,"height",this,"height"); 
   BindingUtils.bindProperty(rect,"width",this,"width"); 

Now, someone told me that i should do it on validateSize() or updateDisplayList(), with my current knowledge of flex i dont realy know why but i tried the following

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

    trace(unscaledWidth, unscaledHeight);
    this.width = unscaledWidth;
    rect.width =unscaledWidth;
    this.height = unscaledHeight;
    rect.height = unscaledHeight;

}

The degrafa rectangle get resized well but not the 'this' canvas container. They seem to be not binded, did i miss something ?

Also i would like to modify a little bit the relation in rect.width = this.width with some factor in it which i cant do using the bindproperty method.

Thanks a lot for any clue.

Answer 1

Just in case,

some more code

public class RectangleShape extends BaseShape 
{
public function RectangleShape(fillColor:int) {
    super.name = shapeName;
    solidFill.color = fillColor;


    // shape
    solidFill.alpha = 0.3;
    rect.fill = solidFill;
    rect.stroke = solidStroke;    
    geoGroup.geometryCollection.addItem(rect);     
    geoGroup.target = surface;

    surface.graphicsCollection.addItem(geoGroup);  
    this.addChild(surface);

  // binding
  // BindingUtils.bindProperty(rect,"height",this,"height"); 
  // BindingUtils.bindProperty(rect,"width",this,"width"); 
}




 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

    trace(unscaledWidth, unscaledHeight);
    this.width = unscaledWidth;
    rect.width =unscaledWidth;
    this.height = unscaledHeight;
    rect.height = unscaledHeight;

}

Answer 2

Somewhere in your updateDisplayList you should call:

super.updateDisplayList(unscaledWidth, unscaledHeight); 

Answer 3

The updateDisplayList() method is where you should size and position your component's child objects. You should not be setting the size of the component itself (ie: don't do: this.width=100).

You can also do programatic drawing in updateDisplayList(), using the Flash graphics apis.

updateDisplayList() is called by Flex and the two parameters unscaledWidth and unscaledHeight are the size that your component will be rendered at. You should honor those dimensions, and set the size of your component's child objects based on them.

When setting the size in updateDisplayList(), you do not modify the width/height properties directly. Doing this will trigger more Flex life cycle methods to execute. Instead, use the setActualSize() method of the child component.

The same things goes with setting the x/y properties of your child object. Don't set them directly, use the move() method.

Finally, in Flex 4 they added some analogous life cycle methods for Spark components. Use them where possible: setLayoutBoundsSize(), setLayoutBoundsPosition().

Here's your original updateDisplayList(), modified as per above:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

    trace(unscaledWidth, unscaledHeight);

    // like Janroel said above, you should call the super class method
    // the only time you don't need to is when your component extends UIComponent
    // (because UIComponent's updateDisplayList doesn't do anything)
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    // don't do this (your component will get sized by its parent)
    //this.width = unscaledWidth;
    // if 'rect' inherits from UIComponent you should use the setActualSize() method:
    rect.setActualSize(unscaledWidth, unscaledHeight);
    // if it doesn't inherit from UIComponent, do it the regular way...
    rect.width =unscaledWidth;
    //this.height = unscaledHeight;
    rect.height = unscaledHeight;
}