Flex: Custom composite component in ActionScript -- problems with percentWidth/percentHeight

Question

I've done tons of research and read the Adobe Live Docs till my eyes bled trying to figure this out.

I am building a composite custom component in ActionScript, and would like the sub controls to be laid out horizontally. This works fine by adding them to an HGroup and adding HGroup to the component, the problem comes with percentage based sizing.

I need _horizontalGroup:HGroup to size it self based on the size of its container.

stepping through the code shows that the parent properties of each UIComponent are...

_horizontalGroup.parent = ReportGridSelector
ReportGridSelector.parent = grpControls

If grpControls has an explicit size, shouldn't ReportGridSelector have its size as well?

The custom component is implemented like this...
NOTE: ReportControl extends UIComponent and contains no sizing logic

public class ReportGridSelector extends ReportControl{

  /*other display objects*/
  private var _horizontalGroup:HGroup;

    public function ReportGridSelector(){
        super();
        percentHeight = 100;
        percentWidth = 100;
    }

    override protected function createChildren():void{

        super.createChildren();

        if(!_horizontalGroup){
            _horizontalGroup = new HGroup();

            //I WANT SIZE BY PERCENTAGE, BUT THIS DOESN'T WORK
            _horizontalGroup.percentWidth = 100;
            _horizontalGroup.percentHeight = 100;

            //EXPLICITLY SETTING THEM WORKS, BUT IS STATIC :-(
            //_horizontalGroup.width = 200;
            //_horizontalGroup.height = 200;
            addChild(_horizontalGroup);
        }
    }
}

Consuming MXML code

<?xml version="1.0" encoding="utf-8"?> 
<s:VGroup id="grpControls" width="200" height="200">
     <ReportControls:ReportGridSelector width="100%" height="100%"/>
</s:VGroup>

If I explicitly define _horizontalGroup's width and height properties, everything displays fine. If I try _horizontalGroup.percentWidth or percentHeight, all the controls get scrunched together.

Any thoughts as to what is going on?

Also here are some related posts that I've found. [Flex:CreateNewComponent](http://stackoverflow.com/questions/489024/flex-how-to-create-an-entirely-new-component) [Flex Custom Component PercentWidth/Height](http://stackoverflow.com/questions/2473085/flex-custom-component-percentage-width-height) [How to get Flex components to fill available space using ActionScript](http://stackoverflow.com/questions/2090845/how-to-get-flex-components-to-fill-available-space-using-actionscript) — DynaWeb, May 24 '12 at 01:16

score 1 · Accepted Answer · answered May 24 '12 at 02:48

Perform layout when the display list is invalidated from updateDisplayList.

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

    _horizontalGroup.width = unscaledWidth;
    _horizontalGroup.height = unscaledHeight;
}

Understand the Flex component lifecycle:

http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html

createChildren

Creates any child components of the component. For example, the ComboBox control contains a TextInput control and a Button control as child components.

For more information, see Implementing the createChildren() method.

updateDisplayList

Sizes and positions the children of the component on the screen based on all previous property and style settings, and draws any skins or graphic elements used by the component. The parent container for the component determines the size of the component itself.

Thanks Jason that worked like a charm! I am slowly making the transition away from MXML implemented components and will revisit the life cycle. — DynaWeb, May 24 '12 at 15:47

Flex: Custom composite component in ActionScript -- problems with percentWidth/percentHeight

1 Answers1