1 Reply Latest reply on Feb 14, 2012 3:04 AM by Bernard Labno

    RF 4 Tree drag-n- drop support

    Robert Gary Newbie

      I don't see any reference of drag and drop is still supported in trees in RF 4.1. I'm migrating from 3.3.3.Final. I'm using the example dropListener and the symbols no longer exist...

       

       

       

          public void dropListener(DropEvent dropEvent) {

       

       

              try {

       

       

                  // resolve drag destination attributes

                  UITreeNode destNode = (dropEvent.getSource() instanceof UITreeNode) ? (UITreeNode) dropEvent.getSource() : null;

                  UITree destTree = destNode != null ? destNode.getUITree() : null;

                  TreeRowKey dropNodeKey = (dropEvent.getDropValue() instanceof TreeRowKey) ? (TreeRowKey) dropEvent.getDropValue() : null;

                  TreeNode droppedInNode = dropNodeKey != null ? destTree.getTreeNode(dropNodeKey) : null;

       

       

                  // resolve drag source attributes

                  UITreeNode srcNode = (dropEvent.getDraggableSource() instanceof UITreeNode) ? (UITreeNode) dropEvent.getDraggableSource() : null;

                  UITree srcTree = srcNode != null ? srcNode.getUITree() : null;

                  TreeRowKey dragNodeKey = (dropEvent.getDragValue() instanceof TreeRowKey) ? (TreeRowKey) dropEvent.getDragValue() : null;

                  TreeNode draggedNode = dragNodeKey != null ? srcTree.getTreeNode(dragNodeKey) : null;

                  if (dropEvent.getDraggableSource() instanceof UIDragSupport && srcTree == null && draggedNode == null && dropEvent.getDragValue() instanceof TreeNode) {

                      srcTree = destTree;

                      draggedNode = (TreeNode) dropEvent.getDragValue();

                      dragNodeKey = srcTree.getTreeNodeRowKey(draggedNode) instanceof TreeRowKey ? (TreeRowKey) srcTree.getTreeNodeRowKey(draggedNode) : null;

                  }

       

       

                  // Note: check if we dropped node on to itself

                  if (droppedInNode != null && (droppedInNode.equals(draggedNode))) {

                      return;

                  }

       

       

                  //Don't drag below yourself, that would be crazy and recurrsive

                  TreeNode currNode = droppedInNode.getParent();

                  while (currNode != null) {

                      if (currNode.equals(draggedNode)) {

                          return;

                      }

                      currNode = currNode.getParent();

                  }

       

       

                  if (dropNodeKey != null) {

                      // add destination node for rerender

                      destTree.addRequestKey(dropNodeKey);

                      Object state = null;

                      if (dragNodeKey != null) { // Drag from this or other tree

                          TreeNode<Group> dropParentNode = droppedInNode.getParent();

                          Group dragNodeGroup = (Group) draggedNode.getData();

                          Group dropGroup = (Group) droppedInNode.getData();

                          if ( dropGroup.getName().equals(allGroupName) == true )

                          {

                              dropGroup = null; //make a top node

                          }

                          dragNodeGroup.move(dropGroup, null);

       

       

                          // 1. remove node from tree

                          state = srcTree.removeNode(dragNodeKey);

                          // 2. add parent for rerender

      //                Object rowKey = srcTree.getTreeNodeRowKey(parentNode); drops in parent

                          Object rowKey = srcTree.getTreeNodeRowKey(draggedNode); //drop below instead

       

       

                          srcTree.addRequestKey(rowKey);

                      } else if (dropEvent.getDragValue() != null) { // We'll probably never do this but this drags from other than a tree

                          // drag source

                          draggedNode = new SortedTreeMap<Group>();

                          draggedNode.setData(dropEvent.getDragValue().toString());

                      }

       

       

                      String groupName = ((Group)draggedNode.getData()).getName();

                      destTree.addNode(dropNodeKey, draggedNode, groupName, state);

                  }

       

       

                   AjaxContext ac = AjaxContext.getCurrentInstance();

                  // Add destination tree to reRender

                  ac.addComponentToAjaxRender(destTree);

       

       

              } catch (Exception e) {

                  logger.error(e.getMessage(), e);

                  getFacesContext().addMessage("Error:", new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", e.getMessage()));

              }

       

       

          }

       

        • 1. Re: RF 4 Tree drag-n- drop support
          Bernard Labno Master

          Here is extract from my app:

           

           

          {code:xml}

                           <rich:tree id="tree" var="item" selectionType="ajax" toggleType="ajax" treeToggleListener="#{bean.treeToggleListener}"

                                             selectionChangeListener="#{bean.treeSelectionChangeListener}" render="c cNB aSB mB"

                                             nodeType="#{bean.getNodeType(item)}">

                                      <!--tM=treeModel-->

                                      <rich:treeModelRecursiveAdaptor id="tM" roots="#{bean.treeRoots}"

                                                                      nodes="#{bean.getFolders(item)}">

           

                                          <rich:treeNode type="root" expanded="#{bean.expansionMap[item]}" iconCollapsed="/img/folder.png"

                                                         iconExpanded="/img/rootExpanded.png">

                                              <a4j:outputPanel>

                                                  #{messages['root']}

                                                  <rich:dropTarget acceptedTypes="section" dropListener="#{bean.itemDropped}" dropValue="#{item}"

                                                                   render="treeC aB"/>

                                              </a4j:outputPanel>

                                          </rich:treeNode>

                                          <rich:treeNode id="s" type="folder" expanded="#{bean.expansionMap[item]}"

                                                         iconCollapsed="/img/folderCollapsed.png" iconExpanded="/img/folderExpanded.png">

           

                                              <a4j:outputPanel id="sP">

                                                  <rich:dragIndicator id="indS" acceptClass="accept" rejectClass="reject" draggingClass="default">

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

                                                  </rich:dragIndicator>

                                                  <rich:dragSource type="folder" dragIndicator="indS" dragValue="#{item}"

                                                                   rendered="#{bean.changeStructureMode}"/>

                                                  <rich:dropTarget id="dropTarget" acceptedTypes="#{bean.getAcceptedTypes(item)}"

                                                                   dropListener="#{bean.itemDropped}" dropValue="#{item}" render="treeC aB"/>

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

                                              </a4j:outputPanel>

                                          </rich:treeNode>

                                          <rich:treeModelAdaptor nodes="#{bean.getLeafs(item)}" rendered="#{bean.isFolder(item)}"

                                                                 leaf="#{true}">

           

                                              <rich:treeNode type="question" iconLeaf="/img/leaf.png">

                                                  <a4j:outputPanel>

                                                      <rich:dragIndicator id="indQ" acceptClass="accept" rejectClass="reject" draggingClass="default">

                                                          <h:outputText

                                                                  value="#{empty item.leaf.id ? messages['newLeaf'] : item.leaf.text}"/>

                                                      </rich:dragIndicator>

                                                      <rich:dragSource type="leaf" dragIndicator="indQ" dragValue="#{item}"/>

                                                      <h:outputText

                                                              value="#{empty item.leaf.id ? messages['newLeaf : item.leaf.text}"/>

                                                  </a4j:outputPanel>

                                              </rich:treeNode>

                                          </rich:treeModelAdaptor>

                                      </rich:treeModelRecursiveAdaptor>

                                  </rich:tree>

           

                                  <contextmenu:contextmenu id="cN" mode="ajax" attachTo="tree" rendered="#{bean.viewMode != 'WEIGHT'}">

                                      <h:panelGroup id="cNB">

           

                                          <rich:menuItem id="aSC" label="#{messages['addFolder']}" onclick="aSPShow()" mode="client"

                                                         rendered="#{!bean.changeStructureMode}"

                                                         disabled="#{not bean.addingFolderAllowed}" icon="/img/folderCollapsed.png"/>

           

                                          <rich:menuItem id="dSC" label="#{messages['deleteFolder']}"

                                                         rendered="#{!bean.changeStructureMode}" oncomplete="#{rich:component(':dSec')}.show();"

                                                         execute="@this" render="treeC c mB aB" disabled="#{not bean.folderSelected}"

                                                         icon="/img/remove.png"/>

                                          <rich:menuSeparator/>

           

                                          <rich:menuItem id="aQC" label="#{messages['addLeaf']}" mode="server"

                                                         action="#{bean.addLeaf}" disabled="#{not bean.addingLeafAllowed}"

                                                         icon="/img/leaf.png" render="treeC cmB @form aB quesC"/>

           

                                          <rich:menuItem id="rQC" label="#{messages['removeLeaf']}" icon="/img/remove.png"

                                                         onclick="#{rich:component(':dQIP')}.show();" render="dQIPC"

                                                         disabled="#{not bean.leafSelected}"/>

           

                                      </h:panelGroup>

                                  </contextmenu:contextmenu>

          {code:xml}

          It has d'n'd of each node except root. Also there is context menu that is rerendered on each tree node selection so that i can have appropriate items disabled for particular tree node.