AutoSizing Flex Mobile spark textarea component

Question

I want to make my mobile spark textarea component to wrap all content. I found out mx_internal way of doing this but I'm not able to call mx_internal::getTextField().numLines method - there's no such... Anybody who has done this before?

Paulo

If you found a way to do it; but it doesn't work I think you'll have to share some code so we can diagnose why it doesn't work. – Premillenarian

I tried to assign heightInLine={NaN} - that works in previous versions but not in 4.6. And Another way that I tried was creating new skin without scrolls but IDE gave me an error that it couldn't find scrollers in definition. So I'm asking for any other suggestion? – Paulo

That is probably because 4.6 uses StageText instead of the Flash TextField. In 4.6 if you revert to the old skins, I bet it'll work. I don't have time to look up the specific skin names, but I think I wrote about it on the Flextras Blog recently. – Premillenarian

Answer 1

Here is a solution for mobile:

for(var i:int=0; i < StyleableTextField(txt_genel.textDisplay).numLines; i++) {
        ta_height += StyleableTextField(txt_genel.textDisplay).getLineMetrics(i).height;
}
txt_genel.height = ta_height;

Paulo

Answer 2

Here a solution with little custom TextArea class, there's comments to explain a little more.

package
{   
    import mx.events.FlexEvent;

import spark.components.TextArea;
import spark.components.supportClasses.StyleableStageText;
import spark.events.TextOperationEvent;

public class CustomTextArea extends TextArea
{

    private var _lineNumber:int = 1;
    private var _padding:int;
    private var _minHeight:int;

    public function CustomTextArea()
    {
        super();

        addEventListener(FlexEvent.CREATION_COMPLETE, function setBehaviour(event:FlexEvent):void
        {
            //minHeight to prevent textarea to be too small
            _minHeight = height;
            //padding between textarea and text component inside to calculate line number
            _padding = ((textDisplay as StyleableStageText).x - x) + (width - (textDisplay as StyleableStageText).width);
            //listener for text changing
            addEventListener(TextOperationEvent.CHANGE, setHeight);
        });
    }

    private function setHeight(event:TextOperationEvent):void
    {
        //line number is textwidth divided by component width
        _lineNumber = (((textDisplay as StyleableStageText).measureText(text).width + _lineNumber * _padding) / width) + 1;
        //text height is line number * text height
        var newHeight:int = _lineNumber * (textDisplay as StyleableStageText).measureText(text).height;
        //if new height > min height, set height
        if (newHeight > _minHeight)
            height = newHeight;
    }
}
}

Hope this will help.

EDIT : With a big number of lines, the TextArea's height is rising too much. Should be manage.

Latium

it throws an exception at line _padding = ((textDisplay as StyleableStageText).x - x) + (width - (textDisplay as StyleableStageText).width); the exception is: "Cannot access a property or method of a null object reference." – Paulo

Here's how I use it in mxml: <component:CustomTextArea id="txt_genel" width="100%" skinClass="spark.skins.mobile.TextAreaSkin" textAlign="left" fontFamily="_typewriter" contentBackgroundAlpha="0" borderVisible="false" editable="false" /> – Paulo

And an action script where I assign a text to it: StyleableTextField(txt_genel.textDisplay).htmlText = ozet['genelbilgiler'] as String; – Paulo

And one more thing: when I commented out that padding line and removed padding references in setHeight calculations it did not wrap whole text - so that it behaves like any text area - no difference – Paulo

I've found a simple solution..Thanks anyway! – Paulo

Okay, glad for you ! I'm sorry to not have seen your comments earlier but if you've got the solution, that's perfect :) Your exception was maybe due to your way of using my component because I've tested it with the minimum attributes. – Latium

Just thinking about it, the reason of the 'null object reference' was your textDisplay is a StyleableTextField, mine was StyleableStageText. – Latium