Flex 4.6 Mobile Resizing TextArea Component to Fit Content – Part 2

Now that the view sets the height of the TextArea component after it has been created as discussed in Part 1, what do we need to do when the user rotates the view from portrait to landscape and back again. The TextArea component continues to reuse the number of lines of text from the previous orientation view. We need to force the component to resize itself and then recalculate the number of lines to display so we can reset the height to the appropriate value.

I updated the view to listen for the resize event.

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx" 
		creationComplete="view1_creationCompleteHandler(event)"
		resize="view1_resizeHandler(event)"
		title="Nutrition In Medicine - About Us">

Then I defined the resize method which is called on a resize event thusly:

protected function view1_resizeHandler(event:ResizeEvent):void
			{
				//force component to recalculate its height
				aboutText.invalidateSize();

				//listen for completion of request
				aboutText.addEventListener(UpdateCompleteEvent.UPDATE_COMPLETE,taUpdateComplete);
			}

The TextArea component will send an UpdateCompleteEvent when it has finished refreshing its layout, and we will then call the taUpdateComplete function. This function will call the textAreaResizing method to calclulate the new height and then remove the eventListener for the UpdateCompleteEvent. Without the invalidateSize() request on the TextArea component, the numLines returned stays constant.

protected function taUpdateComplete(event:Event):void
			{
				this.textAreaResizing();
				aboutText.removeEventListener(UpdateCompleteEvent.UPDATE_COMPLETE,taUpdateComplete);
			}
Advertisements

One Response to Flex 4.6 Mobile Resizing TextArea Component to Fit Content – Part 2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: