Posted by: edsyrett | 23 April 2009

Expanding TextArea Component


I’ve been working with printing with Flex for a while now, and hit a problem where my TextArea controls weren’t showing all their text when they were printed.

The problem arises because it’s difficult to figure out how many lines of text the TextArea will show, and hence how high to make the TextArea control.  My first attempt involved searching through the text for \r\n etc and adding the height of one text line for each of them.  That won’t work if the text has automatically wrapped within the control.

Why not use the textHeight property of TextArea, you’re asking?  Well, that’s what I tried, and I would have finished a lot quicker if it was that easy.  But unfortunately there are some bugs with the calculations that produce the textHeight.  One of them is described here.

I found some helpful stuff on the web, and the most promising page was from a bunch of guys called idletogether.com, here.  So I used that and created a test app that demonstrates a control based on TextArea, which will automaticlly expand or shrink as you edit the text.  It will also print properly by sizing itself according the length of text in it.  My app is here.

Advertisements

Responses

  1. Thanks for the component!

    However I have a little problem with the height of the TextArea when I bind the text to a String variable that is already initialized upon the creation of the TextArea. It seems as if the height cannot be measured correctly if it´s prefilled with text. The TextArea is much higher than it should be.

    private var _price:String;
    [Bindable (event=”priceChange”)]
    public function get price():String
    {
    return _price;
    }
    public function set price(price:NLTextBox):void
    {
    _price = price;
    dispatchEvent(new Event(“priceChange”));
    }

    I hope you can help me.

    Sebastian

    • Hi Sebastian,

      I have reproduced your problem, so my mxml now looks like this

      <cp:ExpandingTextArea x=”10″ y=”10″ id=”textArea” width=”400″ text=”{_paragraph}”/>

      The ExpandingTextArea component does indeed appear much too high. I’ll have a look later on today to see if I can fix it.

      Thanks for looking.

      Cheers,

      Ed.

  2. I have now updated the test app – it now shows two ExpandingTextArea components. The first one is set in the creationComplete event handler as previously. The second is set by binding the text property to _paragraph, which is the one Sebastian found to resize the ExpandingTextArea way too big.

    Thanks for looking.

    Ed.

  3. I’m using Flash Builder 4.5 with the Flex 4.5.1 SDK. Your example works great, but I’m unable to read dataChange or textInput events from it. When I first tried implementing the class, Flex gave me an error regarding “implements IIMESupport” in the class declaration:

    Interface method get enableIME in namespace mx.core:IIMESupport not implemented by class

    So I took IIMESupport out, but I wonder if this is maybe why the events don’t work?

    • Never mind, I figured it out. Bubbling on the events was set to false for some reason.


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

Categories

%d bloggers like this: