Jsf 2.0 ajax inclusion de fichiers

Version imprimable

20/10/2009, 17h57
tralloc

Jsf 2.0 ajax inclusion de fichiers
Bonjour à nouveau
Bon, alors pour ceux qui n'auraient pas suivi mes périgrinations en JSF 2.0, mais qui j'ai réussi à changer le contenu d'un h:outputtext par ajax en utilisant un template et trois h:commandButton dans le même h:form.
Ca marche bien.

Maintenant j'ai voulu changer mon h:outputtext par un ui:include et évidemment ça ne marche pas. Il ne me trouve pas l'id de mon include : voici l'erreur :
Code:

1 2 <f:ajax> contains an unknown id 'includeContenu' - cannot locate it in the context of the component boutonPageConnexion
Ce qui est logique car l'ui:include n'apparaît pas dans le code généré mais est remplacé dans la page par le code html de la page appelée.
Donc je pense qu'il n'est pas possible de le faire comme celà.

Mon but est de charger un morceau de page dynamiquement par ajax selon le h:commandButton sur lequel je vais appuyer.
Quelle solution entrevoyez vous ? Des component ezcomp (je ne maîtrise pas encore le fonctionnement mais je ne suis pas sûr que ça puisse répondre à ma requête), ou directement du javascript du type httpxmlrequest mais ça me semble lourd. j'ai aussi pensé à des iframes...
Qu'en pensez vous ? Quelle serait la meilleure solution, si possible s'en s'éloigner des jsf

Bon, j'ai eu une idée mais elle s'est révélée infructueuse, j'ai voulu utiliser les c:choose c:when
Ca marche au lancement dans certains cas, particulièrement au lancement de l'application. Voici mon code
page appelée : (entree.xhtml)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<?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"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
 
      xmlns:c="http://java.sun.com/jsp/jstl/core">
 
    <ui:composition template="/template/base.xhtml">
	<ui:define id="titre" name="titre">Entrez dans une nouvelle Ere</ui:define>
	<ui:define id="haut" name="haut">monhaut</ui:define>
	<ui:define id ="gauche" name="gauche">
	    <h:panelGroup id="GrouppeDeBouton">
		<h:commandButton id="boutonPageConnexion" value="Entrée" actionListener="#{environnement.actionBoutonPageConnexion}">
		    <f:ajax render="formulaireContenu"/>
		</h:commandButton>
		<h:commandButton id="boutonPageInscription" value="Inscrivez vous" actionListener="#{environnement.actionBoutonPageInscription}">
		    <f:ajax render="formulaireContenu"/>
		</h:commandButton>
		<h:commandButton id="boutonPageRegle" value="Les règles" actionListener="#{environnement.actionBoutonPageRegle}">
		    <f:ajax render="formulaireContenu" />
		</h:commandButton>
	    </h:panelGroup>
	</ui:define>
	<ui:define id="defineContenu"  name="contenu">
	    <h:form id="formulaireContenu">
		<c:choose>
		    <c:when test="#{environnement.pageConnexionActive}">
			<ui:include src="sousPageEntree/connexion.xhtml"/>
		    </c:when>
		    <c:when test="#{environnement.pageInscriptionActive}">
			<ui:include src="sousPageEntree/inscription.xhtml"/>
		    </c:when>
		    <c:when test="#{environnement.pageRegleActive}">
			<ui:include src="sousPageEntree/regle.xhtml"/>
		    </c:when>
		</c:choose>
	    </h:form>
	</ui:define>
    </ui:composition>
</html>

Puis voici mon code java

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
package objet.session;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;
 
@ManagedBean(name="environnement")
@SessionScoped
public class Environnement {
    private String sousPageEnCours="sousPageEntree/connexion.xhtml";
 
 
    public boolean isPageConnexionActive() {
	return sousPageEnCours.equals("sousPageEntree/connexion.xhtml");
    }
 
