如何使用 JSF 2.0 复合组件实现动态列表?

发布于 2024-11-15 22:29:43 字数 561 浏览 4 评论 0原文

我问了这个问题,尽管答案直接满足了我的需求我感觉必须有一个更简单的解决方案来解决这个特定问题。

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

CC(复合组件)显示项目列表并允许添加和项目的减法。

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

为了说明这个问题,举个例子:

enter image description here

定义应该相当简单(当然,除非它不是: -) ):

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

Field 对象最抽象的形式是:

public class Field{
 String uuid;
 String value;
}

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

谢谢!

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)

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:

enter image description here

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

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

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?

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

[旋木] 2024-11-22 22:29:43

我将在带有支持 UIComponent 的复合组件中使用 ,您可以通过 componentType 属性进行绑定代码><复合:接口>。然后,您可以在支持 UIComponent 中维护 DataModel 并定义操作。

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>

(如有必要, 可以是您的复合字段组件)

com.example.DynamicFieldList< /code>

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

}

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

}

Use it as follows:

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

with just this

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

    private List<Field> fields;

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

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

}

and

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

}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文