Richfaces Drag and Drop component not working as advertised
nmatrix9 Aug 25, 2009 1:42 AMHello JBoss,
First I have a question for Max and his book "Practical RichFaces". Why did you (Max) exclude the drag and drop components out of your book?
In addition to being one of the most mysterious it's also deceptively tricky to implement. For example:
<h:form>
<rich:panel id="panelusers">
<f:facet name="header">Users list</f:facet>
<h:outputText value="There are no Users associated with this UserRole."
rendered="#{empty exoshellUsersList.resultList}"/>
<rich:dataTable var="_exoshellUsers"
value="#{exoshellUsersList.resultList}"
rendered="#{not empty exoshellUsersList.resultList}"
rowClasses="rvgRowOne,rvgRowTwo"
id="exoshellUsersTable" rows="10">
<rich:column>
<f:facet name="header">Username</f:facet>
<rich:dragSupport dragIndicator=":indicator" dragType="userId" dragValue="#{_exoshellUsers.userId}" ajaxSingle="true">
<rich:dndParam name="label" value="user name: #{_exoshellUsers.username}"/>
</rich:dragSupport>
<h:outputText value="#{_exoshellUsers.username}"/>
</rich:column>
...
Drag and drop support in rich column in a rich faces datatable as shown above with drag type "userId" and dragValue #{_exoshellUsers.userId} that I want to drop in the dropSupport component destination.
Now for the Drop component destination:
<s:decorate id="userNamesIdDecoration" template="/layout/edit.xhtml">
<ui:define name="label">User name</ui:define>
....
<rich:panel id="userDrop2">
<rich:dropSupport id="userDrop1" rendered="#{exoshellUsersList.resultList.size() ge 25}"
acceptedTypes="userId" dropListener="#{usersDrop.processDrop}" reRender="userDropOutputLabel">
</rich:dropSupport>
<h:outputLabel id="userDropOutputLabel" value="drag and drop user name here" rendered="#{exoshellUsersList.resultList.size() ge 25}"/>
<a:actionparam id="userDropParam" name="userDropParam" value="#{usersDrop.userId}"/>
</rich:panel>
<a:support event="onblur" reRender="userNamesIdDecoration"ajaxSingle="true"/>
</s:decorate>
And now for the userDrop class with the DropEvent Listener:
package com.domain.exoshellcms.listeners;
import java.util.Date;
import javax.ejb.Stateful;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlOutputLabel;
import javax.faces.context.FacesContext;
import javax.persistence.EntityManager;
import org.ajax4jsf.component.html.HtmlActionParameter;
import org.jboss.seam.annotations.In;
import org.jboss.seam.annotations.Logger;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.log.Log;
import org.richfaces.component.Dropzone;
import org.richfaces.event.DropEvent;
import com.domain.exoshellcms.entity.ExoshellUsers;
@Name("usersDrop")
public class UsersDrop implements org.richfaces.event.DropListener {
@Logger
private Log log;
private Integer userId = null;
private Date date;
private String string;
public String getString() {
return string;
}
public void setString(String string) {
this.string = string;
}
@In
protected EntityManager entityManager;
public void processDrop(DropEvent event) {
event.getComponent();
System.out.println("Process Drop called");
/* Dropzone dropzone = (Dropzone) event.getComponent();
this.userId = (Integer) dropzone.getDropValue();
ExoshellUsers user = entityManager.find(ExoshellUsers.class, userId);
UIComponent component = event.getComponent();
component.getClass().getName();
*/
//HtmlOutputLabel label = (HtmlOutputLabel)FacesContext.getCurrentInstance().getViewRoot().findComponent("userDropOutputLabel");
this.string = "This string has changed";
System.out.println("The labels value is : " + event.getDropValue());
}
public Date getDate() {
return date = new Date();
}
public void setDate(Date date) {
this.date = date;
}
public Integer getUserId() {
return userId;
}
public void setUserId(Integer userId) {
this.userId = userId;
}
}
Despite Max's book, RichFaces Developer manual and online RichFaces demos I CAN'T EVEN GET THE processDrop method to REGISTER A DROP EVENT? I mean you can take a look for yourself at the UsersDrop class and richfaces markup presentation side. I used the Richfaces Developer manual as reference and the online docs and so far I can't even get processDrop to sysout a simple hello world when I drag and drop a user username onto the drop component. Which indicates that despite #{usersDrop.processDrop} being set in the dropListener attribute the processDrop is not even being bothered to be called? Maybe my expectations are too high or maybe I'm assuming things too simply but I would of thought properly implementing the DropListener interface and setting it to dropListener attribute would enable processDrop to listen for events and act accordingly as specified by the developer?
Also example application on which the drag and drop components are not functioning can be found at:
http://www.2shared.com/file/7363833/49197a88/seam_cmswartar.html
Take a look at /admin/ExoshellUserRolesEdit.xhtml for the markup.
And take a look at /seam_cms/src/hot/com/domain/exoshellcms/listeners for
DropListener classes.
Apologies if this does not make sense somewhat as I'm writing this very late at night and I'm extremely frustrated.