Drag and Drop

[alclientview]

Hi all,

I've been using Richfaces for few months and I was very happy with it especially about how easy it was from going from the live demo examples to its own implementation.

But today I tried for the first time the Drag and Drop feature and it just does not work. I'm trying the SimpleTreeDragnDrop demo. If I try on the demo site there is no problem. If I try the same demo in my own environment, it just does not work: Nothing happens when I try to drag and drop the pics from the Tree to another place. I just can see one error in the error console of Firefox:
drag.indicator.position is not a function and this error only occurs when I try to drag one pic of the Tree. I guess that explains why nothing happens but I have no idea why I'm getting this error.
What I did is to copy the xhtml code and the bean bound to the components from the demo website to my testing webapp. I already have several examples from the demo site (Tree, picklist...) in this webapp so I think the required libraries are OK.
I've also tried the Drag and Drop demo example and I get the same error. I just don't know what to do ? I'm really stuck and can't find any post about this...
Any help or advice would be really appreciated!

Thanks in advance,

Arnaud.

[ilya_shaikovsky]

seems like some kind of conflicts with your externally included js libraries,.. do you have prototype or jquerry manually added to page?

[alclientview]

Hi,

Thanks for the quick reply!

I run this on JBoss 4.2.3. After your post, I created one specific web application to test it and I get the same problem. Then I thought I should try in another container in case there is a library conflict with the container.
So I installed Tomcat 6, I made sure I have the required libraries (from the 3.2.1. Adding RichFaces libraries into the project of the Developer Guide) and I have exactly the same problem. The dragging feature won't just work and the same error in the Firefox (3.5.2) error console. Does not work either in IE 6.

Any other idea ? I need this feature... And I really don't know what to do to make it work with this basic example.


Arnaud.

[alclientview]

Hi again,

I just did another test. I put the richfaces-demo-3.3.1.GA-jee5.war in my tomcat 6 container and the Drag and Drop works fine. Then I replaced the libraries I was using in my testing webapp with all the libraries of the richfaces-demo-3.3.1.GA-jee5.war.
When I restarted the server, I had first an exception related to Seam. So I removed the Seam libs (since my testing webapp does not use Seam) and restarted the server again. I can access my testing webapp but I still have the same problem (dragging feature does not work).
I don't know anything about Seam except it is a framework using JSF (and many others technologies) but at this time I only see this difference between my testing web application and the richfaces demo war file.
So I'm wondering about thoses seam libraries... ?

Arnaud.

[alclientview]

Hi,

Me again after some more testing:
You can reproduce what I am describing on the richfaces online demo web site.
If you try to access directly the JSF page: http://livedemo.exadel.com/richfaces-demo/richfaces/tree/examples/simpleDnd.jsf
You'll get the problem I described above... Dragging element from/to the Tree does not work.
Now if you try: http://livedemo.exadel.com/richfaces-demo/richfaces/tree/simple-tree-dnd.jsf
This will work. But looking at the content of simple-tree-dnd.xhtml does not tell me why. Besides including the above page (simpleDnd.jsf) and the source code, it seems to me it does not do much so it is still a mystery to me and I still don't know how to make it work...?

Arnaud.

[alclientview]

This is my last post before getting some feedback from you guys... I'm not sure this help to understand or not but in case:

If I had the following to the top of the simpleDnd.xhtml (just right after the <ui:composition> tag):






there is no error and the drag and drop feature works!!!

Is there someone out there who has used the drag and drop feature and how did you make it work ? Just a very simple example such as the demo web site and I'll be very happy... To me there is a bug or I really miss something...

Thanks in advance,

Arnaud.

[alclientview]

Sorry, I had not userd BBCode and disabled HTML in the previous page.
If I had the following lines at the top of the page:

<ul>
 <li>
 </li>
</ul>

there is no error it and the drag and drop feature works fine.

It is easy to test, the following code (copied from the live demo) does not work:

