Vaadin how to change default validation functionality
I am using vaadin in a portlet environme开发者_Python百科nt where we have specific validation look & feel and behavior.
When input fields have invalid values,
- their borders color becomes red.
- All the error messages (as link) are shown above or below at common location.
- 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.
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
精彩评论