Java 带ArrayList组件的Vaadin？

我正在使用JPA容器和BeanFieldGroup。我有一个具有属性

@ElementCollection

的bean。在该属性中，我添加了手机号码，并希望在添加后在某些组件中显示该值

我尝试创建一个文本字段和按钮来添加，这是可行的，但我不知道如何显示值。我认为这是一个很好的解决方案，但我不知道这是否是一个最好的解决方案

如何解决这个问题

这是我的豆子

@Entity
public class UnidadeEscolar implements Serializable{
    private static final long serialVersionUID = 1L;

    @Id @GeneratedValue
    private Long id;

    @NotNull @NotEmpty @Size(min=5, max=50) @Column(unique=true)
    private String nome;

    @Enumerated(EnumType.STRING)
    private Departamento departamento;

    private String cep;
    private String endereco;
    private String numero;
    private String complemento;
    private String bairro;
    private String cidade;

    @Enumerated(EnumType.STRING)
    private EstadosDoBrasil uf;

    @ElementCollection
    @CollectionTable(name="tf_unescolar", joinColumns=@JoinColumn(name="id_unescolar"))
    @Column(name="telefone")
    private List<String> cellPhone = new ArrayList<String>();

    private String email;
    private String status;

    public UnidadeEscolar() {
        this(0L, "", Departamento.ESTADUAL, 
                "", "", "", "", 
                "", "", EstadosDoBrasil.AC, 
                new ArrayList<String>(), "");
    }

    public UnidadeEscolar(Long id, String nome, Departamento departamento,
            String cep, String endereco, String numero, String complemento,
            String bairro, String cidade, EstadosDoBrasil uf,
            List<String> cellPhone, String email) {
        super();
        this.id = id;
        this.nome = nome;
        this.departamento = departamento;
        this.cep = cep;
        this.endereco = endereco;
        this.numero = numero;
        this.complemento = complemento;
        this.bairro = bairro;
        this.cidade = cidade;
        this.uf = uf;
        this.cellPhone = cellPhone;
        this.email = email;
    }

    /** add cell phone number **/
    public void addCellPhoneContact(String tf){
        cellPhone.add(tf);
    }

    public List<String> getCellPhone{
          return cellPhone;
    }

}

@实体
公共类UnidadeEscolar实现了可序列化{
私有静态最终长serialVersionUID=1L；
@Id@GeneratedValue
私人长id；
@NotNull@NotEmpty@Size（最小值=5，最大值=50）@Column（唯一值=true）
私有字符串名称；
@枚举（EnumType.STRING）
私人部门；
私有字符串cep；
私人字符串endereco；
私有字符串数字；
私有字符串补码；
私有字符串bairro；
私有字符串；
@枚举（EnumType.STRING）
私人地产公司；
@元素集合
@CollectionTable（name=“tf\u unescolar”，joinColumns=@JoinColumn（name=“id\u unescolar”））
@列（name=“telefone”）
private List=new ArrayList（）；
私人字符串电子邮件；
私有字符串状态；
公共大学语常会（）{
此（0升，“），部门设置，
"", "", "", "", 
“”，“”，EstadosDoBrasil.AC，
新的ArrayList（），“”）；
}
公共UnidadeeColar（长id，字符串名称，部门，
字符串cep、字符串endereco、字符串编号、字符串补码、，
字符串bairro、字符串cidade、EstadosDoBrasil uf、，
列表（手机、字符串和电子邮件）{
超级（）；
this.id=id；
this.nome=nome；
this.departmento=departmento；
this.cep=cep；
this.endereco=endereco；
this.numero=numero；
this.complemento=complemento；
this.bairro=bairro；
this.cidade=cidade；
this.uf=uf；
这个。手机=手机；
this.email=电子邮件；
}
/**添加手机号码**/
public void addCellPhoneContact（字符串tf）{
添加（tf）；
}
公共列表获取手机{
归还手机；
}
}

---

有什么想法吗？

我只是写了一个组件来做同样的事情

它绑定到JDAL（这是一个JDAL视图），但是您可以使用代码作为指南

请注意，我使用

doRefresh（）

方法将数据从模型移动到视图，并使用

doUpdate（）

方法将数据从视图移动到模型

---

我解决了这个问题。我创建了一个策略来添加和显示我的电话。何塞·路易斯·马丁的例子帮助我

我是怎么做到的

public class TableListView extends VerticalLayout implements Button.ClickListener, ItemClickListener, ValueChangeListener{  
    private static final long serialVersionUID = 1L;
    private Button add;
    private Button delete;
    private HorizontalLayout buttonLayout;
    private TelefoneField txtField;
    private Table tabela;
    private UnidadeEscolar bean;
    private Integer tableItem;
    private CheckBox add9;


    public TableListView(UnidadeEscolar bean){
        this.bean = bean;   
        buildMainLayout();
    }


    private void buildMainLayout(){
        setSpacing(false);
        tabela = new Table("");
        tabela.setHeight("100px");
        tabela.setWidth("200px");
        tabela.addContainerProperty("Telefone", String.class, null);
        tabela.setSelectable(true);
        tabela.addItemClickListener(this);

        addComponent(tabela);
        addComponent(buildButtonLayout());      
    }

    private HorizontalLayout buildButtonLayout(){
        buttonLayout = new HorizontalLayout();      
        txtField = new TelefoneField();
        txtField.setAdd9(true);
        add = new Button("+");
        delete = new Button("-");
        add9 = new CheckBox("Adiciona9", true);
        //listeners
        add9.addValueChangeListener(this);
        add.addClickListener(this);
        delete.addClickListener(this);

        buttonLayout.addComponent(txtField);
        buttonLayout.addComponent(add);
        buttonLayout.addComponent(delete);
        buttonLayout.addComponent(add9);
        return buttonLayout;
    }



    @Override
    public void buttonClick(ClickEvent event) {
        if(event.getButton() == add){           
            if(txtField.getValue().trim().isEmpty()){
                Notification.show("Insira o número do telefone");
            }else{
                Object addItem = tabela.addItem();
                tabela.getItem(addItem).getItemProperty("Telefone").setValue(txtField.getValue());
                bean.addTelefoneContato(txtField.getValue());
                txtField.setValue("");
            }           
        }

        if(event.getButton() == delete){            
            tabela.removeItem(tableItem);
            bean.removeTelefoneContato(tableItem);
        }       
    }


    @Override
    public void itemClick(ItemClickEvent event) {
        tableItem = Integer.parseInt(event.getItemId().toString());
    }


    @Override
    public void valueChange(ValueChangeEvent event) {
        boolean value = (Boolean) event.getProperty().getValue();
        txtField.setAdd9(value);        
    }

---

结果是：

显示手机的方式很多。你可以添加一个标签，一个文本区域，一个（简单的）表格，一个组合框。。。这是一个特定于域的问题，一般无法回答。@nexus搜索解决方案时，我找到了这段视频：他使用

@Embbedable

，在

@ElementCollection

之后，当他更改为collection时，添加了一个表，他是如何做到的？