Flex 4.6 hostComponent no longer Works?

Question

hostComponent seems to have stopped working as it used to before. If I create a custom comp based on lets say SkinnableContainer and apply default skin I am unable to see co hinting for Bindable/public variables from the skin. Code below to illustrate.

What am I missing here? Same seems to happen with other components/skins. I'm using latest Flash Builder (4.6).

<--------- Component --------------->

<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      width="400" height="300" skinClass="skins.testSkin">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[

            [Bindable]
            public var test:String = "Test";

        ]]>
    </fx:Script>
</s:SkinnableContainer>

<----------------- Skin -------------->

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.SkinnableContainer")]
    ]]>
    </fx:Metadata> 

    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                this.hostComponent
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                }
                else
                {
                    background.visible = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>        
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!--- Defines the appearance of the SkinnableContainer class's background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!--- @private -->
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>

    <!--
        Note: setting the minimum size to 0 here so that changes to the host component's
        size will not be thwarted by this skin part's minimum size.   This is a compromise,
        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
    -->
    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>

</s:Skin>

Your [HostComponent("spark.components.SkinnableContainer")] directive in the skin needs to specify the custom component (eg., MyComponent) and not merely the SkinnableContainer if you want to get code hinting on the vars and methods. Is that just a typo in your question? — merv
No typo, it was that simple :) I guess last time I used hostComponent I hand coded it... Why Does Flash Builder not add the custom hostComponent I wonder? And is there any use in having "[HostComponent("spark.components.SkinnableContainer")]" at all? Thanks for the answer, add it as such and I will accept! :) — DominicM

merv merv · Accepted Answer · 2012-01-23T05:11:04

In order for Flash Builder to be able to provide you with code hinting for the public methods and properties of a custom component, the custom component needs to be specified in the HostComponent metadata directive within the skin. Currently, the skin code you provided has:

[HostComponent("spark.components.SkinnableContainer")]

Try changing that to whatever your custom component is, eg. com.mydomain.MyComponent.

Flex 4.6 hostComponent no longer Works?

1 Answers