HTML dynamic content is not shown in spark textarea - flex4

Question

In a flex application, i want to display formatted tweets in a spark textarea but it is showing html elements (with tags) 'as it is' rather parsing it and converting into rich html text, i was following this example from flex official site
<s:TextArea width="400" height="100">
<s:content>This is <s:span color="#FF0000">HTML text</s:span>
in an <s:span fontWeight="bold">Spark TextArea control</s:span>.
Use the <s:span textDecoration="underline">content</s:span> property
of the <s:span color="#008800">Spark TextArea control</s:span>
to include basic HTML markup in your text, including
<s:a href="http://www.adobe.com" target="_blank">links</s:a>.
</s:content>
</s:TextArea>
but passing my data like this
<s:TextArea>
<s:content>{TwitterString.parseTweet(data.text)}</s:content>
</s:TextArea>
and the result to it for a tweet is,
<s:a href='http://t.co/a7bQnmLRGy' target='_blank'>http://t.co/a7bQnmLRGy</s:a> I'll be there
which means it has not been formatted as expected.
Any idea how to make <s:content> work for dynamic content pass to it?
Please no answers of TextConverter this would be my last resort, i would love to use <s:content> working

Answer 1

Check out the documentation for TextArea's content property. In particular, it states this about the content property:
This property is typed as Object because you can set it to to a String, a FlowElement, or an Array of Strings and FlowElements. In the example above, the content is a 2-element array. The first array element is the String "Hello". The second array element is a SpanElement object with the text "World" in boldface.
So the key here is that your TwitterString.parseTweet() function is returning a String. As such, the TextArea is displaying it as a String and not bothering to convert the elements found in the text.
Instead, if you wish to continue down this path, your TwitterString.parseTweet() function should return an Array. Each element in the array is either a String (represents normal text) or some sort of FlowElement object (a SpanElement, LinkElement, ParagraphElement, etc.). If you return an array that contains the structure you want, it will render your content properly. See below for a simple example, it will get very tedious for real content.
So you're really better off using TextConverter ... because by writing the code like you want, you are doing the exact same thing that TextConverter does.
<?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="955" minHeight="600" xmlns:local="*">
<fx:Script>
<![CDATA[
import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.elements.SpanElement;
[Bindable("contentChanged")]
private function getTheContent():Array
{
var temp:Array = [];
var link:LinkElement = new LinkElement();
link.href = "http://google.com";
var span:SpanElement = new SpanElement();
span.text = "Google";
link.addChild(span);
temp.push(link);
// continue building your structure...(so tedious)
return temp;
}
]]>
</fx:Script>
<s:TextArea width="400" height="100">
<s:content>{getTheContent()}</s:content>
</s:TextArea>
</s:Application>