Determining the number of lines in a Spark RichEditableText control in Flex 4

In a previous example, “Determining the number of lines in a TextArea control in Flex”, we saw how you could get the number of lines in an MX TextArea control by using the getTextField() method (in the mx_internal namespace) and the numLines property.

The following example shows how you can get the number of lines in a Spark RichEditableText control in Flex 4 by using the textContainerManager property (in the mx_internal namespace) and the numLines property.

Full code after the jump.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/13/determining-the-number-of-lines-in-a-spark-richeditabletext-control-in-flex-4/ -->
<s:Application name="Spark_RichEditableText_textContainerManager_numLines_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import spark.events.TextOperationEvent;
 
            [Bindable]
            protected static var lineCount:uint = 0;
 
            protected function richEdTxt_changeHandler(evt:TextOperationEvent):void {
                lineCount = richEdTxt.mx_internal::textContainerManager.numLines;
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="characters {richEdTxt.text.length}; numLines: {lineCount}"
            horizontalCenter="0" verticalCenter="0">
        <s:RichEditableText id="richEdTxt"
                widthInChars="20" heightInLines="10"
                change="richEdTxt_changeHandler(event);" />
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

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.

15 thoughts on “Determining the number of lines in a Spark RichEditableText control in Flex 4

  1. Your examples are really good, but the font size used for the code snippet above is too small to read easily. If you made it the same size as the body text it would be better

  2. Thanks for your examples. It does worry me a little that we have to use namespaces to access something so fundamental as the number of lines in a text field. Do you agree that there should be this level of obscurity in these tasks or is this something that is likely to be changed before release?

    1. @Richard Leggett,

      This will not be changed before the Flex 4.0 release. There was a bug/enhancement filed for this already (http://bugs.adobe.com/jira/browse/SDK-22019) but it was deferred. If you feel strongly about it, I’d suggest having you (and a few of your friends) vote on the issue and show Adobe it is important to you. In the meantime you’ll have to use the mx_internal namespace or subclass the s:TextArea and/or s:RichEditableText controls to expose this as a public read-only getter (or whatever).

      Peter

      1. Thanks, Peter. I’ve voted for it. It’s no big deal for me to use mx_internal, I was just thinking about developers new to Flex. Thanks for your reply and all of these examples!

  3. So close! First off, I’m a beginner that has learned a great deal from your site. Secondly, I have a problem very similar to this.
    You’ve shown how to get the number of lines from a Text Area, but do you know how to get the unset height of a Label field or a RichText field AFTER the element has finished rendering? Currently all I’m getting is the height of a single line and not the entire element height. A thought is to be able to get the number of lines (numLines?) and multiply it by the $height, but there doesn’t appear to be a method to handle this.
    Thank you greatly for your time and help!

  4. hey Peter,

    I’m trying to export and then reimport html text from your above example but I seem to get extra carriage returns – any ideas?

    <s:TextArea id=”” />

    <s:Button id=”saveBtn” label=”save” click=”saveBtn_clickHandler(event)”/>

    protected function saveBtn_clickHandler(event:MouseEvent):void{
    var t:String = TextFlowUtil.export(editor.textFlow);
    sample.textFlow = TextConverter.importToFlow(t, TextConverter.TEXT_FIELD_HTML_FORMAT)
    }

    “this
    is
    a
    test”

    becomes:


    this

    is

    a

    test

  5. In the last minutes I discovered the method to know the number lines, only is for textArea Spark:

    “myTextArea.textDisplay.textContainerManager.numLines”

    , see you next! twt: @acidventure

  6. Or, here’s another way that seems to work without having to use the mx_internal namespace:

    <s:Panel id="pnl">
        <s:TextArea id="txtArea" change="pnl.title = txtArea.textFlow.flowComposer.numLines.toString();" />
    </s:Panel>

    Peter

  7. thank you very much. i was struggling for this for a long time. you saved my life… :) keep it up.

Comments are closed.