5 Replies Latest reply on May 2, 2013 10:17 AM by Michal Petrov

    drag & drop does not work outside a tree

    antonio gallo Newbie

      Hello, I am trying to drag & drop a node of a tree over a panel in order to perform some logic when the node is dragged.

       

      I am able to drag a node within the same tree but I do not succeed in performing dragging on an outside panel because even if the node seems to be visually dragged no dropListener method is ever called.

       

      I tried several times with all the possible combinations without any success.

       

      The same listener that is invoked when dragging within the tree is never called when draging outside.

       

      I put println and loggig info in the listener and they'are never executed.

       

      It seems to be a bug. Is it possible to drag a node outside a tree? Or there's some known limitation preventing this to happen?

       

      My problem is that i have a TreeModelRecursiveAdaptor displaying my organization (each node is an office of my organization) on a panel on the left.

       

      The user should have the possibility to select some node and drag it on a right panel to perform then some logic on all nodes dragged on the right side.

       

      On the right side I should not see the whole tree but just the nodes dragged with the complete expanded path starting from the root node of the tree.

       

      I can not use two TreeModelRecursiveAdaptors on both sides ( the second tree is constructed depending on the drag & drop operations performed on the left side) and I though that it would be feasible to  to use just

      a SwingNode or TreeNode for this to happen.

       

      So I tried to create two trees but I can not do anything since , as I said before listener on the right panel is never executed.

       

      I would be gratful if someone might help me to solve this problem.

       

      Thanks in advance.

       

      Antonio.

        • 1. Re: drag & drop does not work outside a tree
          Michal Petrov Master

          Hi,

           

          we can't do much without you showing us the code, especially the drag and drop components. I just tried it and dragging things from tree to panel works fine, so no limitation there.

          • 2. Re: drag & drop does not work outside a tree
            antonio gallo Newbie

            Hello thanks for your support.

             

            This is the xhtml of my application. I can see the drop indicator show up properly but no listener is invoked. I also tried the code listed here https://community.jboss.org/message/717465#717465 and tried adding the execute as suggested but also this sample did not work. I'm using the 4.3.0 libraries. Can you please help me? Dragging works fine for other things while givem me troubles when treenodes are involved. May you give me some working examples of dragging and drop from a tree to a panel please?

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml"

                xmlns:h="http://java.sun.com/jsf/html"

                xmlns:f="http://java.sun.com/jsf/core"

                xmlns:ui="http://java.sun.com/jsf/facelets"

                xmlns:a4j="http://richfaces.org/a4j"

                xmlns:rich="http://richfaces.org/rich">

             

            <body>

                <ui:composition template="/templates/template.xhtml">

                <ui:define name="title">RichFaces Sample</ui:define>

                <ui:define name="body">

                <h:outputStylesheet>

             

                    .default{

                    font-size:11px;

                    cursor:pointer;

                    width:100px;

                    border:1px solid gray;

                    padding:2px

                    }

                    .rf-ind-drag.default{

                    padding-left:30px;

                    background-image: url(#{facesContext.externalContext.requestContextPath}/images/default2.jpg);

                    background-position: 5px;

                    background-repeat: no-repeat;

                    }

                    .rf-ind-drag.accept{

                    background-image: url(#{facesContext.externalContext.requestContextPath}/images/accept2.jpg);

                    background-position: 5px;

                    background-repeat: no-repeat;

                    border:2px solid green

                    }

                    .rf-ind-drag.reject{

                    border:2px solid red;

                    background-image: url(#{facesContext.externalContext.requestContextPath}/images/deny2.jpg);

                    background-position: 5px;

                    background-repeat: no-repeat;

                    }

                </h:outputStylesheet>

             

                        <h:form>

                            <h:panelGrid id="mainPanel" columns="2">

                                <rich:panel

                                    style="float:left; width:400px; height:600px;overflow:auto">

                                    <rich:tree var="item" width="100%" toggleType="ajax"

                                        selectionType="ajax" id="tree">

             

                                        <rich:treeModelRecursiveAdaptor

                                            roots="#{bdiOfficeBean.rootOffices}" nodes="#{item.offices}"

                                            leaf="#{item.leaf}">

             

                                            <rich:treeNode iconExpanded="/images/ufficio.GIF"

                                                iconLeaf="/images/ufficio2.GIF">

                                                <h:outputText value=" #{item.name}" />

                                                <rich:dragIndicator id="ind" acceptClass="accept" rejectClass="reject" draggingClass="default"><h:outputText value="#{item.name}" /></rich:dragIndicator>

                                               

                                                <rich:dragSource type="NODES" dragIndicator="ind" dragValue="#{item.name}" />

             

             

                                            </rich:treeNode>

             

                                        </rich:treeModelRecursiveAdaptor>

             

                                    </rich:tree>

                                </rich:panel>

             

                                <rich:panel

                                    style="float:left; width:300px; height:600px;overflow:auto"

                                    id="dropzone" header="Drop Zone">

                                    <a4j:outputPanel>

                                        <rich:dropTarget  render="dropzone"

                                            acceptedTypes="NODES"

                                            dropListener="#{bdiOfficeBean.processDropTree}"/>

             

             

                                    </a4j:outputPanel>

             

             

             

             

             

                                </rich:panel>

                            </h:panelGrid>

                        </h:form>

             

                    </ui:define>

                </ui:composition>

            </body>

            </html>

             

             

             

            This is template.xhtml

             

            <!DOCTYPE html>

            <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"

                xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j">

             

            <h:head>

                <title>RichFaces Application</title>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

                </h:head>

             

            <h:body>

                    <ui:insert name="body">Default content</ui:insert>

            </h:body>

            </html>

             

             

            while my bean

             

             

            package com.bdi.showcase;

             

            import java.io.Serializable;

            import java.util.ArrayList;

            import java.util.List;

             

            import javax.faces.bean.ManagedBean;

            import javax.faces.bean.SessionScoped;

            import javax.faces.bean.ViewScoped;

             

            import org.richfaces.component.UITree;

            import org.richfaces.event.DropEvent;

            import org.richfaces.event.DropListener;

            import org.richfaces.event.TreeSelectionChangeEvent;

             

            @ManagedBean(name = "bdiOfficeBean")

            @SessionScoped

            public class BDIOfficeBean implements Serializable {

             

               

                private static final long serialVersionUID = 1L;

                private List<BDIOfficeNode> rootOffices;

                private BDIOfficeNode selectedNode= null;

               

               

                private List<BDISwingOfficeNode> draggedRootNodes = null;

             

                public BDIOfficeNode getSelectedNode() {

                    return selectedNode;

                }

             

                public synchronized List<BDIOfficeNode> getRootOffices() {

             

                    if (rootOffices == null) {       

                       

                        System.out.println("getRootOffices invoked !!!");

                        initDraggedNodes();

                        BDIOfficeNode rootNode = new BDIOfficeNode(null,"Uffici");

                        rootOffices = rootNode.getOffices();

             

                        }

                    }

                    return rootOffices;

                }

              

                public void processDropTree(DropEvent event) {

                    System.out.println("**************   invoked drag and drop now");

                   

                   

                }

                   

                 public void processTreeSelectionChange(TreeSelectionChangeEvent event) {

             

                     System.out.println("invoked selection");

                       List<Object> selection = new ArrayList<Object>(event.getNewSelection());

             

                        Object currentSelectionKey = selection.get(0);

             

                        UITree tree = (UITree) event.getSource();

             

                        tree.setRowKey(currentSelectionKey);

             

                        this.selectedNode = (BDIOfficeNode)tree.getRowData();

                        selectedNode.getUsers();

                        System.out.println("invoked selection : SelectedNode = " + this.selectedNode.getName());

                    

             

                    }

             

            }

            • 3. Re: drag & drop does not work outside a tree
              Michal Petrov Master

              Okay, the problem is in <a4j:outputPanel> because it's empty (the <rich:dropTarget> doesn't count as content) the area for drop target is 0x0 pixels. Either remove it or put something else in it (like a "Drop here" message).

              • 4. Re: drag & drop does not work outside a tree
                antonio gallo Newbie

                I tried your suggestion but without success. Consider that also this example :

                 

                https://community.jboss.org/message/717465#717465

                 

                does not work and there's no outputPanel containing the drop component.

                 

                Can you please give me more suggestions as far as the problem or give me a working example to test in my env?

                 

                Is immediate component useful inside a rich:droptarget tag?

                 

                Is some further configuration needed in the web.xml file?

                 

                This is my web.xml file

                 

                <?xml version="1.0" encoding="UTF-8"?>

                <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"

                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

                    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

                 

                    <display-name>Sample RichFaces 4 Application</display-name>

                 

                 

                    <context-param>

                        <param-name>javax.faces.SKIP_COMMENTS</param-name>

                        <param-value>true</param-value>

                    </context-param>

                 

                    <context-param>

                        <param-name>javax.faces.PROJECT_STAGE</param-name>

                        <param-value>Production</param-value>

                    </context-param>

                    <context-param>

                        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>

                        <param-value>server</param-value>

                    </context-param>

                 

                 

                 

                    <servlet>

                        <servlet-name>Faces Servlet</servlet-name>

                        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

                        <load-on-startup>1</load-on-startup>

                    </servlet>

                    <servlet-mapping>

                        <servlet-name>Faces Servlet</servlet-name>

                        <url-pattern>*.jsf</url-pattern>

                    </servlet-mapping>

                    <servlet-mapping>

                        <servlet-name>Faces Servlet</servlet-name>

                        <url-pattern>/faces/*</url-pattern>

                    </servlet-mapping>

                 

                    <!-- Resource Servlet - serves static resources and resources for specific

                        components -->

                    <servlet>

                        <servlet-name>Resource Servlet</servlet-name>

                        <servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>

                        <load-on-startup>1</load-on-startup>

                    </servlet>

                    <servlet-mapping>

                        <servlet-name>Resource Servlet</servlet-name>

                        <url-pattern>/org.richfaces.resources/*</url-pattern>

                    </servlet-mapping>

                 

                    <!-- Resource Mapping - resources will be served compressed and packed in

                        production -->

                    <context-param>

                        <param-name>org.richfaces.resourceMapping.enabled</param-name>

                        <param-value>true</param-value>

                    </context-param>

                 

                    <session-config>

                        <session-timeout>30</session-timeout>

                    </session-config>

                 

                    <welcome-file-list>

                        <welcome-file>faces/index.xhtml</welcome-file>

                    </welcome-file-list>

                 

                    <login-config>

                        <auth-method>BASIC</auth-method>

                    </login-config>

                 

                </web-app>

                • 5. Re: drag & drop does not work outside a tree
                  Michal Petrov Master

                  Well, when the listener is not called the simplest reason would be that you're not really dropping the node on the target but since you're using acceptClass I guess you can see the green border.

                   

                  Your web.xml wouldn't affect drag'n'drop (well it would, if you'd disable PARTIAL_STATE_SAVING but that would mean drag'n'drop would not be working at all and you have said it works inside the tree).

                   

                  I am using your example (without the a4j:outputPanel and with my own list) and it works fine. The only issue I'm having is getting an exception when trying to use #{item.name} as dragValue (even though the item.name works in other places).