Question

I am using vaadin in a portlet environment where we have specific validation look & feel and behavior.

When input fields have invalid values,

1. their borders color becomes red.
2. All the error messages (as link) are shown above or below at common location.
3. Clicking on specific error results into cursor focus going to related field.

So how can i achieve this functionality and what i need to change & modify.

Answer 1

For your point #1, You need to create a theme. To do that, I suggest you to read the Book of Vaadin chapter 5 and 8.

Chapter 5 explain the ui component and css style associated with them.
Chapter 8 explain how to inherits a css theme.

For point #2, You have to add a layout to your page, and for each message youy will create a button and style it like a web link.

Button button = new Button("Your error message");
button.setStyle(BaseTheme.BUTTON_LINK);
errorLayout.addComponent(button);

For point #3, add listener to your button link, and when clicked, focus the component in error. So the previous code will now look like this

Button button = new Button("Your error message");
button.setStyle(BaseTheme.BUTTON_LINK);
button.addListener(new Button.ClickListener(){
   public void buttonClick(ClickEvent event){
   // Replace componentInError by the associated component of the link.
   componentInError.focus();
   }
}
errorLayout.addComponent(button);

Regards.
Éric