Sql Insert only null data, vaadin 14

Question

I new to vaading and still learning the basics, I write some code and build a form. when I click the save button it adds null data. how can i save the data on my textfield into my customer object and then write it in the SQL. right now my save button just add a null in the first name and last name in the DB.

Customer.java

package com.packagename.myapp.spring;

public class Customer {
    private Long ID;
    private String FirstName;
    private String LastName;
    private String Phone;
    private String Email;
    private String Company;
    private String Address;
    private String Created;


    public Customer(Long id, String FirstName,String lastName,String company, String address, String phone, String email,String Created ) {
       this.ID=id;
        this.FirstName = FirstName;
        this.LastName = lastName;
        this.Phone = phone;
        this.Email = email;
        this.Company = company;
        this.Address = address;
        this.Created= Created;

    }
    public Customer(){}

    public Customer(String lastName) {
        this.LastName=lastName;

    }
    public Customer(Long id,String firstName,String lastName) {
        this.LastName=lastName;

    }
    public Customer(String firstName,String lastName){
        this.FirstName=firstName;
        this.LastName=lastName;
    }


    public String getFirstName() {
        return FirstName;
    }

    public void setFirstName(String firstName) {
        FirstName = firstName;
    }

    public String getLastName() {
        return LastName;
    }

    public void setLastName(String lastName) {
        LastName = lastName;
    }

    public String getPhone() {
        return Phone;
    }

    public void setPhone(String phone) {
        Phone = phone;
    }

    public String getEmail() {
        return Email;
    }

    public void setEmail(String email) {
        Email = email;
    }

    public String getCompany() {
        return Company;
    }

    public void setCompany(String company) {
        Company = company;
    }

    public String getAddress() {
        return Address;
    }

    public void setAddress(String address) {
        Address = address;
    }

    public Long getID() {
        return ID;
    }

    public void setID(Long ID) {
        this.ID = ID;
    }

    public String getCreated() {
        return Created;
    }

    public void setCreated(String created) {
        Created = created;
    }
}

CustomerService.java

package com.packagename.myapp.spring;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.jdbc.JdbcTemplateAutoConfiguration;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;

import java.util.List;
@Component
public class CustomerService {
    @Autowired
    private JdbcTemplate jdbcTemplate;

    public List<Customer> findAll() {
        return jdbcTemplate.query(
                "SELECT ID, FirstName, LastName FROM customer",
                (rs, rowNum) -> new Customer(rs.getLong("id"),
                        rs.getString("First Name"), rs.getString("Last Name")));
    }

    public void update(Customer customer) {
        jdbcTemplate.update("INSERT INTO customer (FirstName,LastName) VALUES(?,?)",customer.getFirstName(),customer.getLastName());


    }
}

MainView.java

package com.packagename.myapp.spring;
//I Delete the import just for now

@Theme(Lumo.class)
@Route
@PWA(name = "SimpleIT", shortName = "SimpeIT")
public class MainView extends VerticalLayout {
    @Autowired
    private CustomerService service;
    public Customer customer = new Customer();
   // private Customer customer;
    private Binder<Customer> binder = new Binder<>(Customer.class);

    private Grid<Customer> grid = new Grid(Customer.class);


    public MainView(CustomerService service) {
       add(
                new H1("הוסף לקוח"),
               buildForm(),
               grid
       );

     setSizeFull();

    }

    private Component buildForm() {

       // TextField id = new TextField("ID");
        TextField firstName = new TextField("First name");
         TextField lastName = new TextField("Last name");
         TextField  company= new TextField("Company");
         TextField address = new TextField("Address");
         TextField phone = new TextField("phone");
        TextField created = new TextField("created");
         TextField email = new TextField("Email");
        Div errorsLayout = new Div();
        Button save = new Button("Save", e -> {
            try {
                saveCustomer();
            } catch (ValidationException ex) {
                ex.printStackTrace();
            }
        });
        // Configure UI components
        save.setThemeName("primary");
binder.forField(firstName)
        .bind(
                Customer::getFirstName,Customer::setFirstName
        );
        binder.forField(lastName)
                .bind(
                        Customer::getLastName,Customer::setLastName
                );

        // Wrap components in layouts
        HorizontalLayout formLayout = new HorizontalLayout(firstName,lastName,save);
        Div wrapperLayout = new Div(formLayout, errorsLayout);
        formLayout.setDefaultVerticalComponentAlignment(Alignment.BASELINE);
        wrapperLayout.setWidth("100%");

        grid.setColumnReorderingAllowed(true);




        return wrapperLayout;

    }

    private void saveCustomer() throws ValidationException {

        service.update(customer);

    }
    private void updateGrid() {
        List<Customer> customers = service.findAll();
        grid.setItems(customers);

    }


}

Answer 1

You would need to also call binder.readBean(customer) to read in and binder.writeBean(customer) to update Customer's fields based on values in TextFields (in the case of a buffered mode). Now you've created a form and connected properties to TextFields, but haven't assigned a bean to it yet.

There is more infromation here at the official documentation : How to Bind Form Data and also discussion at Vaadin's forum Binder - get/set vs read/write bean methods. Buffered/Unbuffered mode