Form with automatically updated calculations


I’d like to have a form that does some mathematical
using several number input fields. The values should be committed on change (during typing) and
the results should update immediately.

I am new to Vaadin and trying to find out how this is done, as this is a core behaviour of my application. So far, I have only managed to create a form that updates a result when the submit button is clicked.

Can you tell me how this can be done with Vaadin?

Also, the layout of the inputs and results needs to be quite flexible to simulate this spreadsheet behaviour. Is GridLayout the one to use here?

Thank you for your help.


Hi Andrea,

for your first problem you could use a TextChangeListener or ValueChangeListener

  TextField field = new TextField();
  field.addTextChangeListener(new TextChangeListener() {
                    public void textChange(TextChangeEvent event) {
                        // your mathematical calculations

Hi Johannes,

thanks for your quick response!

Now I had tried this solution already and it works fine if I have just one text field and one result field, but in my case, there are gonna be about 15 input fields and 10 calculated results (the amounts vary). Therefore, the change listeners should be able to trigger the update of the whole form, not just inserting values into individual fields.

Also, the calculations happen in the model, not in the UI code, but from the change listener I don’t know how to access the model/bean.

Any ideas how I should do this?

Thanks, Andrea