How can we use this from a Vaadin UI? Not a mystery at all, right? Just use Vaadin components and call the MessageRepository class when needed. Let's see it in action! Start by implementing a basic UI that shows a Grid, a TextField, and a Button, something like the following:

Feel free to implement a different layout for it. The following is the implementation corresponding to the previous screenshot:

public class VaadinUI extends UI {

    private Grid<Message> grid;
    private TextField textField;
    private Button button;

    @Override
    protected void init(VaadinRequest request) {
        initLayout();
        initBehavior();
    }

    private void initLayout() {
        grid = new Grid<>(Message.class);
        grid.setSizeFull();
        grid.getColumn("id").setWidth(100);

        textField = new TextField();
        textField.setPlaceholder("Enter a new message...");
        textField.setSizeFull();

        button = new Button("Save");

        HorizontalLayout formLayout = new HorizontalLayout(textField, button);
        formLayout.setWidth("100%");
        formLayout.setExpandRatio(textField, 1);

        VerticalLayout layout = new VerticalLayout(grid, formLayout);
        layout.setWidth("600px");
        setContent(layout);
    }

    private void initBehavior() {
        // not yet implemented! Stay tuned!
    }
}

The previous implementation shows a good practice: separating the code that builds up the UI from the code that adds behavior to it. The behavior, in this case, means adding a ClickListener that saves the message in the TextField and showing messages from the database in the grid. The following completes the implementation of the behavior for the UI:

public class VaadinUI extends UI {
    ...

    private void initBehavior() {
        button.addClickListener(e -> saveCurrentMessage());
        update();
    }

    private void saveCurrentMessage() {
        Message message = new Message();
        message.setContent(textField.getValue());
        MessageRepository.save(message);

        update();
        grid.select(message);
        grid.scrollToEnd();
    }

    private void update() {
        grid.setItems(MessageRepository.findAll());
        textField.clear();
        textField.focus();
    }
}

We are directly using the MessageRepository class to invoke persistence-related logic. Notice how the data binding is done in the saveCurrentMessage method. This binding goes in only one direction: from the UI to the Entity. This is the most basic form of data binding you can use with Vaadin. In the case of the Grid, the data binding goes in the other direction: from the Entities to the UI. We'll see more advanced data binding techniques in the next chapter.