[debutant] jsf 2.0 balise ajax

Version imprimable

Hello tout le monde !!!

Bon, j'ai réussi à avoir de belles pages comme je les souhaitait,
maintenant viens le point qui m'intéresse beaucoup : ajax.
Cependant il est difficile de trouver de la bonne documentation sur le web (les jsf 2.0 n'étant pas encore très répandues).
Alors j'ai fait mon petit test personnel avec ce que j'ai réussi à glaner sur le web...

Ce que j'essaie de faire : changer le contenu de "contenu" lorsque je clique sur le commandButton "pageRegle" tout en changeant, côté serveur la valeur de mon champ nom dans mon bean environnement.

J'ai donc une page xhtml comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?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">
    <h:body>
    <ui:composition template="/template/base.xhtml">
	<ui:define name="titre">Mon titre</ui:define>
	<ui:define id="haut" name="haut">monhaut</ui:define>
	<ui:define name="gauche">
	    <h:commandButton id="pageConnexion" value="se connecter"/>
	    <h:commandButton id="pageInscription" value="s'inscrire"/>
	    <h:commandButton id="pageRegle" value="les règles" action="#{environnement.setNom('holé')}">
		<f:ajax render="contenu"/>
	    </h:commandButton>
	</ui:define>
	<ui:define id="contenu"  name="contenu">#{environnement.nom}</ui:define>
    </ui:composition>
    </h:body>
</html>

Et un template comme ceci

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
 
<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
 
    <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>
        <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="content" class="left_content">
                <ui:insert id="content" name="contenu">contenu par défaut</ui:insert>
            </div>
        </div>
    </h:body>

Et enfin mon message d'erreur (si il vous en faut plus je peux publier mais le message me semble suffisamment explicite)

Code:

1
2
 
<f:ajax> contains an unknown id 'contenu' - cannot locate it in the context of the component pageRegle

Avez vous une idée de ce qu'il faut faire ?
Merci

Petite précision,
lorsque j'enlève la balise ajax, voici le code généré (et qui fonctionne) côté client

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<?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>Mon titre
	</title></head><body>
        <div id="top" class="top">
	    <h2>Mon titre
	    </h2>monhaut
        </div>
 
        <div>
            <div id="left"><input id="pageConnexion" type="submit" name="pageConnexion" value="se connecter" /><input id="pageInscription" type="submit" name="pageInscription" value="s'inscrire" /><input id="pageRegle" type="submit" name="pageRegle" value="les règles" />
		<!--<f:ajax render="contenu"/>-->
            </div>
            <div id="content" class="left_content">duduche
            </div>
        </div></body>
 
</html>

19/10/2009, 16h17
Sniper37

ça ne serait pas parce que l'id que tu as mis est content et non contenu..
19/10/2009, 16h26
tralloc

Bonjour Sniper,
Eh bien j'ai essayé aussi, parce que je ne sais pas si la balise ajax s'applique à
- l'id contenu de mon define qui se trouve dans ma page entrée,
- ou au div avec l'id content qui se trouve dans mon template
- ou dans mon ui:insert qui se trouve aussi dans le template.

Mais la réponse est invariable quel que soit l'id que je donne.

Je me demande s'il ne s'agit pas d'un problème de "portée" de variable.

Je viens de faire une petite modif :
j'ai appelé mon id de mon define "defineContenu"
le div de mon template "divContenu"
le insert de mon template insertContenu

J'ai essayé les 3 ids dans ma balise f:ajax et c'est toujours pareil

J'ai trouvé la solution : il suffisait que dans mon template je décrive un formulaire englobant tout mon code.

Par contre : nouveau point que je n'arrive pas à résoudre : lorsque je clique sur un bouton les actions de chaque boutons se déclenchent ainsi qu'au chargement de la page, et donc ça ne va pas...
Voici mon code actualisé

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
 
<?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"
      >
    <h:body>
 
	<ui:composition template="/template/base.xhtml">
	    <ui:define id="titre" name="titre">Mon titre Ere</ui:define>
	    <ui:define id="haut" name="haut">monhaut</ui:define>
	    <ui:define id ="gauche" name="gauche">
		<h:commandButton id="pageConnexion"  value="se connecter"  >
		    <f:ajax render="labelContenu" event="click" onevent="#{environnement.setNom('bidule')}"/>
		</h:commandButton>
		<h:commandButton id="pageInscription" value="s'inscrire">
		    <f:ajax render="labelContenu" event="click" onevent="#{environnement.setNom('truc')}"/>
		</h:commandButton>
		<h:commandButton id="pageRegle" value="les règles">
		    <f:ajax render="labelContenu" event="click" onevent="#{environnement.setNom('chose')}"/>
		</h:commandButton>
	    </ui:define>
	    <ui:define id="defineContenu"  name="contenu">
		<h:outputText id="labelContenu" value="#{environnement.nom}"/>
	    </ui:define>
	</ui:composition>
    </h:body>
</html>

le code de mon template :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 <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>

et enfin le code généré

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
 
 <?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>Mon titre
	    </h2>monhaut
        </div>
        <div>
            <div id="left"><input id="formulairePageGlobale:pageConnexion" type="submit" name="formulairePageGlobale:pageConnexion" value="se connecter" onclick="mojarra.ab(this,event,'click',0,'formulairePageGlobale:labelContenu',{'onevent':});return false" /><input id="formulairePageGlobale:pageInscription" type="submit" name="formulairePageGlobale:pageInscription" value="s'inscrire" onclick="mojarra.ab(this,event,'click',0,'formulairePageGlobale:labelContenu',{'onevent':});return false" /><input id="formulairePageGlobale:pageRegle" type="submit" name="formulairePageGlobale:pageRegle" value="les règles" onclick="mojarra.ab(this,event,'click',0,'formulairePageGlobale:labelContenu',{'onevent':});return false" />
            </div>
            <div id="divContenu" class="left_content"><span id="formulairePageGlobale:labelContenu">chose</span>
            </div>
        </div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6706126643163826298:1335657967793212420" autocomplete="off" />
 
</form></body>
 
</html>

Ca y est !!!
il faut utiliser les événements !!! et un panelgroup (je ne sais pas si le panelgroup est obligatoire)

Code:

1
2
3
4
5
6
7
8
 
<h:panelGroup id="GrouppeDeBouton">
<h:commandButton id="premierBouton" value="bouton1" actionListener="#{environnement.actionPremierBouton}">
			<f:ajax render="labelContenu"/>
		    </h:commandButton>
		    <h:commandButton id="deuxiemeBouton" value="bouton2" actionListener="#{environnement.actionDeuxiemeBouton}">
			<f:ajax render="labelContenu"/>
		    </h:commandButton>

et dans le code java on déclare

Code:

1
2
3
4
5
 
import javax.faces.event.ActionEvent;
...
...
public void actionPremierBouton(ActionEvent e){