Arrange Components inside a Form

Vaadin 6 / 7 / 8 Framework UI
1

I want to arrange componenets or fields inside a Form in a specific way. Right now the form looks like the attached snapshot.

I want something like this

Caption Caption Caption
Field Field Field
Caption
Field

any suggestions On how to change the layout within the form?

hl = new HorizontalLayout();
	hl1 = new HorizontalLayout();
	vl1 = new VerticalLayout();
	vl2 = new VerticalLayout();
	// selectAction = new Select("Choose Action");
	final ComboBox selectAction = new ComboBox("Choose Action");
	performAction = new Button("Apply Action");
	resetAction = new Button("Reset");
	searchButton = new Button("Search");
	ordersSearchForm = new Form();
	// subForm = new Form();

	// Add some items
	selectAction.addItem("A");
	selectAction.addItem("C");
	selectAction.addItem("N");
	selectAction.setNullSelectionAllowed(false);

	ordersSearchForm.setLayout(hl1);
	hl1.addComponent(ordersSearchForm.getField("OrderInt"));
	
	ordersSearchForm.addField("OrderInt", new TextField("Ord Number"));
	ordersSearchForm.addField("ItemInt", new TextField("Item Number"));
	ordersSearchForm.addField("Start Date", new DateField("Start Date"));
	ordersSearchForm.addField("End Date", new DateField("End Date"));

	ordersSearchForm.getLayout().setMargin(true);

	ordersSearchForm.addField("selectaction", selectAction);
	ordersSearchForm.getField("OrderInt").setRequired(true);
	ordersSearchForm.getField("OrderInt").addValidator(new IntegerValidator("Order Number must be integer"));
	ordersSearchForm.setImmediate(true);
	ordersSearchForm.setCaption("Orders Search Form");
	ordersSearchForm.setDescription("Enter the order number you want to search");
	ordersSearchForm.getFooter().addComponent(searchButton);
	ordersSearchForm.getFooter().addComponent(performAction);
	ordersSearchForm.getFooter().addComponent(resetAction);

12434.bmp (318 KB)

2

Not sure, if I understood your question correctly, but you can use a custom layout with a Form using
Form#setLayout()
.

Note: In the Book of Vaadin, the section about Forms says, that setLayout() gets described in the section about FormLayout, which is not the case (as far as I have seen while skimming through the pages).

3

The easiest way is probably to use something like the
FormBinder
 add-on.

There are other possibilities for customized form layouts explained elsewhere on the forum but they may require overriding attachField() etc.

The Form component also supports HTML layouts using a CustomLayout, in which case it performs mapping based on element names (vaguely similar to FormBinder).