Flex/Flash Developer - by Ankur Arora

Hi,
There is a big increase in the popularity of Flex in the recent time and all of us knows when more people indulge in something the demand would also get increased. Few days back while browsing through forums I found that people asking for autoresize-able text box in Flex so, I decided to create an example for our community.

To start with we need to create a new MXML component file where default component should be TextArea. I have created the similar file using below code.

Code:

<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Script>
          <![CDATA[ 
               // auto resize setting
               private var _autoResizable:Boolean = true;
     
               // 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();
               }
               
               // setter override
               override public function set htmlText(value:String):void
               {
                    // calling super method 
                    super.htmlText = value;
                    // if is auto resizable we call 
                    // the resize method
                    if (_autoResizable)
                         resizeTextArea();
               }

 
               // resize function for the text area
               public 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
                    
                    this.mx_internal::getTextField().mouseWheelEnabled = false;
                    
                    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
     totalHeight += textLineHeight;                    
                    this.height = totalHeight;
                    
               }
          ]]>
     </mx:Script>
</mx:TextArea>

To use above component in your project you need to call this component similar to below code.

Usage:

<mx:Application 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" 
 xmlns:com="ankur.classes.com.*" creationComplete="onCreationComplete()">
 <mx:Script>
  <![CDATA[
   private function onCreationComplete():void
   {
    txtResizeText.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus, urna ac vestibulum dapibus, massa sem tincidunt tellus, nec consectetur dui sapien eget massa. Aliquam erat volutpat. Nulla pretium rhoncus neque, vel ultricies purus feugiat vitae. Morbi non tristique nisi. Vivamus id est lacus, vel tincidunt leo. Praesent eu aliquet ipsum. Aliquam non hendrerit odio. Nullam ut pulvinar ante. Integer porttitor neque eu quam condimentum cursus. Praesent ultricies imperdiet nisi non consectetur. Duis sit amet nibh mollis urna iaculis tempor ac eget mi. Duis sodales dui vel metus sollicitudin nec tristique enim mattis. Suspendisse potenti.Curabitur vitae gravida nisi. Phasellus accumsan orci sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Donec euismod consequat velit, ut aliquet justo suscipit a. Cras eu mauris tellus, egestas suscipit velit. Integer volutpat suscipit sagittis. Etiam vitae justo eget leo posuere semper a non nunc. Donec non accumsan erat. Aliquam dictum luctus urna. Pellentesque tellus nibh, porttitor non adipiscing at, sagittis vel turpis. Vivamus consequat mi eu diam suscipit rutrum. Cras iaculis pellentesque urna, eu rutrum odio vulputate ut. Sed nibh elit, rutrum sit amet imperdiet sed, euismod in lorem."
   }
   
   private function onChange():void
   {
    txtResizeText.resizeTextArea();
   }
  ]]>
 </mx:Script>
 
 <com:ResizeableTextarea width="400" id="txtResizeText" change="onChange()"> </com:ResizeableTextarea>
</mx:Application>

You can download working version of above code from here.

I hope this post will help you create Resizeable Textarea for your project. As always comments are always welcome. So please keep posted them.

Thanks
Ankur Arora