Question

Is it possible to access a declared component as an IFactory within an MXML class? I’ve used this style of declaring factories many times for Skin Parts, but I’ve never figured out how to access those factories from within the MXML.

Here’s an example of what I would expect to work:

<fx:Declarations>
    <fx:Component id="labelDisplay">
        <s:Label fontSize="12" fontWeight="bold"/>
    </fx:Component>
</fx:Declarations>

<fx:Script>
    <![CDATA[
        override protected function createChildren():void
        {
            super.createChildren();

            var label1:Label = labelDisplay.newInstance();
            addElement(label1);

            var label2:Label = labelDisplay.newInstance();
            addElement(label2);

            var label3:Label = labelDisplay.newInstance();
            addElement(label3);
        }
    ]]>
</fx:Script>

* edit *

The reason I was hoping the above code would work is based on the way dynamic Skin Parts are handled in the Spark skinning architecture. If the above code were a part of an MXML skin class, then in my host component, I could have the following.

[SkinPart(required="true",type="spark.controls.Label")]
public var labelDisplay:IFactory;

In the Spark skinning architecture, at what point does the <fx:Component> turn into an IFactory?

Answer 1

I dug into Flex’s SkinnableComponent to find the solution based on how they tie an MXML Skin to an AS HostComponent. Apparently, even though “labelDisplay” doesn’t show up in FlashBuilder’s autocomplete as a concrete class member, you can still reference it as a dynamic property. I’ve modified my original example here:

<fx:Declarations>
    <fx:Component id="labelDisplay">
        <s:Label fontSize="12" fontWeight="bold"/>
    </fx:Component>
</fx:Declarations>

<fx:Script>
    <![CDATA[
        override protected function createChildren():void
        {
            super.createChildren();

            var labelFactory:ClassFactory = this["labelDisplay"];

            var label1:Label = labelFactory.newInstance();
            addElement(label1);

            var label2:Label = labelFactory.newInstance();
            addElement(label2);

            var label3:Label = labelFactory.newInstance();
            addElement(label3);
        }
    ]]>
</fx:Script>