Holly Schinsky
Content
Created
10 May 2010
Requirements
Prerequisite knowledge
This article assumes knowledge of Flex 4.
User level
All
Required products
- Flex (Download trial)
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 (see Figure 1). I'd like to share some information I gathered while doing so.
Understanding the framework
The Text Layout Framework is included in Flex 4 via the textLayout.swc. This swc contains three combined SWCs 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:
private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<div>
<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.
</span></p>
</div>
</TextFlow>;
private var _textFlow:TextFlow;
var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_LAYOUT_FORMAT);
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.
private static var myText:String = "Hello World";
private var _textFlow:TextFlow;
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:
TextConverter.export(customEditor.editor.textFlow,
TextConverter.TEXT_LAYOUT_FORMAT, 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:
<fx:Declarations>
<!-- Define a String to use with HTML and plain text format. -->
<fx:String id="htmlTxt"><![CDATA[<p>Text containing <b>HTML</b> markup</p>]]></fx:String>
<!-- Define an XML object to use with TLF format. -->
<fx:XML id="tfTxt">
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<p>Text Using <span fontWeight="bold">Text Layout Framework</span> Markup</p>
</TextFlow>
</fx:XML>
</fx:Declarations>
<s:TextArea id="txt1" width="200" height="50"
textFlow="{TextConverter.importToFlow(htmlText, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
horizontalCenter="0" verticalCenter="0" />
<s:RichText id="txt3" width="200" height="50"
textFlow="{TextConverter.importToFlow(tfText, TextConverter.TEXT_LAYOUT_FORMAT)}"
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:
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>";
rt1.textFlow = TextFlowUtil.importFromString(markup);
<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:
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>";
rt1.textFlow = TextFlowUtil.importFromString(markup);
<s:RichText id="rt1" width="200"/>
Important classes
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 (see Figure 2) 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 (see Figure 3) 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:
textFlow.fontSize = 11;
flow.flowComposer = new StandardFlowComposer();
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:
var tlf:TextLayoutFormat = new TextLayoutFormat();
tlf.fontSize =11;
tlf.direction = Direction.RTL;
tlf.columnCount = 3;
tlf.columnGap = 15;
textFlow.format = tlf;
If you are only changing one attribute, you can do so on the TextFlow object directly as well:
textFlow.fontSize = 11;
Sample snippets
The following sample code snippets show some specific techniques you might want to use with this framework:
Directional Text
textFlow.direction = Direction.RTL; // right-to-left text
Inline Images
You can display an inline image in your text with something like the following:
[Embed(source="adobe_air_logo.jpg")]
[Bindable]
static public var imgClass:Class;
var p:ParagraphElement = new ParagraphElement();
var inlineGraphicElement:InlineGraphicElement = new InlineGraphicElement();
inlineGraphicElement.source = imgClass;
inlineGraphicElement.width=32;
inlineGraphicElement.height=32;
p.addChild(inlineGraphicElement);
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.
textFlow.interactionManager = new EditManager(new UndoManager());
A great example of the Text Layout Framework in use is the New York Times Adobe AIR application (see Figure 4). If you haven't downloaded this app yet, I highly recommend it, and it's FREE!
Where to go from here
Check out the resources 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
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
Flex User Forum |
More |
| 02/07/2012 | Newbie - Views |
|---|---|
| 01/24/2012 | How to navigate through the views without losing content? |
| 02/07/2012 | ActionScript rounding issue |
| 02/07/2012 | Setting Value of Static Const |
Flex Cookbook |
More |
| 01/20/2012 | Skinnable Transform Tool |
|---|---|
| 12/12/2011 | Date calculations using 'out-of-the-box' functions |
| 12/05/2011 | String replaceAll in ActionScript |
| 12/04/2011 | Flex: Validate/revert editable Datagrid input value |
