Flex 4 - Выделите ключевые слова в блоке текста с помощью TextLine

Question

У меня есть страница поиска и результатов, на которой я хотел бы выделить ключевые слова, которые были найдены в тексте результатов. Было предложено использовать TextLine для этого, но мне трудно понять, как заставить его работать. Я начал простой, компилируемый манекен приложения и надеялся, кто-то может дать мне несколько советов о том, как продолжить:

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

Кто-нибудь есть какие-нибудь идеи?

Приветствия, Баз

Answer 1

Вы можете разместить простые HTML-теги вокруг ключевых слов и отображать текст с RichText компонента вместо компонента TextLine.

См. http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/ для получения дополнительной информации о html in flex.

Кроме того, для поиска слов, которые должны быть выделены в строке, используйте метод string.replace: http://livedocs.adobe.com/flex/3/langref/String.html#replace()

Answer 2

Благодаря Treur, но я нашел еще лучший способ: setFormatOfRange()

Эта функция в основном изменяет формат (background/foreground) диапазона символов в компоненте RichEditableText. Поэтому все, что я должен сделать, это:

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++; 
    } 
} 

Очистить.