DataTable contenant inputText: est-ce possible avec JSF Custom Component

Question

Je suis nouveau à JSF et pour l'application je travaille sur un formulaire de saisie de champs multiples.

En peu de mots, l'utilisateur doit avoir un inputText lorsqu'il entre ses données et un bouton "add" qui ajoute un nouveau texte d'entrée pour entrer une autre donnée. Lorsque l'utilisateur a terminé, il appuie sur un autre bouton de soumission. J'ai cherché quelque chose déjà fait, mais je n'ai rien trouvé, donc j'ai décidé de créer mon propre composant jsf personnalisé

L'idée était de créer un composant combinant un dataTable contenant un inputText pour chaque ligne de datatable, plus un bouton qui ajoute une ligne à la collection liée au datatable. Je regarde la documentation et les livres de jsf, mais je suis un peu confus et je ne suis pas sûr si c'est possible de créer un tel composant ... Quelqu'un peut-il m'aider? TIA

Answer 1

Il est possible de faire tout ce que vous voulez.

---

Vous pouvez construire quelque chose proche de ce que vous voulez en utilisant les contrôles existants. Un bon moyen de tirer le meilleur parti de JSF est d'adapter le modèle à la vue. Par exemple, cette vue affiche les options d'édition qui vous permettent d'ajouter des valeurs à une table de données.

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

Personnes haricot:

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

} 

Personne haricot:

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> 

Cette approche est tout à fait flexible et avec un peu de CSS, peut avoir l'air assez bien. Avec quelques modifications apportées à la vue et au modèle, vous ne pouvez modifier que la dernière ligne, par exemple. Si l'expérience résultante n'est pas assez riche ou si vous avez besoin de quelque chose que vous pouvez réutiliser, vous pouvez créer un contrôle personnalisé. Il est difficile d'entrer dans les détails sans savoir exactement ce que vous voulez, mais vous auriez probablement besoin:

1. Une nouvelle Renderer pour émettre des requêtes HTML et sous forme de décodage.
2. (peut-être) un nouveau component, probablement étendu UIData, et un concrete form pour exposer des attributs spécifiques de renderkit (par exemple HTML). Un nouveau JSP tag class permet d'utiliser le contrôle dans les JSP.
3. Définitions pour tout ce qui précède dans un faces-config.xml (voir spec).