Flex 4.1 RichText/RichEditableText autosizing

In the开发者_JS百科 past, I used the flash.text.textField object something like this:

tf = textField();
tf.autoWrap = true
tf.autoSize = "left"
tf.width = 100;
tf.text = "Text that is too long to fit in the textfield, so it autowraps, automatically updating the height."
addChild(tf);
someNewObject = new MovieClip();
someNewObject.y = tf.height + 5;
addchild(someNewObject);

Doing this would dynamically place my someNewObject just below the textField.

I'm trying to find a TLF component that allows me to do this.

I tried using mc.core.FTETextField. It resizes great, but does not support HTML

I tried using the Spark TextArea, but apparently, the technique of setting heightByLines = NAN no longer works.

I saw someone say to use RichEditableText, because it supports auto-sizing, but I cannot figure out how.

This is for static text. Not for dynamic or input text.

I'm coding this, so if you have some suggestions, please post them in code, not MXML.

Thanks for the answers so far, but UITextfield is not a TLF component and the example for RichText does not cause the RichText height to grow with the text.

What I need is a component that I can set the width, add TLF formatted text and get the height of the component once it has rendered. Just like a TextField does when you add text.

lee

Simple enough, you just need to create your TextFlow object.

<fx:Declarations>
<s:TextFlow id="textFlow">
    Hello, this <s:span fontWeight="bold"> is a test</s:span> of TextFlow
</s:TextFlow>
</fx:Declarations>
<s:RichText id="richText" textFlow="{textFlow}" />

But the textFlow uses Flex tags in there. You can always use a converter as well to transform real HTML String into a TextFlow like this:

<fx:Script>
    <![CDATA[
        import flashx.textLayout.conversion.ITextImporter;
        import flashx.textLayout.conversion.TextConverter;

        private const importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
        private const htmlString:String = "Hello, this <b>is a test</b> of TextFlow";

    ]]>
</fx:Script>
<s:RichText textFlow="{importer.importToFlow(htmlString)}"/>

You can use mx.core.UITextField. It supports HTML. Here is the documentation: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UITextField.html

RichEditableText does the trick, however you must explicitly set width property for autowrapping. From my experience, if you set width to %100, it may cause some problems (for me it causes some), so I recommend you to explicitly set width value to ensure word wrapping. ASDoc of RichEditableText explains quite a bit.