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

The TextArea component was updated in Flex 4.6 to use the native StageText(StyleableStageText skin) instead of the previous flash TextField(StyleableTextArea skin). I wanted to just use the TextArea component to display multi-line text to the user. The problem was that the height of the component was not being set to display all of the content when I integrated this component into the mobile app. The landscape view especially was cropping off the text which was to be displayed.

After a few googles, this post on stackoverflow discussed how to implement the TextArea component so that all the text would be displayed to the user.

The quick synopsis is as follows:

  1. Setup your TextArea component to use the TextAreaSkin class
  2. Add a creationComplete event on the view that will call a method to calculate the height of the component
  3. Calculate the height of the TextArea component in the creationComplete method

My TextArea component was declared thusly:

<s:TextArea id="legendText"
				width="90%"
				skinClass="spark.skins.mobile.TextAreaSkin"
				editable="false"
				text="{data.legendText}"/>

I added a creation complete event to the mobile view:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		creationComplete="view1_creationCompleteHandler(event)"
		title="Legend">


I finally defined the creation complete handler method in the script section of the view:

<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			import spark.components.supportClasses.StyleableTextField;
			
			protected function view1_creationCompleteHandler(event:FlexEvent):void
			{
				//set height of text area based on numlines
				var ta_height:int;
				for(var i:int=0; i < StyleableTextField(legendText.textDisplay).numLines; i++) {
					ta_height += StyleableTextField(legendText.textDisplay).getLineMetrics(i).height;
				}
				legendText.height = ta_height;
			}
			
		]]>
	</fx:Script>

The next step is to test this change when the mobile device is rotated from the portrait view to the landscape view (and vice versa) and is discussed in Part 2

Advertisements

3 Responses to Flex 4.6 Mobile Resizing TextArea Component to Fit Content – Part 1

  1. Shahzad says:

    Excellent work, It helped fixed my problem. Thanks buddy

  2. davee44 says:

    if you set that skin to the TextArea (spark.skins.mobile.TextAreaSkin), then you can simply set the autosize to it without counting line heights:

    ( textArea.textDisplay as StyleableTextField ).autoSize = TextFieldAutoSize.LEFT;

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: