java - ejemplo - jsf datatable pagination

DataTable que contiene inputText: ¿es posible con JSF Custom Component?

Question

Soy nuevo en JSF y para la aplicación en la que estoy trabajando tengo que hacer un formulario de entrada de campo múltiple.

En pocas palabras, el usuario debe tener un texto de entrada cuando ingresa sus datos y un botón "agregar" que agrega un nuevo texto de entrada para ingresar otros datos. Cuando el usuario finaliza, presiona otro botón de enviar. Busqué algo que ya estaba hecho, pero no encontré nada, así que decidí crear mi propio componente jsf personalizado

La idea era crear un componente que combine una tabla de datos que contenga un texto de entrada para cada fila en tabla de datos, más un botón que agregue una fila a la colección vinculada a la tabla de datos.

Estoy revisando la documentación y los libros de jsf, pero estoy un poco confundido y no estoy seguro de si es posible crear un componente así ... ¿Alguien puede ayudarme? TIA

Answer 1

Es posible hacer todo lo que quieras.

Puede construir algo cercano a lo que quiera utilizando los controles existentes. Una buena forma de aprovechar JSF al máximo es adaptar el modelo para la vista. Por ejemplo, esta vista muestra opciones de edición que le permiten agregar valores a una tabla de datos.

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

People Bean:

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

}

Persona frijol:

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>

Este enfoque es bastante flexible y con algunos CSS, puede verse bastante bien. Con algunos cambios en la vista y el modelo, puede tener solo la última fila editable, por ejemplo.

Si la experiencia resultante no es lo suficientemente rica o si necesita algo que pueda reutilizar, puede crear un control personalizado. Es difícil entrar en detalles sin saber exactamente lo que quiere, pero probablemente necesite:

1. Un nuevo Renderer para emitir HTML y solicitudes de formularios de decodificación.
2. (Tal vez) un nuevo componente , probablemente extendiendo UIData , y una forma concreta para exponer atributos de renderkit-specific (por ejemplo, HTML).
3. Una nueva clase de etiqueta JSP para permitir que el control se use en JSPs.
4. Definiciones para todo lo anterior en un faces-config.xml (ver especificación ).