
Listing Entities in a Grid
This part of the tutorial shows how to display data in a Grid component.
Adding the Domain Objects
Before getting into actual web development with Vaadin, we need to add the necessary domain objects and a dummy back end.
Copy or download the following three Java classes from GitHub and add them to your project:
CustomerStatus.java: This is a simple enum type.
Customer.java: This this is the main domain object, a basic Java bean that encapsulates data about a customer.
CustomerService.java: This is a simple service class that you can use to get and save
Customer
instances. Think of this class as the entry point to a dummy database.
Tip | A fast way to copy classes in IntelliJ IDEA is to use the clipboard. In the browser, select the content of the file and choose Edit > Copy. In IntelliJ IDEA, right-click org.vaadin.example in the Project view and select Paste. IntelliJ IDEA is smart enough to create a properly-named Java file automatically. |
Note | The actual implementation of these classes is not relevant for this tutorial, but feel free to explore them. In a real-world application, you would most likely have something similar, but implemented with JPA, and EJB or Spring-managed beans, for example. |
Showing Data in a Grid
When building UIs for data-centric applications, you frequently start by listing data from a back end. Vaadin offers several components and ways to do this. This tutorial uses the Grid
component to present data in a table. The data comes from the dummy back end you added in the previous section.
To show the data in a Grid
component:
In the
MainView
class, add a reference to theCustomerService
class and introduce an instance variable of typeGrid
as follows:... public class MainView extends VerticalLayout { private CustomerService service = CustomerService.getInstance(); private Grid<Customer> grid = new Grid<>(Customer.class); public MainView() { ... } }
TipYou can fix the compilation errors shown in red using the [Alt+Enter] (Windows) or [Option+Enter] (Mac) shortcut. Position the cursor right after the error in red (for example Grid
) and then use the shortcut. Make sure to choose the correct class from theorg.vaadin
package.The
Grid
component uses columns and rows to show data. Configure the columns by replacing the constructor of theMainView
class with :... public MainView() { grid.setColumns("firstName", "lastName", "status"); add(grid); setSizeFull(); } ...
setColumns
configures theGrid
to show thefirstName
,lastName
, andstatus
properties of theCustomer
class.add(grid)
adds theGrid
to theVerticalLayout
.setSizeFull
sets the height and width of theVerticalLayout
to 100% so that it uses all the space available in the browser.TipAs an alternative, you can use the addColumn(ValueProvider)
method to add columns in a type-safe manner. For example, to add a column for thefirstName
property, callgrid.addColumn(Customer::getFirstName)
.
At this point, the
Grid
columns are ready, but there are no rows yet. To add rows, use thesetItems(Customer…​)
method. Since later in the tutorial you will need to refresh the rows, it makes sense to create a method for this now. Create a newupdateList()
method and call it from the constructor as follows:... public MainView() { ... updateList(); } public void updateList() { grid.setItems(service.findAll()); } ...
Compile the project, by selecting Build > Build Project in IntelliJ IDEA, and refresh your browser to see the changes.
Comments (18)