Using HTML formatting to output variables in Flex/MXML
-
05-07-2019 - |
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.
Solution
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}" />
OTHER TIPS
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 :
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.<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>"/>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow