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!

 
package
{
	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()
		{
			super();
			addEventListener(Event.ADDED, onChildLineAdded);
		}
 
		private function onChildLineAdded(event:Event):void
		{
			var line:TextLine = event.target as TextLine;
			if(!line)
				return;
 
			if(line.getChildByName('baseline'))
				return;
 
			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);
			s.graphics.endFill();
			line.addChild(s);
		}
	}
}
 

Melville text courtesy of Fillerati.

View and Download demo source here