Flex TextArea htmlText 与样式表点击错误

Question

这个错误很难描述，但很容易用底部代码重现。只需在 Flex 3 中复制、粘贴和编译+运行，您就会发现问题所在。有人知道解决方法吗？

编辑：这是一个正在运行的演示的链接：http://shiinaringo.se/hosted/flex/textarea-bug/HtmlTextBug.html 在演示中，TextArea 的默认颜色设置为红色。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" applicationComplete="applicationComplete(event);">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private function applicationComplete(event:Event):void {
                var styles:String = "a:hover { color: #6666ff; text-decoration: underline; } a { color: #0000ff; }";
                var ss:StyleSheet = new StyleSheet();
                ss.parseCSS(styles);
                textGreenStylesheet.styleSheet = ss;
            }
            private function enteredText(event:FlexEvent):void {
                textDefault.htmlText = event.currentTarget.text;
                textGreen.htmlText = event.currentTarget.text;
                textGreenStylesheet.htmlText = event.currentTarget.text;
            }
        ]]>
    </mx:Script>
    <mx:VBox height="100%" width="400" horizontalAlign="center">
        <mx:Panel width="250" height="200" layout="absolute" title="TextArea A. Default colored text">
            <mx:TextArea id="textDefault" condenseWhite="true" width="100%" height="100%" x="0" y="0">
                <mx:htmlText>
                <![CDATA[
                    This text has the default text color of the TextArea control.
                ]]>
                </mx:htmlText>
            </mx:TextArea>
        </mx:Panel>
        <mx:Panel width="250" height="200" layout="absolute" title="TextArea B. Green text">
            <mx:TextArea id="textGreen" condenseWhite="true" width="100%" height="100%" x="0" y="0" color="green">
                <mx:htmlText>
                <![CDATA[
                    This text has the text color set to green
                ]]>
                </mx:htmlText>
            </mx:TextArea>
        </mx:Panel>
        <mx:Panel width="250" height="200" layout="absolute" title="TextArea C. Green text + stylesheet">
            <mx:TextArea id="textGreenStylesheet" condenseWhite="true" width="100%" height="100%" x="0" y="0" color="green">
                <mx:htmlText>
                <![CDATA[
                    This text has the text color set to green, and also uses a stylesheet to make <a href="http://example.com">links</a> blue and underlined when hovered.
                ]]>
                </mx:htmlText>
            </mx:TextArea>
        </mx:Panel>
        <mx:TextInput x="69" y="282" width="207" enter="enteredText(event);"/>
    </mx:VBox>
    <mx:VBox height="100%" width="200">
        <mx:Text width="166" text="We have three TextArea controls. The top uses default text color, the middle one uses defined green text color, the bottom one also uses green color, but also uses a stylesheet to define some custom coloring of A tags." height="232"/>
        <mx:Text width="166" text="To reproduce the problem, first try to just enter new text in the input field in the bottom, and press enter. The text in the three boxes will update. Notice that the colors and other styles don't change in any of the three boxes. But when you click once inside textarea C, then enter new text in the input field and hit enter, you'll notice that the color and font is lost in textarea C. Bug?" height="232"/>
    </mx:VBox>
</mx:Application>

Answer 1

基本上，StyleSheet 和 TextFormat doesn't go together 在 Flash 文本字段中。

以下是我对可能发生的事情的猜测：

color="green" 将成为 TextArea 的内部 TextField 的 defaultTextFormat 的一部分，并将在触发 applicationComplete 之前应用于文本。您可以通过在应用程序完整处理程序中跟踪trace(textGreenStylesheet.htmlText); 来验证这一点（在设置样式表之前）。这是我得到的：

<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="10" COLOR="#008000" LETTERSPACING="0" KERNING="0">This text has the text color set to green, and also uses a stylesheet to make <A HREF="http://example.com" TARGET="">links</A> blue and underlined when hovered. </FONT></P></TEXTFORMAT>

现在，当您应用样式表时，颜色保持不变（绿色），因为样式表没有为整个文本指定任何颜色。

当您单击 TextArea 时，我相信 flex 会重新计算它的属性（可能是单击触发了失效 - 我不确定下面发生了什么）。在执行此操作时，编译器发现已应用样式表并忽略 color="green" 属性。现在，这些新属性仅在 text/htmltext 属性更改时应用（稍后按回车键）。因此，除非您单击或以某种方式触发 textarea 失效，否则它将保留应用样式表之前指定的默认颜色。

如果在样式表中添加.yellow{color:#ffff00;}，并用<span class="yellow">some text</span>标签将第三个文本区域中的一些文本括起来，你可以看到无论你点击与否，封闭的文本都保持黄色。

Answer 2

这就是我正在做的解决这个问题。这是一个很大的技巧，但它确实有效。

import flash.events.Event;
import flash.text.TextFormat;

import mx.controls.Text;
import flash.text.StyleSheet;

import mx.core.mx_internal;
import mx.events.FlexEvent;

public class SupText extends Text
{

    use namespace mx_internal;

    public var linkColor:String = "#355EBF";

    private var format:TextFormat;

    public function SupText()
    {
        super();
        this.addEventListener(FlexEvent.CREATION_COMPLETE, function(e:Event):void { setStyleSheet(); });
    }

    override public function set htmlText(value:String):void {
        if (format != null) {
            //glorious hack for style problem
            textField.styleSheet = null;
            textField.defaultTextFormat = format;
            setStyleSheet();
        }

        super.htmlText = value;

        if (textField.defaultTextFormat.font != "Times New Roman") {
            format = textField.defaultTextFormat;
        }
    }

    public function setStyleSheet():void {
        var ss:StyleSheet = textField.styleSheet;

        if(textField.styleSheet == null){
            textField.styleSheet = new StyleSheet();
        }
        textField.styleSheet.setStyle("sup", { display: "inline", fontFamily: "ArialSup", fontWeight:"normal"});
        textField.styleSheet.setStyle("a:link", { textDecoration: "none", color: linkColor });
        textField.styleSheet.setStyle("a:hover", { textDecoration: "underline" });
        textField.styleSheet.setStyle("a:active", { textDecoration: "underline" });
    }


}

}

Answer 3

您可以将文本直接分配给 .text 属性吗？

private function enteredText(event:FlexEvent):void
{
    textDefault.text = event.currentTarget.text;
    textGreen.text = event.currentTarget.text;
    textGreenStylesheet.text = event.currentTarget.text;
}