如何动态添加 JSF 组件 [英] How to dynamically add JSF components

问题描述

我可以动态添加 JSF 组件吗?我需要一个带有按钮的表单，该按钮应该向表单添加一个 <h:inputText>.这可能吗?

我知道这在 JavaScript 中应该是可能的.有人知道如何在 JSF 中做到这一点吗?我认为主要问题是如何通过 #{value} 获取或设置新输入的值.

解决方案

使用诸如 或 之类的迭代组件来显示一个动态大小的实体List.使 bean @ViewScoped 确保列表在同一视图的回发中被记住，而不是一遍又一遍地重新创建.

使用 启动示例(当使用 时，只需替换 通过 和 通过例如

或

):

<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公共类豆{私人列表<项目>项目;@PostConstruct公共无效初始化(){项目 = 新的 ArrayList<>();}公共无效添加(){items.add(new Item());}公共无效删除(项目项目){items.remove(item);}公共无效保存(){System.out.println("物品:" + 物品);}公共列表<项目>获取项目(){退换货品;}}

型号:

公共类项目{私有字符串值；公共字符串 getValue() {返回值；}公共无效集值(字符串值){this.value = 值；}公共字符串 toString() {return String.format("Item[value=%s]", value);}}

另见:

• 推荐的 JSF 2.0 CRUD 框架
• 如何创建动态 JSF 表单字段
• 如何使用 JSF 2.0 复合组件实现动态列表?
• 如何选择合适的 bean 范围?

Can I add JSF components dynamically? I need to have a form with a button which should add one <h:inputText> to the form. Is this possible?

I know this should be possible in JavaScript somehow. Do anybody know how to do this in JSF? I think the major problem is how do I get or set values of new inputs via #{value}.

解决方案

Use an iterating component like <h:dataTable> or <ui:repeat> to display a dynamically sized List of entities. Make the bean @ViewScoped to ensure that the list is remembered across postbacks on the same view instead of recreated over and over.

Kickoff example with <h:dataTable> (when using <ui:repeat> simply replace <h:dataTable> by <ui:repeat>, and <h:column> by e.g. <li> or <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>

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

}

Model:

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

}

See also:

• Recommended JSF 2.0 CRUD frameworks
• How to create dynamic JSF form fields
• How to implement a dynamic list with a JSF 2.0 Composite Component?
• How to choose the right bean scope?

这篇关于如何动态添加 JSF 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！