    public boolean isPageInscriptionActive() {
	return sousPageEnCours.equals("sousPageEntree/inscription.xhtml");
    }
 
    public boolean isPageRegleActive() {
	return sousPageEnCours.equals("sousPageEntree/regle.xhtml");
    }
 
    public String getSousPageEnCours() {
	return sousPageEnCours;
    }
 
    public void setSousPageEnCours(String sousPageEnCours) {
	this.sousPageEnCours = sousPageEnCours;
    }
 
    public void actionBoutonPageConnexion(ActionEvent e){
	sousPageEnCours="sousPageEntree/connexion.xhtml";
    }
    public void actionBoutonPageInscription(ActionEvent e){
	sousPageEnCours="sousPageEntree/inscription.xhtml";
    }
    public void actionBoutonPageRegle(ActionEvent e){
	sousPageEnCours="sousPageEntree/regle.xhtml";
    }
 
}

lorsque la page entree se charge pour la première fois, la sous page active en cours est : "connexion.xhtml" voir le code java
Il la charge sans aucun problème à l'endroit que j'ai défini dans ma page.

par contre lorsque je clique sur un de mes trois boutons "h:commandButton" les valeurs sont bien changées dans le code java, puis j'ai le message suivant, apparaissant dans un alert au sens javascript du terme qui me rend perplexe :

Code:

1
2
 
malformedXML: During update: formulairePageGlobale:formulaireContenu not found

et ce quel que soit le bouton choisi
pourtant lorsque j'affiche le code html de la page généré je trouve bien mon formulaire avec pour id=formulairePageGlobale:formulaireContenu
voici la page générée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<?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"><head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Entrez dans une nouvelle Ere
	</title><script type="text/javascript" src="/NouvelleEreJsf2/faces/javax.faces.resource/jsf-uncompressed.js?ln=javax.faces"></script></head><body>
<form id="formulairePageGlobale" name="formulairePageGlobale" method="post" action="/NouvelleEreJsf2/faces/entree.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="formulairePageGlobale" value="formulairePageGlobale" />
 
	<div id="top" class="top">
 
	    <h2>Entrez dans une nouvelle Ere
	    </h2>monhaut
        </div>
        <div>
            <div id="left"><span id="formulairePageGlobale:GrouppeDeBouton"><input id="formulairePageGlobale:boutonPageConnexion" type="submit" name="formulairePageGlobale:boutonPageConnexion" value="Entrée" onclick="mojarra.ab(this,event,'action',0,'formulairePageGlobale:formulaireContenu');return false" /><input id="formulairePageGlobale:boutonPageInscription" type="submit" name="formulairePageGlobale:boutonPageInscription" value="Inscrivez vous" onclick="mojarra.ab(this,event,'action',0,'formulairePageGlobale:formulaireContenu');return false" /><input id="formulairePageGlobale:boutonPageRegle" type="submit" name="formulairePageGlobale:boutonPageRegle" value="Les règles" onclick="mojarra.ab(this,event,'action',0,'formulairePageGlobale:formulaireContenu');return false" /></span>
            </div>
            <div id="divContenu" class="left_content">
<form id="formulairePageGlobale:formulaireContenu" name="formulairePageGlobale:formulaireContenu" method="post" action="/NouvelleEreJsf2/faces/entree.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="formulairePageGlobale:formulaireContenu" value="formulairePageGlobale:formulaireContenu" />
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
    <body>
        <p>
            Connexion
        </p>
    </body>
</html><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-122723051736160639:4845146440517739797" autocomplete="off" />
</form>
            </div>
        </div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-122723051736160639:4845146440517739797" autocomplete="off" />
</form></body>
 
</html>

Pouvez vous m'aider à comprendre ?
Merci d'avance

PS: J'ai essayé une autre solution qui donne exactement le même résultat avec des h:panelgroup
J'ai aussi eu l'idée de me servir du code java pour changer le contenu de l'include page mais sans effet : l'objet UIinclude n'existe pas dans les bibliothèques java

