包含 inputText 的 DataTable：是否可以使用 JSF 自定义组件

Question

我是 JSF 的新手，对于我正在开发的应用程序，我必须做一个多字段输入表单。

简而言之，用户在输入数据时应该有一个 inputText 和一个“添加”按钮，该按钮添加一个新的输入文本以输入另一个数据。当用户完成后，他按下另一个提交按钮。 我找了一些已经完成的东西，但是我没有找到任何东西，所以我决定创建自己的自定义 jsf 组件

这个想法是创建一个组件，该组件将包含一个 dataTable 中每一行的 inputText 的 dataTable 以及一个用于向绑定到 datatable 的集合中添加一行的按钮。

我正在浏览 jsf 文档和书籍，但我有点困惑，我不确定是否可以创建这样的组件... 有人可以帮助我吗？ TIA

Answer 1

你可以做任何你想做的事情。

---

您可以使用现有控件构建接近您想要的东西。充分利用 JSF 的一个好方法是为视图定制模型。例如，此视图显示允许您向数据表添加值的编辑选项。

<f:view>
    <h:form>
        <h:dataTable value="#{people.list}" var="row">
            <h:column>
                <f:facet name="header">
                    <h:outputText value="#" />
                </f:facet>
                <h:selectBooleanCheckbox value="#{row.selected}" />
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="First Name" />
                </f:facet>
                <h:inputText value="#{row.firstname}" />
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Last Name" />
                </f:facet>
                <h:inputText value="#{row.lastname}" />
            </h:column>
            <f:facet name="footer">
                <h:panelGroup>
                    <h:commandButton value="Add Row" action="#{people.addPerson}" />
                    <h:commandButton value="Delete Selected"
                        action="#{people.deleteSelected}" />
                    <h:commandButton value="Finish" action="#{people.finish}" />
                </h:panelGroup>
            </f:facet>
        </h:dataTable>
    </h:form>
</f:view>

人豆：

public class People implements Serializable {

    private static final long serialVersionUID = 1L;

    private List<Person> people = new ArrayList<Person>();

    public People() {
        // initialise with one entry
        people.add(new Person());
    }

    public List<Person> getList() {
        return people;
    }

    public String addPerson() {
        people.add(new Person());
        return null;
    }

    public String deleteSelected() {
        Iterator<Person> entries = people.iterator();
        while (entries.hasNext()) {
            Person person = entries.next();
            if (person.isSelected()) {
                entries.remove();
            }
        }
        return null;
    }

    public String finish() {
        System.out.println(people);
        return "someNavigationRule";
    }

}

人豆：

public class Person implements Serializable {

    private static final long serialVersionUID = 1L;

    private String firstname;
    private String lastname;
    private transient boolean selected = false;

    public String getFirstname() {
        return firstname;
    }

    public void setFirstname(String firstname) {
        this.firstname = firstname;
    }

    public String getLastname() {
        return lastname;
    }

    public void setLastname(String lastname) {
        this.lastname = lastname;
    }

    public boolean isSelected() {
        return selected;
    }

    public void setSelected(boolean selected) {
        this.selected = selected;
    }

}

faces-config.xml：

<managed-bean>
    <managed-bean-name>people</managed-bean-name>
    <managed-bean-class>addmultiple.People</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

这种方法非常灵活，加上一些 CSS，看起来相当不错。例如，只需对视图和模型进行一些更改，您就可以只编辑最后一行。

---

如果结果体验不够丰富，或者如果您需要可以重复使用的东西，您可以创建自定义控件。在不确切知道您想要什么的情况下很难进入细节，但您可能需要：

1. 一个新的Renderer 用于发出 HTML 和解码表单请求。
2. （也许）一个新的component，可能扩展UIData，以及一个concrete form，用于公开特定于渲染套件（例如HTML）的属性。
3. 一个新的 JSP tag class 允许在 JSP 中使用控件。
4. faces-config.xml 中所有上述内容的定义（请参阅spec）。