In this section, we'll develop a CRUD user interface using modal pop-up windows to show a form for adding and editing User instances. The following is a screenshot of the finished form:

Let's start with the following component:

public class CustomCrud extends Composite {

    private Button refresh = new Button("", VaadinIcons.REFRESH);
    private Button add = new Button("", VaadinIcons.PLUS);
    private Button edit = new Button("", VaadinIcons.PENCIL);

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

    public CustomCrud() {
        initLayout();
        initBehavior();
        refresh();
    }

    private void initLayout() {
        CssLayout header = new CssLayout(refresh, add, edit);
        header.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);

        grid.setSizeFull();

        VerticalLayout layout = new VerticalLayout(header, grid);
        layout.setExpandRatio(grid, 1);
        setCompositionRoot(layout);
        setSizeFull();
    }

    private void initBehavior() {
    }

    public void refresh() {
    }
}

There are a few things to take notice of here. We are using the Grid(Class<T> beanType) constructor, which means columns are created automatically, and we'll be able to reference them later by name. We are using the VaadinIcons class to set icons instead of text for the refresh (read), add, and update buttons. This class is included in the Vaadin Framework. Finally, we are using a CssLayout with the LAYOUT_COMPONENT_GROUP style, which makes the buttons look like a toolbar. The following is a screenshot of the component at this point: