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

Question

? Soy nuevo en JSF y para la aplicación 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 ya hecho, pero no encontré nada, así que decidí crear mi propio componente jsf personalizado

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

Estoy revisando la documentación jsf y los libros, 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 desee.

---

Puede construir algo cerca de lo que desee con 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> 

personas frijol:

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 un poco de 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 los detalles sin saber exactamente lo que quiere, pero es probable que necesitaría:

1. Un nuevo Renderer para emitir solicitudes de HTML y de forma de decodificación.
2. (Tal vez) una nueva component, probablemente se extienda UIData, y concrete form para exponer atributos específicos de renderkit (por ejemplo, HTML).
3. Un nuevo JSP tag class para permitir que el control se use en JSP.
4. Definiciones para todo lo anterior en un faces-config.xml (vea spec).