Comment puis-je afficher/cacher un composant avec JSF?

vous pouvez en fait accomplir ce sans JavaScript, en utilisant seulement l'attribut rendered de JSF, en enfermant les éléments à afficher/cacher dans un composant qui peut lui-même être rendu, comme un panelGroup, au moins dans JSF2. Par exemple, le code JSF suivant affiche ou Cache une ou deux listes déroulantes selon la valeur d'un tiers. Un événement AJAX est utilisé pour mettre à jour l'affichage:

<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
    <f:selectItem itemValue="O" itemLabel="Originator" />
    <f:selectItem itemValue="R" itemLabel="Role" />
    <f:selectItem itemValue="E" itemLabel="Employee" />
    <f:ajax event="change" execute="@this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
    <h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
                     rendered="#{workflowProcEditBean.performedBy eq 'R'}">
        <f:selectItem itemLabel="- Choose One -" itemValue="" />
        <f:selectItems value="#{workflowProcEditBean.roles}" />
    </h:selectOneMenu>
    <h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
                     rendered="#{workflowProcEditBean.performedBy eq 'E'}">
        <f:selectItem itemLabel="- Choose One -" itemValue="" />
        <f:selectItems value="#{workflowProcEditBean.employees}" />
    </h:selectOneMenu>
</h:panelGroup>

vous devez utiliser <h:panelGroup ...> étiquette avec l'attribut rendered . Si vous définissez true à rendu, le contenu de <h:panelGroup ...> ne sera pas affiché. Votre fichier XHTML devrait avoir quelque chose comme ceci:

<h:panelGroup rendered="#{userBean.showPassword}">
    <h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>

UserBean.java:

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class UserBean implements Serializable{
    //field password and it's getter and setter
    private boolean showPassword = false;
    public boolean isShowPassword(){
        return showPassword;
    }
}

utilise l'attribut" rendu " disponible sur la plupart sinon la totalité des balises de l'espace h-Nam.

<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />

cochez ce code ci-dessous. c'est pour le menu déroulant. Dans ce cas, si nous sélectionnons les autres, la zone de texte affichera sinon la zone de texte se cachera.

function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
The HTML code here :

<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">

ou vous pouvez consulter ce lien Cliquez ici

une solution évidente serait d'utiliser javascript (qui n'est pas JSF). Pour mettre en œuvre ceci par JSF vous devez utiliser AJAX. Dans cet exemple, j'utilise un groupe de boutons radio pour afficher et masquer les deux ensemble de composants. Dans le haricot arrière, je définis un commutateur booléen.

private boolean switchComponents;

public boolean isSwitchComponents() {
    return switchComponents;
}

public void setSwitchComponents(boolean switchComponents) {
    this.switchComponents = switchComponents;
}

lorsque l'interrupteur est true, un ensemble de composants s'affiche et lorsqu'il est false, l'autre ensemble s'affiche.

 <h:selectOneRadio value="#{backbean.switchValue}">
   <f:selectItem itemLabel="showComponentSetOne" itemValue='true'/>
   <f:selectItem itemLabel="showComponentSetTwo" itemValue='false'/>
   <f:ajax event="change" execute="@this" render="componentsRoot"/>
 </h:selectOneRadio>


<H:panelGroup id="componentsRoot">
     <h:panelGroup rendered="#{backbean.switchValue}">
       <!--switchValue to be shown on switch value == true-->
     </h:panelGroup>

   <h:panelGroup rendered="#{!backbean.switchValue}">
      <!--switchValue to be shown on switch value == false-->
   </h:panelGroup>
</H:panelGroup>

Note: sur l'événement ajax nous rendons components racine. parce que les composants qui ne sont pas rendus en premier lieu ne peuvent pas être re-rendus sur l'événement ajax .

aussi, notez que si les boutons" componentsRoot " et radio sont sous une hiérarchie de composants différente. vous devez le référencer à partir de la racine (forme racine).