Flex TextArea auto height re-sizable component

Flex TextArea custom component which has auto height feature based on the content height.

It extends the TextArea component & updates the height based on the scroller content height.

package utils
{
   import spark.components.TextArea;
   public class TextAreaAutoHeight extends TextArea
   {
      public function TextAreaAutoHeight()
      {
          super();
      }

      override protected function updateDisplayList(unscaledWidth:Number,     unscaledHeight:Number):void
      {
          super.updateDisplayList( unscaledWidth, unscaledHeight );

          this.height = scroller.viewport.contentHeight + 2 ;

           if( this.height < minHeight )
               this.height = minHeight;

           if( this.height > maxHeight )
               this.height = maxHeight;
       }
    }
}


Screenshot:

Spark multi column form control

Using nested FormItem we can achieve multi column form control in flex spark form component.

The above figure shows the multi column spark form.

Attached the code below.

Flex text mouse over tooltip dynamic for a part of text

Well, i had to develop custom functionality which has to give the mouse over tooltip on a part of text in a text field dynamically.

Could not find direct solution for this, but after my research got the solution.

Main application code:

Hide/Show the flex elements by id in action script 3

Hide/Show any flex element by ID in action script. Toggle any element in flex.

The below example gives the toggle of HBox on click of the label.

Here is the code to achieve the toggle functionality of any flex element in actionscript 3.

Have added the comments in the code to explain use of each element.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
//Add event listner to any element in flex to call the below function to hide/show the HBox by id

//Say on click of the lable call the handlerFunction.
public function handlerFunction(event:Event):void {
//get the id of the element by getting the data of the calling element event
var id:String = event.currentTarget.data.toString();
//get the handle of parent element. i.e. VBox in the below code
var parentVBox:VBox = event.currentTarget.parent as VBox;
//get the handle to the element by id
var hBoxtoShow:HBox = parentVBox.getChildByName(id) as HBox;
//code to toggle the HBox (hide/show)
if (hBoxtoShow.includeInLayout) {
hBoxtoShow.includeInLayout = false;
hBoxtoShow.visible = false;
} else {
hBoxtoShow.includeInLayout = true;
hBoxtoShow.visible = true;
}
}

public function init():void {
//add HBox id to the lable data. This is used for dynamic hide/show of multiple elements
labelID.data = "hideHBox";
labelID.addEventListener(MouseEvent.CLICK , handlerFunction);
}
]]>
</mx:Script>
<mx:VBox id="mainVBox">

<mx:Label text="Click me" id="labelID"/>
<mx:HBox id="hideHBox">
<mx:Text text="Sample HBox filed to hide this on click of the label"/>
</mx:HBox>

</mx:VBox>
</mx:Application>


Flex progress bar while loading the xml data using URLLoader

Show progress bar in flex while loading the xml data using URLLoader class.

For progress bar display, have a separate MXML component called LoadingBar

MXML Main Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:net="flash.net.*" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[

import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
import flash.geom.Point;
import mx.containers.HBox;
import mx.controls.Spacer;
import mx.containers.*;
import mx.controls.*;
public var loadingBar:LoadingBar;

public function init():void{
loadingBar=LoadingBar(PopUpManager.createPopUp( this, LoadingBar , true));
loadingBar.progressBar.source = urlLoader;
PopUpManager.centerPopUp(loadingBar);
urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

urlLoader.load(new URLRequest("http://localhostdatasource"));
}

private function xmlLoaded(event:Event):void {

PopUpManager.removePopUp(loadingBar);

}
]]>
</mx:Script>

<net:URLLoader id="urlLoader" />

</mx:Application>

MXML Loading Bar component code

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Progress"
width="300" height="100" borderThicknessLeft="1" styleName="loadingStyle"
borderThicknessRight="1" borderThicknessBottom="1" borderThicknessTop="1" >

<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:ProgressBar id="progressBar" label="Loading Data..." mode="event" labelPlacement="center" />
</mx:VBox>

</mx:TitleWindow>

The Flex Project looks like below image.

Flex & ActionScript 3 tips useful for code optimization & performance

There are many useful tips to optimize the flex & actionscript code.

The below site gives some of the tips to optimize flex code while developing.

ActionScript 3.0 and Flex optimization techniques and practices