1 Reply Latest reply on Mar 20, 2008 4:30 PM by James Edmunds

    TextArea hyperlink styling

    James Edmunds Level 1
      Although Flex Builder 3 gives a wide variety of controls over the style of a TextArea, I have not found a property that allows styling of hyperlinks. I would like to be able to have htmlText shown in a TextArea to have styling for hyperlinks, including different styles for the pseudo-classes of hover, etc.

      I have seen a couple of complex workarounds for this from FB 2 days, but would love to find a simple or elegant way to accomplish this.

      Thanks in advance,

      James

        • 1. TextArea hyperlink styling
          James Edmunds Level 1
          I have found a way to do this reasonably easily. Here is what I did:

          1. Include in <mx:Application>:
          creationComplete="defineStyles();"

          2. ....which refers to this function and the variable it needs:

          <mx:Script>
          <![CDATA[

          public var ss:StyleSheet = new StyleSheet();

          public function defineStyles():void
          {
          this.styledTxt.styleSheet = this.ss;

          var h:Object = new Object();
          h.color = "#970909";
          h.textDecoration = "underline";
          ss.setStyle("a:hover", h);

          var a:Object = new Object();
          a.color = "#0066ff";
          a.textDecoration = "none";
          ss.setStyle("a:link", a);

          var v:Object = new Object();
          v.color = "#0066ff";
          v.textDecoration = "none";
          ss.setStyle("a:visited", v);

          var t:Object = new Object();
          t.color = "#0066ff";
          t.textDecoration = "none";
          ss.setStyle("a:active", t);

          }
          ]]>
          </mx:Script>

          3. And id your TextArea as id="styledTxt"

          -=-=-=-=-=-

          You may of course adjust variables above as needed.

          I am using this for an application that imports blog postings through HTTPService, and for my content call I use htmlText="{gettheItem.lastResult.item.thetext}" referring to that HTTPService call. I mention this so that you can know that this styling is working on bulk imported data that has anchor links in it and is properly showing them with the styling I have specified.

          Note that this posting from the Flashlit blog was helpful to me:
          http://rantworld.blogs.com/flashlit/2006/08/styling_flex_te.html

          I hope this is helpful,

          James