Home > About > Flex 4 and the Text Layout Framework

Flex 4 and the Text Layout Framework


One of my favorite things about Flex 4 is that it now includes the Text Layout Framework (TLF) as the basis of many Spark text components such as RichText, RichEditableText, TextArea, and TextInput as well as any other components that utilize any of these as part of another component, such as the ComboBox, which includes a TextInput control for example. You now have fine-grained control over text and text flow and can do some really amazing things with your UIs. This framework is extensive and I recently took some time to go through it all while building samples for Tour de Flex. I’d like to share some information I gathered while doing so.

The Text Layout Framework is included in Flex 4 via the textLayout.swc. This swc contains three combined SWC’s including:

• textLayout_core

• textLayout_conversion

• textLayout_edit

The textLayout_core component is the main component for the framework and handles storage and display of text.

The textLayout_conversion component is used for import/export of text and is necessary if you use text that is not compiled directly into the SWF.

The textLayout_edit component provides the editing libraries needed for selection, editing (cut/copy/paste) and undo capabilities.

This framework can be understood better when looking at it from an MVC standpoint. The packages that make up each part are listed below:

Model

  • flashx.textLayout.elements.* (classes for data structure definition)
  • flashx.textLayout.formats.* (classes for formatting properties)
  • flashx.textLayout.conversion.* (classes for import/export)

View

  • flashx.textLayout.factory.*
  • flashx.textLayout.container.*
  • flashx.textLayout.compose.*

Controller

  • flashx.textLayout.edit.*
  • flashx.textLayout.operations.*

Importing Text

In many cases you will need to import text into the framework. This can be especially useful for importing dynamic text that is returned from a remote service or HTTPService at runtime for instance. You can choose from three different conversion options for import/export of text in general. They are:

TextConverter.TEXT_LAYOUT_FORMAT – convert to/from the text layout markup format

TextConverter.PLAIN_TEXT_FORMAT – convert to/from a plain text string

TextConverter.TEXT_FIELD_HTML_FORMAT – convert to/from HTML (subset of HTML supported – see here for details)

The following example shows how to use the TLF markup language itself within some text and then import it into the framework for managing the display:

01 private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
02 <div>
03 <p color="0x336699"><span>The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web.
04 </span></p>
05 </div>
06 </TextFlow>;
07
08 private var _textFlow:TextFlow;
09 var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
10 textFlow = importer.importToFlow(textInput);

You could also do something like the following with plain text. Note that this example specifies the format directly on the import method, whereas the code above retrieved an import filter first with a call to getImporter(). If you want to catch errors on the conversion then you would use the one that gets the import filter first such as above.

1 private static var myText:String = "Hello World";
2 private var _textFlow:TextFlow;
3 textFlow = importer.importToFlow(myText,TextConverter.PLAIN_TEXT_FORMAT);

You can export your text to those same formats. An example of exporting text to the Text Layout Framework markup is shown here:

1 TextConverter.export(customEditor.editor.textFlow,
2 TextConverter.TEXT_LAYOUT_FORMAT,
3 ConversionType.STRING_TYPE);

Applying this to Flex 4 controls, you could use any of the TLF-based controls’ textFlow property and set that value to the imported String result. The following code snippet shows how this is done:

01 <fx:Declarations>
02 <!-- Define a String to use with HTML and plain text format. -->
03 <fx:String id="htmlTxt"><![CDATA[<p>Text containing <b>HTML</b> markup</p>]]></fx:String>
04
05 <!-- Define an XML object to use with TLF format. -->
06 <fx:XML id="tfTxt">
07 <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
08 <p>Text Using  <span fontWeight="bold">Text Layout Framework</span> Markup</p>
09 </TextFlow>
10 </fx:XML>
11 </fx:Declarations>
12 <s:TextArea id="txt1" width="200" height="50"
13 textFlow="{TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
14 horizontalCenter="0" verticalCenter="0" />
15 <s:RichText id="txt3" width="200" height="50"
16 textFlow="{TextConverter.importToFlow(tfText, TextConverter.TEXT_LAYOUT_FORMAT)}"
17 horizontalCenter="0" verticalCenter="0" />

