Message Input
API: TypeScript / Java
Source: TypeScript / Java
Message Input allows users to author and send messages.
- Usage
- Styling
Message Input allows users to author and send messages.
Open in a
new tab
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
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);