Jsf 2.0 ajax inclusion de fichiers

**tralloc** · 20/10/2009, 17h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**tralloc** · 21/10/2009, 10h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Sniper37** · 21/10/2009, 11h44

tu peux englober le include dans un panelGroup et faire le render sur ce dernier.

**tralloc** · 21/10/2009, 11h46

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 !

**tralloc** · 21/10/2009, 11h47

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

**tralloc** · 21/10/2009, 12h11

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

**tralloc** · 21/10/2009, 14h36

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

**Sniper37** · 21/10/2009, 14h58

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

**tralloc** · 21/10/2009, 15h08

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 ?

**Sniper37** · 21/10/2009, 15h20

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

**tralloc** · 21/10/2009, 15h26

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

**Sniper37** · 21/10/2009, 15h31

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.

**tralloc** · 21/10/2009, 15h43

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.

**Sniper37** · 21/10/2009, 15h49

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?

**tralloc** · 21/10/2009, 15h59

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.

**Sniper37** · 21/10/2009, 16h30

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.

**tralloc** · 21/10/2009, 16h38

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

**Sniper37** · 21/10/2009, 16h47

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

**tralloc** · 21/10/2009, 16h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
    }
 
}