Java Vaadin将值添加到列表中

我希望在我的程序中具有以下功能：

我将有一个用户输入字段。当用户按下按钮时，它将被添加到列表中，并向用户显示输入

问题是，如果用户需要，我想取消选择/删除这些输入。我无法做到这一点

以下是我迄今为止编写的代码，我删除了一些问题范围内不必要的功能：

public class AddUserInput extends VerticalLayout{

    // The user input will be added to the this list
    // later, this list will be sent to the server for some verification
    private List<String> emails;

    private HorizontalLayout content;
    private VerticalLayout rows;
    // user input field
    private TextField emailField = new TextField("Enter email address");

    public AddUserInput() {
        content = new HorizontalLayout();
        rows = new VerticalLayout();

        content.setMargin(true);
        Button addToListButton= new Button("Add to list");
        addToListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                // When the user clicks add to list button
                // The raw input will be added to the emails list
                // The UI component is added to 'rows' component
                rows.addComponent(addNewRow(emailField.getValue()));
            }
        });

        content.addComponents(emailField, addToListButton, rows);

        addComponent(content);
    }

    public Component addNewRow(String email){
        HorizontalLayout newRow = new HorizontalLayout();

        Button deleteRowButton = new Button("-");

        deleteRowButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                // I can delete from the UI by using the code below
                newRow.removeAllComponents();
                rows.removeComponent(newRow);
                // How to remove from the email list???

            }
        });

        emails.add(emailField.getValue());
        Label lastEmail = new Label(emailField.getValue());
        emailField.clear();
        newRow.addComponents(lastEmail,deleteRowButton);

        return newRow;
    }

}

public类AddUserInput扩展了垂直布局{
//用户输入将添加到此列表中
//稍后，此列表将发送到服务器进行验证
私人名单电子邮件；
私人水平布局内容；
私人垂直布局行；
//用户输入字段
private TextField emailField=new TextField（“输入电子邮件地址”）；
公共AddUserInput（）{
内容=新水平布局（）；
行=新的垂直布局（）；
content.setMargin（true）；
按钮addToListButton=新按钮（“添加到列表”）；
addToListButton.addClickListener（新建按钮.ClickListener（）{
@凌驾
公共作废按钮单击（Button.ClickEvent事件）{
//当用户单击“添加到列表”按钮时
//原始输入将添加到电子邮件列表中
//UI组件被添加到“行”组件中
addComponent（addNewRow（emailField.getValue（））；
}
});
addComponents（emailField、addToListButton、行）；
添加组件（内容）；
}
公共组件addNewRow（字符串电子邮件）{
HorizontalLayout newRow=新HorizontalLayout（）；
按钮deleteRowButton=新按钮（“-”）；
deleteRowButton.addClickListener（新建按钮.ClickListener（）{
@凌驾
公共作废按钮单击（Button.ClickEvent事件）{
//我可以使用下面的代码从UI中删除
removeAllComponents（）；
行。删除组件（新行）；
//如何从电子邮件列表中删除？？？
}
});
emails.add（emailField.getValue（））；
Label lastEmail=新标签（emailField.getValue（））；
emailField.clear（）；
添加组件（lastEmail、deleteRowButton）；
返回新行；
}
}

是否有任何组件/库可以实现此功能

我只需要一个文本字段，并将输入添加到列表中，如果用户愿意，则删除列表项

上述代码的可视化：

---

您可以使用

NativeSelect

组件来管理输入的字符串

我修改了您的

AddUserInput

-组件以使用

NativeSelect

和相应的数据提供程序：

public class AddUserInput extends VerticalLayout {

    private HorizontalLayout content = new HorizontalLayout();;
    private NativeSelect<String> select = new NativeSelect<>("The List");
    private ListDataProvider<String> dataProvider = DataProvider.ofCollection(new ArrayList<>());
    private Button addToListButton= new Button("Add to list");
    private Button deleteFromListButton = new Button("-");
    private TextField emailField = new TextField("Enter email address");

