TextBox characters remaining label

Hello, I am very new to Vaadin so sorry if this something obvious…

I have a requirement of displaying characters remaining as user types in a textbox. This is simple in javascript but the only way I see to do this with Vaadin is to add a listener that is going to process every character on the server. Is there a way to do this without involving the server?

My first hello world test of Vaadin hit some snags but hopefully these kind of things are more rare than common.

  1. Eclipse internal web browser on windows doesn’t render buttons right with the default theme (the left border of the button is not vertically aligned correctly.
  2. I opened two tabs with the same application and got that out of synch error. I saw the workaround/fix for this but it makes me wonder how many of these kind of things I will hit once I work on a real world app.

Thanks,
Paul

Use the
CSValidation
add-on with a trivial JavaScript validator that outputs the character count. See
this demo
. You can easily do countdown or whatever you like.

Please notice that the component has not been tested with all the browsers supported by Vaadin. I’d like to get feedback on this.

Thanks Marko. Next task is to figure out how to put the validation message below the text area (looks to be a known issue). I saw an unfinished section on wiki about creating client side validators with GWT but looks a bit complicated for a newbie.

I’m hoping for a some generic javascript hooks in Vaadin components to say run this script for onkeypress event and set the value of another Vaadin component like a Label in the same javascript function.

Is this possible?

The validation error is a element and it wraps if there’s not enough horizontal space in the containing layout. Saying “display: block” in CSS for the element probably also does the trick.

If you really really want, you can actually do really anything in the JavaScript validators, such as modify the HTML DOM tree, nothing prevents that I think. There is no particular JavaScript API for modifying the values of Vaadin components on client-side, so you’re on your own there. I wouldn’t go too far with this approach, because it’s always possible to make your own component with GWT and Java (see the Book) and it’s probably much easier.

I don’t really see much point in setting the value of a Label on client-side as Label’s entire purpose is to display a value set on server-side to the client-side. Well, you could use a Label as a placeholder for text generated in JavaScript.

Thanks for helping me get started!

I have used or researched too many Java web frameworks and have come to expect disappointment. I couldn’t help grinning while looking at Vaadin example code and documentation. I hope it will replace Wicket as my tool of choice! I already gave Grails a good test drive and was really disappointed when it came to deploying in a real world scenario such as Google AppEngine or a virtual server with 1 or 2 GB of memory.