0 Replies Latest reply on Jul 27, 2011 7:31 AM by bon_t

    Img tag magically appears in htmlText of Halo TextArea component

    bon_t Level 1

      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;
      }

      [/CODE]

       

      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 screenshot below, 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 screenshot below, this is shown by caller intent i-j.

       

      app_config_labels_icon_issue.JPG

       

      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<br/>"
                  [1] = "vague-billing<br/>"
                  [2] = "vague-delivery<br/>"
                  length = 3

       

      textField.htmlText = "<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="11" COLOR="#000000" LETTERSPACING="0" KERNING="0">miscellaneous-possible_rejects</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="11" COLOR="#000000" LETTERSPACING="0" KERNING="0">vague-billing</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="11" COLOR="#000000" LETTERSPACING="0" KERNING="0">vague-delivery</FONT></P></TEXTFORMAT>"

       

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

       

      textField.htmlText = "<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="11" COLOR="#000000" LETTERSPACING="0" KERNING="0"><IMG SRC="com.nuance.csportal.components.applicationDefinitionComponents::ElasticTextArea_icon Warning">activate-access_account_secure</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="11" COLOR="#000000" LETTERSPACING="0" KERNING="0"><IMG SRC="com.nuance.csportal.components.applicationDefinitionComponents::ElasticTextArea_icon Warning">request-contact</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="11" COLOR="#000000" LETTERSPACING="0" KERNING="0"><IMG SRC="com.nuance.csportal.components.applicationDefinitionComponents::ElasticTextArea_icon Warning">vague-order</FONT></P></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