The following example shows how you can create a simple TextContainerManager in Flex 4 using the Text Layout Framework (TLF) classes.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

package {
    import flash.display.Sprite;
 
    import flashx.textLayout.container.TextContainerManager;
 
    [SWF(width="550", height="300")]
 
    public class TextContainerManager_setText_test extends Sprite {
        public function TextContainerManager_setText_test() {
            var spr:Sprite = new Sprite();
            addChild(spr);
            spr.x = 40;
            spr.y = 50;
 
            var tcm:TextContainerManager = new TextContainerManager(spr);
            tcm.compositionWidth = 300;
            tcm.compositionHeight = 200;
            tcm.setText("(1)The quick brown fox jumps over the lazy dev. (2)The quick brown fox jumps over the lazy dev. (3)The quick brown fox jumps over the lazy dev. (4)The quick brown fox jumps over the lazy dev. (5)The quick brown fox jumps over the lazy dev.");
            tcm.updateContainer();
        }
    }
}

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

5 Responses to Creating a simple TLF TextContainerManager in Flex 4

  1. Rob McKeown says:

    I must be missing something because this doesn’t appear to compile even when using the nightly (8654 build) SDK. I get several “Type was not found or was not a compile-time constant” errors pointing at TextBlock and TextLine as the missing classes.

  2. Rob McKeown says:

    Ok… slightly embarrassed now. I forgot to change the required Flash player version to 10 in the projects properties.

    • Peter deHaan says:

      Rob,

      Out of curiosity, are you using Flex Builder 3, or Flash Builder 4 beta? If you are using FB4, it should correct the Player version automatically based on the current SDK version (unless you disabled that).

      Peter

      • Rob says:

        I was using Flex Builder 3. It’s good to know that Flash Builder will help me avoid forgetting that setting though.

  3. Dan says:

    How do you add a border to text elements using TLF? This seems like something that should be extremely simple yet I’ve been hunting for days. I’m currently doing something like this:


    protected var _textFlow:TextFlow;
    protected var _editManager:EditManager;

    var _textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
    // I add a whole bunch of formatting such as:
    _textLayoutFormat.color = 0xff0000;
    _textLayoutFormat.fontFamily = "Arial, Helvetica, _sans";
    //but of course there's no border-like settings here.

    _textFlow = new TextFlow();
    _textFlow.hostFormat = _textLayoutFormat;
    _textFlow.flowComposer = new StandardFlowComposer();
    _textFlow.flowComposer.addController(new ContainerController(this));
    _editManager = new EditManager();
    _textFlow.interactionManager = _editManager;
    _textFlow.flowComposer.updateAllControllers();

    // ... and later to "activate" it...

    _textFlow.interactionManager.selectRange(0,0);
    _editManager.setFocus();

    I was playing around with a TextContainerManager before, too… but I guess I just didn’t understand it enough. I see on help.adobe.com it says about the drawBackgroundAndSetScrollRect method, “Override this method to draw a background or a border. Overriding this method can be tricky as the scrollRect must be set as specified.

    I guess I’ll look into that, although… I’m not sure where to begin yet. (Any recommendations?)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree