FLEX{er}

Andrei Ionescu | 06.02.09 | 19 Comments

If you need and auto resized text area then you are in problems. As far as I know there is no property to use to make a text area auto resizeable.

I really needed an auto resizable text area so I started searching and studying. I found that we can use mx_internal properties, variables and methods to accomplish different things including the auto resize.

In the initial idea found here the auto resize was done in an external function that was not part of the component.

To make it easier to use I created a component named AutoResizableTextArea which is a TextArea component with autoResizable property available to be set.

Now the an example of how the AutoResizableTextArea component works:

Bellow are two code listings.

One is the main application…

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:flexer="com.flexer.*">
    <mx:TextArea id="inputText"  x="10" y="61" 
        width="444" height="150"/>
    <flexer:AutoResizeableTextArea  id="respText"  
        x="10" y="219" width="222" 
        autoResize="true"
        text="{inputText.text}"/>
    <mx:Text x="10" y="10" text="Put some text in this text 
area and the one bellow will resize according to the &#xa;qunatity 
of text insered. You can copy text from anywhere (i used text 
from &#xa;http://www.lipsum.com/feed/html). You can even copy this text." 
        width="444" height="49"/>
</mx:Application>

… the other is the component.

<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Script>
          <![CDATA[
 
               // auto resize setting
               private var _autoResizable:Boolean = false;
 
               // getter
               [Bindable(event="changeAutoResize")]
               public function get autoResize():Boolean
               {
                    return _autoResizable;
               }
 
               // setter
               public function set autoResize(b:Boolean):void
               {
                    _autoResizable = b;
                    // if the text field component is created
                    // and is auto resizable
                    // we call the resize method
                    if (this.mx_internal::getTextField() != null && 
                         _autoResizable == true)
                         resizeTextArea();
                    // dispatch event to make the autoResize 
                    // property bindable
                    dispatchEvent(new Event("changeAutoResize"));
               }
 
               // setter override
               override public function set text(value:String):void
               {
                    // calling super method 
                    super.text = value;
                    // if is auto resizable we call 
                    // the resize method
                    if (_autoResizable)
                         resizeTextArea();
               }
 
               // resize function for the text area
               private function resizeTextArea():void
               {
                    // initial height value
                    // if set to 0 scroll bars will 
                    // appear to the resized text area 
                    var totalHeight:uint = 10;
                    // validating the object
                    this.validateNow();
                    // find the total number of text lines 
                    // in the text area
                    var noOfLines:int = this.mx_internal::getTextField().numLines;
                    // iterating through all lines of 
                    // text in the text area
                    for (var i:int = 0; i < noOfLines; i++) 
                    {
                         // getting the height of one text line
                         var textLineHeight:int = 
                             this.mx_internal::getTextField().getLineMetrics(i).height;
                         // adding the height to the total height
                         totalHeight += textLineHeight;
                    }
                    // setting the new calculated height
                    this.height = totalHeight;
               }
          ]]>
     </mx:Script>
</mx:TextArea>

Plese take note of the following thins: is autoResizable property is true the height property seems to be ignored.

Hope this will help many of you in your future projects.

Share and Enjoy:

AutoResizeTextAreaApp

AutoResizableTextArea_sources

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Tags: ActionScript, autoresize, MXML, textarea

This post was written by Andrei Ionescu

Views: 10780

19 Comments

On 02.06.09 Palleas wrote these pithy words:

It rox ! Thx !

On 02.06.09 Adobe Flex Tutorial wrote these pithy words:

Hey,
Great work . i wrote a little review of your component (french):
http://www.flex-tutorial.fr/2009/02/06/composant-flex-textarea-qui-sadapte-automatiquement-a-la-taille-du-texte/

On 02.06.09 Flo W. wrote these pithy words:

Hey,

nice example and very less code for this functionality!
It would be a nice Flex cookbook post, too. Maybe you would like to create one for the flex community?!
http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=2

Best regards
Flo

On 02.22.09 Carlos wrote these pithy words:

hey,
i’m trying to use your component, but its heigth is always about +- 15 pixel only.
i’m using htmlText and a dynamic text as bellow.

Do you have any idea how to correct it?

On 02.22.09 Carlos wrote these pithy words:

hi,

after a little i noticed that you didn’t managed htmlText, so i added this code to your component

override public function set htmlText(value:String):void
{
    super.htmlText = value;
    if (_autoResizable)
        resizeTextArea();
}

On 02.23.09 Andrei Ionescu wrote these pithy words:

Great comment Carlos! Thank you for completing the component.

On 05.25.09 Steven wrote these pithy words:

Thank you

On 06.16.09 kevin wrote these pithy words:

Awesome – thanks

On 07.02.09 M wrote these pithy words:

Thanks man. You are my personal hero!

On 07.08.09 JP wrote these pithy words:

Thanks for the example, however, I’m getting stuck on running this from an AS3 class (instead of your example where it’s run from the main.mxml). I’ve tried several times, but I keep running into the mx_internal as being null. Any suggestions for running this from a class (where the text area is defined at run-time)? Thanks!

On 07.08.09 Andrei Ionescu wrote these pithy words:

Hello JP. The component needs to be added to the stage. In my opinion that is your problem.

On 07.08.09 JP wrote these pithy words:

The only problem with adding it to my stage is that I am initializing, adding content, and setting size dimensions in AS, not on the stage. It’s done in an objectFactory that’s driven by data, so I figured a workaround (thanks to Jer) that encompasses setting the .visible = false, adding an event listener to the object, then after render, callLater(makeVisible). It’s sloppy, but works, and the customer is happy (which is the most important part). Another thing I did was actually create a textField in my AS, assign it all the variables, then get the measurements and transfer to my textArea. It almost worked, but kept clipping a bottom line, so in my listener, I then try the measurement again, and add for that extra row.

A different question, but if I add an image to the text area (swf/jpg/png/etc), how can I get that images dimensions before adding it to the stage? Is it possible? Thanks in advance for any suggestions!

On 09.24.09 Ed Syrett wrote these pithy words:

This is great, but unfortunately, if you type into the AutoResizeableTextArea and it overflows, you get scroll bars.

My version allows you to type into it, and it will automatically expand as you add more text, and it won’t show a vertical scrollbar. The motivation for me to produce this solution was actually for printing, where obviously scrollbars are not an option. My test app allows you to print the TextArea, which will always print with all the text visible.

http://edsyrett.wordpress.com/2009/04/23/expanding-textarea-component/

On 09.24.09 Andrei Ionescu wrote these pithy words:

Thanks for your expandable text area. Nice feature.

On 12.03.09 Alok wrote these pithy words:

Thanks for your help dude

On 12.07.09 Rui Esteves wrote these pithy words:

Hi,

First of all i would like to thank you for sharing this code with me and the world.

I use your component in a situation where the Text Area was created and added to the container on run time and i had a small glitch. It calculated the double the height i needed.

I made this a little change to the code…

Add

override protected function updateDisplayList(unscaledWidth:Number, 
    unscaledHeight:Number):void
{					
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    // if is auto resizable we call 
    // the resize method
    if (_autoResizable)
        resizeTextArea();
}

Remove

// setter override
override public function set text(value:String):void
{
    // calling super method 
    super.text = value;
}

On 12.07.09 Andrei Ionescu wrote these pithy words:

Rui,

thank you very much for your help. Any improvement is important this way we can create better application. I’m sorry you had to send the comment twice (because of wordpress limitations) and because of that I decided to mix both of them together to have a complete comment. Hope it is ok with you. Again, thanks.

On 12.07.09 Rui Esteves wrote these pithy words:

Andrei,

No problem, its better this way.

On 01.28.10 Mediamuis wrote these pithy words:

Hi, first of all thanx for this great example,

I’m strugling witch the fact that I want to copy text in the textArea by actionscript. The problem is that the TArea is not resaing. Only when I put a keystroke in the tArea the resize is triggered. Does anyone know a sollution for this.

Mark

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

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

SecurityError: Error #3015: Loader.loadBytes() is not permitted to load content with executable code.

Deep Linking with SWFAddress and IE6 problem