Form with automatically updated calculations

Hi,

I’d like to have a form that does some mathematical
calculations
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.

Andrea

Hi Andrea,

for your first problem you could use a TextChangeListener or ValueChangeListener

  TextField field = new TextField();
  field.setImmediate(true);
  field.setTextChangeEventMode(TextChangeEventMode.LAZY);
  field.addTextChangeListener(new TextChangeListener() {
                    
                    @Override
                    public void textChange(TextChangeEvent event) {
                        // your mathematical calculations
                        resultField.setValue(event.getText());
                    }
                });

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