Home > Actionscript, Flash Builder 4, Flex 4, Text Layout Framework > Text Layout Framework Technical Introduction

Text Layout Framework Technical Introduction

Recently. I got chance for hand on practice on Text Layout Framework (TLF) and I like to post an article on technical introduction of Text Layout core component, conversion component and edit component and implementation of Text Layout Framework new feature like Undo / Redo and some interesting features.

Text Layout Framework support complex scripts and advance features and layout features. TLF consists three components :

1) textLayout_core.swc
2) textLayout_conversion.swc
3) textLayout_edit.swc

The textLayout_core component is central part of framework, which deal with storage of text, creation of text containers and display text.

As the component name itself indicate, the textLayout_conversion component is used for text input output operation (conversion), in other words import and export text operation with framework.

If you want to allow user to edit text which is stored in textLayout_core component then the textLayout_edit component will play an important role.

Following are some important Classes and specific operations techniques needs to understand for use of TLF.


TextFlow class is responsible for managing all the text content, as TextFlow can have ParagraphElement (p) and DivElement (div) elements as child. A div element can have group of paragraphs. A paragraphs can have SpanElement, InlineGraphicElement, LinkElement and TCYElement elements as a children. TYYElement is used in Japanise text.

The following diagram represent the node hierarchy in the elements package of the Text Layout Framework.

Each TextFlow has a corresponding Configuration object which allows you to specify initial character and paragraph formats and the initial container format.

You can get more information about Text Layout Framework from here.


The TextLayoutFormat holds all of the text layout properties, which effect the format and style of a text flow at container level, paragraph level and text level. Once you set TextLayoutFormat properties you will have to assign it with text flow just like:

var textFormat:TextLayoutFormat = new TextLayoutFormat();

textFormat.textDecoration = TextDecoration.UNDERLINE;

textFormat.fontSize = 12;

textFlow.format = textFormat;

Also, you can change text flow attributes directly :

textFlow.fontSize = 12;

Importing Text

This is specially useful for importing dynamic text returned from remote service or HTTPService at runtime. Following are three different conversion operation for import and export operation of text.

TextConverter.TEXT_LAYOUT_FORMAT – convert to / from markup format

TextConverter.PLAIN_TEXT_FORMAT – convert to / from plain text string

TextConverter.TEXT_FIELD_HTML_FORMAT – convert to / from HTML

private var _textFlow:TextFlow; private var _textInput:String ='Lorem ipsum dolor sit ao ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis.'; textFlow =TextConverter.importToFlow(textInput,TextConverter.TEXT_LAYOUT_FORMAT);

Here, you can change the text format for text input.

Exporting Text

Exports a TextFlow to a specified format. Supported formats includes FXG, HTML, plain text and TextLayout Markup. Also specify the type of the exported data in conversion type format, which support ConversionType.XML_TYPE and ConversionType.STRING_TYPE.

var outputString:String = TextConverter.export(_textFlow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE).toString();

To implement this with spark component you can use textFlow property as shown below :

Editing Text

TLF edit component provides controller functionality by three classes that you can use to select text, edit text and undo redo text.

The ability to select or edit text is controlled at TextFlow level by an associated interaction manager, which is defined by TextFlow.interactionManager property. To enable selection will have to use SelectionManage class. And to enable selection and editing both assign an instance of EditManager instead of SelectionManager

1) Selection Manager

To enable your text selectable, create an instance of SelectionManager and associate it with interaction manger of your TextFlow instance. For example if _textFlow is your TextFlow instance name then you will have to set interactionManager property as shown below :

_textFlow.interactionManager = new SelectionManager();

2) Edit Manager

To enable selection and editing, create an instance of EditManager and associate it with interaction manager of your TextFlow instance. It will look like :

_textFlow.interactionManager = new EditManager();

3) Undo Manager

To enable undo and redo feature create an instance of UndoManager and set it as argument to EditManager constructor. If you have _textFlow as instance of TextFlow then you can set UndoManager as below.

_textFlow.interactionManager = new EditManager(new UndoManager());

If you have multiple instances of TextFlow let say textFlow1 and textFlow2, and you want to use the same UndoManager for the both textFlow instances then you can set it as shown below :

var undoManager : UndoManager = new UndoManager();

_textFlow1.interactionManager = new EditManager(undoManager);

_textFlow2.interactionManager = new EditManager(undoManager);

textFlow.format = textFormat;

Friends, you can get more information about advanced text operation supported by Text Layout Framework from here.

Enjoy RIA.. 🙂

  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: