Spark TextInput 验证上的 errorSkin答案

【问题标题】：errorSkin on Spark TextInput validationSpark TextInput 验证上的 errorSkin
【发布时间】：2011-07-15 07:45:50
【问题描述】：

我可能正在服用疯狂的药丸，但有没有人真正让 errorSkin 功能发挥作用？我没有做任何疯狂的事情，只是扩展 TextInput (spark) 并设置 errorSkin 属性。

我尝试使用 SparkSkin 创建皮肤，但什么也没做。我曾尝试使用 ProgrammaticSkin 创建皮肤，但什么也没做。

TextInput 始终是红色边框。我知道你可以设置 errorColor 和 errorString 但我显然希望做的不仅仅是改变边框的颜色。我正在使用 Flex 4.1 进行编译。

有什么想法吗？

实施：

<components:PromptedTextInput id="txt"
        width="200"
        horizontalCenter="0"
        verticalCenter="0"
        errorSkin="skins.TestSkin" />

类

public class PromptedTextInput extends TextInput
{

    public function PromptedTextInput()
    {
        super();
    }

}

错误皮肤：

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
    <![CDATA[

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

    ]]>
</fx:Metadata>

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

<!-- fill -->
<s:Rect id="background"
        left="1" right="1" top="1" bottom="1">
    <s:fill>
        <!--- Defines the background fill color. -->
        <s:SolidColor id="bgFill"
                color="#66CC66" />
    </s:fill>
</s:Rect>
</s:SparkSkin>

另一个错误皮肤尝试：

public class TestSkin extends ProgrammaticSkin
{
    public function TestSkin()
    {
        super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        graphics.clear();
        graphics.beginFill(0x33CC33);
        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
        graphics.endFill();
    }
}

【问题讨论】：

如果errorSkin是替换皮肤；你不需要的不仅仅是彩色背景吗？尝试将您的 ErrorSkin 重新创建为 TextInput 外观的副本。

标签： apache-flex validation skinning textinput

【解决方案1】：

您是否尝试过基于 \Flex 4.1\frameworks\projects\spark\src\spark\skins\spark\ErrorSkin.as 中的 ErrorSkin（不是 TextInput 外观）创建外观？

【讨论】：

Uhhhgggg，我的错。基本上，由于某种原因，未缩放的宽度和高度为零。硬编码图形的高度和宽度至少显示。它仍然无法正常工作。图形似乎是在控件上绘制的。红色边框仍显示在下方。

【解决方案2】：

嗯，它不漂亮，但看起来有两个皮肤需要改变。 ErrorSkin 和 FocusSkin。好消息是您可以使它们相同。对于皮肤，只是为了测试，我完全复制了 Adobe 的 ErrorSkin 类。可悲的是，即使通过将颜色硬编码到皮肤中，我仍然可以看到一个红色像素在边框的角落达到峰值。如果我修复它，我会尝试更新它。谢谢大家。

<s:TextInput id="txt"
            width="200"
            focusSkin="skins.NewErrorSkin"
            horizontalCenter="0"
            verticalCenter="0"
            errorSkin="skins.NewErrorSkin" />

更新

听起来很愚蠢，它只是在 ErrorSkin 的 processBitmap() 函数中设置 errorColor 样式。在这里，我将错误边框硬编码为 0x99CC66

override protected function processBitmap():void
{
     // Apply the glow filter
     rect.x = rect.y = 0;
     rect.width = bitmap.bitmapData.width;
     rect.height = bitmap.bitmapData.height;

     target.setStyle("errorColor", 0x99cc66);
     glowFilter.color = 0x99cc66;

     bitmap.bitmapData.applyFilter(bitmap.bitmapData, rect, filterPt, glowFilter);
}

【讨论】：