Inconsistant submitting Form data on button click

Vaadin 6 / 7 / 8 Framework UI
1

Hello, I am new to Vaadin, with only a few weeks under my belt, I’m impressed by alot of what it can do, but I am have a few fairly basic problems that are frustrating me, and I would appreciate any guidance.

The main problem at the moment is in the use of Forms to capture user input.

A button in my application launches a model dialog Window, the core code for the Dialog window is listed below:

public class MyDialog extends Window implements Button.ClickListener{

	private final Button saveButton = new Button("save");
	private final Button cancelButton = new Button("cancel");
	MyBean myBean = new MyBean();

	Form form = new Form();
	
	private void initialise()
	{
		BeanItem<MyBean> item = new BeanItem<MyBean>(myBean);
		form.setWriteThrough(false);
		form.setInvalidCommitted(false);

		form.setFormFieldFactory(new MyBeanFormFieldFactory());
		form.setImmediate(true);

		form.setItemDataSource(item);

		// Add form to layout
		addComponent(form);

		// The cancel / apply buttons
		HorizontalLayout buttons = new HorizontalLayout();

		form.getLayout().addComponent(buttons);

		buttons.addComponent(saveButton);
		buttons.addComponent(cancelButton);

		saveButton.addListener(this);
		cancelButton.addListener(this);
	}

	public void buttonClick(ClickEvent event) {
		if (event.getSource() == saveButton) {
			try {
				form.commit();

				try {
					businessDelegate.save(myBean);
					parentWindow.removeWindow(this);
				}
				catch (Exception e)	{
					LOGGER.error(e.getLocalizedMessage(), e);
					parentWindow.removeWindow(this);
				}
			}
			catch (Exception e)	{
				// This is a validation error so ignore...
			}
		}
		else	{
			LOGGER.debug("Cancel " + getCaption());
			parentWindow.removeWindow(this);
		}
	}
}

If I type into the text fields of the dialog and click on the save button I get inconsistant outcomes:

It appears that the event handler is called before the values from the text box are submitted to the server-side, this must be because clicking the button does not post the form values to the server side in the way a regular web-application does do.

This problem makes my application difficult to use, as the user has to click back into the invalid text box and then click on a different componenet (presumably to cause a focus change type event to trigger the update) to pass validation and successfully submit the form.

My problem is worsened by the (deliberatly) slow connection I need to run over, so I really need an improved Form submit.

I hope I am using the Form component incorrectly and there is an easy solution the collective wisdom can advise.

Thank you.

2

I don’t see anything directly wrong with your code and I tested it and could run it without problems. As your form is immediate, so will your fields be and thus the contents of the fields will be submitted immediately when they loose focus (clicking on a button causes the fields to loose focus also and submit the changes). The events are guaranteed to be processed server side in the same order they take place in the UI so the ValueChange events should definitely happen in the order the fields are edited.

I did test it using a fast connection but it should not affect the outcome unless there is a bug hiding somewhere…

3

Artur, many thanks for your reply. I didn’t realise there was a guarantee regarding the order of processing, that should certainly avoid the problem. I’ll do a bit more testing over my slow connection and see if the problem is really a fault with something else in my system.