Vaadin8; Designer2 and Grid -> how to load the data rows?

Flow
1

Greetings,

Simple example grid table created using designer2.

Now I would like to populate the rows using the java backend code but I am struggling with the handles between java and html code.

The code is loading without errors and the resulting webpage shows the grid. The column names are populated too (data-item-type=“my.obh.app.Customer”).

But how to insert the data rows? What am I missing here? Appreciate very much your advice and suggestions.

I have checked if the array customers is populated and thats positive.

//// java class

@Theme(“mytheme”)
public class MyUI extends UI {

private CustomerService service = CustomerService.getInstance();
private CustomerForm form = new CustomerForm(this);

@Override
protected void init(VaadinRequest vaadinRequest) {
    final VerticalLayout layout = new VerticalLayout();

    List<Customer> customers = service.findAll();
    form.getGridTable().setItems(customers);
    
    layout.addComponents(form);
    setContent(layout);
}

@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}

}

/// html code as generated by designer2

<!doctype html>

Id Email Status BirthDate LastName FirstName Persisted
2

The basic idea of your code is valid, but maybe there is some discrepancy between the getters of your Customer class and the column id in the design?

I tested defining columns in a design and then populating the grid with a list of dummy data. The only problem I had was when the column ids did not match the getter names:



See the full sample on vaadinfiddle.com

That could be worked around with re-creating the column with a custom value provider and copying e.g. the caption from the original design created Grid column.

3

And here’s the HTML design part:


See the full sample on vaadinfiddle.com

4

I thought and hoped that "data-item-type=“my.obh.app.Customer” would ensure the column id’s would be 1 to 1 match. So I have a Customer.class as POJO. This class is used to generate the data rows as well for generating the column id’s. The designed 2 interface allows the assignment "data-item-type=“my.obh.app.Customer” and gives the impression it would be synchronized…

In other words; the Customer.class POJO is the linking pin between the HTML grid and Java MyUI class… Recreating the customer pojo seems illogical to me but maybe there is a good reason / motivation behind it?

I will recreate the environment and come back with confirmation. Thanks a lot for your advice!

5
6

Seems designer 2 has some issues with upper/lowercase combinations and it works most reliable if all fields are lowercase. Second, in case the Java POJO is changed the grid is broken. The workaround to refresh the grid was to replace the data-item-type with something else and than switch back again to the required POJO. Without that, the grid remains disconnected.

Now it is possible to design the grid within designed2, link to the data elements using data-item-type and manipulate the data from the java backend. When changes occur within POJO or Designer 2 grid, you need to be careful and ensure things get regenerated correctly.

Following this route I do not have to (re)create columns etc. within the java backend. Just following the POJO is sufficient.

Now the following items are needed;

1- a way to connect an annotation within the POJO to assign the visual column name… Its a bit weird that the exact Java POJO field name is the column name. So Annotate a field such as “@visual_name_grid” would be excellent

2- a way to annotate within the POJO a field NOT to be part of the grid. Making a field private is not desired as I need the POJO field for other processes as well. So Annotate a field such as “@exclude_from_grid” would be excellent

Or perhaps this already exists but I cannot find the documentation?