Hi, i am new to vaadin,
i am trying to build a form in order to add data to my sql. but for some reason its not working.
here is my code: 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
@Theme(Lumo.class)
@Route
@PWA(name = "SimpleIT", shortName = "SimpeIT")
public class MainView extends VerticalLayout {
@Autowired
private CustomerService service;
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
);
}
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 -> saveCustomer());
// Configure UI components
save.setThemeName("primary");
// 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() {
service.update(customer);
}
private void updateGrid() {
List<Customer> customers = service.findAll();
grid.setItems(customers);
}
}
i am trying to see the sql data in the table and trying to add data to the sql but none works.
can you assist me?
thank you for taking the time to answer my questions,
i am trying to learn vaadin with spring boot and focus on that framework .
right now i stuck i want to add to my sql
so this is my new code:
when i use
public Customer customer = new (“first”,“last”) its added to the list when i click on my save button.
but when i try to use the data i bind, it wont save it:
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;
@Theme(Lumo.class)
@Route
@PWA(name = "SimpleIT", shortName = "SimpeIT")
public class MainView extends VerticalLayout {
@Autowired
private CustomerService service;
public Customer 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
);
}
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 -> saveCustomer());
// 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() {
service.update(customer);
}
private void updateGrid() {
List<Customer> customers = service.findAll();
grid.setItems(customers);
}
}
You need to use either binder.setBean(customer) (for unbuffered binding) or binder.writeBean(customer) in the save click handler. Check the above linked documentation for more information.