Arquivo Discussoes de Programacao e Tecnologia Pessoal, bom dia!
Gostaria de saber se vcs podem me indicar algum componente para jsf que me permita montar uma hierarquia em formato de arvore utilizando drag and drop,
onde por exemplo um nó superior, possa ter vários nós inferiores, como se fosse um fluxograma.
Estive vendo o componente tree do primefaces, porém ele não me atende 100%, pois em casos que um nó inferior, tem vários nós superiores,
acaba a visualização da hierarquia muito extensa e confusa.
Desde já obrigado.
Pessoal, bom dia!Gostaria de saber se vcs podem me indicar algum componente para jsf que me permita montar uma hierarquia em formato de arvore utilizando drag and drop,
onde por exemplo um nó superior, possa ter vários nós inferiores, como se fosse um fluxograma.Estive vendo o componente tree do primefaces, porém ele não me atende 100%, pois em casos que um nó inferior, tem vários nós superiores,
acaba a visualização da hierarquia muito extensa e confusa.Desde já obrigado.
Se você estiver usando primefaces pode utiliza o tree mais que eu saiba ele não suporta drag in drop.
Então, na verdade não estou utilizando o drag and drop para o componente tree diretamente,
para o nó em que ele está selecionado eu tenho duas listas, uma com os itens que já foram adionados para aquele nó,
e outra com os itens que ainda estão disponíveis para serem adicionados, que sao apresentadas em um
p:datatable, esses datatable que contem o recurso de drag and drop, arrastando os itens de um para outro.
O problema maior com o tree do prime é a visualização que ele apresenta, sendo os itens apresentados verticalmente
e em casos que um nó “filho” contem mais de um “pai”, esse filho aparece repetidamente em cada “pai” que contiver ele,
e por exemplo se esse nó que é “filho” tiver mais “filhos” na visualização ele irá aparecer repetidamente em todos os nós
do “pai”. Não sei se ficou claro, mas o objetivo é montar uma tela que permita montar um fluxograma de setores de uma empresa.
Desde já obrigado
vmwanderlind,
Não entendi bem, mas, duas coisas me vieram a cabeça:
Dá uma olhada no Mindmap, também do Primefaces, talvez seja adaptável ao que você precisa.
O drag and drop do RichFaces não seria o que você quer fazer? O Primefaces também tem algo no mesmo estilo, mas, a forma como está ilustrado no RichFaces me pareceu mais próximo do que você quer.
Boa Tarde
Em vez de utilizar drag and drop você pode utilizar o context Menu da tree.
A idéia seria clicar com o botão direito e conter as opções de copiar, colar, recortar, excluir ... Ex: [url]http://www.primefaces.org/showcase-labs/ui/treeContextMenu.jsf[/url]
Obs: Eu fiz uma árvore de layer de um GIS que desenvolvi, nele existe as opções de up e down, porém caminham sempre no mesmo pai (Node Parent).
<p:contextMenu for="treeWMS" nodeType="layerWMS" >
<p:menuitem value="Acender/Apagar" update="treeWMS,messages"
actionListener="#{treeLayersBean.changeVisibilityLayerWMS}" icon="ui-icon-check" oncomplete="handleComplete(xhr, status, args)"/>
<p:menuitem value="Zoom no Layer" update="treeWMS,messages"
actionListener="#{treeLayersBean.zoomToLayer}" icon="ui-icon-search" oncomplete="handleComplete(xhr, status, args)"/>
<p:menuitem value="Subir" update="treeWMS,messages"
actionListener="#{treeLayersBean.upLayer}" icon="ui-icon-arrowthick-1-n" oncomplete="handleComplete(xhr, status, args)"/>
<p:menuitem value="Descer" update="treeWMS,messages"
actionListener="#{treeLayersBean.downLayer}" icon="ui-icon-arrowthick-1-s" oncomplete="handleComplete(xhr, status, args)"/>
<p:separator></p:separator>
<p:menuitem value="Deletar" update="treeWMS,messages"
actionListener="#{treeLayersBean.deleteNode}" icon="ui-icon-close" oncomplete="handleComplete(xhr, status, args)"/>
<p:separator></p:separator>
<p:menuitem value="Lista de Atributos" update="panelAtributos,messages"
actionListener="#{treeLayersBean.loadAtributos}" icon="ui-icon-note" oncomplete="dialogAtributos.show()"/>
<p:menuitem value ="Propriedades" update="panelPropriedades" icon="ui-icon-gear" oncomplete="dialogPropriedades.show()" />
</p:contextMenu>
<p:tree value="#{treeLayersBean.treeWMS}" var="layerWMS" id="treeWMS"
dynamic="true" cache="false"
selectionMode="single"
selection="#{treeLayersBean.selectedNode}">
<p:treeNode expandedIcon="ui-icon-folder-open"
collapsedIcon="ui-icon-folder-collapsed">
<h:outputText value="#{layerWMS}"/>
</p:treeNode>
<p:treeNode type="layerWMS" >
<p:graphicImage value="#{layerWMS.visibilidade==true?'./imagens/gis/layer_on.png':'./imagens/gis/layer_off.png'}" />
<p:spacer width="10"></p:spacer>
<h:outputText value="#{layerWMS.titulo}" />
<p:panel style="text-align:center;width: 200px" visible="#{layerWMS.visibilidade}">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage url="#{layerWMS.estilo.url}" cache="true">
</p:graphicImage>
</h:panelGrid>
</p:panel>
</p:treeNode>
</p:tree>
Pedaço do Meu Bean
public void criarArvoreWMS(){
List<TreeNode> nodesWMS = apagarTreeWMS();
//Cria Filho
TreeNode layerCamadaWMS = new DefaultTreeNode("Geoserver", getTreeWMS());
//Reescreve Arvore de Layers WMS
for(int posicao=0;posicao<=nodesWMS.size();posicao++){
TreeNode node;
if(posicao==0){
//Cria o LayerModel Selecionado na arvore WMS (Geoserver)
getSelectedLayerModel().setEnable(true);
node = new DefaultTreeNode("layerWMS",getSelectedLayerModel(), layerCamadaWMS);//
node.setSelected(true);
}else{
node = new DefaultTreeNode(nodesWMS.get(posicao - 1).getType(),
nodesWMS.get(posicao - 1).getData(),
layerCamadaWMS);
}
}
}
public List apagarTreeWMS(){
List<TreeNode> nodesWMS = new ArrayList<TreeNode>();
//Captura todos Layers Adicionados no Geoserver
for(TreeNode node:getTreeWMS().getChildren().get(0).getChildren()){
nodesWMS.add(node);
}
//Limpa TreeWMS
getTreeWMS().getChildren().clear();
return nodesWMS;
}
public void upLayer(ActionEvent event){
RequestContext context = RequestContext.getCurrentInstance();
layerModel = (LayerModel) selectedNode.getData();
TreeNode layerAnterior = null;
//Verificar tamanho da arvore
if(verificarTamanhoCamadaWMS() > 1){
//Percorre pela árvore de layers da camada GeoServer
for (int posicao=0;posicao< getTreeWMS().getChildren().get(0).getChildCount();posicao++){
LayerModel nodeTree = (LayerModel) getTreeWMS().getChildren().get(0).getChildren().get(posicao).getData();
//Se o nó da Arvore for igual ao item selecionado
if(nodeTree.getTitulo().equals(layerModel.getTitulo()) && posicao!=0){
//Organiza na nova Posicao
getTreeWMS().getChildren().get(0).getChildren().set(posicao - 1, selectedNode);
layerAnterior.setSelected(false);
//Desce o layer que cedeu lugar
getTreeWMS().getChildren().get(0).getChildren().set(posicao, layerAnterior);
getTreeWMS().getChildren().get(0).getChildren().get(posicao - 1).setSelected(true);
//Responde Parame
context.addCallbackParam("action", "moveLayer");
context.addCallbackParam("layer", layerModel.getNome());
context.addCallbackParam("value", "up");
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Move up", layerModel.getTitulo());
FacesContext.getCurrentInstance().addMessage(null, message);
break;
}
//Layer Anterior
layerAnterior = getTreeWMS().getChildren().get(0).getChildren().get(posicao);
}
}else{
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Layer único!", layerModel.getTitulo());
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
public void downLayer(ActionEvent event){
RequestContext context = RequestContext.getCurrentInstance();
layerModel = (LayerModel) selectedNode.getData();
TreeNode layerProximo = null;
//Verificar tamanho da arvore
if(verificarTamanhoCamadaWMS() > 1){
//Percorre pela árvore de layers da camada GeoServer
for (int posicao=0;posicao< getTreeWMS().getChildren().get(0).getChildCount();posicao++){
LayerModel nodeTree = (LayerModel) getTreeWMS().getChildren().get(0).getChildren().get(posicao).getData();
//Se o nó da Arvore for igual ao item selecionado
if(nodeTree.getTitulo().equals(layerModel.getTitulo()) && posicao!=getTreeWMS().getChildren().get(0).getChildCount()-1){
//Captura proximo LayerModel
layerProximo = getTreeWMS().getChildren().get(0).getChildren().get(posicao + 1);
//Desce na nova Posicao
getTreeWMS().getChildren().get(0).getChildren().set(posicao + 1, selectedNode);
getTreeWMS().getChildren().get(0).getChildren().get(posicao).setSelected(false);
//Sobe LayerModel Proximo
getTreeWMS().getChildren().get(0).getChildren().set(posicao, layerProximo);
getTreeWMS().getChildren().get(0).getChildren().get(posicao+1).setSelected(true);
//Responde Parame
context.addCallbackParam("action", "moveLayer");
context.addCallbackParam("layer", layerModel.getNome());
context.addCallbackParam("value", "down");
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Move down", layerModel.getTitulo());
FacesContext.getCurrentInstance().addMessage(null, message);
break;
}
}
}else{
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Layer único!", layerModel.getTitulo());
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
Outra dica é [url]http://demo.vaadin.com/sampler#DragDropTreeSorting[/url] (Eu nunca mexi .... :P )
Estive olhando o componente achei interessante, porém não sei se atende realmente minha necessidade,
pois preciso apresentar todos níveis da hierarquia, e ali aparentemente ele vai apresentando apenas os
que pertencem para o nó selecionado. Além disso, estou trabalhando com a versão 2.2.1 do prime que não
tem o componente implementado ainda.
Estou utilizando o drag and drop do Prime e está atendendo bem, o problema é que ao apresentar os elementos da lista no componente p:tree fica repetitivo e confuso.
Algo que encontrei na minha busca foi esse componente da Oracle - ADF Faces, o problema é que pelo que vi
para desenvolver utilizando ele precisaria do JDeveloper. Até existe versão do Eclipse com plugin para crirar
projeto utilizando ele disponibilizada, porém para rodar o servidor de aplicação teria que ser o WebLogic Server.
Segue abaixo um vídeo de como é o componente.
http://download.oracle.com/otn_hosted_doc/jdeveloper/111demos/ADF_DVT_HV/HVDemo.html
Alguém já utilizou ele?
Desde já obrigado.