1 Reply Latest reply on Apr 13, 2008 4:52 AM by roberto.urban

richFaces Dragn Drop

danijelcecelja Mar 10, 2008 11:30 AM

Hi im trying to make a dragndrop sample using the rich and a4j tags but for some reason i get this error:
DnD parameter [form:_id54] of type [drop] applied to component [form:_id53] has been ignored because component doesn't implement [Dropzone]!

also, the beans contructor is accessed, but right after the i get this on the console too:
WARN ReducedHTMLParser:566 - Invalid tag found: unexpected input while looking for attr name or '/>' at line 191

i copied the files from a tutorial so normally, it should be working, i think the problem is in the backingbean
what am i doing wrong??

heres the page

<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:rich="http://richfaces.ajax4jsf.org/rich"
 xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
<ui:define name="content">

 <head>
 <title></title>
 <style type="text/css">
.dropzoneDecoration {
 width: 100px;
 height: 100px;
 border: 2px dotted navy;
}

.accept {
 border: 3px dotted green;
 padding: 10px;
}

.reject {
 border: 3px dashed red;
 padding: 10px;
}
</style>
 </head>
 <body>
 <script type="text/javascript">
 // DnD.CLIENT_VALIDATION_OFF = true;
 </script>

 <f:view>

 <h:form id="form">


 <h:panelGroup id="dragValueText">
 <h:outputText value="#{bean.dragValue}" />
 </h:panelGroup>

 <h:panelGrid columns="3">
 <h:dataTable var="type" value="#{bean.types}">
 <h:column>
 <h:panelGrid styleClass="dropzoneDecoration" id="drop1">
 <h:outputText value="#{type} - drop" />

 <rich:dropSupport reRender="dragValueText"
 action="#{bean.dropAction}" acceptedTypes="#{type}"
 dropListener="#{bean.processDrop}" dropValue="#{type} - value">
 <a4j:actionparam value="#{type} - test drop param"
 assignTo="#{bean.testParam}" />
 </rich:dropSupport>
 </h:panelGrid>
 </h:column>
 </h:dataTable>

 <h:dataTable var="type" value="#{bean.types}">
 <h:column>
 <h:panelGrid styleClass="dropzoneDecoration" id="drag1">
 <h:outputText value="#{type} - drag" />

 <rich:dragSupport dragType="#{type}" dragValue="#{type} - value"
 action="#{bean.dragAction}" dragListener="#{bean.processDrag}">
 <a4j:actionparam value="#{type} - test drag param"
 assignTo="#{bean.testParam}" />
 </rich:dragSupport>
 </h:panelGrid>
 </h:column>
 </h:dataTable>

 <h:dataTable var="type" value="#{bean.types}">
 <h:column>
 <h:panelGrid styleClass="dropzoneDecoration" id="drop2">
 <h:outputText value="#{type} - drop" />

 <rich:dropSupport reRender="dragValueText"
 action="#{bean.dropAction}" acceptedTypes="#{type}"
 dropListener="#{bean.processDrop}" dropValue="#{type} - value">
 </rich:dropSupport>
 </h:panelGrid>
 </h:column>
 </h:dataTable>
 </h:panelGrid>

 <rich:dragIndicator id="indicator" acceptClass="accept"
 rejectClass="reject" style="width: 500px;">
 <f:facet name="single">
 <f:verbatim>
 {marker} <b>{testDrag}</b> {label}
 </f:verbatim>
 </f:facet>

 <rich:dndParam name="accept" value="ACCEPT:" />

 <rich:dndParam name="reject">
 <f:verbatim>
 <i style="text-decoration: line-through;">REJECT:</i>
 </f:verbatim>
 </rich:dndParam>
 </rich:dragIndicator>

 <h:panelGrid columns="1" style="position: relative; left: 140px;">
 <h:panelGrid columns="1"
 style="position: absolute; top: 30px; left: 300px;">
 <rich:dragIndicator id="defaultIndicator" style="width: 400px;">
 </rich:dragIndicator>
 </h:panelGrid>
 </h:panelGrid>

 <h:panelGrid columns="4" cellspacing="20">
 <h:panelGrid styleClass="dropzoneDecoration" id="grid1">
 <f:verbatim>
 Accepts file folder... Customizes
 </f:verbatim>

 <rich:dropSupport id="zone1"
 ondrop="var zone = $('form:grid1'); zone.style.borderColor= 'red'; setTimeout( function() { this.style.borderColor= 'navy'; }.bind(zone), 300);"
 acceptedTypes="file, folder" typeMapping="{file: testDrop}">
 <rich:dndParam name="testDrop">
 <h:graphicImage height="16" width="16"
 value="/images/file-manager.png" />
 </rich:dndParam>

 </rich:dropSupport>
 </h:panelGrid>


 <h:panelGrid styleClass="dropzoneDecoration" id="grid2">
 <f:verbatim>
 Accepts none
 </f:verbatim>

 <rich:dropSupport>
 </rich:dropSupport>
 </h:panelGrid>

 <h:panelGrid styleClass="dropzoneDecoration" id="grid3">
 <f:verbatim>
 Accepts none... Customizes
 </f:verbatim>

 <rich:dropSupport typeMapping="{file: testDrop}">
 <rich:dndParam name="testDrop">
 <h:graphicImage height="16" width="16"
 value="/images/file-manager-reject.png" />
 </rich:dndParam>

 </rich:dropSupport>
 </h:panelGrid>

 <h:panelGrid styleClass="dropzoneDecoration" id="grid4">
 <f:verbatim>
 Accepts file folder
 </f:verbatim>
 <rich:dropSupport acceptedTypes="file, folder">
 <rich:dndParam name="testDrop" value="testDropValue" />

 </rich:dropSupport>
 </h:panelGrid>

 <h:panelGrid id="grid5">
 <rich:dragSupport dragType="file">
 <rich:dndParam name="label" value="Label" />
 <rich:dndParam name="testDrag" value="testDragValue" />

 </rich:dragSupport>
 <f:verbatim>File Draggable - no indicator</f:verbatim>
 </h:panelGrid>

 <h:panelGrid id="grid6">
 <rich:dragSupport dragType="file" dragIndicator="indicator">
 <rich:dndParam name="label" value="Label" />
 <rich:dndParam name="testDrag" value="testDragValue" />

 </rich:dragSupport>
 <f:verbatim>File Draggable with indicator</f:verbatim>
 </h:panelGrid>

 <h:panelGrid id="grid7">
 <rich:dragSupport dragType="folder" dragIndicator="indicator">
 <rich:dndParam name="label" value="Label" />
 <rich:dndParam name="testDrag" value="testDragValue for Folder" />

 </rich:dragSupport>
 <f:verbatim>Folder Draggable with indicator</f:verbatim>
 </h:panelGrid>

 <h:outputText />

 <h:panelGrid id="grid8">
 <rich:dragSupport dragType="folder">
 <rich:dndParam name="label" value="Label" />
 <rich:dndParam name="testDrag" value="testDragValue for Folder" />

 </rich:dragSupport>
 <f:verbatim>Folder Draggable - no indicator</f:verbatim>
 </h:panelGrid>

 <h:panelGrid id="grid9">
 <rich:dragSupport dragType="file" dragIndicator="defaultIndicator">
 <rich:dndParam name="testDrag" type="drop" value="testDragValue" />

 <rich:dndParam name="marker" value="testMarkerValue" />
 <rich:dndParam name="label" value="testDragValue" />

 </rich:dragSupport>
 <f:verbatim>File Draggable with defaultIndicator</f:verbatim>
 </h:panelGrid>

 <h:panelGrid id="grid10">
 <rich:dragSupport dragType="folder"
 dragIndicator="defaultIndicator">
 <rich:dndParam name="label" value="testDragValue for Folder" />

 </rich:dragSupport>
 <f:verbatim>Folder Draggable with defaultIndicator</f:verbatim>
 </h:panelGrid>

 <h:outputText />

 </h:panelGrid>

 <h:panelGrid id="renderedId">
 <rich:dragSupport dragType="file" dragIndicator="defaultIndicator">
 <rich:dndParam name="marker" value="testMarkerValue" />
 <rich:dndParam name="label" value="testDragValue" />
 </rich:dragSupport>

 <h:graphicImage id="dragImage" value="/images/file-manager.png"
 width="48" />
 <f:verbatim>
 dragSupport
 </f:verbatim>
 </h:panelGrid>

 <h:panelGroup id="group">
 <f:verbatim>
 PanelGroup
 </f:verbatim>
 <rich:dropSupport acceptedTypes="file"
 dropListener="#{bean.processDrop}" />
 </h:panelGroup>

 <h:panelGrid id="renderedIdII" style="border: 1px solid red;">
 <rich:dropSupport acceptedTypes="file"
 dropListener="#{bean.processDrop}" />
 <f:verbatim>
 <div style="margin: 40px; border: 1px solid green;">
 dropSupport</div>
 </f:verbatim>
 </h:panelGrid>

 <a4j:status startText="...request..." stopText="stop" />
 <a4j:outputPanel ajaxRendered="true">
 <h:messages />
 </a4j:outputPanel>

 <h:outputText>
 <rich:dropSupport acceptedTypes="file" />
 </h:outputText>

 <h:outputText>
 <rich:dragSupport dragType="file" />
 </h:outputText>

 </h:form>
 </f:view>
 </body>
