Asa Williams Ideas and life lessons learned from a comp. scientist

Creating a FieldSet Container

The FieldSet container is a standard visual component for HTML and many other visual languages, but not for Flex. I will show you how to create a very basic one in Flex 3.

End Result

If you wish to see the entire object's code click the link above.

Adding Children to a Container

To allow children components to be added to the FieldSetContainer you need to set a "DefaultProperty" Tag.

FieldSetContainer.as (snippet)

[DefaultProperty("children")]
...
/**
 * Display Children to be added to the Container
 */
private var _childrenChanged:Boolean = false;

private var _children:Array = [];
public function set children(value:*):void
{
    if( value is DisplayObject )
        _children = [ value ];
    else
        _children = value;

    _childrenChanged = true;
    invalidateDisplayList();
}

The string in the tag ("children") is the property that will be set with the DisplayObjects that are inside the FieldSetContainer. Since you can have one or many objects inside this container (DisplayObject or Array of DisplayObjects) we cannot set the data type of the value that is passed in. The '*' allows for all types to be a passed in.

At this point we cannot add the children to the container because the container has not been created yet. The last statement "invalidateDisplayList();" calls the updateDisplayList(unscaledwidth, unscaledheight) method when it is ready ( when everything is created ). We will override this method to be able to add these children to the container.

We first check if the property is changed. Since this method will be called many times not related to the adding of children we do not want to execute this code every time. Looping through the array of children we add each one to the container.

Setting the title string

Like the children and the container the title property will be set before the Label object will be create. We handle setting the text of the label of the title in commitProperties, but we also call invalidateDisplayList(w, h) because the width and height of the titleLabel effects the position of the children and the border. Any time when you need the width and height of the parent container to size or position a object it needs to be done in the updateDisplayList function. To indirectly call this method, you call "invalidateDisplayList();".

protected var titleLabel:Label;

...

/**
 * String to be used as title's text
*/
private var _title:String;
public function set title(value:String):void
{
    if(value != null)
    {
	_title = value;
	dataChanged = true;
        invalidateProperties();
    }
}
...
override protected function commitProperties():void
{
    super.commitProperties();

    if(dataChanged)
    {
        dataChanged = false;
        titleLabel.text = _title;
        invalidateDisplayList();
    }
}
...
override protected function createChildren():void
{
    super.createChildren();

    titleLabel = new Label();
    titleLabel.x = 10;
    titleLabel.y = 0;
    titleLabel.setStyle("color", 0x333333);
    titleLabel.setStyle("paddingRight", 7);
    titleLabel.text = _title;

    addChild(titleLabel);
}

Creating the boarder and children

...

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

    if(_childrenChanged)
    {
        _childrenChanged = false;

        var index:uint = 1;
        for each(var child:DisplayObject in _children)
        {
            child.y += titleLabel.measuredHeight;
            child.x += 1;
            this.addChildAt(child, index);
            index++;
        }
    }

    createBorders(unscaledWidth, unscaledHeight);
}

protected function createBorders(width:Number, height:Number):void
{
    var borderTopY:uint = titleLabel.height/2;

    this.graphics.clear();
    this.graphics.lineStyle(1, 0x858585);

    this.graphics.moveTo(7, borderTopY);
    this.graphics.lineTo(0, borderTopY);
    this.graphics.lineTo(0, height);
    this.graphics.lineTo(width, height);
    this.graphics.lineTo(width, borderTopY);
    this.graphics.lineTo(titleLabel.x + titleLabel.width - 2, borderTopY);
}

In the updateDisplayList method we will create and position all the children and draw the border. We will start looping over the collection of children at index 1 because the title is at index 0. We also want add the title's height to the y of each child so that it will not overlap the title. In the createBoarders(width, height) method we are creating a boarder line that starts at the vertical center of the title and wraps around the parameter of the container until it reaches the right side of the title label. The "-2" in "titleLabel.x + titleLabel.width - 2" is so the line will always have at least 2 pixels in the direction towards the title.