    public AddUserInput() {
        select.setVisibleItemCount(5);
        select.setWidth("100px");
        select.setDataProvider(dataProvider);
        select.setEmptySelectionAllowed(false);
        deleteFromListButton.setEnabled(false);
        content.setMargin(true);
        addToListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent event) {
                addEmailToList(emailField.getValue());
            }
        });
        deleteFromListButton.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent clickEvent) {
                select.getSelectedItem().ifPresent(selectedItem -> removeSelectedEmailFromList());

            }
        });
        select.addValueChangeListener(new HasValue.ValueChangeListener<String>() {
            @Override
            public void valueChange(HasValue.ValueChangeEvent<String> valueChangeEvent) {
                deleteFromListButton.setEnabled(select.getSelectedItem().isPresent());
            }
        });

        content.addComponents(emailField, addToListButton, select, deleteFromListButton);

        addComponent(content);
    }

    private void addEmailToList(String email){
        dataProvider.getItems().add(email);
        select.getDataProvider().refreshAll();
        emailField.clear();
    }

    private void removeSelectedEmailFromList(){
        select.getSelectedItem().ifPresent(selectedItem -> dataProvider.getItems().remove(selectedItem));
        select.setSelectedItem(dataProvider.getItems().isEmpty() ? null : dataProvider.getItems().iterator().next());
        select.getDataProvider().refreshAll();
    }

}

public类AddUserInput扩展了垂直布局{
私有HorizontalLayout内容=新HorizontalLayout（）；；
private NativeSelect=new NativeSelect（“列表”）；
private ListDataProvider dataProvider=dataProvider.ofCollection（new ArrayList（））；
私有按钮addToListButton=新按钮（“添加到列表”）；
私有按钮deleteFromListButton=新按钮（“-”）；
private TextField emailField=new TextField（“输入电子邮件地址”）；
公共AddUserInput（）{
选择.setVisibleItemCount（5）；
选择.setWidth（“100px”）；
选择.setDataProvider（dataProvider）；
select.setEmptySelectionAllowed（false）；
deleteFromListButton.setEnabled（false）；
content.setMargin（true）；
addToListButton.addClickListener（新建按钮.ClickListener（）{
@凌驾
公共作废按钮单击（Button.ClickEvent事件）{
addEmailToList（emailField.getValue（））；
}
});
deleteFromListButton.addClickListener（新建按钮.ClickListener（）{
@凌驾
公共作废按钮单击（Button.ClickEvent ClickEvent）{
select.getSelectedItem（）.ifPresent（selectedItem->removeSelectedEmailFromList（））；
}
});
选择.addValueChangeListener（新的HasValue.ValueChangeListener（）{
@凌驾
public void valueChange（HasValue.valuechangeent valuechangeent）{
deleteFromListButton.setEnabled（select.getSelectedItem（）.isPresent（））；
}
});
添加组件（emailField、addToListButton、select、deleteFromListButton）；
添加组件（内容）；
}
专用无效添加邮件列表（字符串电子邮件）{
dataProvider.getItems（）.add（电子邮件）；
选择.getDataProvider（）.refreshAll（）；
emailField.clear（）；
}
private void RemoveSelectedMailFromList（）删除{
select.getSelectedItem（）.ifPresent（selectedItem->dataProvider.getItems（）.remove（selectedItem））；
select.setSelectedItem（dataProvider.getItems（）.isEmpty（）？null:dataProvider.getItems（）.iterator（）.next（））；
选择.getDataProvider（）.refreshAll（）；
}
}

如下所示：

---

这对您来说是一个可能的选择吗？

您使用的是什么版本的Vaadin？我使用的是Vaadin 8.7.1@codinghausThanks，它很有效。我还要问你一件事。你能为我推荐更好的UI风格吗？我不太了解CSS，也不太了解Vaadin UI。知道这些事情会更好。太好了！很抱歉，关于Vaadin中的主题化/UI/CSS样式，我无法帮助您，尤其是对于Vaadin 8。但是你可以通读。也许这对你有帮助。在这里，您还可以找到所有现有的vaadin组件（如

NativeSelect

）以及有关如何使用它们的说明（）。感谢您提供的链接，我将研究它们。