voyent
Need help with drag and drop on trees...  XML
Forum Index -> Components
Author Message
aberrant80

Joined: 20/Jul/2006 00:00:00
Messages: 34
Offline


Hi, I need help again. I'm stumped on the drag-and-drop for trees.

In short, I've set up my tree where the nodes are draggable and clickable. The click (using the actionListener) works fine. The dragging though, does not appear to generate the proper events.

The methods registered with the dragListener and the dropListener seems to be inconsequential, as no errors are ever thrown regardless of whether the method exists or not.

On a previous testing, I did manage to get the tree drop to work, but was unable to find any significant difference. This tree was originally built as a custom component using Facelets. But the problem remains despite stripping away all the other stuffs.

Also, by using a Javascript debugger, I'm getting the following error message each time I try to drop:

"Ice.Dnd.logger.error is not a function"
- ice-extras.js (line 4271)
- ice-extras.js (line 4271)
- ice-extras.js (line 4466)
- ice-extras.js (line 2425)
- icefaces-d2d.js (line 1)

Would really appreciate some help. Thanks.

The attached zip file contains some of my stripped-down classes and the following is a snippet of the tree:

<ice:tree id="classificationTree" value="#{clsfTreeBean.tree.model}" var="node" imageDir="/webconf/xmlhttp/css/royale/css-images/"
hideRootNode="true" hideNavigation="false">
<ice:treeNode>
<f:facet name="icon">
<h:panelGroup>
<h:graphicImage value="#{node.userObject.icon}" />
</h:panelGroup>
</f:facet>
<f:facet name="content">
<ice:panelGroup style="display: inline"
draggable="true"
dragOptions="dragGhost"
dropValue="#{node.userObject.value}"
dropTarget="true"
dragListener="#{node.userObject.nodeDragged}"
dropListener="#{node.userObject.nodeDropped}">
<h:commandLink actionListener="#{node.userObject.nodeClicked}"
value="#{node.userObject.text}"
styleClass="#{node.userObject.contentStyleClass}" />
</ice:panelGroup>
</f:facet>
</ice:treeNode>
</ice:tree>
 Filename icefaces-test.zip [Disk] Download
 Description No description given
 Filesize 27 Kbytes
 Downloaded:  361 time(s)

aberrant80

Joined: 20/Jul/2006 00:00:00
Messages: 34
Offline


*bump*

no help at all?
philip.breau


Joined: 08/May/2006 00:00:00
Messages: 2989
Offline


Hi David,

Sorry for the late reply on this. At this time it's not possible do node to node drag and drop within a tree. As you've noted, the drop targets inside the tree do not accept drag items. We also need to work in API support for tree model changes on these drag and drop events.

Thanks,
Philip

.
aberrant80

Joined: 20/Jul/2006 00:00:00
Messages: 34
Offline


Huh? Really? Not supported? And I thought it was a bug... but I have gotten it to work with something like this:

<ice:tree id="tree" value="#{myBean.treeModel}" var="item" hideRootNode="true" hideNavigation="false" imageDir="#{styleBean.imageDirectory}">
<ice:treeNode>

<f:facet name="icon">
<h:panelGroup>
<h:graphicImage value="#{item.userObject.icon}" />
</h:panelGroup>
</f:facet>

<f:facet name="content">
<ice:panelGroup style="display: inline" draggable="true" dragOptions="dragGhost" dropValue="#{item.userObject.name}" dragMask="drag_cancel, dragging, dropped, hover_start, hover_end" dropMask="hover_start" dropTarget="true" dropListener="#{item.userObject.handleDrop}">
<h:commandLink actionListener="#{item.userObject.nodeClicked}" partialSubmit="true" value="#{item.userObject.description}"/>
</ice:panelGroup>
</f:facet>

</ice:treeNode>
</ice:tree>
agranados

Joined: 31/May/2006 00:00:00
Messages: 7
Offline


philip_b wrote:
Hi David,

Sorry for the late reply on this. At this time it's not possible do node to node drag and drop within a tree. As you've noted, the drop targets inside the tree do not accept drag items. We also need to work in API support for tree model changes on these drag and drop events.

Thanks,
Philip 


