Migration 3 4: borderStyle=none?

Question

I've started to test a migration of a Flex 3 app to Gumbo. I couldn't find out how to remove the border from components like e.g. mx:TextInput. The code below shows the problem:
<?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"
    layout="vertical"
    >
    <mx:TextInput
        borderStyle="none"
        borderThickness="0"
        borderColor="red"
        text="A red border is visible but I expect no border."
        />
    <mx:TextInput
        borderColor="red"
        text="A red border is visible"
        />
</mx:Application>
How can I remove the border of Flex 3 components?
Thanks for any hints,
Marc

Answer 1

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