Sometimes the look of <mx:LinkButton> look is not enough to satisfy the designer’s requirement to display hyperlinks inside you Flex 2 application in a way we got used to see them in HTML world, e.g. to display hyperlinks inside Flex 2 in a plain text.

Luckily Flash 9 supports pseudo CSS style selectors like a:hover, a:link, a:active. Let’s use this fact to our advantage!

Source MXML code of the example project:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    xmlns:text="jabbypanda.controls.*"
    width="100%" height="100%"
    horizontalAlign="center"
    backgroundGradientColors="[#000000, #282828]" backgroundColor="#282828"
    verticalAlign="middle" viewSourceURL="srcview/index.html">
 <mx:Script>
     <![CDATA[
         import jabbypanda.controls.HyperLink;
         import jabbypanda.controls.events.HyperlinkEvent;
 
        private function onLinkClick(evt : HyperlinkEvent) : void {
            // here you can invoke loading of external web-page if you want    via URLRequest
             var hControl : HyperLink = HyperLink(evt.target);
            txtDataUrl.text = "You just had clicked '" + hControl.linkText + "'";
            txtDataUrl.visible = true;
          }
 
          private function changeStyle() : void {
              hLink.setStyle("colorLink", 0xFFFF00);
              hLink.setStyle("colorHover", 0xFFFF00);
              txtDataUrl.visible = false;
          }
     ]]>
 </mx:Script>
 <mx:Style>
     HyperLink {
         colorLink : #FF0000;
         colorHover : #00FF00;
         colorActive : #0000FF;
     }
 
     Label {
         color : #CCCCCC;
         fontSize : 16;
     }
 
 </mx:Style>
  <text:HyperLink linkText="Click me! I am a hypertext link" id="hLink" linkClick="onLinkClick(event)"/>
  <mx:Button id="btn" label="Change the style" click="changeStyle()"/>
  <mx:Label id="txtDataUrl" visible="false"/>
</mx:Application>

See the demo below.

Example: http://jabbypanda.com/labs/hyperLink/htmlText.html
Source files: http://jabbypanda.com/labs/hyperLink/srcview/index.html

ps
I marked this component version as 0.1 because I feel there is a open room for suggestion how to correct/ extend Hyperlink component to make it more useful.

Tell me frankly, does this hyperlink component look good enough to match a view and feel of plain old <a href> tag from HTML world?

Acknowledgments

Hyperlink component example written by Tracy Spratt