Using the latest capabilities of Flash Player 10 in terms of text engine, Text Layout Framework offers much more extensible and feature-rich text layouts. Here is a list of capabilities for the new text framework:

- Bidirectional text, vertical text and over 30 writing scripts including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, Vietnamese, and others.
- Selection, editing and flowing text across multiple columns and linked containers.
- Vertical text, Tate-Chu-Yoko (horizontal within vertical text) and justifier for East Asian typography.
- Rich typographical controls, including kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens.
- Cut, copy, paste, undo and standard keyboard and mouse gestures for editing
- Rich developer APIs to manipulate text content, layout, markup and create custom text components.
- ActionScript-based object-oriented model for rich text layout enabling live updates.

What we’ll touch in this post is linked containers. What is this all about is that you can have a flow of text (TextFlow) displayed on two or more separate containers and manage them using controllers and composers. From the last sentence we can clearly distinct the three main part of the framework, following MVC approach:

- Model would be the TextFlow along with all it’s elements.
- View would be the container.
- Controller would be the controllers and everything that relates to user interaction on the text.

Starting our demo we want to have 2 containers displayed that will share the same text flow. Sizes for containers will be changed when resizing the application to force the text to span across one or both of them, depending on the size. For the sake of simplicity we will build up a SparkSkin and have everything declared in it.
First we need the TextFlow, an xml file actually that declares the TextFlow. This will be converted into actual text layout format.

1
2
3
4
5
6
7
8
9
10
11
12
13
<fx:Declarations>
    <fx:XML id="xml">
        <TextFlow xmlns="http://ns.adobe.com/textLayout/2008" fontSize="14" fontFamily="Verdana">
            <p>The Text Layout Framework is an extensible ActionScript library, built on the new
               text engine in Adobe® Flash® Player 10 and Adobe AIR 1.5, which delivers advanced,
               easy-to-integrate typographic and text layout features for rich, sophisticated and
               innovative typography on the web. The framework is designed to be used with Adobe
               Flex® or Adobe Flash Professional and is included in Flex 4, code named "Gumbo".
               Developers can use or extend existing components, or use the framework to create
               their own text components.</p>
        </TextFlow>
    </fx:XML>
</fx:Declarations>

Second, we need the containers where the text will be displayed:

1
2
3
4
5
6
<s:Group id="contentGroup" horizontalCenter="0">
   
    <mx:UIComponent id="container1"/>
    <mx:UIComponent id="container2" x="250"/>
   
</s:Group>

As declarations, we have the text flow which will result from converting the xml object and two controllers for the containers we just displayed. These controllers will be used to compute how much text to display in each container, depending on all properties of the text flow.

1
2
3
private var textFlow:TextFlow;
private var controller1:ContainerController;
private var controller2:ContainerController;

At creation complete we just link all components together, converting the text flow, creating controllers for containers and add them to the text flow and update them.

1
2
3
4
5
6
7
8
9
10
11
protected function creationCompleteHandler( event:FlexEvent ):void
{
    textFlow = TextConverter.importToFlow( xml, TextConverter.TEXT_LAYOUT_FORMAT );
    controller1 = new ContainerController( container1 );
    controller2 = new ContainerController( container2 );
   
    textFlow.flowComposer.addController( controller1 );
    textFlow.flowComposer.addController( controller2 );
   
    updateControllers();
}

Updating controllers method is separate because we will also call it when resizing the application:

1
2
3
4
5
6
7
8
9
10
11
12
protected function resizeHandler( event:ResizeEvent ):void
{
    if( initialized )
        updateControllers();
}

private function updateControllers():void
{
    controller1.setCompositionSize( 200, height );
    controller2.setCompositionSize( 200, height );
    textFlow.flowComposer.updateAllControllers();
}

What’s happening is that the controllers will adjust the required sizes depending on the height of the application, and while the containers are linked (with flowCompose.addContainer), text will span across both of them in necessary. You can view the example here http://ayonesoftware.com/blog/examples/tlf with right-click for view source.