Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > The Text Layout Framework and Flex 4

The Text Layout Framework and Flex 4

Working with text in Flex 4 has changed significantly thanks to support for the Text Layout Framework (TLF). In this post you'll learn what the TLF is, what it does, and how you use it.

The Text Layout Framework was added to the Flash Player in version 10 and represents a bold new way to handle text in Flash applications. TLF adds the ability to support:

  • Bidirectional text, like vertical text or left to right layout, thereby supporting more languages
  • Advanced typography
  • Better selection and editing
  • Standard keyboard and mouse gestures
  • Improved layout and formatting of text

(For a really nice example application that uses TLF to display a wide assortment of content, see http://readefine.anirudhsasikumar.net/. To just see some screenshots of how nice TLF layout can look, check out Mihai Corlan's article on this same subject. Or see the Tour de Flex examples.)

You can more finely control the layout and formatting of large text blocks by using HTML-like tags: a, br, div, img, p, span, tab, and tcy. I say "HTML-like" because these tags are all used as they are in HTML, but they aren't technically HTML. Plus there are restrictions as to where each can be used. For example, you can only place text, paragraphs or other div's directly within a div whereas the paragraph can contain anything but div's.

Many of the new Flex 4 (Spark) components use TLF, including RichText, RichEditableText, and TextArea, among others. For such components, instead of plain text, they display TextFlow objects, which will be assigned to their textFlow properties. For example, if you wanted to create a RichEditableText MXML component, it might look like (Figure 1):

<s:RichEditableText editable="false">
This is a paragraph with a <s:a href="http://www.example.com">link to some page. And here is an image: <s:img source="../assets/image.png" height="150" width="120" />


Because these new components use TextFlow objects, working with them can be a bit trickier. For text established when you compile the application (as in the above example), it's not hard to create a TextFlow object in MXML. When manipulating these controls during runtime, for example, to assign a new batch of text to be displayed, you'll need to create a TextFlow object in ActionScript that can be used by the control. The simplest way to do this is to use the TextFlowUtil class's importFromString() method to turn a string into a TextFlow object. Start by importing the TextFlowUtil class:

import spark.utils.TextFlowUtil;

Then, when appropriate, invoke importFromString():

componentId.textFlow = TextFlowUtil.importFromString(someString);

Of course you could also use a bound variable, instead.

If you'd like to preserve any whitespace found in the original text, you'll need to use the WhiteSpaceCollapse.PRESERVE constant as the second argument to importFromString(). First include that class definition:

import flashx.textLayout.formats.WhiteSpaceCollapse;

Then change the conversions to:

componentId.textFlow = TextFlowUtil.importFromString(someString, WhiteSpaceCollapse.PRESERVE);

Those are the fundamentals for working with this new Text Layout Framework. There's clearly more to learn from here and I would start by looking at the links listed earlier in the post. Also, if you're doing a lot of text flow conversions, you should look into the TextConverter class, which is a bit more advanced and customizable. With it, you can convert back and forth between TextFlow objects and plain text, HTML, and XML.