按下按钮并发送消息（Spring Boot 和 Vaadin）

Question

我创建了一个聊天，效果很好。仅当我左键单击 "send" 按钮时才会发送消息。我想简化使用。如何让消息通过键盘上的 "Enter" 按钮。聊天没有错误，一切似乎都很好。只剩这个任务了，这个问题怎么解决？

主视图

@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;
  }

}

Answer 1

您可以像这样添加 Enter Key Listener

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);

你可以看到更多detail here

Answer 2

从Vaadin 13开始，可以为按钮添加点击快捷方式：someButton.addClickShortcut(someKey)。要限制侦听器的范围，使其仅在文本字段获得焦点时做出反应，您可以使用 listenOn.

对其进行补充

因此，这就是您的情况所需要的：

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

按下按钮并发送消息（Spring Boot 和 Vaadin）

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

java

spring

vaadin

spring-boot