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>