Comment afficher/cacher un composant avec JSF ? Je suis en train d'essayer de faire la même chose avec l'aide de javascript mais je n'y arrive pas. Je ne peux pas utiliser de bibliothèques tierces.
Merci| Abhi
Réponses
Trop de publicités?
Kevin Rahe
Points
666
Vous pouvez en fait accomplir ceci sans JavaScript, en utilisant uniquement les fonctions rendered en enfermant les éléments à afficher/masquer dans un composant qui peut lui-même être redessiné, tel qu'un panelGroup, du moins dans JSF2. Par exemple, le code JSF suivant affiche ou cache l'une ou les deux listes déroulantes 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>
En règle générale, vous devez obtenir une poignée du contrôle par l'intermédiaire de son [identifiant du client](http://download.oracle.com/javaee/6/api/javax/faces/component/UIComponent.html#getClientId()) . Cet exemple utilise une vue Facelets JSF2 avec une liaison request-scope pour obtenir une poignée de 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>La manière exacte de procéder dépend de la version de JSF sur laquelle vous travaillez. Voir cet article de blog pour les anciennes versions de JSF : JSF : travailler avec des identifiants de composants .
Eugenijus S.
Points
91
Vous devez utiliser <h:panelGroup ...> avec l'attribut rendered . Si vous réglez true à rendre, le contenu de <h:panelGroup ...> ne sera pas montré. Votre fichier XHTML devrait ressembler à 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{
private boolean showPassword = false;
private String password = "";
public boolean isShowPassword(){
return showPassword;
}
public void setPassword(password){
this.password = password;
}
public String getPassword(){
return this.password;
}
}
Thorbjørn Ravn Andersen
Points
38688
user3593084
Points
42
Une solution évidente serait d'utiliser javascript (qui n'est pas JSF). Pour mettre en œuvre cette solution avec 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 back bean, 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 est affiché et lorsqu'il est faux, l'autre ensemble est affiché.
<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 : lors de l'événement ajax, nous rendons les composants Root. car les composants qui ne sont pas rendus en premier lieu ne peuvent pas être re-rendu lors de l'événement ajax .
Notez également que si le "componentsRoot" et les boutons radio se trouvent dans une hiérarchie de composants différente, vous devez les référencer à partir de la racine (racine du formulaire).
- Réponses précédentes
- Plus de réponses