</ui:define>
</ui:composition>

heres the backing bean

/**
 * License Agreement.
 *
 * JBoss RichFaces - Ajax4jsf Component Library
 *
 * Copyright (C) 2007 Exadel, Inc.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License version 2.1 as published by the Free Software Foundation.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
 */

package danijel.roadstar.web.editor;

import java.util.ArrayList;
import java.util.List;

import org.ajax4jsf.dnd.event.DragEvent;
import org.ajax4jsf.dnd.event.DropEvent;


public class Bean {

 private List types = new ArrayList();

 private Object dragValue;

 private Object testParam;



 public Bean() {
 super();
 System.out.println("BEAN contructor");

 types.add("PHP");
 types.add("JAVA");
 }

 public void processDrop(DropEvent event) {
 System.out.println("Bean.processDrop()");
 this.dragValue = event.getDragValue();
 }

 public void processDrag(DragEvent dragEvent) {
 System.out.println("Bean.processDrag()");
 }

 public List getTypes() {
 return types;
 }

 public String dragAction() {
 System.out.println("Bean.dragAction()");
 return null;
 }

 public String dropAction() {
 System.out.println("Bean.dropAction()");
 return null;
 }

 public Object getDragValue() {
 return dragValue;
 }

 public Object getTestParam() {
 return testParam;
 }

