mx:TextArea change part of text color

Question

I have an item renderer with a textArea.

    <?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true">

    <fx:Script>
        <![CDATA[
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.listClasses.BaseListData;
            import mx.core.UITextField;
            public var htmlModif:String;

            /*  protected function lblData_changeHandler(event:Event):void
             {
                 htmlModif=lblData.htmlText;
                 dataGridListData.label = htmlModif;

             } */

            override public function validateProperties():void
            {
                super.validateProperties();
                if (listData)
                {
                    var dg:DataGrid = DataGrid(listData.owner);

                    var column:DataGridColumn = dg.columns[listData.columnIndex];

                    var htmlText:UITextField = lblData.htmlText as UITextField;

                }


            }
        ]]>
    </fx:Script>

    <mx:TextArea id="lblData" top="0" left="0" right="0" bottom="0" 
                 htmlText="{dataGridListData.label}" 
                 wordWrap="true"
                 editable="true"
                 creationComplete="htmlModif=lblData.htmlText"
                 change="htmlModif=lblData.htmlText"/>
</s:MXDataGridItemRenderer>

After change, I put htmlModif on arraycollection to save the new value.

I some case, I like to change color or style of a part of text. It works for all text if change is about style (bold, italic...)

DP_LISTEREDVCLI[ligneIndexEdit].scRub2="<b>"+DP_LISTEREDVCLI[ligneIndexEdit].scRub2+"</b>

But I doesn't works if change is about color:

DP_LISTEREDVCLI[ligneIndexEdit].scRub2=""+DP_LISTEREDVCLI[ligneIndexEdit].scRub2+"";

I thinks this disturb is because in this case the new value is like that:

<FONT COLOR='#FFAE10'> <TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="12" COLOR="#0C1E37" LETTERSPACING="0" KERNING="0">mais pas de disparition</FONT></P></TEXTFORMAT></FONT>

So, can you help me to solve that?

Thanks for helping

score 0 · Answer 1 · answered Nov 15 '12 at 11:57

Try this out, I've attached the screen shot of the output, enter image description here

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


    <fx:Script>
        <![CDATA[
            import mx.collections.*;
            private var DGArray:Array = [
                {Artist:'Pavement 1 ', label:'Slanted and Enchanted', Price:11.99},
                {Artist:'Pavement 2 ', label:'without color <FONT COLOR="#FF00FF"> <TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="12" COLOR="#FF00FF" LETTERSPACING="0" KERNING="0">Slanted and Enchanted</FONT></P></TEXTFORMAT></FONT>', Price:15.99}];

        ]]>
    </fx:Script>

    <mx:DataGrid id="myGrid" width="100%" height="100%" 
                 dataProvider="{DGArray}" itemRenderer="IR" >

    </mx:DataGrid>
</s:Application>

The Itemrenderer code,

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true">

    <fx:Script>
        <![CDATA[
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.listClasses.BaseListData;
            import mx.core.UITextField;
            public var htmlModif:String;

            /*  protected function lblData_changeHandler(event:Event):void
            {
            htmlModif=lblData.htmlText;
            dataGridListData.label = htmlModif;

            } */

            override public function validateProperties():void
            {
                super.validateProperties();
                if (listData)
                {
                    var dg:DataGrid = DataGrid(listData.owner);

                    var column:DataGridColumn = dg.columns[listData.columnIndex];

                    var htmlText:UITextField = lblData.htmlText as UITextField;

                }


            }
        ]]>
    </fx:Script>

    <mx:TextArea id="lblData" top="0" left="0" right="0" bottom="0" 
                 htmlText="{dataGridListData.label}" 
                 wordWrap="true"
                 editable="true"
                 creationComplete="htmlModif=lblData.htmlText"
                 change="htmlModif=lblData.htmlText"/>
</s:MXDataGridItemRenderer>

OK but I'd like to use user selection (beginSelection and endSelection) and apply style only in this part. Thanks — Flex60460, Nov 16 '12 at 16:22
The same can be applied onChange property of text selected by the user. — user1749053, Nov 19 '12 at 11:33

mx:TextArea change part of text color

1 Answers1