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?

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, May 16 '12 at 17:43
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, May 17 '12 at 05:38
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, May 17 '12 at 11:20

score 3 · Accepted Answer · answered May 21 '12 at 09:31

3

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;

answered May 21 '12 at 09:31

Zaur Guliyev

3,994
7
26
42

jpicard · Answer 2 · 2012-05-20T14:55:55.860

0

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.

edited May 20 '12 at 14:55

answered May 20 '12 at 14:33

jpicard

56
3

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." – Zaur Guliyev May 21 '12 at 09:11
Here's how I use it in mxml: – Zaur Guliyev May 21 '12 at 09:12
And an action script where I assign a text to it: StyleableTextField(txt_genel.textDisplay).htmlText = ozet['genelbilgiler'] as String; – Zaur Guliyev May 21 '12 at 09:12
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 – Zaur Guliyev May 21 '12 at 09:15
I've found a simple solution..Thanks anyway! – Zaur Guliyev May 21 '12 at 09:32
1

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. – jpicard May 21 '12 at 10:26
Just thinking about it, the reason of the 'null object reference' was your textDisplay is a StyleableTextField, mine was StyleableStageText. – jpicard May 23 '12 at 10:10

AutoSizing Flex Mobile spark textarea component

2 Answers2