Projets
Pages enfant
  • Affichage dynamique suite à un clic-bouton

Supposons que l'on souhaite afficher un formulaire de saisie (ou tout autre composant) dynamiquement dans une page (affichant d'autres choses) au moment ou l'utilisateur clique sur un bouton

A compléter

Schéma ou exemple

Piste 1 : utiliser le rendered

... celui du form ou d'un panelGrid avec un booléen dans le contrôleur (ici showUserForm)

<h:panelGrid id="panelFormAddUser" columns="1" rendered="#{welcomeController.showUserForm}"> <h:form id="formAddUser"> [...] </h:form> </h:panelGrid>

...activé par le bouton suivant

<p:commandButton value="Afficher formulaire" update="@form,panelFormAddUser,growl" action="#{welcomeController.showFormNewUser}" > </p:commandButton>

... qui donne, si true

<table id="panelFormAddUser"><tbody> <tr><td> <form id="formAddUser" name="formAddUser" method="post" action="/stylesheets/private/todo_private_demo.xhtml" enctype="application/x-www-form-urlencoded"> [...] </form></td></tr> </tbody> </table>

...si false

rien du tout :-)

donc update="...panelFormAddUser..." ajax n'a aucun effet puisqu'il n'est pas sur la page.
En revanche si on désactive ajax sur le bouton la page est rechargée complètement :

<p:commandButton value="Afficher formulaire" actionListener="#{welcomeController.showFormNewUser}" ajax="false"> </p:commandButton>

... ça marche

Il faut donc un contenant qui s'affiche toujours, qui sera vide par défaut et contiendra le formulaire à l'appel du clic

Piste 2 : Utiliser un binding

Ceci consiste à mapper un objet qui compose la vue à une propriété du contrôleur.

On déclare par exemple dans welcomeController :

import javax.faces.component.UIComponent; [...] private UIComponent panelUserForm; [...] public void showFormNewUser() { this.panelUserForm.setRendered(true); } public UIComponent getPanelUserForm() { return panelUserForm; } public void setPanelUserForm(UIComponent panelUserForm) { this.panelUserForm = panelUserForm; } [...]

... et dans la JSP on mappe :

<h:panelGrid id="panelFormAddUser" binding="#{welcomeController.panelUserForm}" columns="1" rendered="false"> <h:form id="formAddUser"> [...] </h:form> </h:panelGrid>

Comme précédemment, update="...panelFormAddUser..." ajax n'a aucun effet puisqu'il n'est pas sur la page.
En revanche si on désactive ajax sur le bouton la page est rechargée complètement :

<p:commandButton value="Afficher formulaire" actionListener="#{welcomeController.showFormNewUser}" ajax="false"> </p:commandButton>

... ça marche

Il faut donc un contenant qui s'affiche toujours, qui sera vide par défaut et contiendra le formulaire à l'appel du clic

Piste 3 : Un contenant vide qui sera mis à jour au moment du clic

Pour que seul le panel soit rafraichi avec Ajax e non la page complète nous allons repartir de l'exemple précédent et laisser le panelGrid toujours visible et on va jouer sur la visibilité du formulaire.

<h:panelGrid id="panelFormAddUser" binding="#{welcomeController.panelUserForm}" columns="1" rendered="true"> <h:form id="formAddUser" rendered="false"> [...] </h:form> </h:panelGrid>

avec le bouton

<p:commandButton value="Afficher formulaire" update="@form,panelFormAddUser,growl" action="#{welcomeController.showFormNewUser}" > </p:commandButton>

Désormais au clic on appellera :

public void showFormNewUser() { this.panelUserForm.getChildren().get(0).setRendered(true); }

Là ça marche, au clic le rendered du formulaire est positionné à true et le panel est rafraichi.

Pour améliorer

On va maintenant ajouter un bouton dans le formulaire pour cacher ce dernier.
On a donc l'exemple complet :

<p:commandButton value="Afficher formulaire" update="@form,panelFormAddUser,growl" action="#{welcomeController.showFormNewUser}" > </p:commandButton> [...] <h:panelGrid id="panelFormAddUser" binding="#{welcomeController.panelUserForm}" columns="1" rendered="true"> <h:form id="formAddUser" rendered="false"> [...] </h:form> <h:form id="formhideAddUser" rendered="false"> <p:commandButton value="Masquer formulaire" update="panelFormAddUser,growl" action="#{welcomeController.hideFormNewUser}" > </p:commandButton> </h:form> </h:panelGrid>

Désormais aux clics on appellera le cas échéant :

import javax.faces.component.UIComponent; [...] private UIComponent panelUserForm; public void showFormNewUser() { for (UIComponent component : this.panelUserForm.getChildren()) { component.setRendered(true); } } public void hideFormNewUser() { for (UIComponent component : this.panelUserForm.getChildren()) { component.setRendered(false); } }

Pour améliorer encore un peu

On intègre le bouton d'affichage du formulaire dans le panel et on switch les rendered

<h:panelGrid id="panelFormAddUser" binding="#{welcomeController.panelUserForm}" columns="1" rendered="true"> <h:form id="formshowAddUser" rendered="true"> <p:commandButton value="Afficher formulaire" update="@form,panelFormAddUser,growl" action="#{welcomeController.toogleFormNewUser}" > </p:commandButton> </h:form> <h:form id="formAddUser" rendered="false"> [...] </h:form> <h:form id="formhideAddUser" rendered="false"> <p:commandButton value="Masquer formulaire" update="panelFormAddUser,growl" action="#{welcomeController.toogleFormNewUser}" > </p:commandButton> </h:form> </h:panelGrid>

Désormais aux clics on appellera une seule méthode :

import javax.faces.component.UIComponent; [...] private UIComponent panelUserForm; public void toogleFormNewUser() { for (UIComponent component : this.panelUserForm.getChildren()) { if (component.getAttributes().get("rendered").toString().equals("true")) component.setRendered(false); else component.setRendered(true); } }

Piste 4 : La solution de facilité... un composant

Primefaces propose par exemple le composant dialog

<p:commandButton value="Afficher formulaire" onclick="dialogNewUser.show();" type="button"/> [...] <p:dialog header="Création d'un utilisateur" widgetVar="dialogNewUser" modal="true"> <h:form id="formAddUser"> [...] </h:form> </p:dialog>
  • Aucune étiquette