ExpandingTextArea component

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).

Bruno Ferreira Pinto: 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).

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.

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

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?

David Wall: 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.

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

David Wall: 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?

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

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).

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

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

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.

Roma Miroshnichenko: 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.

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

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);

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

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.

There is a Vaadin 7 version in the directory

Thank you, Marius. Google did not tell me about the directory ;-)

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!

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

In Vaadin 7.3.6 , it works as an ordinary textArea.

kadireray doganlar: In Vaadin 7.3.6 , it works as an ordinary textArea.

Just recompile the widgetset and it should work.
 

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

Dmitry Smirnov: 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

 

Hi Dmitry,

Thanks for reporting this. I created a ticket about this (https://github.com/henrikerola/ExpandingTextArea/issues/6). And I am planning to release a version that contains the fix in a couple of days.

-Henri
 

Henri, is there a way to toggle the expanding effect and reset to initial rows set?

By default, I want it to expand, but when the user scrolls the UI, I want it to go a fixed row (part of my responsive UI)

Guys,

am I doing something wrong with the add-on, because I cannot make it work? Here's what's being done with Eclipse project:

1) Create new Vaadin 7 project (I am using version 7.5.4)
2) Copy the latest (v. 1.0.1) JAR to WEB-INF/lib and add the JAR to the project build path
3) Add ExpandingTextarea component to the layout, something like:

final ExpandingTextArea expandingTextArea = new ExpandingTextArea();
expandingTextArea.setImmediate(true);
expandingTextArea.setWidth("300px");
content.addComponent(expandingTextArea);

4) Compile widgetset and then compile theme
5) Run the application

When I am running the application, the textbox appears as standard TextArea which has got style "v-textarea" associated with it. I then tried to tweak the tag style to "v-expandingtextarea" with FireBug and it seems to become responsive (i.e. the style changes to "v-expandingtextarea-focus" and the server side component starts to respond).

Anyhow, it seems that the new component does not get the right styles at the beginning and fails to work. Is there something else you've done to make it work as I can see some responses here indicating that?

Alright, after some trial and error I noticed that I did not include the compiled widgetset in my main UI. So, for others wrestling with this component, here's what I did to get it working.

Add the widgetset declaration statement to the servlet configuration, i.e.

@VaadinServletConfiguration(productionMode = false, ui = MainUI.class, widgetset = "com.example.MyWidgetset")

where "com.example.MyWidgetset" is pointing to the "MyWidgetset.gwt.xml" file in your project package.
 

Idea is good, but it doesn't work very well... new lines when not needed and not when text reach end of line, no settings for default number of rows (I don't need two rows when I have text on one row), font size problems...

Milan Šiler: Idea is good, but it doesn't work very well... new lines when not needed and not when text reach end of line, no settings for default number of rows (I don't need two rows when I have text on one row), font size problems...

Hi,

Sorry about the late answer but thank you for the feedback! Could you elaborate a bit more you issues with the component. Which browser(s) do you use? Do you have some css on the project that could affect to the component?

Thanks,

-Henri
 

I just released version 1.1.0 of ExpandingTextArea component. List of included fixes can be found from here.

Hi Henri,
nice addon. I need to expanding the textarea on focus and shrink on blur. Do you have any plans of implementing such a feature?

And As well i noticed that your project is not a maven project? Plans to convert it to a maven project?
If not i will have to do this!

Thx anyway

I'm not very good with java script etc, so I prefer easier solution in Vaadin.

You could try to make a component with text field and text area and add a focus and blur listeners. Then just set visibility, cursor position and text in them according to your needs. You could also use this expansing text area instead of normal one if it works ok for you. Pretty easy if you don't mind server communication as it's pure Vaadin solution and not client side.

Hi Milan,

thx for your quick response. Yes this seems to be the "server"-side way and i think it fits my needs.

Well now i understand what you mean! Hm. No this solutions is to dirty. I need a way so the fireRowsChangeEvent() is only triggered when the textarea gets focused.

Following does not work

