如何使用JSF 2.0复合组件实现动态列表? [英] How to implement a dynamic list with a JSF 2.0 Composite Component?

问题描述

我问了这个问题，尽管答案是直接的满足了我的需求，我感到有一个针对此特定问题的简单解决方案.

I asked this question and although the answer directly satisfied my needs I am left with a feeling that there has to a simpler solution for this specific problem.

我想拥有一个接受项目列表的复合组件(商定的项目类型，以便成员可以在复合组件中自由使用)

I would like to have a composite component that accepts a list of items (The type of the items agreed upon so the members can be used freely within the composite component)

CC(复合组件)显示项目列表，并允许添加和减去项目.

The CC (composite component) display the list of items and allows for addition and subtraction of items.

我想以最简单，最有效的方式做到这一点.

I would like to do this in the most simple and efficient manner.

为说明此问题，请举一个例子:

To illustrate the problem, an example:

定义应该很简单(当然，除非不是:-)):

The definition should be rather simple (unless of course, its not :-) ):

<special:dynamicFieldList value="#{bean.fieldList} />

Field对象的最抽象形式为:

The most abstract form of a Field object would be:

public class Field{
 String uuid;
 String value;
}

我想就是这样. 您将如何以简单的方式实现这一目标?

I guess that's it. How would you implement this in a simple manner?

谢谢！

推荐答案

我将在复合组件中使用<h:dataTable>，该组件具有支持UIComponent，可以通过<composite:interface>的componentType属性进行绑定.然后，可以在UIComponent的支持下维护DataModel并定义操作.

I'd use a <h:dataTable> in a composite component with a backing UIComponent which you can bind by componentType attribute of the <composite:interface>. In the backing UIComponent you can then maintain the DataModel and define the actions.

dynamicFieldList.xhtml

<ui:composition
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:cc="http://java.sun.com/jsf/composite"
>
    <cc:interface componentType="dynamicFieldList">
        <cc:attribute name="value" type="java.util.List" required="true" />
    </cc:interface>
    <cc:implementation>
        <h:dataTable id="table" binding="#{cc.table}" value="#{cc.attrs.value}" var="field">
            <h:column><h:outputLabel value="#{field.label}" /></h:column>
            <h:column><h:inputText value="#{field.value}" /></h:column>
            <h:column><h:commandButton value="remove" action="#{cc.remove}" /></h:column>
        </h:dataTable>
        <h:commandButton value="add" action="#{cc.add}" />
    </cc:implementation>
</ui:composition>

(如果需要，<h:inputText>可以是您的复合字段组件)

(the <h:inputText> can if necessary be your composite field component)

com.example.DynamicFieldList

@FacesComponent(value="dynamicFieldList") // To be specified in componentType attribute.
@SuppressWarnings({"rawtypes", "unchecked"}) // We don't care about the actual model item type anyway.
public class DynamicFieldList extends UINamingContainer {

    private UIData table;

    public void add() {
        ((List) getAttributes().get("value")).add(new Field("somelabel"));
    }

    public void remove() {
        ((List) getAttributes().get("value")).remove(table.getRowData());
    }

    public UIData getTable() {
        return table;
    }

    public void setTable(UIData table) {
        this.table = table;
    }

}

按以下方式使用它:

<h:form>
    <my:dynamicFieldList value="#{bean.fields}" />
</h:form>

仅此

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Field> fields;

    public Bean() {
        fields = new ArrayList<>();
    }

    public List<Field> getFields() {
        return fields;
    }

}

和

public class Field implements Serializable {

    private String label;
    private String value;

    public Field() {
        //
    }

    public Field(String label) {
        this.label = label;
    }

    public String getLabel() {
        return label;
    }

    public void setLabel(String label) {
        this.label = label;
    }

    public String getValue() {
        return value;
    }

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

}

这篇关于如何使用JSF 2.0复合组件实现动态列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！