Using HTML formatting to output variables in Flex/MXML

Question

Hi,

I'm trying to output a sentence containing 4 variables, with their values emboldened using the following code:

<mx:Text width="100%" y="307">
    <mx:htmlText>
        <![CDATA[Showing data from <b>{labelStartTime.text} {labelStartDate.text}</b> to <b>{labelEndTime.text} {labelEndDate.text}</b>]]>
    </mx:htmlText>
</mx:Text>

However, this just outputs the variable names, rather than their values. I'm sure I'm missing something simple, but I'd appreciate any pointers.

Cheers.

Answer 1

I know of a workaround:

Actionscript:

private var variable:String = "Variable String";
private var str:String = "<i><b>" + Variable + "</b></i>";

Mxml:

<Text htmlText="{str}" />

Answer 2

I don't think it's possible to add bindings directly in a CDATA section like that, you do have a couple of options though :

1. Use a function, taking advantage of BindingUtils.bindSetter :

   import mx.binding.utils.BindingUtils;
   //called on creationComplete
   private function init():void
   {
       BindingUtils.bindSetter(setHtmlText, labelStartTime, "text");
       BindingUtils.bindSetter(setHtmlText, labelStartDate, "text");
       BindingUtils.bindSetter(setHtmlText, labelEndTime, "text");
       BindingUtils.bindSetter(setHtmlText, labelEndDate, "text");
   }
   
   private function setHtmlText(val:String):void
   {
       myText.htmlText = "Showing data from <b>" + 
            labelStartTime.text + " " + 
            labelStartDate.text + "</b> to <b>" + 
            labelEndTime.text + " " +
            labelEndDate.text + "</b>";
   }

2. Or simply encode the tags and insert them directly into the attribute :

   <mx:Text id="myText" width="100%" y="307" 
            htmlText="Showing data from &lt;b&gt;{labelStartTime.text} {labelStartDate.text}&lt;/b&gt; to &lt;b&gt;{labelEndTime.text} {labelEndDate.text}&lt;/b&gt;"/>

   This isn't really recommended as it makes the markup incredibly difficult to read, but you might get away with it for something small like this.

Answer 3

With ref to the bindSetter option I have set myText as a bindable Object However how do I handle the situation where my variable is a number? I am getting "Property text not found on Number and there is no default value." as an error Cheers