Wrapping a field within CustomField

Hi all,

I’m trying to create a field that essentially wraps another field and has a suffix (essentially a Label) that you can add after it. I’ve created a custom field for it, and gotten the layout work okay. The “problem” I have is that there is a massive amount of methods that are defined by the Field interface for which I’d have to create delegate methods (everything from removing and adding validators to all sorts of listener methods).

I can of course ‘prepare’ the inner field, bind as normal and then just wrap it inside a component that would add a suffix label, but what I’m going for is a reusable way of defining suffixed fields so that the wrapping of the field does not need to be done over and over.

Any thought on what would be the most elegant way to achieve this?

The original “CustomField Add-on” used to have a handy wrapper version for this exact usage case. I have missed that couple of times as well with Vaadin 7. Dunno why it was left out when CustomField was dragged into the core.

Henri Sara, comments, suggestions?


I’m not sure I follow the issue, but can’t you use com.vaadin.ui.CustomField for this?

We just did something like it (we did a TextField with a PopupView icon in a HorizontalLayout) and discussed it a bit here:

To work in a form, I only had to override a few methods for getValue/setValue, discard and commit. Hope that helps if it applies…


thank you for the replies.

To elaborate a bit, the task was to create a reusable component, so essentially the end goal was to make the end product behave exactly like the wrapped text field, which means a large amount of delegate methods so that things like listeners would work correctly. So the basic functionality (just to get it work for one use case) wasn’t enough.

What I did was I generated, in a brute force manner, delegate methods for everything in the Field interface and just tested that. Had to remove one of the methods (I forget which one) because it created a stack overflow upon viewing the component. Also skipped methods for sizing/styling/layout, since you’d expect those to apply to the whole thing.

If anybody else is doing the same, I suggest writing an abstract class ‘FieldWrapper’, extending CustomField, taking the wrapped field as constructor parameter and doing the delegation of the Field methods. Then you can extend that to your liking.

I do feel that this sort of thing should be part of core Vaadin because it does seem like a common use case and I would like somebody more knowledgeable / somebody with more time to see it done in a proper manner.

Thanks again,

I created an
enhancement request (#15335)
for adding a FieldWrapper implementation in Vaadin.

Thank you!
I’ll be watching the enchancement request with interest.

Hi again,

I have a problem getting the ‘required indicator’ (red asterisk) to show for a wrapped field. The asterisk gets “displayed” correctly for the wrapped fields caption, but I have to hide that as it is in the wrong place (inside the “content” of the field, rather than in Form Layout’s caption column). The custom field delegates all of Field interface’s relevant methods (is/setRequired, get/setRequiredError, get/setCaption, etc) to the inner field.

The HTML that gets generated is as follows:


Customer *
[/code]My FieldWrapper is more or less like this: [code] public abstract class FieldWrapper extends CustomField { private final F wrappedField;
public FieldWrapper(F fieldToWrap) { this.wrappedField = fieldToWrap }

public boolean isRequired() { return wrappedField.isRequired(); }

// ... lots of other delegate methods from Field interface

[/code]Then I have a subclass that adds a button after that field, plus CSS that hides the caption that is in the wrong place, as described in the HTML code’s comments.

I have confirmed that the wrapper’s isRequired gets called and that it returns ‘true’. And as you can see from the HTML code the inner field’s (hidden by CSS) caption has the required asterisk.

Any suggestions on how to get the required asterisk to show?

Any help would be greatly appreciated.

Hi, any solutions to the previously described problem (meaning the post directly above this)?


I think you should call also super implementation in setRequired. If your app logic needs the actaul field to be really required, an option is to hide the required indicator insider the custom field implementation using CSS.


I’m facing a similar problem. How did you manage to solve the issue? Would you be able to share your implementation?

your link to
appears to be broken

@Henri: any progress on the FieldWrapper?