Vaadin Refcard updated

I made a few minor corrections and additions to the Vaadin Refcard, which was released last week at DZone. If you already downloaded it, you might to get the new version.

• Vaadin is available under Apache License 2.0
• For Item editors, such as the Form component, you can set the item data source with setItemDataSource()
• For Container editors, such as the Table or Tree components, you can set the container data source with setContainerDataSource()
• The book cover on the last page was updated - the cover for Vaadin 6.2 edition is blue
• The text in the last page was reordered to be more correct

The refcard could be updated next after Vaadin 6.3 is released in the late spring. The major features are use of GWT 2.0 for the client-side, drag'n'drop, and support for portlet flat mode.

Vaadin Refcard is out!

The Vaadin Refcard is finally out at DZone. Download yours now or browse the card on-line.

If you're a newcomer to Vaadin or interested in finding out what it is, the Refcard offers a great introduction to Vaadin. Much of the reference material should be also useful to those already familiar with Vaadin.


The six pages of the Refcard present a well thought summary of the most essential features of Vaadin, which are covered in detail in the Book of Vaadin. Much of the reference information is presented in tightly packed diagrams; just look at them for a moment and I hope you'll see the genius of Vaadin as I do.

The contents are:

• Creating an Application
• Components
• Layout Components
• Themes
• Data Binding
• Creating New Components

As Vaadin is developing fast, I hope to make updates to the card occasionally. So, especially after update releases (Vaadin 6.3 is coming next), please look out for an update of the card.

More Information:

• The Vaadin Refcard at DZone
• Vaadin Homepage
• Book of Vaadin On-Line

Client-Side Validation for Vaadin

I recently created a new component for Vaadin, the CSValidationTextField (suggestions for a better name are welcome), which is an extension of the regular TextField. It can validate the input with a regular expression and/or a JavaScript program.

Of course, you can't trust the client-side code for validation, so you need to validate the input on the server-side as well. For regular expression validation, you can use the same expression for the server-side RegexpValidator. For example:

// The Finnish Social Security Number
final CSValidatedTextField ssn = new CSValidatedTextField("SSN");
String ssn_regexp = "[0-9]{6}[+-A][0-9]{3}[0-9a-zA-Z]";

// The client-side validation
ssn.setRegExp(ssn_regexp, "000000-000A");
ssn.setAllowInvalid(false); // Prevent typing invalid values

// The server-side validation
ssn.addValidator(new RegexpValidator(ssn_regexp, "Invalid SSN"));
ssn.setRequired(true);
ssn.setRequiredError("SSN is required");

form.addField("ssn", ssn);

Matching partially filled values has some problems currently. If you disallow typing invalid input, as in the example above, the regexp validation currently needs an "example" and is restricted to only fixed-length fields. I'll have to look if the JS regexp matching can somehow report if there's a partial match. If you allow invalid input, there are no restrictions and the fixed-length example is not needed.

You can validate with JavaScript just as easily:

CSValidatedTextField postcode = new CSValidatedTextField("Postal Code");
postcode.setJavaScript("if (value >= 0 && value < 10000)" +
" \"partial\";" +
"else if (value >= 10000 && value <= 99999)" +
" null;" +
"else" +
" \"Postal Code must be a 5-digit number between 10000 and 99999\";");
layout.addComponent(postcode);

The server-side validation needs separate Java code though, unless you use some JavaScript execution library.

You must validate the input on the server-side as well, as the client-side validation does not actually prevent inputting invalid values (unless you set setAllowInvalid(false), but that's a bit restricted at the moment).

See the example source codes (link below) for more examples.

See:

• The Demo (editors, some validation examples)
• API Documentation
• Source Repository
• Example Souce Code

Included are also handy interactive editors for the regular expressions and JavaScript validators, as you can see in the demos.

The component is not packaged yet, so using it may require some effort. I'll have to look into the packaging.