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

我创建了一个聊天，效果很好。仅当我左键单击“发送”按钮时，才会发送一条消息。我想简化使用。如何通过键盘上的“ Enter”按钮发出消息。聊天可以正常进行，一切似乎都很好。仅剩下这项任务，该如何解决？

主视图

@StyleSheet("frontend://styles/styles.css")
@Route
@PWA(name = "Vaadin Chat",shortName = "Vaadin Chat")
@Push
public class MainView extends VerticalLayout {
private final UnicastProcessor publisher;
private final Flux messages;
private String username;
@Autowired
private RestService restService;
public MainView(UnicastProcessor publisher,Flux 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 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;
}
}


从Vaadin 13开始，您可以将单击快捷方式添加到按钮：someButton.addClickShortcut(someKey)。为了限制侦听器的范围，使其仅在文本字段具有焦点时才起作用，您可以用listenOn进行补充。

这就是您需要的情况：

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

,

您可以添加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