HTML裏面的內容TabNavigator的

Question

我在那裏我動態地添加TabNavigator的標籤的情況下，我無法弄清楚如何HTML樣式添加一些的話。

我真的只需要加粗和下劃線上幾句話，但我不能讓任何HTML格式到NavigatorContent標籤內工作。

任何人都可以幫助我嗎？我一直在尋找許多小時，什麼都沒找到。

這裏是我到目前爲止所。 （內容正在從外部XML文件中提取）。

<?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

你可以使用一個文本流：

<?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> 

根據您的意見，您應該在一個組件抽象的導航內容視圖。

基於你的例子：

你的主要應用

<?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> 

創建MXML組件名爲：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>