Item 1: small - $1
Item 2: Medium - $2
Item 3: large - $3
The first string in each object is bolded, the second is italicized, and the third is colored blue.
The first attempt to obtain these results failed, and it looked like this:
<mx:Repeater id="myRepeater"
dataProvider="{itemsAC}"
recycleChildren="true"
height="100%"
width="100%">
<mx:Text>
<mx:htmlText>
<![CDATA[Item <b>{myRepeater.currentItem.id}</b>: <i>
{myRepeater.currentItem.size}</i> - <font color="#005D84">{myRepeater.currentItem.price}</font>]]
</mx:htmlText>
</mx:Text>
</mx:Repeater>
The code above successfully styles the text, but the binding does not work. The following output is displayed when the above code is run:Item {item.id}: {item.size} - {item.price}
Item {item.id}: {item.size} - {item.price}
Item {item.id}: {item.size} - {item.price}
After investigating a bit further, I came up with the solution to this problem, where both the styling of the text and the data binding work:
<mx:Repeater id="myRepeater"
dataProvider="{itemsAC}"
recycleChildren="true"
height="100%"
width="100%">
<mx:Text id="warningText"
htmlText="Item <b>{myRepeater.currentItem.id} - </b> {messageRepeater.currentItem.size} - <font color="#005D84">{messageRepeater.currentItem.price}</font>"/>
</mx:Repeater>
In order to do binding, MXML should be used. However, HTML tags don't work in MXML, you have specify HTML markup by using the <, >, and & character entities in place of the left angle bracket (<), right angle bracket (>), and ampersand (&) HTML delimiters. For more information on this, check put the adobe livedocs: http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_08.html
There are several other ways to accomplish this outcome,and this is just one of them. I hope I have saved you some time by sharing this solution :-)