Display HTML formatted text inside a Flex 4 List Control

//your Array that will be the dataprovider for the list

private var _chatArray:ArrayList  = new ArrayList();
 

//adding new chat data to the array and assigning it as the data provider

_chatArray.addItem(evt);
chatArea.dataProvider = _chatArray;

//in your MXML code your list using a custom item renderer and an update complete event witch will keep your scroll bar to the bottom of the list
//when a new item is added set the vertical scrollbar value to the hight of the content
//this forces it to all ways display the last item renderer in the list

<fx:Script>

<![CDATA[

protected function chatArea_renderHandler(event:Event): void{
trace ("list item added" );

chatArea.scroller.verticalScrollBar.value = chatArea.scroller.viewport.contentHeight - chatArea.scroller.viewport.height;
}

]]>

</fx:Script>

<s:List width=" 100%" height=" 328" d=" chatArea" 
updateComplete="chatArea_renderHandler(event)" 
borderColor=" #c2c2c2"
itemRenderer="ChatItemRenderer " >

//ChatItemRenderer.mxml

//The script tag sets the color of the second line of text based on a number sent over from the data provider
//using TextFlow you can apply a hex color without writing html tags like htmltext in flex 3

<?xml version="1.0" encoding="utf-8"?>
 

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009 " 
xmlns:s="library://ns.adobe.com/flex/spark " 
xmlns:mx="library://ns.adobe.com/flex/mx "
autoDrawBackground=" false" >

<fx:Script>

<![CDATA[

import flash.events.Event;

[Bindable ]

private var _colorArray:Array;

protected function itemrenderer1_initializeHandler(event:Event): void

{

_colorArray = new Array(0x000000, 0x666666, 0x003366, 0x006699, 0x0033ff, 0x660066, 0x336666, 0x009933, 0x996600, 0x663300, 0xFF6600, 0xFF0000);

messageCopy.textFlow.color = _colorArray[data.colorNumber];

}

]]>

</fx:Script>

<s:HGroup horizontalAlign=" center" gap=" 5" paddingTop=" 5" paddingLeft=" 5" >

<s:RichText id=" messageFrom" text=" {data.item.body.sendFrom + ':   '}" />

<s:RichText id=" messageCopy" width=" 475" updateComplete="itemrenderer1_initializeHandler(event)"     text=" {data.item.body.note }" />

</s:HGroup>

</s:ItemRenderer>