You can also use the TextFlowUtil class to import a String into a Flex 4 TLF-based component as in the following code snippet:

1 var markup:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'><p fontFamily='Arial'>This is TLF markup with paragraphs.</p><p color='0x663399'>The root TextFlow tag is included.</p></TextFlow>";
2 rt1.textFlow = TextFlowUtil.importFromString(markup);
3
4 <s:TextArea id="rt1" width="300" height="50"/>

Note that you can even omit the TextFlow root and namespace and simply start with the paragraph tag and the TextFlow root and namespace will be added for you; for example:

1 var markup:String = "<p color='0xCE267D'>This is TLF markup with paragraphs.</p><p fontSize='10' fontWeight='bold' fontFamily='Arial'>The root TextFlow tag is omitted and therefore created automatically.</p>";
2 rt1.textFlow = TextFlowUtil.importFromString(markup);
3
4 <s:RichText id="rt1" width="200"/>

There are some important classes that are key to the framework:

TextFlow

Represents the text itself and can contain either ParagraphElement (p) or DivElement (div). DivElement can be a group of ParagraphElements. ParagraphElement (p) can contain span, inline image, link or tcy elements (for Japanese text handling). The following picture is from the Adobe SDK docs and helps explain the relationship hierarchy further:

The TextFlow can contain multiple containers and each container is associated with a ContainerController.

ContainerController

A controller is associated with each container that is being used to display text (manages a Sprite for instance). The controller is used to control how the text is going to flow between containers. Here is another image from the Flex 4 SDK docs that I believe helps explain this nicely:

IFlowComposer

The IFlowComposer interface is implemented by the StandardFlowComposer and manages the conversion of the text into TextLine objects and placement of the text in the containers. The updateAllControllers() net must be called on this object to lay out the text and add update the display when any settings have been changed.

For instance:

1 textFlow.fontSize = 11;
2 flow.flowComposer = new StandardFlowComposer();
3 textFlow.flowComposer.updateAllControllers();

TextLayoutFormat

Formatting of text can be done in multiple ways, either at the container, paragraph, or character level. It’s done by using either a TextLayoutFormat object, which contains all of the properties that can be set, or by setting the specific properties on the TextFlow object. If you use the TextLayoutFormat object, you then assign it to the format property of the TextFlow object:

1 var tlf:TextLayoutFormat = new TextLayoutFormat();
2 tlf.fontSize =11;
3 tlf.direction = Direction.RTL;
4 tlf.columnCount = 3;
5 tlf.columnGap = 15;
6 textFlow.format = tlf;

If you are only changing one attribute, you can do so on the TextFlow object directly as well:

1 textFlow.fontSize = 11;

The following sample code snippets show some specific techniques you might want to use with this framework:

Directional Text

1 textFlow.direction = Direction.RTL; // right-to-left text

Inline Images

You can display an inline image in your text with something like the following:

01 [Embed(source="adobe_air_logo.png")]
02 [Bindable]
03 static public var imgClass:Class;
04
05 var p:ParagraphElement = new ParagraphElement();
06 var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
07 inlineGraphicElement.source = imgClass;
08 inlineGraphicElement.width=32;
09 inlineGraphicElement.height=32;
10 p.addChild(inlineGraphicElement);
11 textFlow.addChild(p);

Selecting/Editing Text

You can create an EditManager with an UndoManager if you would like to use selection, editing, and undo capabilities. If you only need to support selection, you can use the base SelectionManager class. Below is code that shows how to set up the code to handle editing/undo. See the FlowOperation class docs for more information on the types of operations that can be handled. The new Tour de Flex sample shows how to do selection, undo, and redo of text so check that out for more information.

1 textFlow.interactionManager = new EditManager(new UndoManager());

A great example of the Text Layout Framework in use is the New York Times Adobe AIR application. If you haven’t downloaded this app yet, I highly recommend it, and it’s FREE!

And finally some links for further information:

Tour de Flex TLF Samples

Text Layout Framework Team Blog – great examples here too!

InsideRIA article by Elad Elrom on MXML and TLF

Text Layout Frameworks on Adobe Labs

Try out TLF with an online editor

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: