如何动态添加JSF组件

33

我能动态地添加JSF组件吗?我需要一个表单和一个按钮,点击按钮应该可以在表单中添加一个<h:inputText>。这个可行吗?

我知道这应该在JavaScript中有一些解决方法。有人知道如何在JSF中实现吗?我认为主要问题是如何通过#{value}获取或设置新输入的值。

3个回答

36

使用迭代组件,如<h:dataTable><ui:repeat>来显示一个动态大小的实体List。将bean设置为@ViewScoped以确保在同一个视图的postback中记住列表,而不是反复创建。

使用<h:dataTable>进行示例(当使用<ui:repeat>时,只需将<h:dataTable>替换为<ui:repeat>,将<h:column>替换为例如<li><div>):

<h:form>
    <h:dataTable value="#{bean.items}" var="item">
        <h:column><h:inputText value="#{item.value}" /></h:column>
        <h:column><h:commandButton value="remove" action="#{bean.remove(item)}" /></h:column>
    </h:dataTable>
    <h:commandButton value="add" action="#{bean.add}" />
    <h:commandButton value="save" action="#{bean.save}" />
</h:form>

受管控的Bean:

@Named
@ViewScoped
public class Bean {

    private List<Item> items;

    @PostConstruct
    public void init() {
        items = new ArrayList<>();
    }

    public void add() {
        items.add(new Item());
    }

    public void remove(Item item) {
        items.remove(item);
    }

    public void save() {
        System.out.println("items: " + items);
    }

    public List<Item> getItems() {
        return items;
    }

}

模型:

public class Item {

    private String value;

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    public String toString() {
        return String.format("Item[value=%s]", value);
    }

}

另请参见:


1
谢谢,我也在考虑同样的事情,只是想知道这是否是最好的方法 = D - ErVeY
5
没错,唯一的替代方案就是像 new HtmlInputText() 这样通过编程方式创建组件,但这只会导致托管的 bean 中出现难以理解且不易维护的代码。 - BalusC
嗨,@BalusC,Item类添加一个“名称”字段是否合适?我需要将项目保存到数据库中,并且还必须从数据库中读取它们。 - merveotesi
我刚刚尝试了这种方法。但是当我在添加的输入框中输入新值并点击提交时,后端bean上的列表没有更新。可能出了什么问题?我的items是一个List<String>,这可能是原因吗?它不能更改列表中的字符串? - JSeven
这比我之前做的要好太多了,谢谢。 - Ced
显示剩余5条评论

1

应该是这样的

将表单标签绑定到Bean属性


<form binding="#{myBean.myform}">...</form>


@ManagedBean("myBean")
public class Bean{
   property HtmlForm myform;
}

在事件触发时,创建一个输入组件的新实例。
HtmlInputText input=new HtmlInputText();

并附加到您的表单中

myform.getChildren().add(input);

2
请勿手动创建新的组件实例。首选方法是:FacesContext.getCurrentInstance().getApplication().createComponent(HtmlInputText.COMPONENT_TYPE); - dforce

0
使用 h:dataTable 动态添加元素... 拥有任何类型的列表,您可以为 dataTable 提供值...
h:dataTable 中... 您可以包含元素标记以在 <h:column> 内创建。
它将用于生成您想要动态创建的元素。

2
欢迎来到 Stack Overflow!这个回答似乎没有提供任何实质性的内容,超出了已经给出的回答。Stack Overflow 不是一个讨论论坛,在那里每个人在同意时重复对方,而是一个问答网站,在那里每个人根据自己的认可情况进行点赞或点踩。如果您赚取了15个声望,则可以投票支持。 - BalusC

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接