Img tag magically appears in htmlText of Halo TextArea component

bon_t · 07-27-2011, 03:36 PM

Hi All,

I am using Flex 4, ActionScript 3.

I am using an AdvancedDataGrid in which one of the columns uses a custom itemRenderer that extends the Halo TextArea (I had to use the Halo component because I needed to automatically recalculate the height of the TextArea).

This column, Labels, is not editable from this grid. It gets populated with the selection from a pop-up dialog.

These are my requirements:
1. If there is no selection and hence the Labels cell is empty, I need to display an icon.
2. If there is a selection and hence the Labels cell is not empty, I need to display the selection and not the icon.

Here is the code from the custom TextArea component that handles these requirements.

Code:

override public function set text(val:String):void
{
	textField.htmlText = null;
	super.verticalScrollPolicy = "off";
				
	if ( val != " " )
	{
		// Need to split the string into an array for processing
		var arr:Array = val.split(",");
				
		// Parse the strings to see if an asterisk is at the beginning 
		for (var idx:int = 0; idx < arr.length; idx++)
		{
			var str:String = arr[idx];
			if (str.indexOf("*") > -1) 
				str = "<font color=\"#7A7A7A\">[" + str.substr( 1, str.length - 1 ) + "]</font><br/>";
			else 
				str = str + "<br/>";
			arr[idx] = str;
		}
				
		// Finally join the string back together...
		textField.htmlText = arr.join("");
	}
	else
	{
		textField.htmlText = "<img src='" + mx.utils.ObjectUtil.getClassInfo( iconWarning ).name + "'/>";
	}
				
	validateNow();
				
	// Set height of box to the height of the text + 1 line
	height = textField.textHeight +
		textField.getLineMetrics(0).height;
}

The issue is as follows:
1. This works for the first row that gets a selection, meaning the icon does not show up. Note that it doesn't matter which row in the grid gets the first selection. In the attachment, this is shown by caller intent e-fg.
2. For all selections after the first one, both the selection and the icon are displayed. Note that it doesn't matter if the second selection is for a row in the grid that comes before or after the row that got the first selection. In the attachment, this is shown by caller intent i-j.

Debugging through the code, I am surprised to see the following (this is right after the textField.htmlText = arr.join("") assignment, and right before this assignment, textField.htmlText is null).

For the first selection:
arr = [] (@bbe7b29)
[0] = "miscellaneous-possible_rejects "
[1] = "vague-billing "
[2] = "vague-delivery "
length = 3

textField.htmlText = "<TEXTFORMAT LEADING="2">miscellaneous-possible_rejects</TEXTFORMAT><TEXTFORMAT LEADING="2">vague-billing</TEXTFORMAT><TEXTFORMAT LEADING="2">vague-delivery</TEXTFORMAT>"

For the next selection:
arr = [] (@bda7859)
[0] = "activate-access_account_secure "
[1] = "request-contact "
[2] = "vague-order "
length = 3

textField.htmlText = "<TEXTFORMAT LEADING="2"><IMG SRC="com.nuance.csportal.components.applicationDefinitionComponents::ElasticTextArea_iconWarning">ac tivate-access_account_secure</TEXTFORMAT><TEXTFORMAT LEADING="2"><IMG SRC="com.nuance.csportal.components.applicationDefinitionComponents::ElasticTextArea_iconWarning">re quest-contact</TEXTFORMAT><TEXTFORMAT LEADING="2"><IMG SRC="com.nuance.csportal.components.applicationDefinitionComponents::ElasticTextArea_iconWarning">va gue-order</TEXTFORMAT>

As you can see, the <img> tag magically appeared 3 times in the htmlText!

Does anybody have any idea how I can fix this? Or perhaps another solution?
Thanks,
Bonnie