Flex 4 custom component with children inserted directly into view stack

Question

I give up. Hopefully I am just missing something easy, but I feel like I am pulling teeth trying to get this to work. All I want is a custom 'wizard' component whose children are placed within a ViewStack and beneath the ViewStack there is a next and back button. Here are some code excerpts to illustrate my approach:

WizardGroup.as:

    [SkinPart(required="true")]
    public var nextBt:Button = new Button();

    [SkinPart(required="true")]
    public var backBt:Button = new Button();

    [SkinPart(required="true")]
    public var stack:ViewStackSpark = new ViewStackSpark();

WizardGroupSkin.mxml:

       <s:VGroup width="100%" height="100%"
                  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
            <container:ViewStackSpark id="stack" width="100%" height="100%">
                <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"/>
            </container:ViewStackSpark>
            <s:HGroup horizontalAlign="right" width="100%">
                <s:Button id="nextBt" label="Next" enabled="{hostComponent.permitNext}" enabled.last="false"/>
                <s:Button id="backBt" label="Back" enabled="{hostComponent.permitBack}" enabled.first="false"/>
            </s:HGroup>
        </s:VGroup>

While this comes very close to working, the major problem is that the children of the WizardGroup component are not added as children of the viewstack. Instead, they are added as children of the contentGroup. So the viewstack will always only have one child: contentGroup.

I also tried the approach of binding the contents of the view stack to the children of contentGroup, but with Spark containers, there is no way to access an array of children or array of elements (ie, there is no contentGroup.getChildren() or contentGroup.getElements())

Any ideas? Thanks everyone.

Answer 1

I finally figured it out. The trick is to set the default property of the WizardGroup to a public member array I am calling "content"

[DefaultProperty("content")]
public class WizardGroup extends TitleWindow
{
    [SkinPart(required="true")]
    public var nextBt:Button = new Button();

    [SkinPart(required="true")]
    public var backBt:Button = new Button();

    [Bindable]
    public var content:Array;

And then within the skin, bind the content of the viewstack to the hostComponent's content array:

        <s:VGroup width="100%" height="100%"
                  paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
            <container:ViewStackSpark id="stack" width="100%" height="100%" content="{hostComponent.content}"/>
            <s:HGroup horizontalAlign="right" width="100%">
                <s:Button id="nextBt" label="Next" enabled="{hostComponent.permitNext}" enabled.last="false"/>
                <s:Button id="backBt" label="Back" enabled="{hostComponent.permitBack}" enabled.first="false"/>
            </s:HGroup>
        </s:VGroup>