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

    richFaces Dragn Drop

    danijelcecelja

      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

          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