Talk about under-documented and over-complicated. The new Text Layout Framework has been a headache to use. It took far too long to get underlined, padded, editable text. Hopefully this example will save someone else the pain.

After downloading Flash Builder I thought it would be fun to check out the new Text Layout Framework. While the end result is really cool, almost all of the documentation available is already outdated. Here is an example using an ActionScript only project in Flash Builder to create underlined, padded, editable text. I threw in the undo manager for fun.

TextFlow Example:

(click in the text field above, type in text than hit ctrl-z to undo.)

Full source code can be found here.

// Create a sprite that the text will put itself into
var inputTextContainer:Sprite = new Sprite();
this.addChild(inputTextContainer);

// Create a TextFlow component that will process the text
var textFlow:TextFlow = new TextFlow();
textFlow.textAlign = TextAlign.LEFT;

// Create a controller given your sprite and bounding box.
var containerController:ContainerController = new ContainerController(inputTextContainer,240,80);
containerController.verticalAlign = flashx.textLayout.formats.VerticalAlign.TOP;
textFlow.flowComposer.addController(containerController);

var paragraphElement:ParagraphElement = new ParagraphElement();  
paragraphElement.fontSize = 22;
paragraphElement.textDecoration = TextDecoration.UNDERLINE;

var spanElementTarget:SpanElement = new SpanElement();
spanElementTarget.text = "Editable text with undo capabilities.";
paragraphElement.addChild(spanElementTarget);

// Padding for p and span tags doesn't work but setting it here does
var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
textLayoutFormat.paddingTop = 10;
textLayoutFormat.paddingLeft = 20;

// Really? All this for just some underlined, padded, editable text?
textFlow.hostFormat = textLayoutFormat;
textFlow.interactionManager = new EditManager(new UndoManager());
textFlow.addChild(paragraphElement)
textFlow.flowComposer.updateAllControllers();

Next Steps
Wrap all this mess into a class that I can actually use. 15 imports and 30 lines of code is far to cumbersome to use on a regular basis. Stay tuned for an encapsulated class that takes advantage of the key features.

http://forums.adobe.com/thread/458116
http://labs.adobe.com/technologies/textlayout/demos/
http://opensource.adobe.com/wiki/display/tlf/Using+TLF+with+Flash+CS4
http://corlan.org/2009/01/19/how-to-use-text-layout-framework-in-flex-32-or-air-15/
http://forums.adobe.com/message/2646565