I'm writing my very first program in Java that actually does UI, so please bear with me if the answer to this is obvious.
I'm using JGraph 5 (5.14) to visualize a graph created by JGrapht (0.8.3).
I can create the graph with JGrapht just fine, and I believe it gets converted to JGraph OK using org.jgrapht.ext.JGraphModelAdapter. The problem is, when the result is displayed in a window (I'm using a panel in a JApplet) all the vertices are displayed on top of another.
Someone else had this problem (JGraph Layout Does Not Work) and I tried the solution presented there, but then only two nodes are displayed. Basically, I just want the graph displayed in some way where the nodes are separate from each other.
Some code is worth a thousand words, so here is what I currently have, which only displays two nodes (there are 219 in the graph):
class ourGraphVisualizer extends JApplet
{
private static final Color DEFAULT_BG_COLOR = Color.decode("#FAFBFF");
private static final Dimension DEFAULT_SIZE = new Dimension(1280, 1024);
// this init overrides the JApplet.init(). Our class here extends JApplet so we can do the visualization
public void init(ListenableDirectedWeightedGraph<String, DefaultWeightedEdge> theGraph)
{
JGraphModelAdapter<String, DefaultWeightedEdge> jgAdapter;
JPanel panel = new JPanel();
panel.setPreferredSize(DEFAULT_SIZE);
JScrollPane scrollpane = new JScrollPane(panel);
scrollpane.setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS);
scrollpane.setVerticalScrollBarPolicy(JScrollPane.VERTICAL_SCROLLBAR_ALWAYS);
this.getContentPane().add(scrollpane, BorderLayout.CENTER);
JFrame frame = new JFrame();
frame.add(this);
frame.setTitle("Call Graph, " + theGraph.vertexSet().size() + "nodes");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
frame.setPreferredSize(DEFAULT_SIZE);
jgAdapter = new JGraphModelAdapter<String, DefaultWeightedEdge>(theGraph);
JGraph jgraph = new JGraph(jgAdapter);
panel.add(jgraph);
resize(DEFAULT_SIZE);
// Let's see if we can lay it out
JGraphFacade jgf = new JGraphFacade(jgraph);
JGraphFastOrganicLayout layoutifier = new JGraphFastOrganicLayout();
layoutifier.run(jgf);
System.out.println("Layout complete");
final Map nestedMap = jgf.createNestedMap(true, true);
jgraph.getGraphLayoutCache().edit(nestedMap);
jgraph.getGraphLayoutCache().update();
jgraph.refresh();
frame.setVisible(true);
panel.setVisible(true);
scrollpane.setVisible(true);
}
Any constructive suggestions/help/inspiration will be greatly appreciated!
Thanks...
-Eric
If u want to avoid overlapping of your Vertex just try different graph Layout i havegiven some here this one for hierarchical layout and call run method of this
final JGraphHierarchicalLayout hir = new JGraphHierarchicalLayout();
final JGraphFacade graphFacade = new JGraphFacade(jgraph);
hir.run(graphFacade);
final Map nestedMap = graphFacade.createNestedMap(true, true);
jgraph.getGraphLayoutCache().edit(nestedMap);
It'll be a much better idea to create two JPanels and add your graphs individually to the JPanels and the JPanels to the the JFrame using an appropriate layout manager
Related
I'm trying to visualize a tree graph with the JUNG library.
The code I use is:
JPanel base = new JPanel();
Graph<String, String> grafo = OntologyGraph.getGraph(ontology);
Layout<String, String> layout = new TreeLayout<String, String>((Forest<String, String>) grafo);
VisualizationViewer<String, String> vv = new VisualizationViewer<String, String>(layout);
vv.getRenderContext().setVertexLabelTransformer(new ToStringLabeller<String>());
vv.getRenderContext().setEdgeLabelTransformer(new ToStringLabeller<String>());
vv.getRenderer().getVertexLabelRenderer().setPosition(Position.CNTR);
final DefaultModalGraphMouse<String, Number> graphMouse3 = new DefaultModalGraphMouse<>();
vv.setGraphMouse(graphMouse3);
graphMouse3.setMode(DefaultModalGraphMouse.Mode.PICKING);
base.add(vv);
return base;
It displays this
Now I want to change the circled verteces with a labelled JButton and to enlarge the space between them, but I can't find a tutorial on the web to achive this.
Changing the spacing between the nodes is easy enough; just use the TreeLayout constructor that accepts the distx and disty parameters.
Providing a JButton for each node is not something that JUNG natively supports, although you could do some hacking to enable it.
What problem are you trying to solve by using JButtons for nodes?
Here is some example code that you can use to open a JFrame with information about the node that was clicked (when you are in picking mode). If you want to have it respond to node clicks even when you are in the transforming mode, you'd have to change the graphmouseplugins a little to not remove the PickingGraphMousePlugin when in transforming mode.
vv.getRenderContext().getPickedVertexState().addItemListener(new ItemListener(){
#Override
public void itemStateChanged(ItemEvent e) {
if (e.getStateChange() == ItemEvent.SELECTED) {
JFrame frame = new JFrame("Vertex "+e.getItem()+" picked");
frame.getContentPane().add(new JButton("hello from "+e.getItem()));
frame.setSize(new Dimension(200,100));
frame.setLocation(200, 200);
frame.setVisible(true);
}
}
});
If you want the vertices to look more like rectangular buttons, the VertexLableAsShapeDemo may help. That demo uses JLabels to draw the vertices
I'm working on my personal family tree in Java/Eclipse, and happily bumped into prefuse as for graphic representation.
So far the result looks adaquate in regard to my database feed, but I'm still missing key points to make it easier to browse.
Point 1: verteces represent either a person or a union, and my graph is directed from older to younger members. This is reflected by the arrows on the edges. Yet I'd love to group the arrows in 1 direction only (I'm trying to group generations together if you like), but I can't start to find how to do that. For information, I'm using the NodeLinkTreeLayout as of now.
Point 2: aside from the graph itself, my app main window contains a second JPanel where I would like to modify / insert members. So I want to add an action to each node to call the procedures in the second JPanel. My research on how to access a java class from a node are inconclusive so far, it seems that all the examples from the starter prefuse pack are only based on graph interaction.
There it is. You might already have understood that I'm very new to prefuse and not a pro in Java. So any comment / directions / advice would really be appreciated. I will add a screecap and my graph code so you can see what could be done better.
Thank you for your time, and looking forward to reading your insights.
yorran
public class ShowGraph extends Display {
public static final String EDGES = "graph.edges";
public ShowGraph() {
super(new Visualization());
Graph mG = FamGraph.getGraph();
m_vis.addGraph("graph", mG);
m_vis.setInteractive("graphe.edges", null, false);
m_vis.setValue("graph.nodes", null, VisualItem.SHAPE, new Integer(Constants.SHAPE_ELLIPSE));
EdgeRenderer edgeR = new EdgeRenderer(Constants.EDGE_TYPE_CURVE, Constants.EDGE_ARROW_FORWARD);
LabelRenderer nodeR = new LabelRenderer("name");
nodeR.setRoundedCorner(8, 8);
nodeR.setHorizontalAlignment(Constants.LEFT);
DefaultRendererFactory drf = new DefaultRendererFactory();
drf.setDefaultRenderer(nodeR);
drf.setDefaultEdgeRenderer(edgeR);
m_vis.setRendererFactory(drf);
int[] palette = new int[] {
ColorLib.rgb(255, 180, 180), ColorLib.rgb(190, 190, 255)
};
DataColorAction nFill = new DataColorAction("graph.nodes", "label", Constants.NOMINAL, VisualItem.FILLCOLOR, palette);
ColorAction edges = new ColorAction("graph.edges", VisualItem.STROKECOLOR, ColorLib.gray(230));
ColorAction arrow = new ColorAction("graph.edges", VisualItem.FILLCOLOR, ColorLib.gray(230));
ColorAction text = new ColorAction("graph.nodes", VisualItem.TEXTCOLOR, ColorLib.gray(0));
ActionList color = new ActionList();
color.add(nFill);
color.add(edges);
color.add(arrow);
color.add(text);
ActionList layout = new ActionList(Activity.INFINITY);
//layout.add(new ForceDirectedLayout("graph", true));
layout.add(new NodeLinkTreeLayout("graph"));
layout.add(new RepaintAction());
m_vis.putAction("color", color);
m_vis.putAction("layout", layout);
setSize(1200, 900); //size controlled by parent jpanel - Comment out after tests
pan(360, 250);
setHighQuality(true);
addControlListener(new DragControl());
addControlListener(new PanControl());
addControlListener(new ZoomControl());
addControlListener(new ZoomToFitControl());
m_vis.run("color");
m_vis.run("layout");
}
public static void main(String[] args) {
Fulltree.fireUp();
ShowGraph mG = new ShowGraph();
JFrame frame = new JFrame("My family chart");
JPanel thePanel = new JPanel();
frame.getContentPane().add(thePanel);
thePanel.add(mG);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
}
So after a lot of reseach, I'm answering to my own questions in case someone meets the same issues :
as for point 1 : ForceDirectedGraph is a lot better than NodeLinkTreeLayout, especially when your graph starts counting many members. Family branches make a lot more sense than viewing generations aligned.
as for point 2 : node related actions are the way to go, through a ControlListener:
addControlListener(new ControlAdapter() {
public void itemClicked(VisualItem item, MouseEvent e) {
// anything you need here
// even filter right and left click for a sub menu
}
});
One more thing : if you add actions to your graph (search, predicates...), make sure to stop them if you need to rebuild your graph at some point. If you don't, your actions will generate errors you will spend hours (if not days) to debug.
I am using a BorderLayout for the frame (the first one that "caught" my attention in the tuts) and a FlowLayout for the labels (the one I found appropriate for what I do), and the result shows up like this:
My objective is to push the "2*1" a little bit down, to sort of "center" it.
I looked around and found a lot of people saying to use a null layout, but then saying it's not the best alternative (even though my window is not resizable), and the other solution I found was using a combo of layouts (unless I misunderstood).
The question is the one on top of this, plus if not, what really is the best alternative? (The following is the code that makes this window (minus the vars and other methods, to simplify visualization).
public Frame() {
super("Jogo de Multiplicar!");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout());
setSize(300, 200);
setResizable(false);
getContentPane().setBackground(pink);
mensagem = new TransparentPanel();
operacao = new TransparentPanel();
//added stuff in mensagem and operacao
add(operacao);
add(mensagem, BorderLayout.SOUTH);
}
My objective is to push the "2*1" a little bit down, to sort of "center" it.
If you just want more space at the top then you can use a Border:
operacao.setBorder( new EmptyBorder(...) );
Read the section from the Swing tutorial on How to Use Borders for more information.
If you want to actually center it you can use a BoxLayout:
Box box = Box.createVerticalBox();
box.add( Box.createVerticalGlue() );
box.add( topPanel );
box.add( Box.createVerticalGlue() );
box.add( bottomPanel );
The tutorial also has a section on How to Use BoxLayout. Search the table of contents.
You could use MigLayout as your only LayoutManager. It's pretty mighty and usually offers everything that the other managers do too.
With this it's pretty simple to center the components:
public class MultiplyExample extends JFrame{
private static final long serialVersionUID = 1L;
JLabel testLabel = new JLabel("2*2 = 4");
public MultiplyExample(){
super("Example");
setBounds(300, 50, 200, 200);
// Set the MigLayout, so that columns and then rows get centered
setLayout(new MigLayout("center, center"));
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
add(testLabel);
}
public static void main(String[] args) {
JFrame testFrame = new MultiplyExample();
testFrame.setVisible(true);
}
}
Result:
Here is a demo what the MigLayout has to offer:
http://www.miglayout.com/swingdemoapp.jnlp
Here is a quickstart-guide:
http://www.miglayout.com/QuickStart.pdf
If you have to use BorderLayout, you could put your components onto another panel and put this one into the center by using BorderLayout.CENTER:
pane.add(button, BorderLayout.CENTER);
I tried looking but no questions were helpful.
Here's my code to begin with:
Player player = new Player();
Block1 block1 = new Block1();
JFrame ow = new JFrame();
ow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
ow.setSize(500,500);
ow.setTitle("My Game");
ow.setVisible(true);
ow.setLocation(400, 100);
ow.add(block1);
ow.add(player);
but it will only add the last one, someone said (when I searched old questions) that it erases the previous one because they are both in the same location.
So I modified it this way:
JPanel jp = new JPanel();
jp.setSize(500, 500);
Player player = new Player();
Block1 block1 = new Block1();
JFrame ow = new JFrame();
jp.setLayout(new BoxLayout(jp, BoxLayout.Y_AXIS));
jp.add(player);
jp.add(block1);
ow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
ow.setSize(500,500);
ow.setTitle("My Game");
ow.setVisible(true);
ow.setLocation(400, 100);
ow.add(jp);
It did work, putting them both visible but... it sort of made two square panels so I can't go near block 1 with my player.
Any help?
JFrame by default uses BorderLayout. If you don't specify where you will put the component, it's going to be put in BorderLayout.CENTER. You can't put 2 or more components in the same position. To prevent this undesired behaviour you have to set different constraints.
For example:
jframe.add(someComponent, BorderLayout.LINE_END);//constraint indicating position
Read more in tutorials : How to use BorderLayout.
If this layout don't fit what you need, try to use another LayoutManager or mix them.
Take a look at A Visual Guide to LayoutManagers
I am trying to align the bottom of 3 JLabels that contain an image. The 3 JLabels are held in one big JPanel.
I found a tutorial about GUI using Java Swing here. But for some reason if i apply the example code (that is given for buttons) it doesn't work on the JLabels or JPanel.
This is the example code from the Oracle website:
button1.setAlignmentY(Component.BOTTOM_ALIGNMENT);
button2.setAlignmentY(Component.BOTTOM_ALIGNMENT);
Any idea what went wrong? I could send my code, but I thought maybe that would make it too confusing for what might be a simple answer too an easy question for most of you out here.
Thanks in advance.
EDIT:
public class LayoutOef_01 extends JFrame{
JPanel paneel;
JLabel label1, label2, label3;
ImageIcon pic1, pic2, pic3;
Border panelBord, labelBord;
public Layout_01(String titel){
super(titel);
paneel = new JPanel();
pic1 = new ImageIcon("images/simon1.png");
pic2 = new ImageIcon("images/simon2.png");
pic3 = new ImageIcon("images/simon3.png");
label1 = new JLabel(pic1);
label2 = new JLabel(pic2);
label3 = new JLabel(pic3);
paneel.add(label1);
paneel.add(label2);
paneel.add(label3);
panelBoord = BorderFactory.createLineBorder(Color.WHITE, 30);
paneel.setBorder(panelBord);
paneel.setBackground(Color.WHITE);
labelBoord = BorderFactory.createLineBorder(Color.BLACK, 2);
label1.setBorder(labelBord);
label2.setBorder(labelBord);
label3.setBorder(labelBord);
this.getContentPane().add(paneel);
this.pack();
}
public static void main(String[] args) {
Layout_01 lay1 = new LayoutOef_01("Layout_01");
lay1.setVisible(true);
}
}
So i tried placing the following code -in different places- inside the code above, but nothing changes:
label1.setAlignmentY(Component.BOTTOM_ALIGNMENT);
label2.setAlignmentY(Component.BOTTOM_ALIGNMENT);
label3.setAlignmentY(Component.BOTTOM_ALIGNMENT);
Check this sample: http://www.java2s.com/Code/JavaAPI/java.awt/ComponentBOTTOMALIGNMENT.htm
Remember to:
- set the layout on the panel.
- set the alignment on the button
- add the button to the panel.