Flex TextArea htmlTexte avec bug de feuille de style

Question

Ce bug est difficile à décrire, mais facilement reproduit avec le code du bas. Il suffit de copier, coller et compiler + exécuter dans Flex 3 et vous verrez le problème. Quelqu'un sait d'un travail autour?

Editer: Voici un lien vers une démo en cours d'exécution: http://shiinaringo.se/hosted/flex/textarea-bug/HtmlTextBug.html Dans la démo, la couleur par défaut de TextArea est rouge.

<?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

Fondamentalement, StyleSheet et TextFormatdoesn't go together dans un champ de texte flash.

Ce qui suit est mon guestimate de ce qui pourrait se produire:

Le color="green" fera partie du defaultTextFormat du TextField interne du TextArea et sera appliquée au texte bien avant applicationComplete est tiré. Vous pouvez vérifier cela en traçant trace(textGreenStylesheet.htmlText); dans le gestionnaire complet de l'application (avant de définir la feuille de style). Voici ce que je suis:

<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> 

Maintenant, lorsque vous appliquez la feuille de style, la couleur reste inchangée (vert) que la feuille de style ne précisent pas la couleur du texte entier. Lorsque vous cliquez sur TextArea, je crois que flex recalcule les propriétés de celui-ci (un clic peut déclencher une invalidation - je ne suis pas sûr de ce qui se passe en dessous). Tout en faisant cela, le compilateur trouve qu'une feuille de style a été appliquée et ignore l'attribut color="green". Maintenant, ces nouvelles propriétés sont appliquées uniquement lorsque la propriété text/htmltext est modifiée (plus tard en appuyant sur enter). Ainsi, à moins que vous ne cliquiez ou que vous ne déclenchiez une invalidation de textarea, il conserve la couleur par défaut spécifiée avant d'appliquer la feuille de style. Si vous ajoutez .yellow{color:#ffff00;} à la feuille de style et insérez du texte dans la troisième zone de texte avec les balises <span class="yellow">some text</span>, vous pouvez voir que le texte ci-joint conserve la couleur jaune que vous cliquiez dessus ou non.

Answer 2

Pouvez-vous affecter directement le texte à la propriété .text?

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

Answer 3

Voici ce que je fais pour résoudre ce problème. C'est un gros bidouillage, mais ça marche.

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


} 

}