Drag n drop sous RichFaces 4

**barzane** · 26/09/2011, 13h49

Bonjour,
Voila j'ai un problème avec le drag and drop. Malgré la documentation consulté j'arrive pas à en venir à bout.
J'utilise richfaces 4 et voici mon bout de code qui s'inspire des exemples richfaces 4:

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
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
 
<?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:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
   <h:head>
   		<title>IGNORED</title>
   </h:head>
    <body>        
       <ui:composition>
       <h:outputStylesheet>
        .default{
			font-size:11px;
			cursor:pointer;
			width:100px;
			border:1px solid gray;
			padding:2px
		}
		 .rf-ind-drag.default{
			padding-left:30px; 
			background-position: 5px;
			background-repeat: no-repeat;
		}
		.rf-ind-drag.accept{
			background-position: 5px;
			background-repeat: no-repeat;
			border:2px solid green
		} 
		.rf-ind-drag.reject{
			border:2px solid red;
			background-position: 5px;
			background-repeat: no-repeat;
		} 
 
        </h:outputStylesheet>
 
       		<a4j:outputPanel id="pan4" layout="block">
       		<h:form id="navigationTab">				
					    <rich:panel >
                        <h:dataTable id="src" columns="1" value="#{mysession.list2art}"
                    var="fm" >
                    <h:column>
                        <a4j:outputPanel layout="block" styleClass="default">
                            <rich:dragIndicator id="ind" acceptClass="accept" rejectClass="reject" draggingClass="default">
        						Drag the item to proper area..
    						</rich:dragIndicator>
 
                            <rich:dragSource type="articlelangue"  dragValue="#{fm}" />
                            <h:outputText value="#{fm.article.titre}"></h:outputText>
                        </a4j:outputPanel>
                    </h:column>
 
                </h:dataTable>
                </rich:panel>
                        <rich:panel >
                <f:facet name="header">
                    <h:outputText value="PHP Frameworks" />
                </f:facet>
                <rich:dropTarget acceptedTypes="articlelangue" dropValue="PHP" dropListener="#{mysession.processDrop}" />
 
                <h:dataTable id="src2" columns="1" value="#{mysession.list2art}" var="fm" >
                    <h:column>
                        <h:outputText value="#{fm.article.titre}"></h:outputText>
 
                    </h:column>
 				</h:dataTable>
            </rich:panel>
 
 
 
                 </h:form> 
 
                 </a4j:outputPanel>   
       </ui:composition>       
   </body>
 </html>

Sans le dragIndicator (le composant dragSource sans la propriété dragIndicator), j'ai le drag qui s'effectue (le vois le déplacement de mon objet) mais lors du drop rien ne se passe. Et bien avant le drop les alertes (grâce au css) me permettant de savoir si l'objet est accepté ou pas ne fonctionnent pas. Quand j'intègre le dragIndicator, le drag ne s'effectue plus. Je comprends plus rien puisque je crois avoir suivi
les exemples. Any suggestion? Merci d'avance!

**DevServlet** · 26/09/2011, 14h03

A regarder comme ca on ne voit pas tout de suite l'erreur, mais moi j'avais dejà eu à implémenter ce composant et je n'avais eu aucun souci d'intégration, j'étais parti de cet exemple

**barzane** · 26/09/2011, 14h51

Merci de cette réponse expresse, seulement ton exemple il est pour une version antérieure à richfaces 4. Je me suis inspiré entre autre de http://community.jboss.org/thread/161268 mais sans succès.
Merci

**barzane** · 28/09/2011, 11h37

Voilà je suis loin d'avoir résolu mon problème. J'ai décidé de laisser tomber le dragIndicator voila comment je m'y prend:

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
 
<rich:panel >
    <h:dataTable id="src" columns="1" value="#{mysession.list2art}" var="fm" >
		<h:column>
			<a4j:outputPanel layout="block" styleClass="rf-ind-drag">
				<rich:dragSource type="articlelangue"   dragValue="#{fm.article.titre}" />
				<h:outputText value="#{fm.article.titre}"/>
			</a4j:outputPanel>
		</h:column>
        </h:dataTable>
</rich:panel>
<rich:panel >
    <a4j:outputPanel >
        <rich:dropTarget acceptedTypes="articlelangue"  dropListener="#{mysession.processDrop}" render="pan4"/>
        <h:outputText value="Deposez"/>
    </a4j:outputPanel>
</rich:panel>

Comme toujours le drag s'effectue mais rien ne se passe lors du drop. Voici la methode processDrop

Code :

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

1
2
3
4
5
6
 
public void processDrop(DropEvent e){
		Articlelangue a= (Articlelangue) e.getDragValue();
		System.out.println(a);
		System.out.println(e.getDropValue().toString());
	}

J'ai rien qui s'écrit en console!!
Le temps commence a me prendre à la gorge et je ne sais quoi faire alors toute suggestion sera la bien venue
Merci

**hedes** · 28/09/2011, 11h48

Pour le drag'n drop, richfaces utilse JQuery. J'ai eu le même problème que le tien quand j'ai voulu utiliser primfaces et richfaces dans la même web appli.

Tous les 2 utilisent JQuery mais même avec 2 versions identiques, ça ne marche pour une sombre histoire d'initialisation de JQuery.

Bref, tu peux chercher dans cette direction: vérifier que tu as bien une seule version de JQuery et c'est celle de richfaces.

**barzane** · 28/09/2011, 14h49

J'ai pas encore tester mais il est clair que j'utilise un autre Jquery, pour faire de animations sur la page. Alors je suis déjà inquiet car si je devais enlever cette initialisation de mon jquery, celui de richfaces ferait-il tourner mes animations?

**hedes** · 28/09/2011, 16h37

Richfaces te permet d'utiliser jquery ( <rich:jQuery> ) mais il est possible que cela ne te suffise pas.

Sinon, commence par désactiver ton animation et reteste.

**hedes** · 28/09/2011, 17h05

Remarque, il est probable que si tu désactives juste l'init de jquery pour l'animation cela suffise à te débloquer.
Avec Prime-faces 3, je n'ai pas trouvé la possiblité de le faire.

**barzane** · 30/09/2011, 12h06

Merci à toi hedes, C'était exactement le problème. Il m'a suffit de supprimer la ligne

Code :

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

1
2
 
<script src="./Scripts/jquery-latest.js" type="text/javascript"></script>

Mais là pour faire tourner mes animations ils faut placer le code en bas de la page, sinon celles ci ne s'exécutent pas(d'ailleurs c'est ce qui est conseillé, mais voilà on ne suit pas toujours les conseils).
Problème résolu
Merci!

Drag n drop sous RichFaces 4

JSF Java

Discussions similaires

Partager

Partager