包含inputText的DataTable：可以使用JSF Custom Component

Question

我是JSF的新手，對於應用程序我很擔心我要做多字段輸入表單。

簡而言之，用戶在輸入數據時應該有一個inputText和一個添加新輸入文本以便輸入另一個數據的“添加”按鈕。 用戶完成后，他會按下另一個提交按鈕。 我找了一些已經完成的東西，但我沒有找到任何東西，所以我決定創建自己的自定義jsf組件

我們的想法是創建一個組件，該組件包含dataTable，其中包含datatable中每行的inputText，以及一個向綁定到數據表的集合添加行的按鈕。

我正在查看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. 用於發出HTML和解碼形式請求的新渲染器 。
2. （可能）一個新組件 ，可能擴展了UIData ，以及一個用於公開特定於renderkit的（例如HTML）屬性的具體形式 。
3. 一個新的JSP 標記類，用於允許在JSP中使用該控件。
4. faces-config.xml中所有上述內容的定義（請參閱規范 ）。