richFaces Dragn Drop
danijelcecelja Mar 10, 2008 11:30 AMHi 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); } }