Richfaces et Ajax

Version imprimable

21/12/2007, 14h35
loic38_01

Richfaces et Ajax

Bonjour à tous,
je suis entrain de mettre à jsf et à à bibliothèque richfaces, et j'ai suivi les exemples du blog de Djo, consultables ici : http://blog.developpez.com/index.php?blog=174&cat=1292.

J'ai suivi le premier exemple (le hello world en ajax) et celui ci, dans les 2 cas je n'ai aucune erreur dans les logs de tomcat, les pages s'affichent bien mais les fonctions ajax ne font rien. Je m'explique : pour le hello world, je suis obligé d'appuyer sur la touche entrée pour que mon nom s'affiche, et dans l'exemple du drag 'n drop, la liste et le prix ne se mettent pas a jour lors que je fais glisser un produit sur le panier... Etrange, j'ai pourtant essayé avec différents navigateurs (dont Firefox 2.0 ).

En mettant un point d'arret dans la méthode onDropItem de la classe CartCtrl et je vois que je ne rentre jamais dans cette méthode. Ce qui est bizarre c'est que lorsque je fais le drag et que je drop sur le panier, le cadre change de couleur, donc apparemment il reconnait bien le drop, mais il ne se passe rien..

Est ce que quelqu'un a rencontré le même problème?

Merci

Loic
21/12/2007, 14h50
djo.mos

Bonjour.
Veux tu s'il te plaît regarder dans la console d'erreurs de Firefox pour voir ce qui ne va pas ? (Tools > Error Console).
Assures toi d'effacer toutes les erreurs et de ne tester que l'application en question, histoire de ne pas avoir aussi les erreurs provenant d'autres sites :aie:

:merci:

Re salut!

Pour le premier exemple (hello world), firefox ne renvoie pas d'erreur.
Pour l'exemple du drag 'n drop, il me donne cette erreur :

Code:

1
2
3
4
 
Erreur : this._form has no properties
Fichier source : <a href="http://localhost:8080/exempleRichFaces2/a4j_3_1_2.GAorg.ajax4jsf.javascript.AjaxScript.jsf" target="_blank">http://localhost:8080/exempleRichFac...AjaxScript.jsf</a>
Ligne : 89

Je n'ai pas de balise form dans ma jsp, c'est peut etre ce qui manque?

Voici ma jsp :

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
 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
 
<html>
<head>
</head>
<body>
<f:view>
	<rich:dataGrid value="#{itemsCtrl.items}" var="item" columns="3">
		<a4j:outputPanel layout="block" style="cursor: move">
			<rich:dragSupport dragType="item" dragValue="#{item}" />
			<h:panelGrid border="0" columns="2">
				<h:outputText value="Nom: " />
				<h:outputText value="#{item.name}" />
				<h:outputText value="Prix: " />
				<h:outputText value="#{item.price}" />
			</h:panelGrid>
		</a4j:outputPanel>
	</rich:dataGrid>
 
	<a4j:outputPanel layout="block"> 
	  <rich:dropSupport acceptedTypes="item" dropListener="#{cartCtrl.onDropItem}" 
	      reRender="boughtItems, totalPrice" dropValue="x" /> 
	  <h:graphicImage url="/pics/shopping_cart.png" /> 
	</a4j:outputPanel> 
 
 
	<rich:dataList id="boughtItems" value="#{cartCtrl.items}" var="item">
		<h:outputText value="#{item.name}" />
	</rich:dataList>
	<h:outputText id="totalPrice" value="Prix total: #{cartCtrl.price}" />
 
</f:view>
</body>
</html>

Merci !

21/12/2007, 15h10
djo.mos

Oh là là !
Oui, c'est bien ça l'erreur ! Il faut mettre le tout dans un formulaire. Je l'ai d'ailleurs indiqué en gras dans mon blog :

Citation:

N.B: Il faut mettre les composants dragSupport (ainsi que ses parents) et dropSupport (ainsi que ses parents) dans un formulaire et dans le même formulaire !

Refais le test en englobant le tout dans un form, et on verra ce que ça donne :king:
21/12/2007, 15h19
loic38_01

Oupsss désolé j'ai fait le boulet là, en effet j'avais complètement zappé cette partie et là ça marche!!
Par contre pour le premier exemple ça reste un mystère...

Merci en tout cas pour ton aide précieuse!
21/12/2007, 15h19
djo.mos

:king:
Sinon, c'est vrai que c'est bizarre.
Peux tu montrer le bout de code de la première ?

Voici le code pour la première:

ma jsp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
 
 
<html>
<head>
<title>SUCCESS!!!</title>
</head>
<body>
<f:view>
	<h:outputText value="Name :" />
	<h:form>
		<h:inputText value="#{helloBean.name}">
			<a4j:support event="onchange" reRender="greeting" /> 
		</h:inputText>
	</h:form>
	<h:outputText id="greeting" value="Hello #{helloBean.name} !" />
</f:view>
</body>
</html>

le bean :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
public class HelloBean {
	private String name; 
 
    public String getName() { 
       return name; 
    } 
 
    public void setName(String name) { 
       this.name = name; 
    } 
}

faces-config.xml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?xml version="1.0" encoding="UTF-8"?>
 
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
	version="1.2">
<managed-bean> 
     <managed-bean-name>helloBean</managed-bean-name> 
     <managed-bean-class>HelloBean</managed-bean-class> 
     <managed-bean-scope>request</managed-bean-scope> 
</managed-bean>
 
</faces-config>

web.xml

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"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
 
    <display-name>test</display-name>
 
    <description>richfaces test</description>
 
        <context-param>
 
        <param-name>org.richfaces.SKIN</param-name>
 
        <param-value>blueSky</param-value>
 
    </context-param>
 
<filter> 
   <display-name>RichFaces Filter</display-name> 
   <filter-name>richfaces</filter-name> 
   <filter-class>org.ajax4jsf.Filter</filter-class> 
</filter> 
<filter-mapping> 
   <filter-name>richfaces</filter-name> 
   <servlet-name>Faces Servlet</servlet-name> 
   <dispatcher>REQUEST</dispatcher> 
   <dispatcher>FORWARD</dispatcher> 
   <dispatcher>INCLUDE</dispatcher> 
</filter-mapping>
 
 <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
 
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
 
</web-app>

Dans mon classpath j'ai bien mis les 3 lib de richfaces.
Merci beaucoup!

21/12/2007, 15h39
djo.mos

Merci.
Je veux juste savoir une chose: est ce que tu as un submit complet lorsque tu appuies sur <Entrée> ? Est ce que toute la page est rafraichie ? Tu peux le vérifier en regardant s'il y'a bien le progressbar bleu en bas et à droite à firefox.
21/12/2007, 15h42
loic38_01

J'ai un submit complet, toute la page se recharge. J'ai l'impression qu'il n'y a pas du tout d'ajax qui s'execute en fait...
21/12/2007, 15h44
djo.mos

Okey. Essaies de remplacer le <h:form> par <a4j:form ajaxSubmit="true">.
21/12/2007, 15h51
djo.mos

Je confirmes:
- Il faut passer par <a4j:form> en mettant ajaxSubmit à true.
- Il faut aussi changer le onchange par onkeyup si on veut faire la mise à jour avec chaque lettre entrée au clavier.

:koi: Je ne comprends plus pourquoi, surtout le onchange: ça fonctionnait parfaitement sous Firefox avant ...
21/12/2007, 15h54
loic38_01

Merci beaucoup ca marche parfaitement comme ca!
:D 8-)