Flash Builder 4 "includeIn" property causing design view error

Question

I am creating a custom TextInput component that will define an "error" state. I have extended the TextInput class to change the state to "error" if the errorString property's length is greater than 0. In the skin class, I have defined an "error" state, and added some logic to detect the size and position of the error icon. However, if I have this code at the same time I use the "includeIn" property in the bitmap image tag, I get a design view error. If I either A) Only include that code with no "includeIn" property set, it works or B) dont include the code to set the icon size and position and only use the "includeIn" property, it works. Any ideas what could be causing the design view problem when I use both the "includeIn" property and the icon size/position code at the same time?

TextInput Class:

        package classes {

        import spark.components.TextInput;

        public class TextInput extends spark.components.TextInput {

            [SkinState("error")];

            public function TextInput() {
                super();    
            }

            override public function set errorString( value:String ):void {
                super.errorString = value;
                invalidateSkinState();
            }

            override protected function getCurrentSkinState():String {

                if (errorString.length>0) {
                    return "error";
                }

                return super.getCurrentSkinState();
            }

        }
     }

TextInput Skin File:

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                //THIS IS THE CODE THAT SEEMS TO BE CAUSING THE PROBLEM


                if(getStyle("iconSize") == "large") {
                    errorIcon.right = -12;
                    errorIcon.source = new errorIconLg();
                } else {
                    errorIcon.right = -5;
                    errorIcon.source = new errorIconSm();
                }


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

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



        //If I remove the problem code above or if I take out the includeIn 
        //property here, it works

        <s:BitmapImage id="errorIcon" verticalCenter="0" includeIn="error" />


    </s:SparkSkin>

Answer 1

In Flex 4, a component is only instantiated when the state it's in is activated. Therefore, when the skin first loads, errorIcon is a null reference. Its instantiation is deferred until the error state becomes active. In order to instantiate it immediately, you set the itemCreationPolicy="immediate" property on it.

<s:BitmapImage id="errorIcon" 
               source="../images/error.png" 
               itemCreationPolicy="immediate" 
/>