AutoSizing Flex Mobile spark textarea component

8
votes

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?

2
apache-flexflex4flex4.5flex-mobile
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. - JeffryHouser
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? - Zaur Guliyev
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. - JeffryHouser

2 Answers

3
votes

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;
0
votes

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.