在聊天窗口中绘制红色字样(spark.components.Label或mx.controls.Text)

时间:2011-12-05 14:59:31

标签: flex flex4 label flex4.5 textcolor

我正在尝试更改spark.components.Label中所有4个字母单词的颜色。

这是一个类似聊天的程序,用户在TextInput字段中输入单词,按ENTER键,附加行到Label(或Text或TextArea或RichText - 这里适用的任何内容)

我已经准备好了下面这个简单的测试用例,它会立即在你的Flash Build 4.6中运行,并且找到单词及其索引的代码已经存在。

我的问题是弄清楚如何以编程方式(即通过ActionScript 3)重复更改文本部分的颜色,并且我反复尝试reading the docs,我无法弄清楚它。

截图:

screenshot

Test.mxml:

<?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" 
    minWidth="400" minHeight="300">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private const WORD:RegExp = /\b[a-z]{4}\b/i; 

            public function chat(event:FlexEvent):void {
                var line:String = _input.text;
                var start:int = 0;

                do {
                    var rest:String = line.substr(start);
                    var found:int = rest.search(WORD);
                    // no more 4-letter words found
                    if (found < 0)
                        break;
                    var word:String = rest.substr(found, 4);
                    trace('word=' + word + ' @ index=' + (start + found));
                    start += found + 4;
                } while (start + 4 <= line.length);

                _output.text += (line + "\n"); 
                _input.text = '';
            }
        ]]>
    </fx:Script>

    <s:Label id="_output" left="4" top="4" right="4" bottom="24" backgroundColor="0xFFFFCC" />
    <s:TextInput id="_input" bottom="4" right="4" enter="chat(event)" />
</s:Application>

更新:我正在尝试使用RichText + Georgi建议的下面的代码,看看模式替换是否有效(通过查看 trace()输出) ,但得到错误:

TypeError:错误#1034:类型强制失败:无法将“[object TextFlow] [object TextFlow]”转换为flashx.textLayout.elements.TextFlow。

<?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" 
    minWidth="400" minHeight="300">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import flashx.textLayout.conversion.TextConverter;

            private const WORD:RegExp = /\b[a-z]{4}\b/ig; 

            public function chat(event:FlexEvent):void {
                var line:String = _input.text.replace(WORD, '<font color="#FF0000">$&</font>') + '<br>';
                trace('line=' + line);
                // XXX how to append text here? XXX
                _output.textFlow += TextConverter.importToFlow(line, TextConverter.TEXT_FIELD_HTML_FORMAT); 
                _input.text = '';
            }
        ]]>
    </fx:Script>

    <s:RichText id="_output" left="4" top="4" right="4" bottom="24" />
    <s:TextInput id="_input" bottom="4" right="4" enter="chat(event)" />

</s:Application>

更新2:如果我使用上面的 _output.textFlow = ,那么TypeError就会消失。但我需要以某种方式追加文本......

1 个答案:

答案 0 :(得分:2)

我认为使用s:Label组件是不可能的。您可以尝试使用s:RichText(幸运的是,与s:Label没有太大区别)使用适当的HTML格式。您必须首先使用textFlow来保留生成的HTML并每次都设置TextConverter。像这样:

<?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" 
   minWidth="400" minHeight="300">

<fx:Script>
    <![CDATA[
        import flashx.textLayout.conversion.TextConverter;

        import mx.events.FlexEvent;

        private const WORD:RegExp = /\b([a-z]{4})\b/ig; 

        private var output:String = "";

        public function chat(event:FlexEvent):void {                
            output += _input.text.replace(WORD, '<font color="0xFF0000">$1</font>') + '<br>';

            _output.textFlow = TextConverter.importToFlow(output, TextConverter.TEXT_FIELD_HTML_FORMAT);

            _input.text = "";
        }
    ]]>
</fx:Script>

    <s:RichText id="_output" left="4" top="4" right="4" bottom="24" backgroundColor="0xFFFFCC" />
    <s:TextInput id="_input" bottom="4" right="4" enter="chat(event)" />
</s:Application>

上面的代码并不完美,但似乎足以证明这个概念。

编辑: 请注意正则表达式中的“g”标记,以匹配所有四个字母的单词。