This is a little example of how to create a skinned rollover popup on a LinkElement object in Flash Builder 4 (Flex 4) within a TextFlow object. This is something I have been waiting for since 2001. The old way to create a rollover action on an HTML link was to create an invisible MovieClip that floats over your hyperlink. Flex Builder 4 greatly simplifies this by adding rollover, mouse, and click events to all hyperlinks within the TextFlow object. This is a HUGE plus
I borrowed the click event action from an example by Peter deHaan posted on his blog Flex Examples. You will need the latest build of the Flex Builder 4 SDK and some helpful instructions on how to install the latest Flex Builder 4 SDK.
Example AIR Application Output
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication title="Spark RichEditableText LinkElement Rollover"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
import flashx.textLayout.formats.TextDecoration;
import mx.managers.PopUpManager;
import flashx.textLayout.elements.LinkElement;
import flashx.textLayout.events.FlowElementMouseEvent;
import mx.controls.Alert;
private var customToolTip:CustomToolTip;
protected function clickHandler(evt:FlowElementMouseEvent):void {
var linkEl:LinkElement = evt.flowElement as LinkElement;
Alert.show("The '" + linkEl.getFirstLeaf().text + "' link would have gone to " + linkEl.href + " in a " + linkEl.target + " window, but it was cancelled.", "Fun with hyperlinks");
evt.stopImmediatePropagation();
evt.preventDefault();
}
protected function rollOverHandler(evt:FlowElementMouseEvent):void
{
if(!customToolTip){
customToolTip = new CustomToolTip();
customToolTip.x = this.mouseX - customToolTip.width/2;
customToolTip.y = this.mouseY - 40;
PopUpManager.addPopUp(customToolTip, this, false);
}
customToolTip.text = LinkElement(evt.flowElement).href;
}
protected function rollOutHandler(evt:FlowElementMouseEvent):void
{
PopUpManager.removePopUp(customToolTip);
customToolTip = null;
}
]]>
</fx:Script>
<s:RichEditableText id="richEdTxt" editable="false" selectable="false" focusEnabled="false" horizontalCenter="0" verticalCenter="0">
<s:textFlow>
<s:TextFlow>
<!--
<s:linkNormalFormat textDecoration="{TextDecoration.NONE}"/>
<s:linkHoverFormat textDecoration="{TextDecoration.UNDERLINE}" />
<s:linkActiveFormat textDecoration="{TextDecoration.UNDERLINE}" />
-->
<s:p>Text that includes a link to <s:a href="http://adobe.com/" target="_blank"
rollOver="rollOverHandler(event);" rollOut="rollOutHandler(event);"
click="clickHandler(event);">Adobe</s:a>.</s:p>
</s:TextFlow>
</s:textFlow>
</s:RichEditableText>
</s:WindowedApplication>
CustomToolTip
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Script>
<![CDATA[
import spark.skins.spark.BorderSkin;
[Bindable] private var _text:String;
public function set text(value:String):void
{
_text = value;
}
]]>
</fx:Script>
<s:Skin minHeight="25">
<s:Rect id="upFill"
top="1"
right="1"
left="1"
bottom="1"
radiusX="10"
radiusY="10">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="#222222" ratio="0" alpha="0.45"/>
<s:GradientEntry color="#222222" ratio="0.45"/>
<s:GradientEntry color="#222222" ratio="0.65"/>
<s:GradientEntry color="#222222" ratio=".8"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#222222" weight="0.5"/>
</s:stroke>
</s:Rect>
<s:Rect id="highlightFill"
top="2"
right="2"
left="2"
bottom="2"
radiusX="10"
radiusY="10">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="#FDFDFD" ratio="0" alpha="0.6"/>
<s:GradientEntry color="#FDFDFD" ratio="0.2" alpha="0"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:SimpleText id="labelElement" text="{_text}"
color="#FFFFFF"
right="20"
left="20"
verticalAlign="middle"
horizontalCenter="0"
verticalCenter="1"/>
<s:filters>
<s:DropShadowFilter color="#999999"
blurX="5"
blurY="5"
angle="90"
distance="2"
alpha="0.8"/>
</s:filters>
</s:Skin>
</s:SkinnableContainer>
The only think I couldn’t get working for this example (the commented out section) was changing the format of the hyperlinks within the TextFlow object.
Source File
Additional Resources
http://labs.adobe.com/technologies/flashbuilder4/
http://livedocs.adobe.com/flex/gumbo/langref/spark/primitives/RichEditableText.html
http://blog.flexexamples.com/2009/08/27/creating-a-linkelement-in-a-spark-richeditabletext-control-in-flex-4/
http://blog.flexexamples.com/2009/10/21/customizing-the-appearance-or-a-hyperlink-in-a-textflow-object-in-flex-4/
http://blog.flexexamples.com/2009/07/13/downloading-and-installing-flex-4-sdk-builds-from-opensource-adobe-com-flash-builder-4-beta-edition/
-Mister
