ExpandingTextArea component

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I just created a component called ExpandingTextArea. This component is a multiline TextField component (ie. textarea), which height increases/decreases automatically when user edits the text. Test this
demo
 to see how it works. Also,
source codes
 and Vaadin 6.2 compatible
jar
 are available.

-Henri

2

Interesting component. My project still didn’t need any TextArea component but I know I’ll need one (I was just waiting for your component to come out to add it to my project =D).

Thanks! I’ll look it as soon as I can (very busy atm).

3

Just to make sure you know that you can create a multi-line TextField by setting rows for the component:

TextField tf = new TextField();
tf.setRows(3);

A multi-line TextField is rendered as a HTML textarea on the client-side.

4

Oh no, I knew that I could have a TextArea just not with auto-resize.

5

Nice component. I’m struggling with a few issues, though.

I have a Form, that contains a Table. Two of the columns in my Table could use this expanding text area component. I have tried, but it has some quirks.

First, is there a way to set a max rows so it won’t grow any bigger? This would prevent a really long one from making a row in my table look too overpowering.

Second, if I don’t Table.setPageLength(), my Table gets very big in the Form, creating scrollbars such that my form’s controls are no longer visible. If I do set it like how I previously tried, setting the table size to the number of entries with:

myTable.setPageLength(myTable.size()+1);

then my Table is too small, I think because it doesn’t take into account the size of the components in each row, so since each ExpandingTextArea is at least 2 rows, fewer than desired are shown. Not sure if that’s how Table.setPageLength() works, but it doesn’t seem to “care” about the size of the components in its rows.

Thoughts?

6

Unfortunately, the component doesn’t have such functionality currently. But I know it would be very useful.

If I understand correctly your problem, Table doesn’t support very well rows that height is different. This is because the lazy loading support of Table. The height of rows must be the same to avoid irrating bouncing when scrolling and lazily drawing new rows.

-Henri

7

Thanks for the answers. Because I’m using this inside a Table, I just reverted to a regular TextField with 2 rows, which actually displays 3, which is needed to make the scrollbars appear. The fixed size does make the Table rendering clean, and in our case, it’s not too bad.

The downside I’m finding now is that when the Table is in read-only mode, the multi-row TextField is reduced to a single line of contents, so a user cannot see everything in the TextField; they have to be in Edit mode to get the scrollbars. It might be nice if the Table with setRows could somehow be a scrollable DIV when it’s multi-row so that its contents can be seen even in read-only mode. Regardless, this isn’t an ExpandingTextArea issue, which is a nice component that seems to work well when used in a more traditional way (not a columm in a table).

8

Hello Henri, excellent component indeed!! For my application I need text field to expand horizontally and not vertically. I looked into the source but being new to GWT I can’t really make it work. Is this possible for you to release the component so it expands horizontally?

Regards,
Peeyoosh

9

Hi Henri,

I tried to use this component in Vaadin 6.5.6 (and the newer nightly builds) with FireFox, Safari and Chrome and in all browsers I get an endless Javascript loop (with the browser asking me to keep waiting or to kill the script).

Have you seen this behavior before?

EDIT: a minimal example with Vaadin 6.5.6 works fine, I’ll have to check my own code

Thanks,
Johannes

10

Hi, Henri.
Can you explain me,please, why your component cann’t be with one row?
I see from source code that there is no way to set ExpandingTextArea component setRow(1)
but don’t understand why.

11

Not sure if there is any particular reason for this. But I’ll keep this in my mind and try to release a version of ExpandingTextArea supporting setRow(1) at some point.

-Henri

12

I’m getting the same infinite js loop error with Vaadin 6.8.6. What minimal configuration were you able to get working? I’m also using css fonts loaded from file.

My code is:

	expandingTextArea_1 =
			new ExpandingTextArea(
					"Expand Me",
					"Testing 1 2");
	expandingTextArea_1.setImmediate(true);
	expandingTextArea_1.setWidth("320px");
	expandingTextArea_1.setHeight("-1px");
	verticalLayout_1.addComponent(expandingTextArea_1);
13

Hello,

Could you please add support of max rows to the Vaadin 6 version of your plugin, we cannot move to new Vaadin 7 in nearest future

Thanks,
Michael

14

Our customer wants bigger text fields in tables. For an example of how to replace the one line box, I looked at this:
http://dev.vaadin.com/svn/doc/book-examples/trunk/src/com/vaadin/book/examples/component/TableExample.java

However, adding TextArea to items wreaks havoc: now the createField method of the FieldFactory appears to be called to often, causing validation to fail. By accident, I discovered that it may suffice to change the createField method.

createField now returns a text area. (It might have been a TextField? The book says “TextArea is a multi-line version of the TextField component”, but the API for TextField says “…both multiline and single line modes, default is one-line mode.”). I changed the row count to 3, but that didn’t do anything. What I like is the ExpandingTextArea, as demo-ed.

So what do I need to do to get ExpandingTextArea in a Vaadin 7.1.11 application? Do I really have to download sources and compile them? How do I merge the widget stuff with our application? Is there a manual?

Any help will be appreciated.

15

There is a Vaadin 7 version in the
directory

16

Thank you, Marius. Google did not tell me about the directory :wink:

I’m using Maven, but I tried the JAR download for fun. Surprisingly, that led me to usage information, including a reference to useful information in the help.

Looks like you have put me back on track!

17

In ​Vaadin 7.1.13 not working… Can you this repair please?

18

In Vaadin 7.3.6 , it works as an ordinary textArea.

19

Just recompile the widgetset and it should work.

20

Hi,

If
ExpandingTextArea
component created as

ExpandingTextArea area = new ExpandingTextArea( "My Caption" );

it does not call
registerRpc
method and Vaadin log warning:

Warning:   Ignoring RPC call to org.vaadin.hene.expandingtextarea.widgetset.client.ui.ExpandingTextAreaServerRpc.setRows in connector .... as no RPC implementation is registered

Thanks,
Dmitry