Message Input

Message Input allows users to author and send messages.

Open in a
new tab
MessageInput input = new MessageInput();
input.addSubmitListener(submitEvent -> {
    Notification.show("Message received: " + submitEvent.getValue(),
            3000, Notification.Position.MIDDLE);
});
add(input);

The user can send the message with one of the following actions:

  • by pressing Enter (use Shift + Enter to add a new line)

  • by clicking the “send” button.

Use the Message List component to show messages that users have sent.

Open in a
new tab
MessageList list = new MessageList();
MessageInput input = new MessageInput();
input.addSubmitListener(submitEvent -> {
    MessageListItem newMessage = new MessageListItem(
            submitEvent.getValue(), Instant.now(), "Milla Sting");
    newMessage.setUserColorIndex(3);
    List<MessageListItem> items = new ArrayList<>(list.getItems());
    items.add(newMessage);
    list.setItems(items);
});

Person person = DataService.getPeople(1).get(0);
MessageListItem message1 = new MessageListItem(
        "Nature does not hurry, yet everything gets accomplished.",
        LocalDateTime.now().minusDays(1).toInstant(ZoneOffset.UTC),
        "Matt Mambo");
message1.setUserColorIndex(1);
MessageListItem message2 = new MessageListItem(
        "Using your talent, hobby or profession in a way that makes you contribute with something good to this world is truly the way to go.",
        LocalDateTime.now().minusMinutes(55).toInstant(ZoneOffset.UTC),
        "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
list.setItems(message1, message2);

VerticalLayout chatLayout = new VerticalLayout(list, input);
chatLayout.setHeight("500px");
chatLayout.setWidth("400px");
chatLayout.expand(list);
add(chatLayout);
ComponentUsage recommendations

Message List

Show a list of messages.