HTML content inside TabNavigator - flex4

Question

I have a case where I'm adding tabNavigator tabs dynamically and I can't figure out how to add HTML styling to some of the words.
I really only need BOLD or UNDERLINE on a few words, but I can't get any HTML formatting to work inside the NavigatorContent tag.
Can anyone help me with this? I have been looking for many hours and found nothing.
Here's what I have so far. (the content is being pulled from an external XML file).
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="500" height="600" creationComplete="initApp()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:HTTPService id="chatlist" result="resultHandler(event)"
url="http://localhost/FlexLiveChat/LiveChat2/chat.xml"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
private function initApp():void
{
chatlist.send();
}
private function resultHandler(event:ResultEvent):void
{
var dp:ArrayCollection = event.result.chatsession.chat as ArrayCollection;
for(var i:int = 0; i < dp.length; i++) {
var t:TextField = new TextField( );
t.htmlText = "This field contains <B>HTML!</B>";
var label:Label = new Label();
label.text = dp.getItemAt(i).message;
var context:NavigatorContent = new NavigatorContent();
context.label = dp.getItemAt(i).chatperson;
context.addElement(label);
tn.addChild(context);
}
}
]]>
</fx:Script>
<s:BorderContainer left="10" right="10" top="10" bottom="10" height="100%" borderVisible="false">
<s:VGroup id="mainBG" x="0" y="0" width="100%" height="100%" textAlign="center">
<mx:TabNavigator id="tn" width="100%" height="100%" color="0x323232">
<!-- Define each panel using a VBox container. -->
<s:NavigatorContent label="Home">
<s:Label text="This panel is always available \n\n container panel 1"/>
<mx:Text text="This is a text control."/>
</s:NavigatorContent>
</mx:TabNavigator>
<s:TextArea width="100%" height="62" textAlign="left"/>
<s:Button label="Post Message"/>
</s:VGroup></s:BorderContainer>
</s:WindowedApplication>

Answer 1

You could use a text flow:
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="100%"
gap="0">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
private const text:String =
"<b>bold text</b><br />" +
"<br />" +
"<u>underlined text</u><br />" +
"<br />" +
"<ul>" +
"<li>list item<br /></li>" +
"<li>list item<br /></li>" +
"<li>list item<br /></li>" +
"</ul>" +
"<a href='http://www.google.com'>a link</a><br />" +
"<br />";
]]>
</fx:Script>
<s:RichEditableText editable="false"
selectable="true"
textFlow="{TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
buttonMode="true"
width="100%"
height="100%" />
</s:VGroup>
Per your comment, you should abstract the navigator content view in to a component.
Based upon your example:
Your main application
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="500"
height="600"
creationComplete="initApp()">
<fx:Declarations>
<s:HTTPService id="chatlist"
result="resultHandler(event)"
url="http://localhost/FlexLiveChat/LiveChat2/chat.xml" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
private function initApp():void
{
chatlist.send();
}
private function resultHandler(event:ResultEvent):void
{
var dp:ArrayCollection = event.result.chatsession.chat as ArrayCollection;
for (var i:int = 0; i < dp.length; i++)
{
var htmlNavigatorContent:HtmlNavigatorContent = new HtmlNavigatorContent();
// attach result you want in the html text,
// including other properties.
htmlNavigatorContent.htmlText = "This field contains <B>HTML!</B>";
tn.addChild(htmlNavigatorContent);
}
}
]]>
</fx:Script>
<s:BorderContainer left="10"
right="10"
top="10"
bottom="10"
height="100%"
borderVisible="false">
<s:VGroup id="mainBG"
x="0"
y="0"
width="100%"
height="100%"
textAlign="center">
<mx:TabNavigator id="tn"
width="100%"
height="100%"
color="0x323232">
<!-- Define each panel using a VBox container. -->
<s:NavigatorContent label="Home">
<s:Label text="This panel is always available \n\n container panel 1" />
<mx:Text text="This is a text control." />
</s:NavigatorContent>
</mx:TabNavigator>
<s:TextArea width="100%"
height="62"
textAlign="left" />
<s:Button label="Post Message" />
</s:VGroup>
</s:BorderContainer>
</s:WindowedApplication>
Create a MXML Component named: HtmlNavigatorContent
<?xml version="1.0" encoding="utf-8"?>
<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="100%">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
[Bindable]
public var htmlText:String;
]]>
</fx:Script>
<s:RichEditableText editable="false"
selectable="true"
textFlow="{TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
buttonMode="true"
width="100%"
height="100%" />
</s:NavigatorContent>