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> |
<?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