Powered By Blogger

quarta-feira, 2 de março de 2016

Utilizando o propriedade TREE do Primefaces 5.3

Opa, sobrou um tempinho vamos lá atualizar o Blog, quem sabe isso pode ajudar alguém ai.

Estes dias precisei utilizar o  com uma particularidade, que era poder arrastar e soltar o componente, para a outra caixa. tipo um .

O maior problema desta utilização é a possibilidade, de se arrastar o filho e trazer o pai automaticamente.
A implementação ficaria, algo parecido com isso.

 <body>  
      <h:form id="form">  
           <p:growl id="msgs" showDetail="true" />  
           <h:panelGrid columns="1" cellpadding="4" cellspacing="4" width="100%"  
                border="0">  
                <p:row>  
                     <p:outputLabel value="#{msg['perfil2']} " />  
                     <p:outputLabel value=" #{perfilMB.perfil.nome}" />  
                </p:row>  
                <p:separator />  
           </h:panelGrid>  
           <h:panelGrid columns="3">  
                <p:tree id="tree1" value="#{perfilMB.tree}" var="node" selectionMode="single" selection="#{perfilMB.selectedNode1}"  
         draggable="true" droppable="true" dragdropScope="demo">  
            <p:ajax event="dragdrop" listener="#{perfilMB.onDragDrop}" update=":form:msgs" />  
            <p:treeNode>  
              <h:outputText value="#{node}" />  
            </p:treeNode>  
          </p:tree>  
                <img  
                     src="#{facesContext.externalContext.request.contextPath}/resources/imagens/transfer.png"  
                     border="0" />  
                <p:tree id="tree2" value="#{perfilMB.tree2}" var="node" selectionMode="single" selection="#{perfilMB.selectedNode2}"  
         draggable="true" droppable="true" dragdropScope="demo">  
            <p:ajax event="dragdrop" listener="#{perfilMB.onDragDrop}" update=":form:msgs" />  
            <p:treeNode>  
              <h:outputText value="#{node}" />  
            </p:treeNode>  
          </p:tree>  
           </h:panelGrid>  
      </h:form>  
 </body>  


A parte do ManagerBean, possui 2 métodos recursivos, que montam a árvore de acordo com os dados retornados da base de dados.

 public void montaArvore(){  
           tree = new DefaultTreeNode();  
           List<FuncionalidadeORM> lstMenu = new ArrayList<FuncionalidadeORM>(funcService.buscaMenusPai());  
           for (FuncionalidadeORM func : lstMenu) {  
                if (func.getFuncPai() == null) {  
                     TreeNode no = new DefaultTreeNode(func.getNome(), null);  
                     for (FuncionalidadeORM func1 : funcService.SubMenus(func.getId())) {  
                          if(funcService.SubMenus(func1.getId()).isEmpty()){  
                               TreeNode item = new DefaultTreeNode(func1.getNome(), null);  
                               no.getChildren().add(item);  
                          }else{  
                               TreeNode subItem = new DefaultTreeNode(func1.getNome(), null);  
                               subItem = geraSubmenu(func1);  
                               no.getChildren().add(subItem);  
                          }  
                     }  
                     tree.getChildren().add(no);  
                }  
           }  
      }  
      private TreeNode geraSubmenu(FuncionalidadeORM principal) {  
           TreeNode subItem = new DefaultTreeNode(principal.getNome(),null);  
           for (FuncionalidadeORM func1 : funcService.SubMenus(principal.getId())) {  
                if(funcService.SubMenus(func1.getId()).isEmpty()){  
                     TreeNode item = new DefaultTreeNode(func1.getNome(), null);  
                     subItem.getChildren().add(item);  
                }else{  
                     subItem.getChildren().add(geraSubmenu(func1));  
                }  
           }  
           return subItem;  
      }  


O método capaz de fazer a funcionalidade de arrastar e soltar, é bastante simples.

public void onDragDrop(TreeDragDropEvent event) {
        TreeNode dragNode = event.getDragNode();
        TreeNode dropNode = event.getDropNode();
        int dropIndex = event.getDropIndex();
         
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Dragged " + dragNode.getData(), "Dropped on " + dropNode.getData() + " at " + dropIndex);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }


Espero que possa ser útil, qualquer dúvida só chamar ai.


Nenhum comentário:

Postar um comentário