textArea.addBlurListener(new BlurListener() {
@Override
public void blur(BlurEvent event) {
textArea.setRows(2);
}
});

due to the fireRowsChangeEvent in the setRows method

@Override
public void setRows(int rows) {
if (rows < 2) {
throw new IllegalArgumentException("rows must be >= 2");
}

if (this.rows != rows) {
this.rows = rows;
super.setRows(rows);
fireRowsChangeEvent();
}
}

Am i right?

To inform you, i get following exception in FF:

Maybe you can fix it in the next release..
 

I don't think it's dirty, you just create your own component based on some others... You would obviously have to implement your own events if you need them, because adding listener to inner component of some other component isn't good idea...

according to the exception, did you recompiled widgetset?

eggme: To inform you, i get following exception in FF:

Maybe you can fix it in the next release..

 

I just released a new version of the addon that fixes this problem. The new 1.2.0 version also adds support for setting maximum rows.

https://github.com/henrikerola/ExpandingTextArea/issues?q=milestone%3A1.2.0
 

Hi, i tried to use this plugin like this and i does not work at all.
I`m doing anthing wrong? It works al normal TA vaadin component. I m using vaadin 7.5.10 and your later 1.2.0 version of plugin.

final ExpandingTextArea tafield = new ExpandingTextArea("tafield");
tafield .setImmediate(true);
tafield .setRows(2);
tafield .setMaxRows(5);

Jurij Bugarin: Hi, i tried to use this plugin like this and i does not work at all.
I`m doing anthing wrong? It works al normal TA vaadin component. I m using vaadin 7.5.10 and your later 1.2.0 version of plugin.

final ExpandingTextArea tafield = new ExpandingTextArea("tafield");
tafield .setImmediate(true);
tafield .setRows(2);
tafield .setMaxRows(5);

 

This means that the addon is not included to the widgetset of your application and it fallbacks to a normal TextArea on the client side. You need to compile a widgetset for you project that contains ExpandingTextArea.

Thanks,

-Henri

Henri,

i got it to work! The problem was that widgetset file was not compiled right after recompile. So i did update widgetset, but it did not placed file in correct folder so i did moved it on right spot and recopiled again and it worked!

Thanks!

Hi Henri,

Your component is great. But when initialized it is two rows high. Is there a way to make it one row high (like a TextField) at the be beginning and make it bigger only when needed?

Thanks

Hey Henri,
I know its been a year since last comment here. Hopefully you see this.

Would you be able to push out a new release, incorporating the changes I see have been committed a year ago, for initial default row size? 
I have had to back out use of the component due to a QA test failure, due to the inability to set the initial row size and have it work. 
(and I really want the other benefits of your component!).

Thanks!

André Schild: Hello,

thanks for the component, it works as intended and the fork on github for V8 also works with vaadin 8.

I wonder if someone has an idea, on to acomplish this:

• We have a gridlayout with 2 or more ExpandingTextAreas in the same line
• Expand/shrink in horizontal works fine
• When the content of the different ExpandingTextAreas in the same grid row have different number of lines, then I would like to have all ExpandingTextAreas in that row to have the same height, the height of the heighest ExpandingTextArea

I tried with different listener and setting setRows(...) with the largest value, but to no avail.

Any ideas?

Hello, Could you please explain how did you use the fork with Vaadin 8?

Thanks

Shruthi Kulai:

André Schild: Hello,

thanks for the component, it works as intended and the fork on github for V8 also works with vaadin 8.

I wonder if someone has an idea, on to acomplish this:

• We have a gridlayout with 2 or more ExpandingTextAreas in the same line
• Expand/shrink in horizontal works fine
• When the content of the different ExpandingTextAreas in the same grid row have different number of lines, then I would like to have all ExpandingTextAreas in that row to have the same height, the height of the heighest ExpandingTextArea

I tried with different listener and setting setRows(...) with the largest value, but to no avail.

Any ideas?

Hello, Could you please explain how did you use the fork with Vaadin 8?

Thanks

Just make a copy on your disk and build the project, you can then use it directly when it's in your local maven repository