Flex 4 - Mettre en surbrillance des mots-clés dans un bloc de texte en utilisant TextLine

Question

J'ai une page de recherche et de résultats que je voudrais mettre en évidence les mots-clés qui ont été recherchés, dans le texte des résultats. Il a été suggéré que j'utilise TextLine pour cela, mais j'ai du mal à comprendre comment le faire fonctionner. J'ai commencé une application factice simple, compilable et a été espérant que quelqu'un pourrait me donner quelques conseils sur la façon de continuer:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
initialize="initApp();"> 

<fx:Script> 
    import flash.display.Sprite; 
    import flash.text.engine.*; 

    private var textLine:TextLine; 

    private function initApp():void { 

    var normalFormat:ElementFormat = new ElementFormat(null, 12, 0x000000); 
    var highlightFormat:ElementFormat = new ElementFormat(null, 14, 0xff0000); 

    var textBlock:TextBlock = new TextBlock(new TextElement("This is text that has KEYWORDS. I would like to highlight these KEYWORDS by changing their font color and adding a light yellow background graphic.", normalFormat)); 

    textLine = textBlock.createTextLine(); 
    textLine.y = 100; 

    embeddedFontHolder.addChild(textLine); 
    } 
</fx:Script> 

<mx:UIComponent width="100%" id="embeddedFontHolder" /> 
</s:Application> 

Quelqu'un at-il des idées?

Cheers, Baz

Answer 1

Vous pouvez placer des balises HTML simples autour des mots-clés et afficher le texte avec un composant RichText au lieu d'un composant TextLine.

Voir http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/ pour plus d'informations sur html dans flex.

De plus, pour rechercher des mots qui doivent être mises en évidence dans une chaîne, utilisez la méthode String.replace: http://livedocs.adobe.com/flex/3/langref/String.html#replace()

Answer 2

Merci Treur, mais j'ai trouvé une meilleure façon: setFormatOfRange()

Cette fonction modifie fondamentalement le format (arrière-plan/premier plan) d'une plage de caractères dans un composant RichEditableText. Donc tout ce que j'ai à faire est:

var highlightFormat:TextLayoutFormat = new TextLayoutFormat(); 
highlightFormat.backgroundColor = 0xffee66; 

var keywordsArray:Array = model.keywords.toLowerCase().split(' '); 
var indexOfKeyword:int = 0; 
for each (var currentKeyword:String in keywordsArray) { 
    while((indexOfKeyword = this.text.toLowerCase().indexOf(currentKeyword, indexOfKeyword)) >= 0) {     
     this.setFormatOfRange(highlightFormat, indexOfKeyword, indexOfKeyword + currentKeyword.length); 
     indexOfKeyword++; 
    } 
} 

Nettoyer.