Home Tutorials Forums Articles Blogs Movies Library Employment Press
By Haik Sahakian
|
Published
Flex 3 appears to have a bug that ignores CSS formatting for link tags in html text. It prevents you from making an html link a different color from the text around it, for example.

However the bug only exists for pre-written CSS files - if you create a CSS object dynamically and attach it to the text control, the link styles work.

So to style an mx:Text control's links, you can use the code below to rewrite your CSS on the fly. The code looks in your CSS file for the style to apply to links, and from it creates a new CSS stylesheet to apply to the text control.

The hex value returned by toString(16) lacks leading zeros, but the CSS parser for dynamically created CSS does not require them like it does for pre-written CSS files, so it works fine.



function attachLinkStyleToText(textControl:Text) 

     // find the CSS class containing the formatting you want to apply to links in the text 
     var linkColorClass:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".yourHTMLLinkClassName"); 
     if (!linkColorClass) return; 
  
     // find the style you wish to apply, in this case just the color 
     var linkColor:Number = parseInt(linkColorClass.getStyle("color")); 
     if (!linkColor) return; 
     var linkColorHex:String = linkColor.toString(16); 
  
     // create a new CSS style sheet that applies this style 
     var linkCSSText:String = "a {color:#"+linkColorHex+"}"; 
     var linkCSS:StyleSheet = new StyleSheet(); 
     linkCSS.parseCSS(linkCSSText); 
  
     // attach the new CSS to the text control 
     textControl.styleSheet = linkCSS;     
}



Spread The Word


4 Responses to "Styling HTML Text Links in Flex"

 
Julia Georgescu
said this on 18 Apr 2010 1:07:54 AM CDT
Very interested, I search about this for a long time, thanks and Keep it up !!

 
Susrut Mishra
said this on 05 Jul 2010 12:48:13 PM CDT
Thanks a lot!! This would be really helpful.

 
David
said this on 08 Sep 2010 10:19:55 AM CDT
The mx:Text component does not have a 'styleSheet' property so how does the above code work for a mx:Text component?

 
David
said this on 08 Sep 2010 3:05:08 PM CDT
Sorry Haik! We are still using Flex 3.2 where the Text component does not have a stylesheet property but found out that property was added in v 3.4. Sorry for the confusion!!




Leave a reply:
Your Name *: Email (private) *: Website:
Please copy the characters from the image below into the text field below. Doing this helps us prevent automated submissions.
Security Code: img

Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.