draggable/dropzone --> dragSupport/dropSupport

[tbjerch]

Have implemented a proof of concept application including drag & drop functionality (based on a drag basketball demo found on the Exadel site a few weeks ago) using RichFaces v2

Donwloaded RichFaces v3 from JBos and see that it should support drag&drop (using dragSupport&dropSupport&dragIndicator&dndParam), but without any "real" explanation of how it works.

Some could attempts could be found in the developer guide explaining dndParam, but this text still refer to the non-existent <rich:dragable ... component.

Is there a simple way to go from V2 draggable/dropzone to V3 drag&drop or some better explanation available?

Initial code:

<ajax:draggable>
 <f:facet name="dragShape">
 <h:graphicImage value="/card.jpg" />
 </f:facet>
 <h:graphicImage value="/card.jpg" />
</ajax:draggable
...
<ajax:dropzone reRender="score,result" action="#{game.insertCard}">
 <h:graphicImage value="/equipment.jpg" />
</ajax:dropzone>

[ilya_shaikovsky]

Now new articles about new Drag and Drop model is under writing..

In generally it isn't hard to use new models. D'n'D components just refactored from wrapper ones to nested in order to improve some inconveniences in model. If you already used a4j:support you would be able easilly use D'n'D support features.

[tbjerch]

Have used a4j:support (which tbw is great). I have also tried to envision/guess how it could work without luck.

Would it be possible to translate the following 9 lines into v3 syntax?

<ajax:draggable>
 <f:facet name="dragShape">
 <h:graphicImage value="/card.jpg" />
 </f:facet>
 <h:graphicImage value="/card.jpg" />
</ajax:draggable
...
<ajax:dropzone reRender="score,result" action="#{game.insertCard}">
 <h:graphicImage value="/equipment.jpg" />
</ajax:dropzone>

[tbjerch]

My guess for translation became:

<rich:dragIndicator id="dragIcon">
<h:graphicImage value="/card.jpg">
 <rich:dragSupport dragIndicator="dragIcon" />
</h:graphicImage>
..
<h:graphicImage value="/equipment.jpg">
 <rich:dropSupport reRender="score,result"
 action="#{game.insertCard}" />
</h:graphicImage>

