Using HTML formatting to output variables in Flex/MXML - apache-flex

Question

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 :
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>";
}
Or simply encode the tags and insert them directly into the attribute :
<mx:Text id="myText" width="100%" y="307"
htmlText="Showing data from <b>{labelStartTime.text} {labelStartDate.text}</b> to <b>{labelEndTime.text} {labelEndDate.text}</b>"/>
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.