I'm a bit surprised with this reply too. I've been having trouble with tree based drag/drop (see e.g. my post: http://www.icefaces.org/JForum/posts/list/1492.page) but it was "kinda" working. Has there been any change to the "not possible" answer with the more recent releases of IceFaces?
[Email]
jonas.buechel

Joined: 12/Apr/2007 00:00:00
Messages: 1
Offline


Hi,
I'm interessted in this issue as well. So I'm wondering from which version drag&drop within a tree will be supported..

I coldn't find a release version number on jira:
http://jira.icefaces.org/browse/ICE-812

Can someone give us some further information about this issue? (such as expected version and release date)

Thanks a lot!
Jonas
matte

Joined: 23/Oct/2007 00:00:00
Messages: 1
Offline


It here any development in this since april? With drag and drop trees pretty standard in other ajax libraries now, I was very disappointed to find it not supported yet. Anyone have any clue as to when this might happen?
btruitt

Joined: 31/Aug/2007 00:00:00
Messages: 28
Offline


For those interested parties, I've used Icefaces 1.6.1 to implement drag and drop in a tree. So far it seems to work fine. I can move nodes around and change parent nodes, etc.

Here's my xhtml:
Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhmtl1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ice="http://www.icesoft.com/icefaces/component"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:n="http://sss.evla.nrao.edu/jsf"
   xml:lang="en"
   lang="en"
 >
 <f:view>
 
 <head>
   <ice:outputStyle href="./xmlhttp/css/xp/xp.css"/>
   <title>Ice Test</title>
 </head>
 <body>
 
 <ice:form id="mainForm" enctype="multipart/form-data">  
   (#{treeNavigation.dragPanelMessage})
   <hr/>
   <ice:tree
     value="#{treeNavigation.model}"
     var="item"
     hideRootNode="true" 
   >
     <ice:treeNode>
       <f:facet name="content">
         <ice:panelGroup
           style="display: inline"
           draggable="true"
           dragListener="#{treeNavigation.dragPanelListener}"
           dropMask="dragging,drag_cancel,hover_start,hover_end"
           dragMask="dragging,drag_cancel,hover_start,hover_end"
           dragValue="#{item}"
           dragOptions="revert,dragGhost"
           dropTarget="true"
           dropValue="#{item}"
         >
           #{item.userObject.text}
         </ice:panelGroup>
       </f:facet>
     </ice:treeNode>
   </ice:tree>
 </ice:form>
 </body>
 
 </f:view>
 </html>
 
 


And here's my backing bean:
Code:
 package test;
 
 import com.icesoft.faces.component.tree.Tree;
 import com.icesoft.faces.component.tree.IceUserObject;
 import com.icesoft.faces.component.dragdrop.DragEvent;
 import com.icesoft.faces.component.ext.HtmlPanelGroup;
 
 
 import javax.faces.application.Application;
 import javax.faces.context.FacesContext;
 import javax.swing.tree.DefaultMutableTreeNode;
 import javax.swing.tree.DefaultTreeModel;
 
 public class TreeNavigation
 {
   // bound to components value attribute
   private DefaultTreeModel model;
 
   // root node of tree, for delayed construction
   private DefaultMutableTreeNode rootTreeNode;
 
   private boolean selected = false;
 
   /**
    * Default constructor of the tree.  The root node of the tree is created at
    * this point.
    */
   public TreeNavigation()
   {
     // build root node so that children can be attached
     rootTreeNode = new DefaultMutableTreeNode();
     IceUserObject rootObject = new IceUserObject(rootTreeNode);
     rootObject.setText("Root");
     rootObject.setExpanded(true);
     rootTreeNode.setUserObject(rootObject);
     model = new DefaultTreeModel(rootTreeNode);
 
     init();
   }
 
   /**
    * Utility method to build the entire navigation tree.
    */
   private void init()
   {
     if (rootTreeNode != null)
     {
       DefaultMutableTreeNode branchNode = new DefaultMutableTreeNode();
       IceUserObject branchObject = new IceUserObject(branchNode);
       branchNode.setUserObject(branchObject);
       branchObject.setExpanded(false);
       branchObject.setText("Scan 1");
       branchObject.setLeaf(true);
       rootTreeNode.add(branchNode);
       
       branchNode = new DefaultMutableTreeNode();
       branchObject = new IceUserObject(branchNode);
       branchNode.setUserObject(branchObject);
       branchObject.setExpanded(false);
       branchObject.setText("Scan Loop 1");
       rootTreeNode.add(branchNode);
       
       DefaultMutableTreeNode branchNode2 = new DefaultMutableTreeNode();
       branchObject = new IceUserObject(branchNode);
       branchNode2.setUserObject(branchObject);
       branchObject.setExpanded(false);
       branchObject.setText("Scan 2");
       branchObject.setLeaf(true);
       branchNode.add(branchNode2);
       
       branchNode = new DefaultMutableTreeNode();
       branchObject = new IceUserObject(branchNode);
       branchNode.setUserObject(branchObject);
       branchObject.setExpanded(false);
       branchObject.setText("Scan 3");
       branchObject.setLeaf(true);
       rootTreeNode.add(branchNode);
     }
   } 
   
   /**
    * Gets the default tree model.  This model is needed for the value
    * attribute of the tree component.
    *
    * @return default tree model used by the navigation tree
    */
   public DefaultTreeModel getModel()
   {
     return model;
   } 
   
   /**
    * Sets the default tree model.
    *
    * @param model new default tree model
    */
   public void setModel(DefaultTreeModel model)
   {
     this.model = model;
   }
 
   private String dragPanelMessage = "Test";
   public void setDragPanelMessage(String s)
   {
     dragPanelMessage = s;
   }
 
   public String getDragPanelMessage()
   {
     return dragPanelMessage;
   }
 
   public void dragPanelListener(DragEvent dragEvent)
   {
     if(dragEvent.getEventType() == DragEvent.DRAG_CANCEL)
     {
       dragPanelMessage = "Test";
     }
     else
     {
       DefaultMutableTreeNode dragged = (DefaultMutableTreeNode)((HtmlPanelGroup)dragEvent.getComponent()).getDragValue();
       DefaultMutableTreeNode dropTarget = (DefaultMutableTreeNode)dragEvent.getTargetDropValue();
 
       //"DragEvent:" + DragEvent.getEventName(dragEvent.getEventType()) +
       dragPanelMessage = " DragValue:'" + dragged.getUserObject().toString() + "'" +
         " DropValue:'" + dropTarget.getUserObject().toString() + "'";
 
       //Now we can use the dragged node and the dropped node to reorganize the tree.
       this.model.removeNodeFromParent(dragged);
       IceUserObject dropUO = (IceUserObject)dropTarget.getUserObject();
 
       DefaultMutableTreeNode parent = dropTarget;
       int idx = this.model.getChildCount(parent);
 
       if (dropUO.isLeaf())
       {
         parent = (DefaultMutableTreeNode)dropTarget.getParent();
         idx = this.model.getIndexOfChild(parent, dropTarget) + 1;
       }
 
       this.model.insertNodeInto(dragged, parent, idx);
     }
   }
 }
 


Make special note of how the TreeModel is used to manipulate the nodes, not the DefaultMutableTreeNodes themselves (in the dragPanelListener method)!

This example was adapted from the Tree example and the drag and drop example.

Note that there are a couple bugs that still need to be addressed with the above code. E.G. you'll get an exception if you drag a node onto itself, or drag a parent node onto one of its children.

Cheers!
enietom


Joined: 05/May/2007 00:00:00
Messages: 25
Offline


For those interested parties, I've used Icefaces 1.6.1 to implement drag and drop in a tree...  


Very nice, i'm about to try this in my app.

Thx for sharing it!
[Email]
homejobsl

Joined: 23/Oct/2009 00:00:00
Messages: 2
Offline


Hi,

The Code were very useful.
However, Is there any workaround for over come the exception(s).

Your Suggestions Highly Appreciated.

Thanks
cabaji

Joined: 20/Jul/2010 12:18:45
Messages: 1
Offline


i found the solution to the exceptions here is the code, its inside the the dragpanellistener
 

Code:
DefaultMutableTreeNode dragged = (DefaultMutableTreeNode) ((HtmlPanelGroup) dragEvent.getComponent())
 						.getDragValue();
 				DefaultMutableTreeNode dropTarget = (DefaultMutableTreeNode) dragEvent.getTargetDropValue();
 
 				IceUserObject iceChild = (IceUserObject) dragged.getUserObject();
 				IceUserObject iceParent = (IceUserObject) dropTarget.getUserObject();
 				
 				if(iceParent.equals(iceChild)==true)
 				{
 					return;
 				}
 				
 				//si un nodo padre quiere ingresar al nodo hijo salga
 				if(iceParent.isLeaf()==true && iceChild.isLeaf()==false){
 					return;
 				}
 
 
 
Forum Index -> Components
Go to:   
Powered by JForum 2.1.7ice © JForum Team