Forums

Marc,

I believe you may need a custom TextInput border skin to achieve the same effect with the Spark skins for the mx:TextInput control. Certain styles that were supported by the default Halo controls/containers are not as easily tweakable with the Spark skins.

So, long story longer, here is my solution. I copied the default Spark skin for the Halo TextInput control (you can find the default skin, TextInputBorderSkin.mxml, in the <SDK_Dir>\frameworks\projects\sparkskins\src\mx\skins\spark\ folder) and made a couple minor tweaks and then saved my custom skin as CustomTextInputBorderSkin.mxml in the /src/skins/ folder of my Flex Project. Here's the revised CustomTextInputBorderSkin.mxml file:

<?xml version="1.0" encoding="utf-8"?>
<!--- The Spark skin class for the border of the Halo TextInput component. -->
<local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*"
        implements="mx.core.IBorder">

    <fx:Script>
        <![CDATA[
            import mx.core.EdgeMetrics;
            import mx.core.IUIComponent;

            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["background"];
            override public function get colorizeExclusions():Array {return exclusions;}

            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
            override public function get contentItems():Array {return contentFill};

            /* Define the border items.*/
            static private const borderItem:Array = [];
            override protected function get borderItems():Array {return borderItem;}

            static private const metrics:EdgeMetrics = new EdgeMetrics(2, 2, 2, 2);

            public function get borderMetrics():EdgeMetrics {
                return metrics;
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
               
                if (parent && parent is IUIComponent && !IUIComponent(parent).enabled) {
                    alpha = 0.5;
                } else {
                    alpha = 1;
                }
            }
        ]]>
    </fx:Script>

    <!-- fill -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>

</local:SparkSkinForHalo>

And then I specified the custom border skin by specifying the borderSkin style on the Halo TextInput control, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <mx:TextInput
            borderStyle="none"
            borderThickness="0"
            text="A red border is visible but I expect no border."
            borderSkin="skins.CustomTextInputBorderSkin" />

    <mx:TextInput
            borderColor="red"
            text="A red border is visible" />

</mx:Application>

Hopefully that helps. For a lot of other great migration information and differences between Flex 3 and Flex 4 (and how to use the Halo skins in your projects), see the following article on the Flex Developer Center: http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

Peter deHaan

Flex SDK Team | Adobe Systems Inc

Correct.

For the Spark TextInput control, I would use something like the following:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">


    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:TextInput id="textInput"
                text="A red border is visible but I expect no border."
                skinClass="skins.CustomTextInputSkin" />
    </s:VGroup>


</s:Application>

And my custom skin, /src/skins/CustomTextInputSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!--- The default skin class for Spark TextInput component. -->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
      alpha.disabled="0.5">
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata>
   
    <fx:Script>
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background", "textView"];
   
        override public function get colorizeExclusions():Array {return exclusions;}
       
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array {return contentFill};
    </fx:Script>
   
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
    </s:states>
    <!-- fill -->
    <!--- Defines the appearance of the TextInput component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
        <!--- Defines the background fill color. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
   
    <!-- text -->
    <s:RichEditableText id="textView"
              lineBreak="explicit"
              left="1" right="1" top="1" bottom="1"
              paddingLeft="3" paddingTop="5"
              paddingRight="3" paddingBottom="3"/>
</s:SparkSkin>

Peter