Vaadin Form and Custom Layout

Hello all,

I am new to Vaadin; I’ve been learning by writing simple apps for the last couple of months after switching over from Wicket. I have tried using the GridLayout (and GridForm add-on??) to handle complex form layouts. I am now looking at the Custom Layout and after reading as many threads as I can find I think I understand how to submit complex forms but would like to get feedback before starting down that path. Here goes:

  1. Create a Form class instance and assign it a BeanItem datasource containing the POJO that the form fields will map to and from
  2. Create an HTML file containing the complex form layout required by the business entities (do not add the <form ,> tag to the html file)
  3. Use
    as the placeholders for the html file’s html component tags (<input …>, <select …>, etc.)
  4. Use the customLayout.addComponent(<vaadin_component>, ) method to bind the Vaadin components to the html template file fields
    5.Bind a Vaadin Button to the HTML file’s submit button and create an anon listener that contains the method to call for data persistence or updates
  5. Use a FormFIeldFactory class to assign Ajaxable behaviour to html field components (remember to set fieldFactory on Form instance)

I believe this is the correct way to bind an HTML form for create/update to a Vaadin Form when using the Custom Layout - is this a correct assumption?
Also, the normal rules still apply to the Vaadin form creation:

  1. You still have to set the fields that you want to be visable using a collection or object array.
  2. You still need to add a submit button with an "addListener(…) " listener attached.
  3. Basically you have just replaced the normal FormLayout class with an CustomLayout class and provided an external template file.



I think you got it quite right. FormFieldFactory creates you fields and Form has built-in support for CustomLayout so that it can assign those fields to correct “slots” in you html template.

If you don’t like to use HTML, but would still like to freely design your form I’d suggest to check out the
FormBinder add-on
. With it you kind of combine field factory with your form layout and your form layout can be built with any Vaadin method. FormBinder’s built in field factory just maps your properties to fields you have created and configured in your layouts. You can e.g. use our eclipse plugins Visual Designer to build the view and configure its fields. At the same time you also define the properties that are visible.



Thank you for the confirmation and also the info on FormBinder. I really like this framework!