I would like to make a stacked area chart with prefuse similar to the folowing:
http://prefuse.org/gallery/namevoyager/
I'm not quite sure where to start however, and there's no sample code for these charts. I did find prefuse.action.layout.StackedAreaChart, but am not sure what to do with it.
Here's a compilable example for using the StackedAreaChart layout. I'm including it here becase I couldn't find it anywhere else, with the hope that it will be useful as a reference for others. The key here is to understand that the StackedAreaChart assumes that your table follows the following schema:
One column for the id, say "name",
One or more columns for the actual data that corresponds to the id.
Three columns for the calculated polygon named "_polygon", "_polygon:start" and "_polygon:end". That is just the way the StackedAreaChart class has been designed. "_polygon" is actually the constant VisualItem.POLYGON so you can use that instead as shown in the following example.
Here it is:
import javax.swing.JFrame;
import prefuse.Constants;
import prefuse.Display;
import prefuse.Visualization;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.ColorAction;
import prefuse.action.assignment.DataColorAction;
import prefuse.action.layout.StackedAreaChart;
import prefuse.data.Table;
import prefuse.render.DefaultRendererFactory;
import prefuse.render.PolygonRenderer;
import prefuse.util.ColorLib;
import prefuse.visual.VisualItem;
class Main {
public static void main(String[] args) {
ActionList color = new ActionList();
int[] palette = new int[] {
ColorLib.rgba(255,200,200,150),
ColorLib.rgba(200,255,200,150)
};
ColorAction fillColor = new DataColorAction("table", "name",
Constants.NOMINAL, VisualItem.FILLCOLOR, palette);
color.add(fillColor);
ActionList layout = new ActionList();
layout.add(new RepaintAction());
String[] fields = { "1980s", "1990s", "2000s" };
layout.add(new StackedAreaChart("table", VisualItem.POLYGON, fields));
Visualization vis = new Visualization();
Table table = new Table();
vis.add("table", table);
table.addColumn("name", String.class);
table.addColumn("1980s", int.class);
table.addColumn("1990s", int.class);
table.addColumn("2000s", int.class);
table.addColumn(VisualItem.POLYGON, float[].class, null);
table.addColumn(VisualItem.POLYGON+":start", float[].class, null);
table.addColumn(VisualItem.POLYGON+":end", float[].class, null);
int rowNumber = table.addRow();
table.setString(rowNumber, "name", "Bob");
table.setInt(rowNumber, "1980s", 1000);
table.setInt(rowNumber, "1990s", 500);
table.setInt(rowNumber, "2000s", 300);
rowNumber = table.addRow();
table.setString(rowNumber, "name", "Mary");
table.setInt(rowNumber, "1980s", 800);
table.setInt(rowNumber, "1990s", 1500);
table.setInt(rowNumber, "2000s", 3200);
vis.putAction("layout", layout);
vis.putAction("color", color);
DefaultRendererFactory drf = new DefaultRendererFactory();
drf.add("ingroup('table')", new PolygonRenderer());
vis.setRendererFactory(drf);
Display display = new Display(vis);
display.setSize(720, 500);
JFrame frame = new JFrame("Prefuse StackedAreaChart Example");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(display);
frame.pack();
frame.setVisible(true);
vis.run("layout");
vis.run("color");
}
}
To get it to display the axis refer to the Congress.java demo included in the prefuse distribution.
Have you checked the Prefuse manual? (not too complete, but it's something to start with).
In it, you can find an sample application which shows you how to load some data on a Graph element, and how to deploy it to a Visualization item.
For generating a StackedAreaChart you'll need to load your data into a prefuse.data.Table object, which you could load, by the example, from a CSV file:
CSVTableReader reader=new CSVTableReader();
Table myTable=reader.readTable("/myDataFile.csv");
Then, add the table to the visualization as a data group, i.e "table"
Visualization vis = new Visualization();
vis.add("table", myTable);
Then, create the StackedAreaChart, and add it to the visualization actions collection:
//params: name of the data group to layout, name of the data field in which to store computed polygons, and an array containing the names of the various data fields, in sorted order, that should be referenced for each consecutive point of a stack layer
StackedAreaChart chart=new StackedAreaChart ("table", fieldName, csvColumnsToCompute);
//add the layout action with a unique key
vis.putAction("myChartLayout", chart);
Then, you can config various layout actions,or other visual aspects (see the linked example).
At last, for displaying the chart, you'll have to create a Display object, bind the visualization, and run the layout actions on it:
//this Display initialization is extracted from the Example app
Display d = new Display(vis);
d.setSize(720, 500); // set display size
// drag individual items around
d.addControlListener(new DragControl());
// pan with left-click drag on background
d.addControlListener(new PanControl());
// zoom with right-click drag
d.addControlListener(new ZoomControl());
// create a new window to hold the visualization
JFrame frame = new JFrame("prefuse example");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(d);
frame.pack(); // layout components in window
frame.setVisible(true); // show the window
//At the end: RUN THE CHART ACTION:
vis.run("myChartLayout");
Hope this helps, at least as a first start (the code snippets are not intended for copy-paste and can contain some compile errors).
Good luck.
Related
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 want to display a simple Graph with nodes IDs inside Nodes using Prefuse but this seems to be more complicated than it sounds.
Graph g = new Graph();
for (int i = 0; i < 3; ++i) {
Node n1 = g.addNode();
n1.setInt("label", 1); // I am trying to add a field in a node
Node n2 = g.addNode();
Node n3 = g.addNode();
g.addEdge(n1, n2);
g.addEdge(n1, n3);
g.addEdge(n2, n3);
}
g.addEdge(0, 3);
g.addEdge(3, 6);
g.addEdge(6, 0);
// add visual data groups
VisualGraph vg = m_vis.addGraph(GRAPH, g);
m_vis.setInteractive(EDGES, null, false);
m_vis.setValue(NODES, null, VisualItem.SHAPE, new Integer(Constants.SHAPE_STAR));
However, it seems that this field doesn't exist, it makes sense since I didn't add this field but there isn't an option to add a field neither. I am getting this exception referring to the n1.setInt("DEFAULT_NODE_KEY", 1) line:
Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: -1
at java.util.ArrayList.elementData(Unknown Source)
at java.util.ArrayList.get(Unknown Source)
at prefuse.data.Table.getColumn(Table.java:457)
at prefuse.data.Table.setInt(Table.java:1032)
at prefuse.data.tuple.TableTuple.setInt(TableTuple.java:215)
at prefuse.demos.AggregateDemo.initDataGroups(AggregateDemo.java:141)
at prefuse.demos.AggregateDemo.<init>(AggregateDemo.java:72)
at prefuse.demos.AggregateDemo.demo(AggregateDemo.java:182)
at prefuse.demos.AggregateDemo.main(AggregateDemo.java:176)
I am not sure how to use fields in Nodes. I tried to read the library's help but I don't manage to figure that out.
You may be looking for a LabelRenderer. In the example below, a LabelRenderer is constructed in such a way as to render nodes having the label GraphLib.LABEL, defined as "label":
LabelRenderer r = new LabelRenderer(GraphLib.LABEL);
The nodes comprising the Graph are given text via setString() using the same key, GraphLib.LABEL. For example, the root Node added to the Graph returned by GraphLib.getDiamondTree() is assigned the key GraphLib.LABEL and the value "0,0".
Node r = t.addRoot();
r.setString(LABEL, "0,0");
Later, when the Visualization runs, the renderer attempts to use text from the GraphLib.LABEL field.
import java.awt.Dimension;
import javax.swing.JFrame;
import prefuse.Display;
import prefuse.Visualization;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.ColorAction;
import prefuse.action.layout.graph.ForceDirectedLayout;
import prefuse.activity.Activity;
import prefuse.controls.DragControl;
import prefuse.controls.PanControl;
import prefuse.controls.ZoomControl;
import prefuse.data.Graph;
import prefuse.render.DefaultRendererFactory;
import prefuse.render.LabelRenderer;
import prefuse.util.ColorLib;
import prefuse.util.GraphLib;
import prefuse.visual.VisualItem;
/** #see https://stackoverflow.com/a/44274886/230513 */
public class Example {
private static final int W = 640;
private static final int H = 480;
public static void main(String[] argv) {
// -- 1. create the data ------------------------------------------------
Graph graph = GraphLib.getDiamondTree(3, 2, 1);
// -- 2. the visualization --------------------------------------------
// add the graph to the visualization as the data group "graph"
// nodes and edges are accessible as "graph.nodes" and "graph.edges"
Visualization vis = new Visualization();
vis.add("graph", graph);
vis.setInteractive("graph.edges", null, false);
// -- 3. the renderers and renderer factory ---------------------------
LabelRenderer r = new LabelRenderer(GraphLib.LABEL);
r.setRoundedCorner(8, 8); // round the corners
// create a new default renderer factory
// return our name label renderer as the default for all non-EdgeItems
// includes straight line edges for EdgeItems by default
vis.setRendererFactory(new DefaultRendererFactory(r));
// -- 4. the processing actions ---------------------------------------
ColorAction fill = new ColorAction("graph.nodes",
VisualItem.FILLCOLOR, ColorLib.rgb(200, 200, 255));
// use black for node text
ColorAction text = new ColorAction("graph.nodes",
VisualItem.TEXTCOLOR, ColorLib.gray(0));
// use light grey for edges
ColorAction edges = new ColorAction("graph.edges",
VisualItem.STROKECOLOR, ColorLib.gray(200));
// create an action list containing all color assignments
ActionList color = new ActionList();
color.add(fill);
color.add(text);
color.add(edges);
// create an action list with an animated layout
ActionList layout = new ActionList(Activity.INFINITY);
layout.add(new ForceDirectedLayout("graph"));
layout.add(new RepaintAction());
// add the actions to the visualization
vis.putAction("color", color);
vis.putAction("layout", layout);
// -- 5. the display and interactive controls -------------------------
Display d = new Display(vis) {
#Override
public Dimension getPreferredSize() {
return new Dimension(W, H);
}
};
d.setSize(W, H); // set display size
d.pan(W / 2, H / 2); // pan to center
d.addControlListener(new DragControl());
d.addControlListener(new PanControl());
d.addControlListener(new ZoomControl());
// -- 6. launch the visualization -------------------------------------
JFrame frame = new JFrame("prefuse label example");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(d);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true); // show the window
vis.run("color");
vis.run("layout");
}
}
I want to use Prefuse to visualise a graph. I followed their tutorial and tried their sample application. Its sourcecode can be found here
However, even if I simply copy the full code, the resulting graph does not look as displayed in the tutorial. It is only half visible, stuck in JPanel's upper left corner. Some parts of it are missing becuase they would have to be displayed outside the panel.
I tried with some graphs of my own, but I keep running into the same phenomenon.
I suppose this is not expected behaviour, but I have no idea where to hunt for the problem. I don't know if this is a problem with Swing(x) or prefuse or ... ?
Update:
This is the revised code. I did not change much from the example, only added what trashgod suggested.
package visualise;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
import prefuse.Constants;
import prefuse.Display;
import prefuse.Visualization;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.ColorAction;
import prefuse.action.assignment.DataColorAction;
import prefuse.action.layout.graph.ForceDirectedLayout;
import prefuse.activity.Activity;
import prefuse.controls.DragControl;
import prefuse.controls.PanControl;
import prefuse.controls.ZoomControl;
import prefuse.data.Graph;
import prefuse.data.io.DataIOException;
import prefuse.data.io.GraphMLReader;
import prefuse.render.DefaultRendererFactory;
import prefuse.render.LabelRenderer;
import prefuse.util.ColorLib;
import prefuse.visual.VisualItem;
public class PrefuseExample {
public static void main(String[] argv) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
// -- 1. load the data ------------------------------------------------
// load the socialnet.xml file. it is assumed that the file can be
// found at the root of the java classpath
Graph graph = null;
try {
graph = new GraphMLReader().readGraph("../../resources/visualisation/prefuse/Prefuse-master/data/socialnet.xml");
} catch ( DataIOException e ) {
e.printStackTrace();
System.err.println("Error loading graph. Exiting...");
System.exit(1);
}
// -- 2. the visualization --------------------------------------------
// add the graph to the visualization as the data group "graph"
// nodes and edges are accessible as "graph.nodes" and "graph.edges"
Visualization vis = new Visualization();
vis.add("graph", graph);
vis.setInteractive("graph.edges", null, false);
// -- 3. the renderers and renderer factory ---------------------------
// draw the "name" label for NodeItems
LabelRenderer r = new LabelRenderer("name");
r.setRoundedCorner(8, 8); // round the corners
// create a new default renderer factory
// return our name label renderer as the default for all non-EdgeItems
// includes straight line edges for EdgeItems by default
vis.setRendererFactory(new DefaultRendererFactory(r));
// -- 4. the processing actions ---------------------------------------
// create our nominal color palette
// pink for females, baby blue for males
int[] palette = new int[] {
ColorLib.rgb(255,180,180), ColorLib.rgb(190,190,255)
};
// map nominal data values to colors using our provided palette
DataColorAction fill = new DataColorAction("graph.nodes", "gender",
Constants.NOMINAL, VisualItem.FILLCOLOR, palette);
// use black for node text
ColorAction text = new ColorAction("graph.nodes",
VisualItem.TEXTCOLOR, ColorLib.gray(0));
// use light grey for edges
ColorAction edges = new ColorAction("graph.edges",
VisualItem.STROKECOLOR, ColorLib.gray(200));
// create an action list containing all color assignments
ActionList color = new ActionList();
color.add(fill);
color.add(text);
color.add(edges);
// create an action list with an animated layout
ActionList layout = new ActionList(Activity.INFINITY);
layout.add(new ForceDirectedLayout("graph"));
layout.add(new RepaintAction());
// add the actions to the visualization
vis.putAction("color", color);
vis.putAction("layout", layout);
// -- 5. the display and interactive controls -------------------------
Display d = new Display(vis);
d.setSize(720, 500); // set display size
// drag individual items around
d.addControlListener(new DragControl());
// pan with left-click drag on background
d.addControlListener(new PanControl());
// zoom with right-click drag
d.addControlListener(new ZoomControl());
// -- 6. launch the visualization -------------------------------------
// create a new window to hold the visualization
JFrame frame = new JFrame("prefuse example");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(d);
frame.pack(); // layout components in window
frame.setVisible(true); // show the window
// assign the colors
vis.run("color");
// start up the animated layout
vis.run("layout");
}
});
}
}
I'm new to Prefuse, but a number of common errors can contribute to the observed problem. Looking at the example,
As discussed here, don't use setSize() on the Display when you really mean to override getPreferredSize().
Swing GUI objects should be constructed and manipulated only on the event dispatch thread.
The initial clustering is an artifact of the graph's origin falling on the top-left corner of the Display component at the point (0, 0). Having chosen a preferred size, one can pan() to the center.
private static final int W = 640;
private static final int H = 480;
…
Display d = new Display(vis) {
#Override
public Dimension getPreferredSize() {
return new Dimension(W, H);
}
};
d.pan(W / 2, H / 2);
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
How to place components in layout on specific position.
Like I want to place 2 text boxes in first row, below 3 combo boxes.
But when I am trying to put they all appear in one line and I have used flowlayout. I have used the border as well. When I am resizing, the window sizes of the components are going out from border.
Can you suggest me some layouts to use and how to use it?
Here is my code :
topPanel=new JPanel();
topPanel.setLayout(new FlowLayout());
topPanel.setBorder(new TitledBorder(new EtchedBorder(), "Customer Data"));
CNameTextField = new JTextField (20); // create the Customer Name text field
CNameTextField.setEditable(true); // set editable text box
CIDLabel=new JLabel("Customer ID");
C_IDTextField = new JTextField (10);
C_IDTextField.setEditable(true); // set editable text box
topPanel.add(CNameTextField);
topPanel.add(C_IDTextField);
// Create and populate Room type combo box
roomTypeCombo = new JComboBox();
roomTypeCombo.addItem( "Budget($50)" );
// Create and populate Meal type combo box
mealCombo = new JComboBox();
mealCombo.addItem( "None" );
// Create and populate Days combo box
daysCombo = new JComboBox();
for(int i=0;i<31 ; i++) {
// populate combobox with days
daysCombo.addItem(i);
}
// Adding rest of the components to top panel
topPanel.add(roomTypeCombo);
topPanel.add(mealCombo);
topPanel.add(daysCombo);
Thanks.
The most specific type of layout is absolute positioning.
Warning: Absolute positioning should rarely, if ever, be used. There are many reasons why. Here is one: Absolute positioning (No layout manager) vs. absolute positioning in MiGlayout
- Thanks to user brimborium for the good idea of adding a warning.
That being said, here is how to use absolute positioning:
In your code above, instead of setting topPanel's layout to FlowLayout, set it to null.
topPanel.setLayout(null);
Later on in the code, right before you start adding components to topPanel, call the container's setBounds method:
someJComponent.setBounds(x-coord, y-coord, width, height);
So for example you created an instance of JComboBox() and named it roomTypeCombo, the following code shows how to absolutely position roomTypeCombo.
topPanel.setLayout(null);
// code...
roomTypeCombo = new JComboBox();
// code...
roomTypeCombo.setBounds(100, 100, 200, 50);
topPanel.add(roomTypeCombo);
The setBounds method, used above, has four parameters:
int x-coord - set roomTypeCombo's x-coordinate relative to
its parent, topPanel.
int y-coord - set roomTypeCombo's y-coordinate relative to its parent, topPanel.
int width - specify roomTypeCombo's width.
int height - specify roomTypeCombo's height.
I would just play around with the coordinates and see if you like anything that comes out of it. The worst thing that could happen is that you go back to using a layout, which is probably better than absolute positioning. Or you could implement your own layout manager, if you follow this hyperlink the first answer talks about implementing your own layout manager and has helpful links.
More information on absolute positioning
Try to change the layout.
http://docs.oracle.com/javase/tutorial/uiswing/layout/using.html
You could go for a GridLayout with two lines (for example, there is some others possible combinations), with each line containing respectively 3 JComboBoxs, and two JTextFields.
Look carefully at the documentation and check out some examples easily reachable on the web.
import java.awt.GridLayout;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;
public class SwingResizeJFrame {
public SwingResizeJFrame() {
JTextField TextField1 = new JTextField("firstTextField");
JTextField TextField2 = new JTextField("secondTextField");
JPanel firstPanel = new JPanel();
firstPanel.setLayout(new GridLayout(0, 2, 10, 10));
firstPanel.add(TextField1);
firstPanel.add(TextField2);
JComboBox comboBox1 = new JComboBox(new Object[]{"Ester", "Jordi", "Jordina", "Jorge", "Sergi"});
JComboBox comboBox2 = new JComboBox(new Object[]{"Ester", "Jordi", "Jordina", "Jorge", "Sergi"});
JComboBox comboBox3 = new JComboBox(new Object[]{"Ester", "Jordi", "Jordina", "Jorge", "Sergi"});
JPanel secondPanel = new JPanel();
secondPanel.setLayout(new GridLayout(0, 3, 10, 10));
secondPanel.add(comboBox1);
secondPanel.add(comboBox2);
secondPanel.add(comboBox3);
JFrame frame = new JFrame();
frame.setLayout(new GridLayout(2, 1, 10, 10));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(firstPanel);
frame.add(secondPanel);
frame.pack();
frame.setLocation(150, 150);
frame.setVisible(true);
}
public static void main(String[] args) {
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
SwingResizeJFrame demo = new SwingResizeJFrame();
}
});
}
}