21/10/2009, 11h44
Sniper37

tu peux englober le include dans un panelGroup et faire le render sur ce dernier.
21/10/2009, 11h46
tralloc

Yess !!!
J'y suis presque j'ai rempacé le formulaire par un h:panelgroup
Dernier soucis, le refresh ne se fait pas bien, il y a un problème de cycle de vie que je dois résoudre :
Quand j'appuie sur un bouton, j'ai le résultat de l'appuis précédent, ce qui n'est pas idéal !
21/10/2009, 11h47
tralloc

sniper je n'avais pas encore vu ta réponse (merci) mais c'est ça !.
Je n'ai plus que mon problème de cycle de vie à régler !!!
21/10/2009, 12h11
tralloc

J'ai crié victoire un peu vite...
Il y a désormais un rendered = "true" sur mon h:panelgroup
et sur chaque h:commandbutton un immediate="true"
mais le refresh n'est pas meilleur
21/10/2009, 14h36
tralloc

Est-ce que quelqu'un sait si c'est possible dans un binding de modifier un ui:include ? Il semblerait que c'est ma seule chance
21/10/2009, 14h58
Sniper37

non le binding n'est pas fait pour ça, j'ai l'impression que tu te complique la vie pour pas grand chose, tu peux expliquer ce que tu veux faire..
21/10/2009, 15h08
tralloc

Eh bien je veux juste pouvoir charger ou changer une page imbriquée dans ma page principale dynamiquement sans la (la page principale) recharger complètement.
Ceci afin de rendre l'application plus légère (éviter un chargement de banière inutile...)
Peut-être faut-il que j'utilise des ezcomp ?
21/10/2009, 15h20
Sniper37

Si tu passe par la navigation, la page sera automatiquement chargé, si tu fais une requete ajax, tu va rafraichir un élément de la page et pas toute la page..
et si tu as que des éléments statiques dans l'entête et le bas de page, tu peux utiliser le cache..
21/10/2009, 15h26
tralloc

j'avais choisi les composants ajax comme tu peux le voir dans le premier code de ma du post (entree.xhtml).
J'ai quelque chose qui marche presque, le problème c'est qu'il y a un décalage, je dois appuyer deux fois sur un bouton pour qu'il soit pris en compte.

C'est normal à cause du cycle de vie d'une jsf :
- les données sont mise à jour dans la page
- seulement plus tard les événements sont déclenchés...

Je ne vois pas comment faire
21/10/2009, 15h31
Sniper37

Citation:

Envoyé par tralloc

j'avais choisi les composants ajax comme tu peux le voir dans le premier code de ma du post (entree.xhtml).
J'ai quelque chose qui marche presque, le problème c'est qu'il y a un décalage, je dois appuyer deux fois sur un bouton pour qu'il soit pris en compte.

C'est normal à cause du cycle de vie d'une jsf :
- les données sont mise à jour dans la page
- seulement plus tard les événements sont déclenchés...

Je ne vois pas comment faire

Ce n'est pas normal que le button ne marque qu'après 2 click, le cycle de vie de JSF ne bloque pas l'envoie de formulaire..
tu peux poster le code de la page où y'a le button.
21/10/2009, 15h43
tralloc

tout est dans mon premier fichier (entree.xhtml) j'ai aussi un template si tu veux je peux le publier
les boutons sont les h:commandbutton

ça ne marche que la deuxième fois d'après ce que j'ai compris à cause du type d'événement que j'ai utilisé : actionListener qui ne se déclenche qu'à l'avant dernier stade du cycle de vie d'une JSF.

Le problème avec les autres événements : "execute" ou "click" que l'on met dans la balise ajax, c'est qu'ils sont générés pour tous les boutons (car ils appartiennent au même formulaire) j'avais donc réglé le problème justement en changeant le type d'événement.

Je pensais qu'en essayant de récupérer par un bind l'include ou autre chose dans mon code java, je pourrais le modifier ou le changer suivant l'événement déclenché. Ca règlerait le problème. Le soucis c'est qu'il n'y a pas d'objet UIInclude dans java, alors que les autres objets UI existent.
21/10/2009, 15h49
Sniper37

Citation:

Envoyé par tralloc

tout est dans mon premier fichier (entree.xhtml) j'ai aussi un template si tu veux je peux le publier
les boutons sont les h:commandbutton

ça ne marche que la deuxième fois d'après ce que j'ai compris à cause du type d'événement que j'ai utilisé : actionListener qui ne se déclenche qu'à l'avant dernier stade du cycle de vie d'une JSF.

et pourquoi la deuxième fois ça marche?
je ne me suis pas encore penché sur JSF 2.0, mais ça me semble bizard, tu as essayé d'utiliser action au lieu de actionListener?
21/10/2009, 15h59
tralloc

Oui j'avais utilisé action au début, mais les 3 boutons agissaient à chaque fois que je cliquais dessus. C'est un comportement html apparemment (à la base je suis développeur .Net alors d'habitude je ne me pose pas trop de question, je n'utilise même pas d'ajax, mais là j'ai envie de découvrir et de comprendre et de faire le truc le plus optimisé possible avec cette techno)

Ca marche la deuxième fois parce que la première fois l'actionListener a fixé la valeur que je souhaitais dans mon managedBean même s'il ne les affiche pas. Alors la deuxième fois il affiche ce qu'il fallait la fois d'avant (d'où 2 clics nécessaires). Bien sûr si je cliquais sur un autre bouton il m'afficherait simplement la valeur précédente.
21/10/2009, 16h30
Sniper37

Bon, si je comprend bien le problème ce n'est pas que le premier click ne marche pas mais, la valeur n'est pas modifiée, ce n'est pas un problème de cycle de vie, à chaque requete ajax ou pas, le cycle de vie JSf s'exécute normalement sauf si tu ajoute un immediate, ou y'a des erreurs validation/conversion.
21/10/2009, 16h38
tralloc

J'ai rajouté immediate = true, mais ça ne marche pas. j'ai lu que ça ne s'appliquait pas aux événements.
Le clic marche mais la valeur à l'écran n'apparaît pas parce que mon événement qui est sencé changer la page se déclenche après que le composant graphique ait fait le "get".

Je cherche donc un moyen que le composant puisse faire le "get" après... Ca me désole
21/10/2009, 16h47
Sniper37

Citation:

Envoyé par tralloc

J'ai rajouté immediate = true, mais ça ne marche pas. j'ai lu que ça ne s'appliquait pas aux événements.
Le clic marche mais la valeur à l'écran n'apparaît pas parce que mon événement qui est sencé changer la page se déclenche après que le composant graphique ait fait le "get".

Je cherche donc un moyen que le composant puisse faire le "get" après... Ca me désole

j'ai l'impression que tu mélange tout, reprenons depuis le début, redonne le code qui ne marche pas avec le boutton et la valeu qui doit changer..

Voici mon fichier "entree.xhtml" à l'intérieur tu trouveras d'une part les h:commandbutton, d'autre part le h:panelgroup qui doit être mis à jour.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<?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"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
 
    <ui:composition template="/template/base.xhtml">
	<ui:define id="titre" name="titre">Entrez dans une nouvelle Ere</ui:define>
	<ui:define id="haut" name="haut">monhaut</ui:define>
	<ui:define id ="gauche" name="gauche">
	    <h:panelGroup id="GrouppeDeBouton">
		<h:commandButton id="boutonPageConnexion" value="Entrée" actionListener="#{environnement.actionBoutonPageConnexion}" immediate="true">
		    <f:ajax render="formulaireContenu"/>
		</h:commandButton>
		<h:commandButton id="boutonPageInscription" value="Inscrivez vous" actionListener="#{environnement.actionBoutonPageInscription}" immediate="true">
		    <f:ajax render="formulaireContenu" />
		</h:commandButton>
		<h:commandButton id="boutonPageRegle" value="Les règles" actionListener="#{environnement.actionBoutonPageRegle}"  immediate="true">
		    <f:ajax render="formulaireContenu" />
		</h:commandButton>
	    </h:panelGroup>
	</ui:define>
	<ui:define id="defineContenu"  name="contenu">
	    <h:panelGroup id="formulaireContenu" rendered="true">
		<ui:include id="includeContenu" src="#{environnement.sousPageEnCours}"/>
	    </h:panelGroup>
	</ui:define>
    </ui:composition>
</html>

voici mon template : base.xhtml où on peut voir le formulaire qui s'applique à toute la page.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
 
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>
	    <ui:insert name="titre">Titre par défault</ui:insert>
	</title>
    </h:head>
    <h:body>
        <h:form id="formulairePageGlobale">
	<div id="top" class="top">
	    <h2>
		<ui:insert name="titre">Titre par défault</ui:insert>
	    </h2>
            <ui:insert name="haut">Haut par défault</ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="gauche">gauche par défaut</ui:insert>
            </div>
            <div id="divContenu" class="left_content">
                <ui:insert id="insertContenu" name="contenu">contenu par défaut</ui:insert>
            </div>
        </div>
	</h:form>
    </h:body>
 
</html>

et enfin le bean associé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
 
package objet.session;
 
 
iimport java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;
 
 
 
@ManagedBean(name="environnement")
@SessionScoped
public class Environnement implements Serializable {
    private String sousPageEnCours="sousPageEntree/connexion.xhtml";
 
    public String getSousPageEnCours() {
 
	return sousPageEnCours;
 
    }
 
 
    public void setSousPageEnCours(String sousPageEnCours) {
 
 
	this.sousPageEnCours = sousPageEnCours;
    }
 
    public void actionBoutonPageConnexion(ActionEvent e){
	this.sousPageEnCours="sousPageEntree/connexion.xhtml";
    }
    public void actionBoutonPageInscription(ActionEvent e){
	this.sousPageEnCours="sousPageEntree/inscription.xhtml";
    }
    public void actionBoutonPageRegle(ActionEvent e){
	this.sousPageEnCours="sousPageEntree/regle.xhtml";
    }
 
}

merci pour ton aide !!!
Les fichiers ont un peu évolué mais pas trop...

21/10/2009, 17h26
Sniper37

avec immediate = true la phase Update Model Value n'est pas executée donc la valeur ne change pas.
laisse immediate à sa valeur par défaut: false.
21/10/2009, 17h28
tralloc

Voilà c'est fait. mais ça ne change rien, c'est ce que j'avais fais au début...
Bon je me sauve pour l'instant, je reviendrai demain à la charge !

Hello, je suis enfin parvenu à mes fins !!!
Il fallait travailler en java
Je devrais pouvoir un peu optimiser mon code, mais pour l'instant ça marche.

Voici le code de ma page principale :
- Vous verrez que j'ai fixé les rendered des h:panelsgroups à true ou false pour l'inistialisation.
- Remarquez également la présence de bindings sur les différents panels

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<?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"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp/entree">
 
    <ui:composition template="/template/base.xhtml">
	<ui:define id="titre" name="titre">Entrez dans une nouvelle Ere</ui:define>
	<ui:define id="haut" name="haut">monhaut</ui:define>
	<ui:define id ="gauche" name="gauche">
	    <h:panelGroup id="GrouppeDeBouton">
		<h:commandButton id="boutonPageConnexion" value="Entrée" actionListener="#{environnement.actionBoutonPageConnexion}">
		    <f:ajax render="panelContenuGlobal" />
		</h:commandButton>
		<h:commandButton id="boutonPageInscription" value="Inscrivez vous" actionListener="#{environnement.actionBoutonPageInscription}">
		    <f:ajax render="panelContenuGlobal" />
		</h:commandButton>
		<h:commandButton id="boutonPageRegle" value="Les règles" actionListener="#{environnement.actionBoutonPageRegle}">
		    <f:ajax render="panelContenuGlobal" />
		</h:commandButton>
	    </h:panelGroup>
	</ui:define>
	<ui:define id="defineContenu"  name="contenu">
	    <h:panelGroup id="panelContenuGlobal">
		<h:panelGroup id="panelConnexion" rendered="true" binding="#{environnement.panelConnexion}">
		    <ui:include id="includeContenu" src="sousPageEntree/connexion.xhtml"/>
		</h:panelGroup>
		<h:panelGroup id="panelInscription" rendered="false" binding="#{environnement.panelInscription}">
		    <ui:include id="includeContenu" src="sousPageEntree/inscription.xhtml"/>
		</h:panelGroup>
		<h:panelGroup id="panelRegle" rendered="false" binding="#{environnement.panelRegle}">
		    <ui:include id="includeContenu" src="sousPageEntree/regle.xhtml"/>
		</h:panelGroup>
	    </h:panelGroup>
	</ui:define>
    </ui:composition>
</html>

Voici le code Java, il nécessite quelques optimisations, mais c'est un détail.
- après les différents événements on modifie l'état des h:panelgroup ici avec un HtmlPanelGroup.setRendered(true ou false)
- Ensuite on sauve leur état par un HtmlPanelGroup.saveState.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
package objet.session;
 
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.html.HtmlPanelGroup;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
 
 
@ManagedBean(name="environnement")
@SessionScoped
public class Environnement implements Serializable {
    private String sousPageEnCours;
    public HtmlPanelGroup panelConnexion;
    public HtmlPanelGroup panelInscription;
    public HtmlPanelGroup panelRegle;
 
    public HtmlPanelGroup getPanelConnexion() {
	return panelConnexion;
    }
 
    public void setPanelConnexion(HtmlPanelGroup panelConnexion) {
	this.panelConnexion = panelConnexion;
    }
 
    public HtmlPanelGroup getPanelInscription() {
	return panelInscription;
    }
 
    public void setPanelInscription(HtmlPanelGroup panelInscription) {
	this.panelInscription = panelInscription;
    }
 
    public HtmlPanelGroup getPanelRegle() {
	return panelRegle;
    }
 
    public void setPanelRegle(HtmlPanelGroup panelRegle) {
	this.panelRegle = panelRegle;
    }
 
    public String getSousPageEnCours() {
	return sousPageEnCours;
    }
    public void setSousPageEnCours(String sousPageEnCours) {
	this.sousPageEnCours = sousPageEnCours;
	if(sousPageEnCours.equals("sousPageEntree/connexion.xhtml")){
	    panelConnexion.setRendered(true);
	    panelInscription.setRendered(false);
	    panelRegle.setRendered(false);
	}
	else if(sousPageEnCours.equals("sousPageEntree/inscription.xhtml")){
	    panelConnexion.setRendered(false);
	    panelInscription.setRendered(true);
	    panelRegle.setRendered(false);
	}
	else if(sousPageEnCours.equals("sousPageEntree/regle.xhtml")){
	    panelConnexion.setRendered(false);
	    panelInscription.setRendered(false);
	    panelRegle.setRendered(true);
	}
	FacesContext contexte=FacesContext.getCurrentInstance();
	panelConnexion.saveState(contexte);
	panelInscription.saveState(contexte);
	panelRegle.saveState(contexte);
    }
 
    public Environnement(){
    }
 
    public void actionBoutonPageConnexion(ActionEvent e){
	this.setSousPageEnCours("sousPageEntree/connexion.xhtml");
 
    }
    public void actionBoutonPageInscription(ActionEvent e){
	this.setSousPageEnCours("sousPageEntree/inscription.xhtml");
 
    }
    public void actionBoutonPageRegle(ActionEvent e){
	this.setSousPageEnCours("sousPageEntree/regle.xhtml");
    }
 
}

Merci à sniper qui m'a aidé.