GuiÃ£o prefuse - Sweet

Visualização de Informação – Introdução ao prefuse 

Aula 6- Introdução ao prefuse 

Resumo: 

Prefuse no eclipse: configuração do ambiente de desenvolvimento 

Primeiro exemplo com prefuse 

ColorAction: atribuição de cores a itens visuais 

Mudar o layout 

Acrescentar campos numa tabela 

DataColorAction: atribuição de cores a itens visuais baseado num campo 

de dados. 

6.1 prefuse no eclipse 

Importe para o eclipse o projecto prefuse.zip no eclipse (botão direito na janela 

do Package Explorer seleccionar import->Existing Projects into 

Workspace->Select archive File e escolher o ficheiro prefuse.zip). 

É possível aceder a todo o projecto prefuse incluindo código fonte, dados, testes, 

etc… navegue no projecto e execute algumas demonstrações para ver as 

potencialidades do prefuse (ver na pasta demos alguns exemplos (GraphView, ). 

Note que as principais fontes de ajuda para a utilização do prefuse são: 

Demos fornecidas no package. 

Página web do prefuse (http://prefuse.org/) nomeadamente a documentação 

(http://prefuse.org/doc/) e a API da biblioteca (http://prefuse.org/doc/api/) 

Código fonte. 

Configuração do ambiente de desenvolvimento: 

A associação da biblioteca prefuse a um projecto pode ser feita Adicionando um 

link para o ficheiro do tipo jar (tecla da direita Build Path-> Configure Build 

Path-> libraries->Add external JARs) 

É possível gerar o ficheiro prefuse.jar a partir do projecto importado na secção 

6.1 usando a opção export->JAR File. 

6.2 Esqueleto em Java 

Crie um novo projecto no Eclipse com o nome aula_1 e adicione o ficheiro 

aula_1.java que contem o código necessário para abrir uma janela 2D de desenho em 

Java. Execute o programa e observe o resultado. 

Associe ao projecto a biblioteca prefuse como indicado no ponto anterior. 

2ºsemestre 2010-2011 1/25 Paulo Dias


6.3 Primeiro exemplo em prefuse: um grafo simples 

Modifique o código fornecido para permitir realizar a visualização de um grafo 

simples. Para tal, deve apagar a função paint e acrescentar no main o código que 

segue de acordo com os 6 passos seguintes: 

1. Definição dos dados a visualizar: Crie um grafo com 6 nós ligados entre 

eles de forma arbitrária a partir do código: 

Graph graph = new Graph(); 

Node Node1 = graph.addNode(); 

Node Node2 = graph.addNode(); 

graph.addEdge(Node1, Node2); 

2. Criação do objecto de visualização: O grafo será referenciado através da 

string associada a visualização. 

Visualization vis = new Visualization(); 

vis.add("graph", graph); 

3. Rendering: Define como os objectos irão ser desenhados através da 

definição de um renderer e de uma renderFactory. A renderFactory 

pode conter mais do que um render permitindo desenhar objectos diferentes 

de forma diferente. Neste exemplo usamos um renderer simples. 

ShapeRenderer r = new ShapeRenderer(); 

// create a new DefaultRendererFactory 

// This Factory will use the ShapeRenderer for all nodes. 

vis.setRendererFactory(new DefaultRendererFactory(r)); 

4. Definição das acções: indica quais as acções a realizar sobre os dados que 

estamos a visualizar, ou seja vai definir os vários mapeamentos entre os 

dados e as representações visuais dos mesmos. Neste exemplo vamos 

desenhar os nós como quadrados verdes. As acções devem ser colocadas 

num lista de acções que serão depois associadas a visualização: 

ColorAction fill = new ColorAction("graph.nodes", 

VisualItem.FILLCOLOR, ColorLib.rgb(0, 200, 0)); 

ActionList color = new ActionList(); 

color.add(fill); 

5. Layout: O layout define a posição dos vários nós que irão ser desenhados, 

neste exemplo vamos usar um layout aleatório: 

ActionList layout = new ActionList(); 

// We add the layout to the layout ActionList, and tell it 

// to operate on the "graph". 

layout.add(new RandomLayout("graph")); 



Vamos também indicar a visualização que sempre que houver alterações do 

layout, a visualização deve ser actualizada através da acção 

RepaintAction. 

layout.add(new RepaintAction()); 

É ainda necessário adicionar as acções e os layouts a visualização. 

vis.putAction("color", color); 

vis.putAction("layout", layout); 

6. Display e interacção: Falta agora criar uma display e adicionar alguma 

interacção através do controlListener. 

Display d = new Display(vis); 

// Set the size of the display. 

d.setSize(720, 500); 

// We use the addControlListener method to set up 

interaction. 

// The DragControl is a built in class for manually moving 

// nodes with the mouse. 

d.addControlListener(new DragControl()); 

// Pan with left-click drag on background 

d.addControlListener(new PanControl()); 

// Zoom with right-click drag 

d.addControlListener(new ZoomControl()); 

7. Lançar a visualização: Aqui é criado o JFrame para a visualização e 

adicionado o display, não esquecer de lançar a visualização. 

JFrame frame = new JFrame("prefuse example"); 

// Ensure application exits when window is closed 

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 

// The Display object (d) is a subclass of JComponent, 

// wich can be added to JFrames with the add method. 

frame.add(d); 

// Prepares the window. 

frame.pack(); 

// Shows the window. 

frame.setVisible(true); 

//Sem esquecer de lançar as listas de acções que criamos: 

vis.run("color"); 

vis.run("layout"); 



Não se esqueça de adicionar os vários import necessários a medida que adiciona o 

código no programa, por exemplo neste caso: 

import prefuse.Display; 

import prefuse.Visualization; 

import prefuse.action.ActionList; 

import prefuse.action.RepaintAction; 

import prefuse.action.assignment.ColorAction; 

import prefuse.action.layout.RandomLayout; 

import prefuse.controls.DragControl; 

import prefuse.controls.PanControl; 

import prefuse.controls.ZoomControl; 

import prefuse.data.Graph; 

import prefuse.data.Node; 

import prefuse.render.DefaultRendererFactory; 

import prefuse.render.ShapeRenderer; 

import prefuse.util.ColorLib; 

import prefuse.util.GraphLib; 

import prefuse.visual.VisualItem; 

Corra o programa assim executado e observe o resultado. Comente algumas partes 

do código e observe o que ocorre. 

Acrescente nós para obter um grafo final com pelos menos 5 nós. 

6.4 Introdução de outras acções 

Repare que ainda não se consegue ver as ligações entre os nós. Crie mais algumas 

ligações arbitrarias entres os nós e acrescente uma acção que permita visualizar as 

ligações que existem no grafo (utilize a palavra chave edges e associe a cor ao 

VisualItem.STROKECOLOR). 

Pode ainda experimentar adicionar mais acções a visualização (por exemplo 

ColorAction, ShapeAction, SizeAction, StrokeAction (opcional)). Note 

que o strokeAction implica a utilização da classe java.awt.BasicStroke; 

6.5 Mudar o Layout 

Modifique agora o layout do grafo. Experimente por exemplo um layout baseado 

em forças de acordo (ForceDirectedLayout). Observe e interaja com o resultado. 

Neste caso não se esquece de especificar que a ActionList tem uma duração do tipo 

Activity.INFINITY para garantir que o display seja actualizado e que a animação 

nunca pare. 

ActionList layout = new ActionList(Activity.INFINITY); 

Pode ainda experimentar outros layout (por exemplo, 

NodeLinkTreeLayout, etc…) 

CircleLayout, 

6.6 Adição de mais informação e alterações na forma do objecto 

Modifique o grafo para conter informação adicional para cada nó (neste caso, o 

nome, idade, sexo e trabalho). 

Para tal adapte o código seguinte para criar de uma forma aleatório 20 nós 

diferentes usando a função rand.nextInt(valor) (rand do tipo random) e 



considerando 4 classes de trabalhos diferentes (por exemplo: professor, estudante, 

electricista e canalizador). 

graph.addColumn("id", Integer.class); 

graph.addColumn("idade", int.class); 

graph.addColumn("sexo", String.class); 

graph.addColumn("profissao", String.class); 

Random rand = new Random(); 

Node n = graph.addNode(); 

n.set("id",1); 

n.set("idade",rand.nextInt(45)+20); 

n.set("sexo", "M"); 

n.set("profissao", "Canalizador"); 

Crie também ligações entre nós de uma forma aleatória (por exemplo): 

for(int i = 0; i < 20; i++) 

{ 

int primeiro = rand.nextInt(20); 

int segundo = rand.nextInt(20); 

graph.addEdge(primeiro, segundo); 

} 

6.7 DataColorAction 

Adicione uma acção do tipo DataColorAction para permitir visualizar com 

vermelho as mulheres e a azul os homens adaptando o código que segue: 

int[] palette = {ColorLib.rgb(200, 0, 0), ColorLib.rgb(0,0, 200)}; 

DataColorAction fill = new DataColorAction("graph.nodes", "sexo", 

Constants.NOMINAL, VisualItem.FILLCOLOR, palette); 

Usando as classes DataColorAction e DataSizeAction modifique a visualização 

de acordo com outros campos de dados. 



Aula 7- Introdução ao prefuse 

Resumo: 

Modificar a representação 

abstractShapeRenderer. 

dos nós, utilização de um 

Visualização de informação textual (labels). 

Interacção com o rato através de controlListener e controlAdapter. 

7.1 Modificar o objecto a visualizar 

Crie um novo Projecto e utilizando o código aula_2.java fornecido que é uma 

possível solução da última aula (em alternativa pode utilizar o código da última aula). 

Modifique o código outros objectos visuais para representar cada nó. Para tal, é 

necessário criar uma nova classe baseada na classe AbstractShapeRenderer de 

forma a poder modificar a representação de cada nó de acordo com os dados. 

Acrescente a classe que segue num ficheiro (Finalrenderer.java) e faça as 

alterações necessário para utilizar esta função para desenhar os objectos em vez do 

ShapeRenderer usado na última aula. 

import java.awt.Shape; 

import java.awt.geom.Ellipse2D; 

import prefuse.render.AbstractShapeRenderer; 


public class FinalRenderer extends AbstractShapeRenderer{ 

protected Ellipse2D m_ell = new Ellipse2D.Double(); 

// Método que retorna o objecto a visualizar 

protected Shape getRawShape(VisualItem item) 

{ 

m_ell.setFrame(item.getX(),item.getY(),(Integer) 

item.get("idade")/3, (Integer) item.get("idade")/3); 

return m_ell; 

} 

} 

Modifique a classe para que os homens sejam representados com rectângulos e as 

mulheres com elipses. 



7.2 Utilização de um LabelRenderer 

Existe um renderer predefinido para visualizar informação textual junto aos 

nomes. 

Crie um LabelRenderer associado ao id e utilize esse renderer no lugar do 

finalRenderer criado na alínea anterior para visualizar junto a cada nó o id 

associada ao mesmo. 

Modifique o programa para obter uma visualização parecida com aquela 

apresentada na Figura 7-1. Note que é necessário criar uma nova acção associada a 

propriedade VisualItem.TEXTCOLOR. faça as modificações para visualizar a profissão 

em vez do id. 

Figura 7-1: Exemplo de utilização do LabelRenderer 

7.3 Utilização de um decorator 

A utlização de um LabelRenderer permite facilmente criar uma visualização 

baseado numa string. Contudo no exemplo anterior substituímos o shapeRenderer 

pelo labelRenderer logo, não era possível modificar a representação gráfica de cada 

nó. 

Vamos agora modificar o código para permitir utilizar um renderer diferente em 

função do objecto visual a representar (nó ou etiqueta). Para tal vamos utilizar as 

etiquestas (decorators). 

Altere o programa para voltar a visualização do ponto 7.1 (utilizando o 

Finalrenderer) e sem informação textual junto do nó. 

Modifique o código associado ao renderer pelo código seguinte. Este código 

coloca dois renderer na renderFactory um para os nós, e um para as etiquetas que 

estão associado ao nome label e que irão visualizar o id do nó. 

FinalRenderer r = new FinalRenderer(); 

LabelRenderer l = new LabelRenderer("id"); 

DefaultRendererFactory drf = new DefaultRendererFactory(r); 

drf.add(new InGroupPredicate("labels"),l); 

final Schema DECORATOR_SCHEMA = PrefuseLib.getVisualItemSchema(); 

DECORATOR_SCHEMA.setDefault(VisualItem.INTERACTIVE, false); 



DECORATOR_SCHEMA.setDefault(VisualItem.TEXTCOLOR,ColorLib.rgb(200, 

200,0)); 

DECORATOR_SCHEMA.setDefault(VisualItem.FONT,FontLib.getFont("Times 

New Roman",18)); 

vis.addDecorators("labels", "graph.nodes", DECORATOR_SCHEMA); 

vis.setRendererFactory(drf); 

É preciso ainda criar um layout para indicar onde os decorators (etiquetas) 

devem ser colocadas. Para tal, crie um ficheiro DecoratorLayout.java com o código 

seguinte: 

import java.awt.geom.Rectangle2D; 

import java.util.Iterator; 

import prefuse.action.layout.Layout; 

import prefuse.visual.DecoratorItem; 


public class DecoratorLayout extends Layout 

{ 

public DecoratorLayout(String group) { 

super(group); 

} 

public void run(double frac) 

{ 

Iterator iter = m_vis.items(m_group); 

while ( iter.hasNext() ) { 

DecoratorItem decorator = (DecoratorItem)iter.next(); 

VisualItem decoratedItem = decorator.getDecoratedItem(); 

Rectangle2D bounds = decoratedItem.getBounds(); 

// Get the center point for the object, 

// and then set that point as the decorator's location. 

} 

} 

double x = bounds.getCenterX(); 

double y = bounds.getCenterY(); 

setX(decorator, null, x); 

setY(decorator, null, y); 

} 

Não se esqueça de adicionar esse layout a visualização. 

Modifique o código para que as etiquetas não apareçam sobre os nós, mas sim ao 

lado. Tente obter uma visualização final parecida com a Figura 7-2 (note a utilização 

de um DataColorAction para mapear a cor em função do sexo e a presença de um 

contorno nos nós). 



Figura 7-2: Visualização final com decorators 

7.4 Interacção com o rato 

Vamos agora permitir adicionar mais alguma interactividade a visualização. 

Vamos começar por criar um tooltip para permitir indicar alguma informação 

quando o rato estiver localizado sobre um nó. Adicione o código seguinte e observe o 

que sucede: 

d.addControlListener(new ToolTipControl("profissao")); 

Outra forma mais avançada de criar interacção é criar um controlAdapter que irá 

capturar os eventos do rato. Crie um novo ficheiro MyControlListener com o código 

seguinte e tente adicionar esse controlo a visualização. Observe. 

import java.awt.event.MouseEvent; 

import javax.swing.JPopupMenu; 

import prefuse.visual.NodeItem; 

import prefuse.controls.ControlAdapter; 

import prefuse.controls.Control; 


public class MyControlListener extends ControlAdapter implements 

Control { 

public void itemClicked(VisualItem item, MouseEvent e) 

{ 

if(item instanceof NodeItem) 

{ 

String prof = ((String) item.get("profissao")); 

int idade = (Integer) item.get("idade"); 

JPopupMenu jpub = new JPopupMenu(); 



jpub.add("profissao: " + prof); 

jpub.add("idade: " + idade); 

jpub.show(e.getComponent(),(int) item.getX(), (int) 

item.getY()); 

} 

} 

} 

Adicione na classe MyControlListener o código necessário para capturar os 

eventos de seleccionar e libertar um item (itemPressed e itemRelease) 

modificando a cor do item entre esses dois eventos para amarelo. 

Considere os 20 nomes no ficheiro nomes.txt. Modifique a visualização para 

permitir visualizar não só o ID mas também o nome das pessoas (por exemplo 1 – 

João Rocha) na visualização final. Modifique ainda os parâmetros que achar 

necessários para tornar a visualização mais ao seu gosto. 



Aula 8- Visualização de tabelas com prefuse 

Resumo: 

 

 

 

 

 

Análise da tabela de dados com EXCEL - gráficos dinâmicos 

Leitura de um ficheiro CSV 

Visualização de uma tabela (área de desenho, eixos) 

Exemplos de acções e Interacções 

Filtragem dos dados a visualizar 

8.1 Análise da tabela com EXCEL - gráficos dinâmicos 

Abra, no EXCEL, o ficheiro Musicas.xls que contém uma listagem com 

informação de uma colecção de CD’s. Analise a informação disponibilizada e crie 

uma tabela dinâmica com o campo “Tipo de Música” nas colunas, o campo Editora 

nas linhas e o Preço na área de Dados. 

Efectue agora um gráfico dinâmico apresentando o valor total dos CD’s em função 

das editoras. O gráfico obtido (semelhante a Figura 8-1) deverá possibilitar também a 

apresentação da informação numa base anual. 

Figura 8-1: Exemplo de Gráfico dinâmico obtido com o EXCEL. 



8.2 Leitura de uma tabela para o prefuse 

Guarde o ficheiro Musica.xls no formato csv. Verifique que o Excel usa o ponto e 

vírgula “;” como separador. 

Utilize o código fornecido (aula_3.java) para ler o ficheiro assim criado 

utilizando um DelimitedTextTableReader. Utilize as funções de escrita do JAVA 

(println) e as funções de acesso a tabela (getString) para verificar se os valores 

estão a ser lidos correctamente através da escrita na console. Verifique 

nomeadamente se o preço está a ser lido correctamente (ex: 

System.out.println("Preço: " + t.getDouble(i, 4)) ). 

Caso observe um problema tente arranjar forma de resolver o mesmo. 

8.3 Visualização da tabela 

Acrescente o código seguinte para permitir visualizar os preços dos CD’s em 

função do tipo de música. Note que a informação a mapear em cada eixo é definida 

através dos axislayout. 

Visualization vis = new Visualization(); 

vis.addTable("tabela",t); 

ShapeRenderer r = new ShapeRenderer(); 

vis.setRendererFactory(new DefaultRendererFactory(r)); 

AxisLayout xaxis = new AxisLayout("tabela","Editora", 

Constants.X_AXIS,VisiblePredicate.TRUE); 

AxisLayout yaxis = new AxisLayout("tabela","Preço", 

Constants.Y_AXIS,VisiblePredicate.TRUE); 

ColorAction color = new ColorAction("tabela", 

VisualItem.STROKECOLOR, ColorLib.rgb(150,150,255)); 

ActionList draw = new ActionList(); 

draw.add(color); 

draw.add(xaxis); 

draw.add(yaxis); 

draw.add(new RepaintAction()); 

vis.putAction("draw", draw); 

Display d = new Display(vis); 

d.setSize(720, 500); 

d.setAlignmentX(1000); 

d.addControlListener(new ZoomToFitControl()); 

d.addControlListener(new PanControl()); 

d.addControlListener(new WheelZoomControl()); 

// create a new window to hold the visualization 

JFrame frame = new JFrame("prefuse example"); 

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 

frame.add(d); 

frame.pack(); 

// layout components in window 

frame.setVisible(true); // show the window 

vis.run("draw"); // start up the animated layout 



Modifique a visualização para mapear outra informação (o preço em função das 

editoras por exemplo). Acrescente também mais algumas acções (por exemplo 

modificar a cor de acordo com o CD ser duplo ou não). 

8.4 Área de desenho 

Acrescente o código seguinte no princípio da classe principal: 

private static Visualization m_vis ; 

private static Display m_d; 

private static Rectangle2D m_dataB = new 

Rectangle2D.Double(); 

public static void displayLayout() { 

Insets i = m_d.getInsets(); 

int w = m_d.getWidth(); 

int h = m_d.getHeight(); 

int iw = i.left+i.right; 

int ih = i.top+i.bottom; 

int aw = 85; 

int ah = 15; 

m_dataB.setRect(i.left, i.top, w-iw-aw, h-ih-ah); 

} 

m_vis.run("draw"); 

Esta função vai permitir definir a partir da dimensão do display o tamanho da 

área onde desenhar o gráfico. Note que as variáveis de Visualization e de Display 

passam a ser membros da classe main para ser possível aceder as mesmas no método 

displayLayout (modifique o código com isso em atenção). 

A variável m_dataB contêm informação sobre a área de visualização do gráfico 

pelo que tem que ser associada aos AxisLayout da seguinte forma: 

xaxis.setLayoutBounds(m_dataB); 

yaxis.setLayoutBounds(m_dataB); 

Finalmente a função displayLayout() tem que ser executada no fim do 

programa para actualizar as dimensões da janela. Execute o código obtido. 

Modifique o programa para que a área do gráfico seja mais pequena deixando uma 

área de 20 pixéis livres de cada lado da janela. 

Redimensione a janela de desenho. O que observa? Este problema pode ser 

resolvido com um ComponentListener para garantir que a função seja invocada 

sempre que se muda o tamanho da janela da forma seguinte: 

m_d.addComponentListener(new ComponentAdapter() { 

public void componentResized(ComponentEvent e) { 

displayLayout(); 

} 

}); 



8.5 Visualização dos eixos 

Vamos agora visualizar os eixos do gráfico utilizando a classe AxisLabelLayout. 

Comece por criar dois eixos com o código seguinte. Note que os eixos vão usar os 

dados associados aos mesmos. 

AxisLabelLayout xlabels = new AxisLabelLayout("xlab", 

xaxis, m_xlabB); 

AxisLabelLayout ylabels = new AxisLabelLayout("ylab", 

yaxis, m_ylabB); 

m_xlabB e m_ylabB são dois membros (semelhantes a m_dataB) que definem a 

área de desenho dos eixos e que podem ser definidos na função displayLayout da 

forma seguinte: 

m_xlabB.setRect(i.left, h-ah-i.bottom, w-iw-aw, ah-10); 

m_ylabB.setRect(i.left, i.top, w-iw, h-ih-ah); 

Não se esqueça de adicionar os AxisLabelLayout a uma lista de acções. 

Finalmente é preciso indicar ao RenderFactory os renderers a usar para 

desenhar os eixos (semelhante ao que fizemos na última aula para as etiquetas e os 

nós), isso pode ser feito com o código seguinte: 

m_vis.setRendererFactory(new RendererFactory() { 

AbstractShapeRenderer sr = new ShapeRenderer(); 

Renderer arY = new AxisRenderer(Constants.RIGHT, 

Constants.TOP); 

Renderer arX = new AxisRenderer(Constants.CENTER, 

Constants.FAR_BOTTOM); 

public Renderer getRenderer(VisualItem item) { 

if (item.isInGroup("xlab") ) 

return arX; 

else if (item.isInGroup("ylab") ) 

return arY; 

else 

return sr; 

} 

}); 

Pode ainda modificar a formatação dos preços utilizando o código seguinte para o 

yLabel. 

NumberFormat nf = NumberFormat.getCurrencyInstance(); 

nf.setMaximumFractionDigits(2); 

ylabels.setNumberFormat(nf); 

Tente também modificar a posição dos eixos (para cima e para a esquerda). 



Figura 8-2: Visualização possível com eixos 

8.6 Acções e interacções adicionais 

Modifique a visualização para permitir veicular mais informação através de acções 

que modifiquem, por exemplo, a forma, a cor, etc. de acordo com a informação 

fornecida (Editora, álbum). Seria por exemplo interessante representar o tipo de 

música. 

Adicione também um tooltip para indicar o nome do álbum (note que o Tooltip 

é um ControlListener). 

8.7 Filtragem pelo ano 

Para permitir uma filtragem dos dados pelos anos, é necessário criar uma pesquisa 

do tipo lista (para retornar os anos que existem nos dados). Para tal comece por 

acrescentar ao código a linha seguinte que cria uma pesquisa do tipo lista no campo 

anos dos dados: 

ListQueryBinding yearsQ = new ListQueryBinding(vt, "Ano"); 

Onde o objecto vt do tipo VisualTable e é retornada na criação da visualização: 

VisualTable vt = m_vis.addTable("tabela",t); 

É agora possível criar uma listbox na frame usando o código seguinte: 

Box ListBox = new Box(BoxLayout.X_AXIS); 

ListBox.add(yearsQ.createComboBox()); 

ListBox.add(Box.createHorizontalGlue()); 

frame.add(ListBox, BorderLayout.SOUTH); 

Execute o código e observe o que acontece. 



Falta agora actualizar a visualização sempre que ocorrer uma modificação no filtro 

de pesquisa. Para tal adicione o código seguinte: 

e: 

ActionList update = new ActionList(); 

update.add(new 

VisibilityFilter("tabela",yearsQ.getPredicate())); 

update.add(color); 

update.add(xaxis); 

update.add(yaxis); 

update.add(ylabels); 

update.add(xlabels); 

update.add(new RepaintAction()); 

m_vis.putAction("update", update); 

UpdateListener lstnr = new UpdateListener() { 

public void update(Object src) { 

m_vis.run("update"); 

} 

}; 

yearsQ.getPredicate().addExpressionListener(lstnr); 

Observe outras opções de filtragem no exemplo Congress.java e adicione, por 

exemplo, uma opção de pesquisa pelo artista. 

Em alternativa, retire do site do Instituto Nacional de Estatística – INE 

(www.ine.pt) uma tabela que lhe pareça interessante e utilizando o que aprendeu nesta 

aula, crie uma visualização para esses dados. 



Aula 9- Visualização de Árvores (Trees) 

Resumo: 

 

 

 

 

 

 

Leitura e visualização de uma árvore 

Criação de uma árvore. 

Mudança de Layouts 

Vista geral - Overview 

Graus de interesse. 

Exemplo: visualização de árvore de directórios. 

9.1 Leitura e visualização de uma árvore 

Utilize o código fornecido (aula_4.java) que permite ler o ficheiro treemlexemplo.xml 

utilizando a classe TreeMLReader. Note que esta classe permite abrir 

um ficheiro xml contendo uma arvore de acordo com a dtd definida no ficheiro 

treeml.dtd. Observe os ficheiros fornecidos para perceber a estrutura do ficheiro e 

ter uma ideia da árvore a visualizar. 

Note que para poder indicar a localização da DTD, tem que indicar no ficheiro 

XML o caminho completo com a localização do mesmo, ou em alternativa importar 

os dois ficheiros para o sistema de directórios do eclipse. 

Execute o código fornecido para visualizar a informação contida na árvore. Se 

desejar, modifique algumas acções da visualização (por exemplo as cores, ou o 

tamanho da fonte através de um objecto do tipo FontAction com a fonte por omissão 

(SetDefaultFont): FontLib.getFont("Tahoma",16)). 

9.2 Utilização de outros layouts 

Modifique o layout original e teste alternativas (É possível ver os layout 

disponíveis na classe prefuse.action.layout.graph.TreeLayout. Utilize e 

modifique por exemplo os layouts: NodeLinkTreeLayout, BalloonTreeLayout, 

RadialTreeLayout). Veja qual o layout que lhe parece mais adequado para um 

ficheiro com muitos nós (por exemplo chi-ontology.xml). 



9.3 Criação da uma árvore 

Crie uma árvore que indique a estrutura de ensino DETI de acordo com a Figura. A 

visualização final deve utilizar a abreviatura como etiqueta, a cor para indicar a área 

(Ensino ou Investigação), o tamanho para reflectir o nº de pessoas/nº clausus e um 

tooltip para indicar o nome completo. 

Para criar esta árvore pode em alternativa: 

Modificar o código fornecido utilizando as funções de criação de grafos 

(ver a aula 6.6) - Note que uma árvore é sempre um grafo – e a função 

addchild para adicionar filhos aos vários nós. 

Criar um novo ficheiro xml com a informação organizada de acordo com a 

dtd fornecida. 

Utilize a informação seguinte para criar a árvore (considere um valor de 50 para o 

tamanho dos ramos): 

DETI 

Teaching 

Undergraduate: 

MIECT –Engenharia de Computadores e Telemática (65) 

MIEET – Engenharia Electrónica e Telecomunicações (105) 

MSI – Tecnologias e Sistemas de Informação (30) 

Masters 

MIECT – Mestrado Integrado em Engenharia de Computadores e Telemática (65) 

MIEET – Mestrado Integrado em Engenharia Electrónica e Telecomunicações (105) 

MSI – Mestrado em Sistemas de Informação (30) 

Research 

IEETA - Institute of Electronics and Telematics Engineering of Aveiro 

ESCCL - Embedded Systems, Computing and Control Laboratory (10) 

ISTL - Information Systems and Telematics Laboratory (17) 

SPL - Signal Processing Laboratory (27) 

ATIBT - Transverse Activity on Innovative Biomedical Technologies (16) 

ATRI - Transverse Activity on Intelligent Robotics (17) 

IT – Telecomunication Institute 

EOC – Electronic and Optoelectronic Components (3) 

ICS - Integrated Circuits and Systems (4) 

NMC - Networks and Multimedia Communications (18) 

OC - Optical Communications (11) 

RMOM - Radio Microwaves and Millimeter Waves (26) 

Figura 9-1: Exemplo de árvore 



9.4 Vista geral - Overview 

Acrescente agora uma vista geral da visualização criando um novo Display de 

acordo com o código que segue: 

Display overview = new Display(vis); 

overview.setBorder(BorderFactory.createLineBorder(Color.BLA 

CK, 1)); 

overview.setSize(100,100); 

overview.zoom(new Point2D.Float(0,0),0.2); 

overview.addControlListener(new PanControl()); 

overview.addControlListener(new ZoomControl()); 

d.add(overview); 

9.5 Grau de interesse e animação 

Modifique o código para permitir vários graus de interesse na visualização. 

Comece por voltar a um layout do tipo NodeLinkTreeLayout e de seguida adicione 

no principio da lista de acções um FisheyeTreeFilter semelhante ao código que 

segue: 

filter.add(new FisheyeTreeFilter("tree", 1)); 

Execute o código assim obtido alterando o último parâmetro do 

FisheyeTreeFilter variando entre 1 e 3. Observe. 

É preciso agora adicionar alguma interactividade para permitir mudar o grau de 

interesse ao clicar nos nós. Para tal vamos adicionar um controlo listener que vai 

correr o filtre sempre que se clicar num dado nó: 

d.addControlListener(new FocusControl(1, "filter")); 

Teste o código novamente tentando clicar nos vários nós e observar o 

comportamento da visualização. Modifique o valor de 1 para 0, o que observa? 

Finalmente vamos permitir uma animação na passagem entre graus de interesse. 

Vamos criar uma nova acção para realizar esta animação: 

ActionList animate = new ActionList(1000); 

animate.setPacingFunction(new SlowInSlowOutPacer()); 

animate.add(new QualityControlAnimator()); 

animate.add(new VisibilityAnimator("tree")); 

animate.add(new LocationAnimator("tree.nodes")); 

animate.add(new ColorAnimator("tree.nodes")); 

animate.add(new RepaintAction()); 

vis.putAction("animate", animate); 

vis.alwaysRunAfter("filter", "animate"); 

Repare que na primeira animação a localização dos nós não é correcta. Pois a 

mesma só é calculada quando é necessário. Pode se resolver esse problema 

adicionando um layout que força o cálculo de todo o layout antes da visualização. 



CollapsedSubtreeLayout subLayout = new 

CollapsedSubtreeLayout("tree", 

Constants.ORIENT_LEFT_RIGHT); 

Este novo layout deve ser adicionada a acção de layout. Os dois Layout 

também devem ser adicionados a actionList Filter para garantir que sempre que é 

actualizada a visualização, os layouts também são actualizados. 

9.6 Exemplo: visualização de uma arvore de directórios 

Utilize o programa xml-dir-listing (http://code.google.com/p/xml-dir-listing/) 

para criar um ficheiro xml com a organização de uma parte do seu disco. Em 

alternativa pode utilizar o ficheiro Aulas_list.xml que mapeia uma parte de uma 

árvore de directórios criado com o xml-dir-listing. 

O ficheiro assim criado não obedece ao formato padrão para árvores usado pelo 

prefuse. Contudo é fornecido uma classe (DirectoryMLReader) baseada na classe 

(TreeMLReader) que permite ler os ficheiros criados pelo xml-dir-listing. 

Tente visualizar o resultado do xml-dir-listing com o código anterior. 

Acrescente acções para tornar mais intuitiva a visualização, nomeadamente modificar 

os nós (cores, formas, …). Pode por exemplo utilizar o método que segue para 

permitir modificar as propriedades do nó que está seleccionado (note que a variável de 

visualização tem que ser um membro da classe para usar este código): 

public static class NodeColorAction extends ColorAction { 

public NodeColorAction(String group) { 

super(group, VisualItem.FILLCOLOR); 

} 

public int getColor(VisualItem item) { 

if ( m_vis.isInGroup(item, Visualization.FOCUS_ITEMS) ) 

return ColorLib.rgb(198,229,229); 

else if ( item instanceof NodeItem ) { 

NodeItem nitem = (NodeItem)item; 

return ColorLib.color(Color.YELLOW); 

} 

return 0; 

} 

Modifique a classe NodeColorAction para que ficheiros apareçam em amarelo e 

directórios em azul (pode verificar o nº de filhos de um nó). 

Se não o fez, utilize o xml-dir-listing para criar a árvore correspondendo a 

parte de a sua árvore de directórios, para tal pode utilizar o comando seguinte na linha 

de comandos para criar a árvore do directório fornecido no ficheiro list.xml com 

profundidade 2. Note que este ficheiro será também usado na próxima aula. 

>>xml-dir-listing –d 2 –o “list.xml” “c:\Meu Directório” 



Aula 10- Visualização de mapas de arvores (TreeMaps) 

Resumo: 

 

 

 

 

 

Leitura e visualização de uma árvore de directórios 

Visualização de um treemap 

Acções adicionais 

Interacção 

Pesquisa e filtragens 

10.1 Leitura e visualização de uma árvore 

Utilize o programa xml-dir-listing (http://code.google.com/p/xml-dir-listing/) 

para criar um ficheiro xml com a organização de uma parte do seu disco (se fez a 

alínea 9.6 da última aula pode aproveitar o ficheiro gerado). Utilize a classe fornecida 

(DirectoryMLReader) baseada na classe (TreeMLReader) que permite ler os ficheiros 

criados pelo xml-dir-listing. 

Ao longo da aula para testar as visualizações pode alternar entre o ficheiro gerado 

anteriormente ou o ficheiro chi-ontology.xml fornecido na última aula. 

Comece por utilizar o programa fornecido na aula anterior (aula5_1.java) ou, em 

alternativa, o programa da aula anterior para visualizar os dados numa árvore. 

10.2 Visualização de um TreeMap 

Modifique a visualização para permitir ver a árvore de directórios como um 

treemap. 

Comece por retirar todo o código associado a animação e visualize toda a árvore de 

directórios (para tal remova também o FisheyeTreeFilter), repare na dificuldade 

em visualizar toda a informação desse modo. 

Modifique agora o layout para o tipo SquarifiedTreeMapLayout, este layout 

utiliza um algoritmo para calcular os tamanhos das caixas do treemap que vão ser 

utilizados na visualização. 

Teste o código assim obtido. Repare como o SquarifiedTreeMapLayout apesar 

de calculado ainda não é aplicado. Para tal, é preciso criar uma classe do tipo 

AbstractShapeRenderer a colocar no RenderFactory para indicar qual a forma a 

utilizar na visualização da árvore. 



public static class NodeRenderer extends 

AbstractShapeRenderer { 

private Rectangle2D m_bounds = new Rectangle2D.Double(); 

public NodeRenderer() { 

m_manageBounds = false; 

} 

protected Shape getRawShape(VisualItem item) { 

m_bounds.setRect(item.getBounds()); 

return m_bounds; 

} 

} // end of inner class NodeRenderer 

Repare que esta classe indica que devem ser desenhados rectângulos (devolvidos 

pela método (getRawShape) mas deixa o cálculo das fronteiras ao layout 

(m_manageBounds = false). Acrescente este código ao programa e adicione um 

objecto do tipo NodeRenderer ao RenderFactory. Observe o resultado e modifique o 

código retirando todas as acções que deixam de ser necessárias (por exemplo a 

visualização das ligações). 

10.3 Acções adicionais 

Modifique a visualização para que a o preenchimento dos vários nós sem filhos do 

TreeMap esteja associado a sua profundidade na árvore. Para tal, pode adaptar a 

classe NodeColorAction (ver última aula) que extenda a classe ColorAction e onde 

o método GetColor retorne uma cor diferente em função do profundidade do item a 

visualizar. Para verificar a profundidade do nó, utilize o método getDepth do 

NodeItem. Crie uma classe BorderColorAction para modificar as cores dos limites 

da caixa de uma forma semelhante ao ColorAction. Nste caso, utilize um ColorMap 

para definir um mapa de cores através de uma lista de cores e dos índices máximos e 

mínimos. Note que pode criar o mapa de cores com o método 

ColorLib.getInterpolatedPalette. 

10.4 Etiquetas 

Acrescente um decorator para permitir a visualização de uma etiqueta (ver 7.3). 

O mesmo deve ser associado a uma condição do tipo treedepth para associar a 

etiqueta a nós de uma dada profundidade, por exemplo: 

Predicate labelP = 

(Predicate)ExpressionParser.parse("treedepth()=1"); 

vis.addDecorators("labels", "tree.nodes", labelP, 

LABEL_SCHEMA); 

Para o tipo de fonte, pode utilizar o código seguinte: 

final Schema LABEL_SCHEMA = 

PrefuseLib.getVisualItemSchema(); 

LABEL_SCHEMA.setDefault(VisualItem.INTERACTIVE, false); 

LABEL_SCHEMA.setDefault(VisualItem.TEXTCOLOR, 

ColorLib.gray(200)); 

LABEL_SCHEMA.setDefault(VisualItem.FONT, 

FontLib.getFont("Tahoma",16)); 



Crie também uma classe labelLayout (veja o exemplo TreeMap) para poder 

permitir visualizar em branco o nome dos directórios de mais alto nível (depth=1) e 

adicione um objecto dessa classe ao layout. 

public static class LabelLayout extends Layout { 

public LabelLayout(String group) { 

super(group); 

} 

public void run(double frac) { 

Iterator iter = m_vis.items(m_group); 

while ( iter.hasNext() ) { 

DecoratorItem item = 

(DecoratorItem)iter.next(); 

VisualItem node = item.getDecoratedItem(); 

Rectangle2D bounds = node.getBounds(); 

setX(item, null, bounds.getCenterX()); 

setY(item, null, bounds.getCenterY()); 

} 

} 

} // end of inner class LabelLayout 

Modifique a condição do predicate para visualizar só directórios (pode 

acrescentar a condição "childcount()>0"). 

Por fim, acrescente o código necessário para permitir acrescentar uma caixa branca 

relativa aos nós cujo nome estamos a visualizar para tal modificando adequadamente 

a classe BorderColorAction. 

Tente modificar a profundidade dos nós para os quais visualiza a etiqueta (varie 

por exemplo a profundidade entre 0 e 3). O código comporta-se como esperado? 

Acrescente o código seguinte que garante que nós pais estão acima dos nós filhos e 

observe o resultado: 

d.setItemSorter(new TreeDepthItemSorter()); 

10.5 Interacção 

Comece por desactivar a interacção para todos os nós que tenham filhos, pode usar 

o código: 

Predicate 

No= 

(Predicate)ExpressionParser.parse("childcount()>0"); 

vis.setInteractive(“tree.nodes”, No, false); 

Altere a classe que modifica a cor para permitir que o contorno do nó abaixo do 

rato tenha uma cor diferente (utilize a classe nitem.isHover() para verificar essa 

condição). 

É preciso ainda adicionar uns controllistener para garantir a actualização 

adequada da visualização. Pode ser feito com o código seguinte onde myBorder 

corresponde ao objecto do tipo BorderColorAction que controla as cores do 

contorno, note que este objecto tem de ser definido como final: 

d.addControlListener(new ControlAdapter() { 

public void itemEntered(VisualItem item, 

MouseEvent e) { 

item.setStrokeColor(myBorder.getColor(item)); 

item.getVisualization().repaint(); 

} 

public void itemExited(VisualItem item, 

MouseEvent e) { 



item.setStrokeColor(item.getEndStrokeColor()); 

item.getVisualization().repaint(); 

} 

}); 

Acrescente agora uma caixa de texto por baixo da visualização que indique o nome 

do item. Pode usar o código que segue. 

final JFastLabel title = new JFastLabel(" 

"); 

title.setPreferredSize(new Dimension(350, 20)); 

title.setVerticalAlignment(SwingConstants.BOTTOM); 

title.setBorder(BorderFactory.createEmptyBorder(3,0,0,0)); 

title.setFont(FontLib.getFont("Tahoma", Font.PLAIN, 

16)); 

Box box = UILib.getBox(new Component[]{title}, true, 10, 3, 

0); 

Adicione ainda a box a frame principal com o código: 

frame.add(box,BorderLayout.SOUTH); 

Acrescente ainda nos métodos itemEntered e itemExited o código necessário 

para actualizar o título de acordo com o nome do item seleccionado usando o código 

seguinte nas posições adequadas. Note que o title tem que ser do tipo final para 

permitir a sua utilização nestes métodos. 

title.setText(item.getString("name")); 

title.setText(null); 

10.6 Filtragem 

Para a pesquisa, pode utilizar o código seguinte semelhante ao utilizado em 8.7. 

searchQ = new SearchQueryBinding(vt.getNodeTable(),"name"); 

vis.addFocusGroup(Visualization.SEARCH_ITEMS, 

searchQ.getSearchSet()); 

searchQ.getPredicate().addExpressionListener(new 

UpdateListener() { 

public void update(Object src) { 

vis.run("filter"); 

vis.run("layout"); 

} 

}); 

Note que a variável vt é do tipo VisualTree devolvido pelo código e que para 

permitir a utilização da variável vis no membro update, a mesma deve passar a 

final. 

final Visualization vis = new Visualization(); 

VisualTree vt = vis.addTree("tree", t); 

Acrescente um searchPanel para permitir fazer uma pesquisa nos dados 

JSearchPanel search = searchQ.createSearchPanel(); 

search.setShowResultCount(true); 



search.setBorder(BorderFactory.createEmptyBorder(5,5,4,0)); 

search.setFont(FontLib.getFont("Tahoma", Font.PLAIN, 11)); 

Este SearchPanel pode ser colocado logo a seguir ao title modificando a linha 

onde é criado a caixa de visualização: 

Box box = UILib.getBox(new Component[]{title,search}, true, 

10, 3,0); 

Modifique agora a classe NodeColorAction para realçar os resultados da pesquisa 

usando o código seguinte. 

if ( vis.isInGroup(item, Visualization.SEARCH_ITEMS) ) 

return ColorLib.rgb(191,99,130); 

Opcional: 

Utilize o método setColor da classe UILib para modificar as cores da caixa de 

texto (box). Modifique a cor do texto apresentado em função de uma propriedade dos 

dados que está a utilizar (pode utilizar código do tipo item.getString("atributo") 

para aceder aos dados de um item seleccionado) 

Faça os ajustes necessários para que os contornos do nível para o qual está a ser 

visualizado uma etiqueta tenham uma espessura diferente dos outros.

GuiÃ£o prefuse - Sweet

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?