We love choice

Fx{r} is trying to start the Fx{r} Community! Please join our group on Adobe Groups following this link: http://fxr.groups.adobe.com.
Fx{r} is now on Twitter too. Follow us @ twitter.com/fx_r!
«
»

ActionScript, Components, How to, MXML

Auto Resizable Text Area Component

Andrei Ionescu | 06.02.09 | 28 Comments

Google Buzz

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:
  • Twitter
  • Google Buzz
  • LinkedIn
  • Google Bookmarks
  • del.icio.us
  • Digg
  • Sphinn
  • blogmarks
  • Reddit
  • StumbleUpon
  • Facebook
  • DZone
  • FriendFeed
  • Yahoo! Buzz
  • Yahoo! Bookmarks
  • Slashdot
  • MySpace
  • Add to favorites
AutoResizeTextAreaApp
AutoResizableTextArea_sources




Tags: , , ,

This post was written by Andrei Ionescu

Views: 41820

related

28 Comments

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="">

:

:


«
»