Draw Lines Under Text in Spark RichEditableText

On my current project, the design calls for displaying editable text with underlines that scroll with the text. It’s a nice design, and I had no good solution. I talked to a couple people, ideas were tossed around, and after a lot of reading and a couple runs at it I had nothing to show for the effort.

You can already see a working demo below. So how did I get there?

I had a nagging feeling I’d talked to someone about a workable solution, but I couldn’t remember who. Paul Taylor (@guyinthechair) had shown me some of his excellent work with text during 360|Flex in DC last year, and I figured if anyone was going to be able to help it’d be Paul. I put out a Twitter call for help, and, sure enough, he had an idea. And it’s so simple!

Paul extends RichEditableText and adds a handler for Event.ADDED which is triggered for each new line (or specifically for each time anything is added to the display list). Thanks Paul!

import flash.display.DisplayObject;
import flash.display.Shape;
import flash.events.Event;
import flash.events.EventPhase;
import flash.text.engine.TextLine;

import spark.components.RichEditableText;

public class LineyRET extends RichEditableText
public function LineyRET()
addEventListener(Event.ADDED, onChildLineAdded);

private function onChildLineAdded(event:Event):void
var line:TextLine = event.target as TextLine;


var s:Shape = new Shape();
s.name = 'baseline';
s.graphics.lineStyle(1, 0xCCCCCC, 0.5);
s.graphics.moveTo(0, line.descent + 5);
s.graphics.lineTo(line.specifiedWidth, line.descent + 5);


          Either scripts and active content are not permitted to run or Adobe Flash Player version           0.0.0 or greater is not installed.          

                Get Adobe Flash Player




Melville text courtesy of Fillerati.

View and Download demo source here

Categories: FlexPermalink