Flex TextArea htmlText with stylesheet點擊錯誤

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和TextFormatdoesn't go together在閃蒸文本字段。

以下是我的什麼可能發生的guestimate：

的color="green"將成爲TextArea的內部文本字段的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屬性發生更改時才應用（稍後按Enter鍵）。因此，除非您單擊或以某種方式觸發textarea的失效，否則它將保留在應用樣式表之前指定的默認顏色。

如果您將.yellow{color:#ffff00;}添加到樣式表中並使用<span class="yellow">some text</span>標籤在第三個文本區域中包含一些文本，您可以看到無論您是否單擊它，封閉文本都保持黃色。

Answer 2

您可以直接將文本分配給.text屬性嗎？

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

Answer 3

下面是我正在做的事情來解決這個問題。這是一個很大的破解，但它確實有效。

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


} 

}