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

查看:31
本文介绍了如何使用 JSF 2.0 复合组件实现动态列表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我问了这个问题,虽然答案是直接的满足了我的需求 我觉得必须有一个更简单的解决方案来解决这个特定的问题.

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?

谢谢!

推荐答案

我会在带有 UIComponent 支持的复合组件中使用 您可以通过 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>

(如果需要, 可以作为复合字段组件)

(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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