CODEWITHSUNDEEP
javaspringspring-bootvaadin
Fallen19
Fallen19

Reputation: 23

Press the button and send a message (Spring Boot and Vaadin)

I created a chat, it works well. A message is sent only when I left-click on the "send" button. I want to simplify the use. How can I make a message go through the "Enter" button on the keyboard. Chat works without errors, everything seems to be fine. Only this task remains, how can this problem be solved?

enter image description here

Main view

@StyleSheet("frontend://styles/styles.css")
@Route
@PWA(name = "Vaadin Chat", shortName = "Vaadin Chat")
@Push
public class MainView extends VerticalLayout {
  private final UnicastProcessor<Message> publisher;
  private final Flux<Message> messages;
  private String username;

  @Autowired
  private RestService restService;

  public MainView(UnicastProcessor<Message> publisher,
                  Flux<Message> messages) {
    this.publisher = publisher;
    this.messages = messages;

    addClassName("main-view");
    setSizeFull();
    setDefaultHorizontalComponentAlignment(Alignment.CENTER);

    H1 header = new H1("Vaadin Chat");
    header.getElement().getThemeList().add("dark");

    add(header); 

    askUsername();
  }


  private void askUsername() {
    HorizontalLayout layout = new HorizontalLayout();
    TextField usernameField = new TextField();
    Button startButton = new Button("Start chat");

    layout.add(usernameField, startButton);

    startButton.addClickListener(click -> {
      username = usernameField.getValue();
      remove(layout);
      showChat();
    });

    add(layout);
  }

  private void showChat() {
    MessageList messageList = new MessageList();

    add(messageList, createInputLayout());
    expand(messageList);

    List<Message> lasts = restService.getLast();
    for (Message message : lasts)
      messageList.add(new Paragraph(message.getFrom() + ": " + message.getMessage()));


    messages.subscribe(message -> {
      getUI().ifPresent(ui ->
          ui.access(() ->
              messageList.add(
                  new Paragraph(message.getFrom() + ": " +
                      message.getMessage())
              )
          ));

      restService.saveMessage(message);
    });
  }

  private Component createInputLayout() {
    HorizontalLayout layout = new HorizontalLayout();
    layout.setWidth("100%");

    TextField messageField = new TextField();
    Button sendButton = new Button("Send");
    sendButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    sendButton.addClickShortcut(Key.ENTER).listenOn(messageField);

    layout.add(messageField, sendButton);
    layout.expand(messageField);

    sendButton.addClickListener(click -> {
      publisher.onNext(new Message(username, messageField.getValue()));
      messageField.clear();
      messageField.focus();
    });
    messageField.focus();

    return layout;
  }

}

Upvotes: 0

Views: 433

Answers (2)

Leif &#197;strand
Leif &#197;strand

Reputation: 8001

Starting from Vaadin 13, you can add a click shortcut to the button: someButton.addClickShortcut(someKey). To limit the scope of the listener so that it only reacts when the text field has focus, you can supplement it with listenOn.

This is thus what would be needed in your case:

sendButton.addClickShortcut(Key.ENTER).listenOn(messageField);

Upvotes: 3

MyTwoCents
MyTwoCents

Reputation: 7622

You can add Enter Key Listener something like this

TextField myTextField = new TextField("A text field");
myTextField.setImmediate(true);
OnEnterKeyHandler onEnterHandler=new OnEnterKeyHandler(){
    @Override
    public void onEnterKeyPressed() {
        publisher.onNext(new Message(username, messageField.getValue()));
        messageField.clear();
        messageField.focus();
    }
};
onEnterHandler.installOn(myTextField);

You can see more detail here

Upvotes: 0

Related Questions