<ui:composition 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"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">


 <style>
 .col1, .col2 {
 width:50%;
 vertical-align:top;
 }
 .rich-table-cell, .rich-table{
 border:none;
 }
 .indicatorPicture {
 width: 80px;
 }
 </style>

 <rich:dragIndicator id="indicator1" >
 <f:facet name="single">
 <h:graphicImage styleClass="indicatorPicture" value="/richfaces/jQuery/images/{draggedImage}" />
 </f:facet>
 </rich:dragIndicator>
 <rich:dragIndicator id="indicator2" />
 <h:form>
 <h:panelGrid columns="2" width="100%" columnClasses="col1,col2">

 <rich:tree ajaxKeys="#{null}" style="width:300px" nodeSelectListener="#{simpleTreeDndBean.processSelection}"
 reRender="selectedNode" ajaxSubmitSelection="true" switchType="client" dragIndicator="indicator2"
 value="#{simpleTreeDndBean.treeNode}" var="item" id="tree" treeNodeVar="treeNode"
 dropListener="#{simpleTreeDndBean.dropListener}" nodeFace="#{treeNode.parent.parent == null ? 'node' : 'leaf'}">
 <rich:treeNode type="node" acceptedTypes="pic" icon="#{treeNode.icon}" iconLeaf="#{treeNode.leafIcon}">
 <h:outputText value="#{item}"/>
 </rich:treeNode>
 <rich:treeNode type="leaf" dragType="pic">
 <rich:dndParam name="label" type="drag">#{item}</rich:dndParam>

 <h:outputText value="#{item}"/>
 </rich:treeNode>
 </rich:tree>
 <rich:panel id="selectedNode">
 <rich:dataGrid id="selectedNodeGrid" style="display: #{!empty simpleTreeDndBean.selectedNodeChildren ? '' : 'none'}" value="#{simpleTreeDndBean.selectedNodeChildren}" var="item" columns="3" border="0">
 <rich:dragSupport dragIndicator="indicator1" dragType="pic" dragValue="#{item}" reRender="selectedNodeGrid">
 <rich:dndParam name="draggedImage" value="#{item.data}"/>
 </rich:dragSupport>
 <h:graphicImage value="/richfaces/jQuery/images/#{item.data}" />
 </rich:dataGrid>
 </rich:panel>
 </h:panelGrid>

 </h:form>

</ui:composition>

But the same code with

<li></li>

will work:

<ui:composition 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"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">

 <ul>
 <li>
 </li>
 </ul>

 <style>
 .col1, .col2 {
 width:50%;
 vertical-align:top;
 }
 .rich-table-cell, .rich-table{
 border:none;
 }
 .indicatorPicture {
 width: 80px;
 }
 </style>

 <rich:dragIndicator id="indicator1" >
 <f:facet name="single">
 <h:graphicImage styleClass="indicatorPicture" value="/richfaces/jQuery/images/{draggedImage}" />
 </f:facet>
 </rich:dragIndicator>
 <rich:dragIndicator id="indicator2" />
 <h:form>
 <h:panelGrid columns="2" width="100%" columnClasses="col1,col2">

 <rich:tree ajaxKeys="#{null}" style="width:300px" nodeSelectListener="#{simpleTreeDndBean.processSelection}"
 reRender="selectedNode" ajaxSubmitSelection="true" switchType="client" dragIndicator="indicator2"
 value="#{simpleTreeDndBean.treeNode}" var="item" id="tree" treeNodeVar="treeNode"
 dropListener="#{simpleTreeDndBean.dropListener}" nodeFace="#{treeNode.parent.parent == null ? 'node' : 'leaf'}">
 <rich:treeNode type="node" acceptedTypes="pic" icon="#{treeNode.icon}" iconLeaf="#{treeNode.leafIcon}">
 <h:outputText value="#{item}"/>
 </rich:treeNode>
 <rich:treeNode type="leaf" dragType="pic">
 <rich:dndParam name="label" type="drag">#{item}</rich:dndParam>

 <h:outputText value="#{item}"/>
 </rich:treeNode>
 </rich:tree>
 <rich:panel id="selectedNode">
 <rich:dataGrid id="selectedNodeGrid" style="display: #{!empty simpleTreeDndBean.selectedNodeChildren ? '' : 'none'}" value="#{simpleTreeDndBean.selectedNodeChildren}" var="item" columns="3" border="0">
 <rich:dragSupport dragIndicator="indicator1" dragType="pic" dragValue="#{item}" reRender="selectedNodeGrid">
 <rich:dndParam name="draggedImage" value="#{item.data}"/>
 </rich:dragSupport>
 <h:graphicImage value="/richfaces/jQuery/images/#{item.data}" />
 </rich:dataGrid>
 </rich:panel>
 </h:panelGrid>

 </h:form>

</ui:composition>

[ilya_shaikovsky]

as you not using templatye for the page - add html-head-body tags and f:view with contentType="text/html" around your page code. (ui:composition does not produce it)

[alclientview]

yes, I was missing something! Thank you!!!

Arnaud.