1 2 Previous Next 16 Replies Latest reply on Jun 6, 2009 10:08 AM by Nick Belaevski

    Drag and Drop support

    Vlad Ionescu Newbie

      Can I have drag and drop support on the same component?

      I want to be able to drag data from a dataTable into an outPut Panel (just like in the example from the demo) but I also want to be able to move the data dropped, somewhere else, in other panel, for example.

        • 2. Re: Drag and Drop support
          Vlad Ionescu Newbie

          How? I followed the example from the demo, and on one of the drop support panel i put the definition of a drag support which i take it from the first panel. Made a 3rd panel to accept the drag types from the second panel. I cand drag fro the 1st panel and drop on the 2nd one. I can drag from the 2nd one, on the 3rd one, but in this case nothing is happening. With the debugger, when i try to drag from 2nd to 3rd panel it doesn't enter in dropListener method (DropEvent dropEvent) from the backing bean.

          • 3. Re: Drag and Drop support
            Vlad Ionescu Newbie

             

            <rich:panel style="width:133px">
             <f:facet name="header">
             <h:outputText value="Source List" />
             </f:facet>
             <rich:dropSupport id="php2" acceptedTypes="items2" dropValue="items2"
             dropListener="#{registerEvent.processDrop2}" reRender="phptable, src">
             </rich:dropSupport>
             <h:dataTable id="src" columns="1" value="#{registerEvent.events}" var="fm" footerClass="footerClass">
             <h:column>
             <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
             <rich:dragSupport dragIndicator=":indicator" dragType="items" dragValue="#{fm}">
             <rich:dndParam name="label" value="#{fm.name}" />
             </rich:dragSupport>
             <h:outputText value="#{fm.name}"></h:outputText>
             </a4j:outputPanel>
             </h:column>
             </h:dataTable>
             </rich:panel>
            
             <rich:panel styleClass="dropTargetPanel">
             <f:facet name="header">
             <h:outputText value="PHP Frameworks" />
             </f:facet>
             <rich:dropSupport id="php" acceptedTypes="items" dropValue="items"
             dropListener="#{registerEvent.processDrop}" reRender="phptable, src">
             </rich:dropSupport>
            
             <h:dataTable id="phptable" columns="1" value="#{registerEvent.dataDragged}" var="fm">
             <h:column>
             <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
             <rich:dragSupport dragIndicator=":indicator" dragType="items2" dragValue="#{fm}">
             <rich:dndParam name="label2" value="#{fm.name}" />
             </rich:dragSupport>
             </a4j:outputPanel>
             <h:outputText value="#{fm.name}"></h:outputText>
             </h:column>
             </h:dataTable>
             </rich:panel>


            These are the 2 richpanels i used for drag and drop from one another.

            The 2 listeners from the backing bean are:

             public void processDrop(DropEvent dropEvent)
             {
             events.remove(dropEvent.getDragValue());
             getDataDraggedStatic().add((Events)dropEvent.getDragValue());
             dataDragged = dataDraggedStatic;
             }
            
             public void processDrop2(DropEvent dropEvent)
             {
             events.add((Events)dropEvent.getDragValue());
             dataDragged.remove((Events)dropEvent.getDragValue());
             dataDragged = dataDraggedStatic;
             }


            • 4. Re: Drag and Drop support
              Nick Belaevski Master

              Hi,

              Works ok for me:

              private List<String> events = new ArrayList<String>();
               {
               events.add("Item 1");
               events.add("Item 2");
               events.add("Item 3");
               events.add("Item 4");
               }
              
               private List<String> dataDragged = new ArrayList<String>();
              
               public List<String> getEvents() {
               return events;
               }
              
               /**
               * @return the dataDragged
               */
               public List<String> getDataDragged() {
               return dataDragged;
               }
              
               /**
               * @param dataDragged the dataDragged to set
               */
               public void setDataDragged(List<String> dataDragged) {
               this.dataDragged = dataDragged;
               }
              
               /**
               * @param events the events to set
               */
               public void setEvents(List<String> events) {
               this.events = events;
               }
              
               public void processDrop1(DropEvent dropEvent)
               {
               events.remove(dropEvent.getDragValue());
               dataDragged.add((String) dropEvent.getDragValue());
               }
              
               public void processDrop2(DropEvent dropEvent)
               {
               events.add((String) dropEvent.getDragValue());
               dataDragged.remove(dropEvent.getDragValue());
               }
              
               public void processDrop3(DropEvent dropEvent) {
               System.out.println(dropEvent.getDragValue());
               }
              


              <h:form>
              <rich:panel style="width:133px">
               <f:facet name="header">
               <h:outputText value="Source List" />
               </f:facet>
               <rich:dropSupport id="php2" acceptedTypes="items2" dropValue="items2"
               dropListener="#{forum5Bean.processDrop2}" reRender="phptable, src">
               </rich:dropSupport>
               <h:dataTable id="src" value="#{forum5Bean.events}" var="fm" footerClass="footerClass">
               <h:column>
               <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
               <rich:dragSupport dragIndicator=":indicator" dragType="items" dragValue="#{fm}">
               <rich:dndParam name="label" value="#{fm}" />
               </rich:dragSupport>
               <h:outputText value="#{fm}"></h:outputText>
               </a4j:outputPanel>
               </h:column>
               </h:dataTable>
               </rich:panel>
              
               <rich:panel styleClass="dropTargetPanel">
               <f:facet name="header">
               <h:outputText value="PHP Frameworks" />
               </f:facet>
               <rich:dropSupport id="php" acceptedTypes="items" dropValue="items"
               dropListener="#{forum5Bean.processDrop1}" reRender="phptable, src">
               </rich:dropSupport>
              
               <h:dataTable id="phptable" value="#{forum5Bean.dataDragged}" var="fm">
               <h:column>
               <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
               <rich:dragSupport dragIndicator=":indicator" dragType="items2" dragValue="#{fm}">
               <rich:dndParam name="label2" value="#{fm}" />
               </rich:dragSupport>
               <h:outputText value="#{fm}"></h:outputText>
               </a4j:outputPanel>
               </h:column>
               </h:dataTable>
               </rich:panel>
               <rich:panel styleClass="dropTargetPanel1">
               <f:facet name="header">
               <h:outputText value="3rd panel" />
               </f:facet>
               <rich:dropSupport acceptedTypes="items2" dropValue="items"
               dropListener="#{forum5Bean.processDrop3}" reRender="phptable, src">
               </rich:dropSupport>
               </rich:panel>
              </h:form>


              • 5. Re: Drag and Drop support
                Vlad Ionescu Newbie

                It still doesn't work:(

                This is jsf code:

                <rich:panel style="width:133px">
                 <f:facet name="header">
                 <h:outputText value="Source List" />
                 </f:facet>
                 <rich:dropSupport id="php2" acceptedTypes="items2" dropValue="items2"
                 dropListener="#{registerEvent.processDrop2}" reRender="phptable, src">
                 </rich:dropSupport>
                 <h:dataTable id="src" columns="1" value="#{registerEvent.events}" var="fm" footerClass="footerClass">
                 <h:column>
                 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
                 <rich:dragSupport dragIndicator=":indicator" dragType="items" dragValue="#{fm}">
                 <rich:dndParam name="label" value="#{fm.name}" type="drag"/>
                 </rich:dragSupport>
                 <h:outputText value="#{fm.name}"></h:outputText>
                 </a4j:outputPanel>
                 </h:column>
                 </h:dataTable>
                 </rich:panel>
                
                 <rich:panel styleClass="dropTargetPanel">
                 <f:facet name="header">
                 <h:outputText value="PHP Frameworks" />
                 </f:facet>
                 <rich:dropSupport id="php" acceptedTypes="items" dropValue="items"
                 dropListener="#{registerEvent.processDrop}" reRender="phptable, src">
                 </rich:dropSupport>
                
                 <h:dataTable id="phptable" columns="1" value="#{registerEvent.dataDragged}" var="fm">
                 <h:column>
                 <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block">
                 <rich:dragSupport dragIndicator=":indicator" dragType="items2" dragValue="#{fm}">
                 <rich:dndParam name="label" value="#{fm.name}"/>
                 </rich:dragSupport>
                 <h:outputText value="#{fm.name}"></h:outputText>
                 </a4j:outputPanel>
                 </h:column>
                 </h:dataTable>
                 </rich:panel>
                
                The methods from backing bean are the same.
                
                I think the problem is on the client because it doesn't enter in the listener #{registerEvent.processDrop2}
                when i dragged from the 2nd panel into the 1st one.


                • 6. Re: Drag and Drop support
                  Nick Belaevski Master

                  What is RF/JSF version? Does the posted code work for you?

                  • 7. Re: Drag and Drop support
                    Vlad Ionescu Newbie

                    Your posted code, doesn't work for me.

                    My richfaces version is 3.3.1 and JSF 1.2 and i'm using richfaces as the JSF implementation.

                    • 8. Re: Drag and Drop support
                      Vlad Ionescu Newbie

                      And if you saw in my code, i had to use a static version to keep the objects. If i had used only one vector, a non-static one, i wouldnt have been able to have more than one element in the drop panel, because everytime i would have drag and drop an element, the list that was suposed to keep all the elements, was reinitializing each time. So thats why i had this workaround, a static vector for keeping the elements. And after this i make

                      eventsList = staticEventsList
                      You can see it exactly in the bean code.
                      


                      • 9. Re: Drag and Drop support
                        Nick Belaevski Master

                         

                        "vladomega" wrote:
                        i'm using richfaces as the JSF implementation.

                        Can you please clarify?

                        • 10. Re: Drag and Drop support
                          Vlad Ionescu Newbie

                          In the properties of my project (I am using eclipse) at Java Build Path there is richfaces library. If I edit that library, to replace the jar's with some other richfaces version, in case i want that, there is a box where i can check if the library is JSF implementation or not. Mine is checked.
                          I'm using Seam for developing my project and seam-gen plugin from JBoss Tools for making the poject at the first time.

                          • 11. Re: Drag and Drop support
                            Vlad Ionescu Newbie

                            In the properties of my project (I am using eclipse) at Java Build Path there is richfaces library. If I edit that library, to replace the jar's with some other richfaces version, in case i want that, there is a box where i can check if the library is JSF implementation or not. Mine is checked.
                            I'm using Seam for developing my project and seam-gen plugin from JBoss Tools for making the poject at the first time.

                            • 12. Re: Drag and Drop support
                              Nick Belaevski Master

                               

                              "vladomega" wrote:
                              And if you saw in my code, i had to use a static version to keep the objects. If i had used only one vector, a non-static one, i wouldnt have been able to have more than one element in the drop panel, because everytime i would have drag and drop an element, the list that was suposed to keep all the elements, was reinitializing each time. So thats why i had this workaround, a static vector for keeping the elements. And after this i make
                              eventsList = staticEventsList
                              You can see it exactly in the bean code.
                              

                              Yeah, it can be named using "static" word for another reason, so I didn't pay attention. Do not use static, it will not allow you to use this in multi-user environment; use conversation or session scope. Also static variables can also be uninitialized if class gets unloaded.

                              • 13. Re: Drag and Drop support
                                Vlad Ionescu Newbie

                                Yes, but the main question still remains..why doesn't work for me to have drag and drop support on the same component?

                                • 14. Re: Drag and Drop support
                                  Nick Belaevski Master

                                  Are you using the latest JSF version?

                                  1 2 Previous Next