Vaadin добавить значения в список

Question

Я хотел бы иметь эту функцию в моей программе:

У меня будет поле ввода пользователя. Когда пользователь нажал кнопку, она будет добавлена ​​в список, и ввод будет показан пользователю.

Проблема в том, что я хотел бы отменить выбор / удалить эти входные данные, если пользователь хочет. Я не смог этого добиться.

Вот код, который я написал до сих пор, я удалил некоторые функции, ненужные для объема вопроса:

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

}

Есть ли какой-либо компонент / библиотека, которая выполняет эту функцию?

Мне нужно только текстовое поле, и добавление ввода в список, и удаление элемента списка, если пользователь хочет.

Визуализация кода выше:

Answer 1

Вы можете использовать компонент NativeSelect для управления введенными строками.

Я изменил ваш AddUserInput -компонент, чтобы использовать NativeSelect и соответствующий DataProvider:

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

}

Это выглядит следующим образом:

Это было бы возможным вариантом для вас?