12 Replies Latest reply on May 17, 2010 7:17 AM by roel croonenberghs

    Drag and Drop: processDrop method never called

    Laurent Nepveu Newbie

      Hi!

      I'm trying to implement drag and drop. Here is my code:

      View:

      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:ajax="http://richfaces.org/a4j"
       template="layout/template.xhtml">
      
      <ui:define name="body">
       <h:messages globalOnly="true" styleClass="message"/>
      
       <ajax:form>
       <h:panelGrid id="routineMainGrid" styleClass="routineMainGridStyle" columns="2" columnClasses="routineMainGridCol1,routineMainGridCol2" border="0" cellspacing="1">
      
       <rich:panel id="routineEquipmentPanel">
       <f:facet name="header">Exercises</f:facet>
      
      
       <rich:dragIndicator id="indicator"/>
      
       <!-- rich:datascroller align="left" for="exerciseTable" maxPages="20" />
       <rich:spacer height="10" />
       <rich:dataTable id="exerciseTable" rows="10" var="exercise"
       value="#{exerciseQuery.resultList}" rendered="#{not empty exerciseQuery.resultList}">
       <h:column>
       <f:facet name="header">Id</f:facet>
       <h:outputText value="#{exercise.id}" />
       </h:column>
       <h:column>
       <f:facet name="header">Description</f:facet>
       <h:outputText value="#{exercise.description}" />
       </h:column>
       </rich:dataTable-->
       <rich:dataGrid value="#{exerciseQuery.resultList}" var="exercise" columns="4" elements="12">
       <rich:panel>
       <rich:toolTip followMouse="true" direction="top-right" showDelay="100" >
       <span style="white-space:nowrap">
       <h:outputText value="#{exercise.description}"/>
       </span>
       </rich:toolTip>
       <rich:dragSupport dragIndicator="indicator" dragType="EX" dragValue="#{exercise}">
       <rich:dndParam name="label" value="#{exercise.description}"/>
       </rich:dragSupport>
       <f:facet name="header">
       <h:outputText value="Exercise #{exercise.id}"></h:outputText>
       </f:facet>
       <h:graphicImage value="img/exercises/small/#{exercise.image}" style="text-align:center; cursor:pointer"/>
       </rich:panel>
       <f:facet name="footer">
       <rich:datascroller></rich:datascroller>
       </f:facet>
       </rich:dataGrid>
      
      
       <div style="clear:both"/>
       </rich:panel>
      
       <rich:panel id="routineRoutinePanel">
       <f:facet name="header"><h:outputText value="#{routineHome.instance.description}"/></f:facet>
      
       <ajax:outputPanel layout="none">
       <h:panelGrid columns="1">
       <ajax:commandButton value="Add Day" action="#{openRoutineManager.addDay}" reRender="routineDayDataGrid">
       <f:param name="routineId" value="#{routine.id}" />
       </ajax:commandButton>
       <rich:dataGrid id="routineDayDataGrid"
       columnClasses="routineDayDataGridCols"
       value="#{routineHome.instance.days}"
       var="day"
       columns="#{routineHome.instance.numDays}"
       elements="#{routineHome.instance.numDays}"
       rendered="#{routineHome.instance.numDays > 0}">
       <h:panelGrid columns="1">
       <rich:panel styleClass="routineDayPanelStyle" bodyClass="test">
       <f:facet name="header">
       <h:outputText value="#{day.label}"></h:outputText>
       </f:facet>
       <h:panelGrid columns="4" styleClass="dayIconsPanelGrid" columnClasses="dayIconsPanelGridCol">
       <ajax:commandButton id="delete1" style="border: 0px;" image="img/left.gif"/>
       <ajax:commandButton id="delete2" style="border: 0px;" image="img/rename.gif"/>
       <ajax:commandButton id="delete3" style="border: 0px;" image="img/delete.jpg"/>
       <ajax:commandButton id="delete4" style="border: 0px;" image="img/right.gif"/>
       </h:panelGrid>
       <rich:dropSupport id="drop" acceptedTypes="EX" dropValue="#{day}"
       action="#{openRoutineManager.test}" dropListener="#{openRoutineManager.processDrop}" reRender="routineRoutinePanel">
       </rich:dropSupport>
      
       <div style="clear:both"/>
       </rich:panel>
      
       </h:panelGrid>
      
       </rich:dataGrid>
       </h:panelGrid>
       </ajax:outputPanel>
       <div style="clear:both"/>
       </rich:panel>
       </h:panelGrid>
      
      
       <ajax:log popup="false" level="ALL" style="width: 800px; height: 300px;"></ajax:log>
       </ajax:form>
      </ui:define>
      </ui:composition>
      


      Bean:

      package com.blisslogik.fbo.beans;
      
      import javax.ejb.Remove;
      import javax.ejb.Stateful;
      import javax.persistence.EntityManager;
      import javax.persistence.PersistenceContext;
      import javax.persistence.PersistenceContextType;
      
      import org.jboss.seam.ScopeType;
      import org.jboss.seam.annotations.Destroy;
      import org.jboss.seam.annotations.In;
      import org.jboss.seam.annotations.Logger;
      import org.jboss.seam.annotations.Name;
      import org.jboss.seam.annotations.Scope;
      import org.jboss.seam.log.Log;
      import org.richfaces.event.DropEvent;
      import org.richfaces.event.DropListener;
      
      import com.blisslogik.fbo.entity.Day;
      import com.blisslogik.fbo.entity.DayHome;
      import com.blisslogik.fbo.entity.RoutineHome;
      
      @Stateful
      @Scope(ScopeType.SESSION)
      @Name("openRoutineManager")
      public class OpenRoutineManagerBean implements OpenRoutineManager, DropListener {
      
       @Logger private Log log;
      
       @PersistenceContext(type=PersistenceContextType.EXTENDED)
       private EntityManager em;
      
       @In(create=true)
       private RoutineHome routineHome;
       @In(create=true)
       private DayHome dayHome;
      
       @Remove @Destroy
       public void destroy() {}
      
       public void addDay() {
       log.info("addDay() called.");
      
       Day d = dayHome.getInstance();
       d.setLabel("New Day");
       dayHome.wire();
       routineHome.addDay(d);
       dayHome.persist();
       }
      
       public void processDrop(DropEvent event) {
       // TODO Auto-generated method stub
       log.info("Drop Listener Fired");
      
       }
       public void test() {
       // TODO Auto-generated method stub
       log.info("TESTTEST");
      
       }
      }
      
      


      I can drag. When I drop, there is an ajax request being made. But my processDrop method is never called.

      Any ideas why?

      I was using 3.1.X and upgraded to 3.2 of richfaces, but it still doesn't work.

      Thanks!

      Laurent

        • 2. Re: Drag and Drop: processDrop method never called
          Dongyao Zhao Novice

          I want to accept 2 drop types. it works well, but there is probelm by dropListener. only one drop type can cause the listener. The other can not.
          this is a richfaces bug? i work with richfaces 3.2.0.SR1 and tomcat 5.5
          Code:

           <rich:dropSupport acceptedTypes="[#{child.acceptedTypes[0]}, #{child.acceptedTypes[1]}]"
           oncomplete="openTaskWizard()" ondropend="drp = '#{child.label}'; type= '#{child.portType}'"
           dropValue="#{child}"
           reRender="asimonitorId, ipmonitorId"
           dropListener="#{createTaskDialogBean.processDropOnPort}"/>
          


          only the second can cause the listener.

          • 3. Re: Drag and Drop: processDrop method never called
            Ilya Shaikovsky Master

            answer please the question from my previous post.

            • 4. Re: Drag and Drop: processDrop method never called
              Dongyao Zhao Novice

              thanks for your answer, with phaseTracker it shows the followings:


              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE RESTORE_VIEW 1
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE RESTORE_VIEW 1
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER RESTORE_VIEW 1
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE APPLY_REQUEST_VALUES 2
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER RESTORE_VIEW 1
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE APPLY_REQUEST_VALUES 2
              Setting Started
              Setting Complete
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER APPLY_REQUEST_VALUES 2
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE PROCESS_VALIDATIONS 3
              Setting Started
              Setting Complete
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER APPLY_REQUEST_VALUES 2
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE RENDER_RESPONSE 6
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER PROCESS_VALIDATIONS 3
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE UPDATE_MODEL_VALUES 4
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER UPDATE_MODEL_VALUES 4
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE INVOKE_APPLICATION 5
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER INVOKE_APPLICATION 5
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker beforePhase
              INFO: BEFORE RENDER_RESPONSE 6
              INFO 13 Mai 2008 14:10:30,328; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (574); Get PIDConAn Data with portId: 2
              INFO 13 Mai 2008 14:10:30,375; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (436); Number of storage drives loaded: 0
              INFO 13 Mai 2008 14:10:30,375; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (458); Number of available services of Port 2 loaded: 3
              Hibernate: select recordedin0_.id as id15_, recordedin0_.startTime as startTime15_, recordedin0_.duration as duration15_, recordedin0_.idPort as idPort15_, recordedin0_.type as type15_ from RECORDEDINTERVALS recordedin0_ where recordedin0_.type=0
              INFO 13 Mai 2008 14:10:30,421; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (574); Get PIDConAn Data with portId: 2
              INFO 13 Mai 2008 14:10:30,437; de.dimetis.bsr.web.persistence.ServerDelegate (1075); Number of PlayoutFiles loaded: 0
              INFO 13 Mai 2008 14:10:30,437; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (1014); Number of PlayoutFiles loaded: 0
              INFO 13 Mai 2008 14:10:30,453; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (436); Number of storage drives loaded: 0
              INFO 13 Mai 2008 14:10:30,468; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (458); Number of available services of Port 2 loaded: 3
              Hibernate: select recordedin0_.id as id15_, recordedin0_.startTime as startTime15_, recordedin0_.duration as duration15_, recordedin0_.idPort as idPort15_, recordedin0_.type as type15_ from RECORDEDINTERVALS recordedin0_ where recordedin0_.type=0
              INFO 13 Mai 2008 14:10:30,578; de.dimetis.bsr.web.persistence.ServerDelegate (1075); Number of PlayoutFiles loaded: 0
              INFO 13 Mai 2008 14:10:30,593; de.dimetis.bsr.web.persistence.PersistenceDelegateImpl (1014); Number of PlayoutFiles loaded: 0
              13.05.2008 14:10:30 com.sun.faces.lifecycle.RenderResponsePhase execute
              INFO: WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
              sourceId=j_id4:j_id43:portTreePaneId:j__id45:0:j__id48:1:j__id51:0::j_id53[severity=(ERROR 2), summary=(Dropzone [j_id4:j_id43:portTreePaneId:j__id45:0:j__id48:1:j__id51:0::j_id53] with accepted types [[IN, table]] cannot accept Draggable [j_id4:j_id43:portTreePaneId:j__id45:0:j__id48:1:j__id51:0::j_id52] with dragType [IN]), detail=(Dropzone [j_id4:j_id43:portTreePaneId:j__id45:0:j__id48:1:j__id51:0::j_id53] with accepted types [[IN, table]] cannot accept Draggable [j_id4:j_id43:portTreePaneId:j__id45:0:j__id48:1:j__id51:0::j_id52] with dragType [IN])]
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER RENDER_RESPONSE 6
              13.05.2008 14:10:30 org.exadel.jsf.PhaseTracker afterPhase
              INFO: AFTER RENDER_RESPONSE 6


              but the dropListener can not be called.

              • 5. Re: Drag and Drop: processDrop method never called
                Dongyao Zhao Novice

                i get a warning message by dropping


                INFO: WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
                sourceId=j_id4:j_id43:portTreePaneId:j__id44:0:j__id47:1:j__id50:0::j_id52[severity=(ERROR 2), summary=(Dropzone [j_id4:j_id43:portTreePaneId:j__id44:0:j__id47:1:j__id50:0::j_id52] with accepted types [[IN, table]] cannot accept Draggable [j_id4:j_id43:portTreePaneId:j__id44:0:j__id47:1:j__id50:0::j_id51] with dragType [IN]), detail=(Dropzone [j_id4:j_id43:portTreePaneId:j__id44:0:j__id47:1:j__id50:0::j_id52] with accepted types [[IN, table]] cannot accept Draggable [j_id4:j_id43:portTreePaneId:j__id44:0:j__id47:1:j__id50:0::j_id51] with dragType [IN])]


                • 6. Re: Drag and Drop: processDrop method never called
                  Ilya Shaikovsky Master

                  remove [] from [#{child.acceptedTypes[0]}, #{child.acceptedTypes[1]}] line.

                  b.t.w. http://jira.jboss.com/jira/browse/RF-2744

                  • 7. Re: Drag and Drop: processDrop method never called
                    roel croonenberghs Newbie

                    I have the same problem.

                    processDrop method is never called

                     

                    JSF

                    <rich:panel style="#{project.cellStyle}" bodyClass="pointerclass">
                                        
                                          <rich:dragSupport dragIndicator=":indicator" dragType="metaData" dragValue="#{project.ID}" rendered="#{project.origin=='metadata'}">
                                                            <rich:dndParam name="label" value="#{project.ID}" />
                                      </rich:dragSupport>
                                         <rich:dropSupport id="metaData" acceptedTypes="metaData" dropValue="PHP"
                                        dropListener="#{devResourcePlanningGroup.processDrop}" >                    
                                        </rich:dropSupport>

                     

                    BEAN

                    public void processDrop(DropEvent event) {
                    
                            getLog().debug("Drop Listener Fired");
                        }
                    

                     

                    Here's my phase tracker output

                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RESTORE_VIEW 1
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RESTORE_VIEW 1
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RESTORE_VIEW 1
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RESTORE_VIEW 1
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE APPLY_REQUEST_VALUES 2
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE APPLY_REQUEST_VALUES 2
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER APPLY_REQUEST_VALUES 2
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER APPLY_REQUEST_VALUES 2
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE PROCESS_VALIDATIONS 3
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE PROCESS_VALIDATIONS 3
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER PROCESS_VALIDATIONS 3
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER PROCESS_VALIDATIONS 3
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE UPDATE_MODEL_VALUES 4
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE UPDATE_MODEL_VALUES 4
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER UPDATE_MODEL_VALUES 4
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER UPDATE_MODEL_VALUES 4
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE INVOKE_APPLICATION 5
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE INVOKE_APPLICATION 5
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER INVOKE_APPLICATION 5
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER INVOKE_APPLICATION 5
                    14-mei-2010 11:10:53 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RENDER_RESPONSE 6
                    14-mei-2010 11:58:47 org.exadel.jsf.PhaseTracker beforePhase
                    INFO: BEFORE RENDER_RESPONSE 6
                    14-mei-2010 11:58:47 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RENDER_RESPONSE 6
                    14-mei-2010 11:58:47 org.exadel.jsf.PhaseTracker afterPhase
                    INFO: AFTER RENDER_RESPONSE 6
                    

                     

                    Anyone having a solution?

                    • 8. Re: Drag and Drop: processDrop method never called
                      Ilya Shaikovsky Master

                      which scope project bean has?

                      • 9. Re: Drag and Drop: processDrop method never called
                        roel croonenberghs Newbie

                        Bean devResourcePlanningGroup has session scope.
                        project is in fact not a bean, but a rich datagrid var. The datagrid value comes from a method on bean devResourcePlanningGroup.
                        This weekend I found out that the dragdrop works, when I place it on a diffrent place in my page.
                        Now it is nested in a datagrid inside a datatable. and aparently that does not work. I don't know why because I don't get any errors. When I put the code outside the datatable, it works.
                        Here is en extended listing of my jsp page.

                         

                        <t:dataTable value="#{devResourcePlanningGroup.dayList}" var="item" rowClasses="row1, row2" id="resourceGroupList" cellpadding="0" cellspacing="0">
                          <t:columns value="#{devResourcePlanningGroup.viewableUsers}" var="oneColumn" width="100">
                            <f:facet name="header">
                              <h:outputLink onclick="window.open('#{webApplication.root}/dynamic/reports/ticket_tasks.jsf?person=#{oneColumn[0]}','#{oneColumn[0]}','width=900,height=300,resizable=yes,scrollbars=yes');return false;"
                                      value="#" styleClass="#{oneColumn[1]}">
                                <h:outputText value="#{oneColumn[2]}" />
                              </h:outputLink>
                            </f:facet>
                            <rich:dataGrid value="#{devResourcePlanningGroup.columnValue}" var="project" id="grouptItem" width="100%" styleClass="gridElement">
                               <rich:panel style="#{project.cellStyle}" bodyClass="pointerclass">
                                  <h:panelGrid columns="1" id="basicInfo" border="0" cellpadding="0" cellspacing="0" width="#{project.cellWidth}">
                                     <rich:panel >
                                         <rich:panel style="width:133px"> 
                                             <f:facet name="header">
                                                 <h:outputText value="Source List" />
                                             </f:facet>
                                             <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
                                                 <rich:dragSupport dragIndicator=":indicator" dragType="metaData" dragValue="#{project.ID}" rendered="#{project.origin=='metadata'}" immediate="true">                             
                                                      <rich:dndParam name="label" value="#{project.ID}" />
                        
                        
                        
                        
                        
                        
                                                 </rich:dragSupport>
                                                 <h:outputText value="dragzone"></h:outputText>
                                             </a4j:outputPanel>
                                        </rich:panel>
                        
                                        <rich:panel styleClass="dropTargetPanel">
                                             <f:facet name="header">
                                                 <h:outputText value="dropzone" />
                                             </f:facet>
                                        <rich:dropSupport id="metaDatadroptarget" acceptedTypes="metaData" dropValue="someValue"
                                            dropListener="#{devResourcePlanningGroup.processDrop}" immediate="true" reRender="resourceGroupList">                    
                                        </rich:dropSupport>
                                    </rich:panel>
                                </rich:panel>
                        ...
                        
                        
                        
                        
                        • 12. Re: Drag and Drop: processDrop method never called
                          roel croonenberghs Newbie

                          just downloaded 3.3.3.Final, but no difference. Still does not work