JabbyPanda’s travel to RIA world

   I like using a:hover pseudo CSS class for styling hyperlinks in HTML and I would like to do the similar with hyperlinks inside text displayed with Flex 2.0.1 SDK UI components such as mx:TextArea and mx:Text.

   In Flex 2.0.1 SDK the support for a:hover pseudo CSS classes is done via runtime style sheets.

   <mx:TextArea> component starting from Flex 2.0.1 SDK supports setting CSS stylesheet at runtime right from the box.
   <mx:Text> is not that ready to accomplish the similar task, fortunately for us it is easy to extend <mx:Text> component and add the required functionality to it - see the code below.

package com.jabbypanda.controls {
    import mx.controls.Text;
    import flash.text.StyleSheet;

    public class ExtendedText extends Text {

        public function ExtendedText() {
            super();
        }

        public function get styleSheet() : StyleSheet {
             return textField.styleSheet;
        }

        public function set styleSheet(value : StyleSheet) : void {
            textField.styleSheet = value;
        }
    }
}

Example: http://jabbypanda.com/labs/hoverCSS/HoverCSSFlexSupport.html
Source files: http://jabbypanda.com/labs/hoverCSS/srcview/index.html

Acknowledgements:

    In my experiments I was both inspired by the quote from Flex 2 livedocs:'You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets' and by reading a great article followed by very useful comments published at FlashLit blog titled "Styling Flex TextArea content with CSS".