This indicate some dragging but no drop action is ever received (that is #{game.insertCard} is never invoked). :(

Anyone with a better guess?

[sergeysmirnov]

You are close, but miss some important points: dragType and dragListener. Also, dropValue and dragValue is a data available in the dragListener.

See http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf?c=dragSupport

[stu2]

"SergeySmirnov" wrote:
You are close, but miss some important points: dragType and dragListener. Also, dropValue and dragValue is a data available in the dragListener.

See http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport.jsf?c=dragSupport

First off, I'm extremely impressed with RichFaces. In a few hours I was up and running on a Seam 1.2 app. Even though there isn't a seam demo, it was very straightforward.

Drag and drop support is amazing. And it actually works.

My one question is how you access dropValue, dragValue etc. from the dragListener in Seam. I've read through the demo link above very carefully, but it doesn't explain how to deal with submitted values server-side.

Here's what I'm working with:

<a:outputPanel id="messages">
 <h:messages styleClass="message" />
</a:outputPanel>
 <rich:dragIndicator id="indicator"></rich:dragIndicator>
 <h:form id="dand">

 <h:panelGrid columnClasses="panelc" columns="4" width="100%">

 <rich:panel>
 <f:facet name="header">
 <h:outputText value="Source List!" />
 </f:facet>
 <h:dataTable id="src" columns="1" value="#{dand.genders}" var="fm">
 <h:column>
 <a:outputPanel style="border:1px solid gray;padding:2px;"
 layout="block">
 <rich:dragSupport dragIndicator=":indicator"
 dragType="gender" dragValue="#{fm}">
 <rich:dndParam name="label" value="#{fm}" />
 </rich:dragSupport>
 #{fm}
 </a:outputPanel>
 </h:column>
 </h:dataTable>
 </rich:panel>

 <rich:panel>
 <f:facet name="header">
 <h:outputText value="CDM Fields" />
 </f:facet>
 <rich:dropSupport id="cdm" acceptedTypes="gender" dropValue="gender"
 dropListener="#{dand.dragged()}" reRender="messages">
 </rich:dropSupport>

 <h:dataTable id="cdmtable" columns="1"
 value="#{dand.fields}" var="fm">
 <h:column>
 #{fm}
 </h:column>
 </h:dataTable>
 </rich:panel>

right now #{dand.dragged()} just adds a faces message, which shows up properly after the ajax post. But what I REALLY want is to know what was dragged onto what, so I can access that from the dragListener.

Can you point me to example code, docs that might explain this, or maybe just spell it out for me?

Thanks! You guys are doing great work.

Stu

[sergeysmirnov]

"stu2" wrote:

My one question is how you access dropValue, dragValue etc. from the dragListener in Seam. I've read through the demo link above very carefully, but it doesn't explain how to deal with submitted values server-side.

Actually, the richfaces-demo source is in SVN:

http://anonsvn.jboss.org/repos/richfaces/trunk/richfaces-samples/richfaces-demo/

In details:

On the page:

<rich:dropSupport id="cf" acceptedTypes="CF" dropValue="CF"
 dropListener="#{eventBean.processDrop}" reRender="cftable, src">
</rich:dropSupport>

In the bean:

package org.richfaces.demo.dnd;


 import org.ajax4jsf.dnd.event.DropEvent;
 import org.ajax4jsf.dnd.event.DropListener;
 import org.ajax4jsf.dnd.Dropzone;


 public class EventBean implements DropListener {
 private org.richfaces.demo.dnd.DndBean dndBean;

 public void processDrop(DropEvent dropEvent) {
 Dropzone dropzone = (Dropzone) dropEvent.getComponent();
 dndBean.moveFramework(dropEvent.getDragValue(), dropzone.getDropValue());
 }

 public org.richfaces.demo.dnd.DndBean getDndBean() {
 return dndBean;
 }

 public void setDndBean(org.richfaces.demo.dnd.DndBean dndBean) {
 this.dndBean = dndBean;
 }
 }

[manuel.gentile]

We try to call the method processDrop

@Name("eventbean")
public class EventBean implements DropListener {
 public void processDrop(org.ajax4jsf.dnd.event.DropEvent dropEvent) {
 System.out.println("Here!");
 }
}

from the following page

<rich:panel style="width:100px">
 <f:facet name="header">
 <h:outputText value="Source List" />
 </f:facet>
 <h:dataTable id="src" columns="1" value="#{itemList.resultList}"
 var="item">

 <h:column>
 <a4j:outputPanel style="border:1px solid gray;padding:2px;"
 layout="block">
 <rich:dragSupport dragIndicator=":indicator"
 dragType="prova" dragValue="#{item}">
 <rich:dndParam name="label" value="#{item.testo}" />
 </rich:dragSupport>
 <h:outputText value="#{item.testo}"></h:outputText>
 </a4j:outputPanel>
 </h:column>

 </h:dataTable>
 </rich:panel>

 <rich:panel>
 <f:facet name="header">
 <h:outputText value="PHP Frameworks" />
 </f:facet>
 <rich:dropSupport id="php" acceptedTypes="prova" dropValue="prova" dropListener="#{eventbean.processDrop}">
 </rich:dropSupport>

 </rich:panel>

but when we drop the object in the dropzone we obtain this error

Exception during request processing: javax.servlet.ServletException: /test.xhtml @56,113 dropListener="#{eventbean.processDrop}": Method not found: [e-mail](org.ajax4jsf.dnd.event.DropEvent)

javax.faces.webapp.FacesServlet.service(FacesServlet.java:152)
org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:252)
org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:173)
org.ajax4jsf.framework.ajax.xmlfilter.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:96)
org.ajax4jsf.framework.ajax.xmlfilter.BaseFilter.doFilter(BaseFilter.java:220)
org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:202)
org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:173)
org.jboss.seam.web.SeamFilter$FilterChainImpl.doFilter(SeamFilter.java:63)
org.jboss.seam.web.SeamFilter$FilterChainImpl.doFilter(SeamFilter.java:53)
org.jboss.seam.web.ExceptionFilter.doFilter(ExceptionFilter.java:57)
org.jboss.seam.web.SeamFilter$FilterChainImpl.doFilter(SeamFilter.java:49)
org.jboss.seam.debug.hot.HotDeployFilter.doFilter(HotDeployFilter.java:60)
org.jboss.seam.web.SeamFilter$FilterChainImpl.doFilter(SeamFilter.java:49)
org.jboss.seam.web.RedirectFilter.doFilter(RedirectFilter.java:45)
org.jboss.seam.web.SeamFilter$FilterChainImpl.doFilter(SeamFilter.java:49)
org.jboss.seam.web.MultipartFilter.doFilter(MultipartFilter.java:79)
org.jboss.seam.web.SeamFilter$FilterChainImpl.doFilter(SeamFilter.java:49)
org.jboss.seam.web.SeamFilter.doFilter(SeamFilter.java:84)
org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:202)
org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:173)
org.jboss.web.tomcat.filters.ReplyHeaderFilter.doFilter(ReplyHeaderFilter.java:96)
org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:202)
org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:173)
org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:213)
org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:178)
org.jboss.web.tomcat.security.SecurityAssociationValve.invoke(SecurityAssociationValve.java:175)
org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:432)
org.jboss.web.tomcat.security.JaccContextValve.invoke(JaccContextValve.java:74)
org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:126)
org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:105)
org.jboss.web.tomcat.tc5.jca.CachedConnectionValve.invoke(CachedConnectionValve.java:156)
org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:107)
org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:148)
org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:869)
org.apache.coyote.http11.Http11BaseProtocol$Http11ConnectionHandler.processConnection(Http11BaseProtocol.java:664)
org.apache.tomcat.util.net.PoolTcpEndpoint.processSocket(PoolTcpEndpoint.java:527)
org.apache.tomcat.util.net.MasterSlaveWorkerThread.run(MasterSlaveWorkerThread.java:112)
java.lang.Thread.run(Thread.java:619)

Without the dropEvent parameter we have no error but at the same time we are not able to obtain the dropEvent object to do something like this

Dropzone dropzone = (Dropzone) dropEvent.getComponent();

[nbelaevski]

Hello!

What facelets & JSF version are you using?

[manuel.gentile]

We use the jsf and facelets from Seam CVS.
Moreover we have changed the jboss 4.0.5GA myfaces implementation in the directory jbossweb-tomcat55.sar\jsf-libs but we have the same error!

Thanks