 public void setTestParam(Object testParam) {
 this.testParam = testParam;
 System.out.println("Bean.setTestParam()" + testParam);
 }
}

1. Re: richFaces Dragn Drop

roberto.urban Apr 13, 2008 4:52 AM (in response to danijelcecelja)

Hi,
as far as I know, in order to use drag and drop facilities you should develop a request bean which implement the DropListener interface and, within this bean code, you have to develop your drop listener method.
In may case:

page extract for drag area:


<rich:datatable ...>
...
<h:column id="colDescription">
 <f:facet name="header">
 <h:outputText value="#{msg.columnInboxDescrizione}"></h:outputText>
 </f:facet>
 <a4j:outputPanel layout="block">
 <rich:dragSupport dragType="activity"
 dragIndicator="bodyForm:indicator" dragValue="#{act}">
 <rich:dndParam name="label" value="#{act.description}" />
 </rich:dragSupport>

 <h:outputText value="#{act.description}" />
 </a4j:outputPanel>
 </h:column>

...
</rich:datatable>

page extract for drop area:

<rich:datatable...>
...
<rich:dropSupport id="userObj" acceptedTypes="activity"
 dropValue="#{operator}" reRender="operatorsList"
 dropListener="#{reassignDropListener.processDrop}">
 <a4j:support event="ondrop" limitToList="true"
 reRender="reassignedActsListPanel,actsList,dragMultiActs,leftPanelHeader"></a4j:support>
 </rich:dropSupport>
...
</rich:datatable>

and here how I manage drop listener method within my managed request bean:

public class ReassignDropListener implements DropListener {

public void processDrop(DropEvent event) {
... code to manage drop event ...
}
}

as you can see I wrote

dropListener="#{reassignDropListener.processDrop}">

hope this help

cheers
Roberto