web-dev-qa-db-fra.com

Comment afficher/masquer un composant avec JSF?

Comment puis-je afficher/masquer un composant avec JSF?.

Merci | Abhi

javajavascriptjsf
20
Abhishek Dhote

En règle générale, vous devez obtenir une poignée du contrôle via son clientId . Cet exemple utilise une vue Facelets JSF2 avec une liaison requête-étendue pour obtenir un handle vers l'autre contrôle:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://Java.Sun.com/jsf/html">
  <h:head><title>Show/Hide</title></h:head>
  <h:body>
    <h:form>
      <h:button value="toggle"
               onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
      <h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
    </h:form>
    <script type="text/javascript">
      function toggle(id) {
        var element = document.getElementById(id);
        if(element.style.display == 'block') {
          element.style.display = 'none';
        } else {
          element.style.display = 'block'
        }
      }
    </script>
  </h:body>
</html>

Cela dépendra de la version de JSF sur laquelle vous travaillez. Voir cet article de blog pour les anciennes versions de JSF: JSF: utilisation des identificateurs de composant .

13
McDowell

Vous pouvez réellement accomplir ceci sans JavaScript, en utilisant uniquement l'attribut rendered de JSF, en entourant les éléments à afficher/masquer dans un composant pouvant lui-même être restitué, tel qu'un panelGroup, au moins dans JSF2. Par exemple, le code JSF suivant affiche ou masque l'une ou les deux listes déroulantes, ou les deux, en fonction de la valeur d'une troisième. 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>
58
Kevin Rahe

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

<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;
    }
}
7
Eugenijus S.

Utilisez l'attribut "render" disponible sur la plupart des balises, sinon toutes, de l'espace de noms h.

<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />
4
Thorbjørn Ravn Andersen

Une solution évidente consisterait à utiliser javascript (qui n'est pas JSF). Pour implémenter cela par JSF, vous devez utiliser AJAX. Dans cet exemple, j'utilise un groupe de boutons radio pour afficher et masquer deux ensembles 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 le commutateur est vrai, un ensemble de composants sera affiché et quand il est faux, l’autre ensemble sera montré.

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

Remarque: sur l'événement ajax, nous rendons les composants à la racine. parce que les composants qui ne sont pas rendus en premier lieu ne peuvent pas être rendus à nouveau sur l'événement ajax .

Notez également que si "componentsRoot" et les boutons radio se trouvent dans une hiérarchie de composants différente. vous devriez le référencer à partir de la racine (racine du formulaire). 

0
Mr.Q

vérifiez ce code ci-dessous . c'est pour le menu déroulant. Dans ce cas, si nous en sélectionnons d'autres, la zone de texte affichera sinon la zone de texte sera masquée.

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 vérifier ce lien cliquez ici

0
Gitesh Dang