Flex TextArea htmlText with stylesheet click bug

时间:2009-12-08 12:00:55

标签: flex

这个错误很难描述,但很容易用底部代码重现。只需在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>

3 个答案:

答案 0 :(得分:1)

基本上,Flash文本字段中的StyleSheetTextFormat doesn't go together

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

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会重新计算它的属性(可能是click会触发失效 - 我不确定它下面发生了什么)。执行此操作时,编译器会发现已应用样式表并忽略color="green"属性。现在,只有在更改text / htmltext属性时才会应用这些新属性(稍后通过按Enter键)。因此,除非您单击或以某种方式触发textarea的无效,否则它将保留在应用样式表之前指定的默认颜色。

如果您将.yellow{color:#ffff00;}添加到样式表并在第三个文本区域中将某些文本用<span class="yellow">some text</span>标记括起来,则无论您是否点击它,都可以看到所附文本保留黄色。< / p>

答案 1 :(得分:1)

这就是我正在做的解决这个问题的方法。这是一个很大的黑客,但确实有效。

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" });
    }


}

}

答案 2 :(得分:0)

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

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