Determining the number of lines in a TextArea control in Flex

by Peter deHaan on May 8, 2008

in TextArea

The following example shows how you can get the number of lines in a Flex TextArea control by using the getTextField() method (in the mx_internal namespace) and the numLines property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/08/determining-the-number-of-lines-in-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.StringUtil;

            private function textArea_change(evt:Event):void {
                callLater(updateStats, [evt]);
            }

            private function updateStats(evt:Event):void {
                var nLines:uint = textArea.mx_internal::getTextField().numLines;
                var nChars:uint = textArea.length;
                var str:String = "{0} characters; {1} lines";
                panel.status = StringUtil.substitute(str,
                                    nChars,
                                    nLines);
            }
        ]]>
    </mx:Script>

    <mx:String id="str" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="width (%):">
                <mx:HSlider id="slider"
                        minimum="50"
                        maximum="100"
                        value="100"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            percentWidth="{slider.value}"
            height="100%">
        <mx:TextArea id="textArea"
                htmlText="{str}"
                condenseWhite="true"
                width="100%"
                height="100%"
                change="textArea_change(event);"
                resize="textArea_change(event);" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

{ 11 comments… read them below or add one }

1 Chris Nunciato August 4, 2008 at 1:18 pm

Thanks much! This helped me out of a long-running bind. Good ol’ mx_internal!

Cheers,
Chris

Reply

2 Adrian August 15, 2008 at 6:57 am

Another thank you! :) I may never have figured this out from the Flex help!

Reply

3 Randy August 18, 2008 at 8:31 pm

Hi-

how would I achieve this in an actionscript class? I have a class extending textArea and I’m trying to access the textField methods by using

import mx.core.mx_internal; (right after the package definition)
this.mx_internal::getTextField().numLines; (in a function)

I get no warnings, but I still get a null object reference error when I debug:(

help!

-Randy

Reply

4 Johan September 11, 2008 at 10:08 pm

Thanks, was trying to figure out how to reach the numLines by reading the docs and didn’t find anything of value. Thankfully this blogpost fixed that!
(So odd this number isn’t exposed by default.)

Reply

5 peterd September 11, 2008 at 11:39 pm

Johan,

You can file an enhancement request to make the property public at http://bugs.adobe.com/flex/. That won’t guarantee that it will happen, but it will at least show Adobe there is interest.

It may possibly have been made internal if it was “expensive” to calculate, so they didn’t want to expose it too easily. You could also try extending the TextArea control and making this value public in your custom component.

Peter

Reply

6 mikek October 22, 2008 at 8:56 am

Looks like you extended TextArea so, should be able to use just “this.textField.numLines”

Reply

7 Karthik February 2, 2009 at 7:08 pm

Hi,

Can you please give me an example of how to assign “tabStops” format property to textarea control?

Thanks,
Karthik

Reply

8 Peter deHaan February 3, 2009 at 8:31 am

Karthik,

Try something like the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="TextArea_tabStops_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init1():void {
                var tf:TextFormat = new TextFormat();
                tf.tabStops = [100, 200, 300, 400];

                textArea1.mx_internal::getTextField().setTextFormat(tf);
            }

            private function init3():void {
                textArea3.htmlText = "<TEXTFORMAT TABSTOPS='100,200,300,400'><P>The quick<TAB/>brown fox<TAB/>jumps over<TAB/>the lazy<TAB/>dog.</P><P>The<TAB/>quick brown<TAB/>fox jumps<TAB/>over the<TAB/>lazy dog.</P></TEXTFORMAT>";
            }

            private function init4():void {
                var tf:TextFormat = new TextFormat();
                tf.tabStops = [100, 200, 300, 400];

                textArea4.mx_internal::getTextField().defaultTextFormat = tf;
                textArea4.text = "The quick\\tbrown fox\\tjumps over\\tthe lazy\\tdog.\\nThe\\tquick brown\\tfox jumps\\tover the\\tlazy dog.";

                textArea4.validateNow();
                trace(textArea4.htmlText);
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="textArea1"
            condenseWhite="true"
            width="500"
            creationComplete="init1();">
        <mx:htmlText>
            <![CDATA[
                <p>The quick<tab/>brown fox<tab/>jumps over<tab/>the lazy<tab/>dog.</p><p>The<tab/>quick brown<tab/>fox jumps<tab/>over the<tab/>lazy dog.</p>
            ]]>
        </mx:htmlText>
    </mx:TextArea>

    <mx:TextArea id="textArea2"
            condenseWhite="true"
            width="500">
        <mx:htmlText>
            <![CDATA[
                <TEXTFORMAT TABSTOPS="100,200,300,400"><P>The quick<TAB/>brown fox<TAB/>jumps over<TAB/>the lazy<TAB/>dog.</P><P>The<TAB/>quick brown<TAB/>fox jumps<TAB/>over the<TAB/>lazy dog.</P></TEXTFORMAT>
            ]]>
        </mx:htmlText>
    </mx:TextArea>

    <mx:TextArea id="textArea3"
            condenseWhite="true"
            width="500"
            initialize="init3();" />

    <mx:TextArea id="textArea4"
            width="500"
            initialize="init4();" />

</mx:Application>

Peter

Reply

9 sascha/hdrs March 28, 2009 at 2:32 am

Flex 3 has the textHeight property now which does the same. However it is still not correct when using HTML Text. I suppose it’s because of the html tags used in the text which are not part of the visible text. It would be great if there was a solution to solve that problem!

Reply

10 Ole Simon April 6, 2009 at 6:52 am

Hi – im working on a project where i have to determin the number of lines and find the best fontsize in a multiline textarea.
When i try to get the number of lines as you show above, I somethimes get wrong values. I can se in flex that its 2 lines, and numLines give me 3 lines.
Any help of why this is happening? It happens even if a use callater after textchange or fontchange.

Reply

11 kaushal August 18, 2009 at 12:12 am

Really helpful example, I can end my search here. But I want to find a string of particular line, I am using TextArea, and have wordWrap=true, so using above code I can find number of line, but not the string contain each line.

Please help me.

Thanks

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: