We Keep Coding

Java LayoutManagers with JPanels

I'm really struggling with creating a complicated layout. Here is a picture of what I want in the end:
(source: fbcdn.net)
I've attempted to divide and conquer, creating small panels and putting those in other panels. At first I figured a borderlayout for the main container panel which is in the initial JFrame, with a bunch of GridBagLayouts for the details in those panes. When that wasn't working, I figured I would try my hand at an all out GridBagLayout. Right now my goal is to get the top group of character and location panels/cards to be displayed in their correct aspect ratio (about 4:3) and have them resize correctly (maintaining aspect ratio as best as possible) as the window is resized. What I am getting is a super small square panel for each card when the window first comes up. I want them to start in the aspect ratio (4:3) to begin with.
Am I going about this correctly?
Should I stick with all GridBagLayouts?
If not, what combinations of layouts do you see that may work?
Lastly and probably most importantly, how come they do not start out with the correct gridwidth or gridheight?
It would be nice if all the cards maintained a 4:3 or 3:4 aspect ratio when the window is near a 4:3.
public class OverPower {
public static void main(String[] args) {
JFrame table = new JFrame();
table.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
table.setLayout(new BorderLayout());
JPanel contentPane = new OppCharsPanel();
table.setContentPane(contentPane);
table.setLocationByPlatform(true);
table.pack();
table.setLocationRelativeTo(null);
table.setVisible(true);
}
}
public class OppCharsPanel extends JPanel {
public OppCharsPanel() {
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(20, 15, 20, 15);
gbc.fill = GridBagConstraints.BOTH;
gbc.gridwidth = 4;
gbc.gridheight = 3;
gbc.weightx = 4.0;
gbc.weighty = 3.0;
//back row
gbc.gridx = 4;
gbc.gridy = 0;
JPanel oppHomebase = new JPanel();
oppHomebase.setBackground(Color.RED);
this.add(oppHomebase, gbc);
gbc.gridx = 8;
gbc.gridy = 0;
JPanel oppReserve = new JPanel();
oppReserve.setBackground(Color.RED);
this.add(oppReserve, gbc);
//front row
gbc.gridx = 0;
gbc.gridy = 3;
JPanel oppBattlesite = new JPanel();
oppBattlesite.setBackground(Color.RED);
this.add(oppBattlesite, gbc);
gbc.gridx = 4;
gbc.gridy = 3;
JPanel oppChar1 = new JPanel();
oppChar1.setBackground(Color.RED);
this.add(oppChar1, gbc);
gbc.gridx = 8;
gbc.gridy = 3;
JPanel oppChar2 = new JPanel();
oppChar2.setBackground(Color.RED);
this.add(oppChar2, gbc);
gbc.gridx = 12;
gbc.gridy = 3;
JPanel oppChar3 = new JPanel();
oppChar3.setBackground(Color.RED);
this.add(oppChar3, gbc);
}
}

Start by breaking down each layout section into it's individual requirements and focus on those needs, for example...
Area #1
Okay, so basically, this has three main components (each coloured section is it's own panel), which could be used with a BorderLayout
Area #2
So here, you have another three areas/panels, because of the different requirements for vertical space, I might be tempted to use a GridBagLayout, this would allow you to define more space to the two top components then the bottom one...
Area #3
So, again three main areas. Here I'd be tempted to use a BorderLayout again. For the indivdual containers, I might use a GridBagLayout or Rob Camick's WrapLayout (for laying out the images within each of the three areas)
Scaling
Don't worry about the layout manager trying to maintain the aspect ratio, give enough information to the layout manager so that it make better choices, overriding the getPreferredSize and getMinimumSize methods of the image components and providing appropriate sizing hints. Within these image components, I would make sure that the image is scaled to the proper aspect ratio and rendered correctly

how to have 2 lists of componmets on a panel [duplicate]

This question already has an answer here:
JPanel & components change position automatically
(1 answer)
Closed 8 years ago.
I want to have a list of text fields and labels aligned vertically on a panel with each label corresponding to the appropriate text field and appearing beside it on the UI. The value in the text field will be later called for another function.
The problem is that I can't seem to get the layout right. I have tried using Spring Layout but I can't get my head around it......Basically can I do this any other way? I'm currently using box layout for the panel but it only shows up a list of text fields with a list of labels underneath it. I'm still a noob and I really need some fresh input on this. Any help would be very much appreciated, thanks.

You could simply use GridBagLayout (although MigLayout might worth a look as well)...
setLayout(new GridLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
for (int index = 0; index < 10; index++) {
gbc.anchor = GridBagConstraints .EAST;
gbc.gridx = 0;
add(new JLabel("Label " + index), gbc);
gbc.anchor = GridBagConstraints .WEST;
gbc.gridx++;
add(new JTextField(10), gbc);
gbc.gridy++;
}
Now, obviously, this is just an example used to demonstrate the concept, you'll need to expand the idea and apply it to your particular problem...
Take a look at How to use GridBagLayout for more detaols

I would suggest to have a look at RiverLayout manager. It is really simple and straightforward to use.
http://www.datadosen.se/riverlayout/
JFrame frame = new JFrame("Test RiverLayout");
Container container = frame.getContentPane();
container.setLayout(new RiverLayout());
container.add("left", new JLabel("Label 1"));
container.add("tab", new JTextField("Text field 1"));
container.add("br left", new JLabel("Label 2"));
container.add("tab", new JTextField("Text field 2"));
frame.pack();
frame.setVisible(true);

Multiple GridBagConstraints?

I'm a bit confused, is it possible to have multiple GridBagConstraints?
I have two panels using GridBagLayout, both affected by the same constraints. This gives me an issue when it comes to putting smaller components next to larger ones as illustrated below. The size of the panel on the left, means the cell on that row is very large, centering the panel on the right and it's components. I've tried using separate constraints for each panel but I haven't seen any differences, I think I'm doing something wrong.
How can I achieve two panels positioned next to each other, however have the components of each influenced by separate constraints?
Here's what I currently have:
Created with:
// layout
GridBagConstraints c = new GridBagConstraints();
// components
JPanel supplier = new JPanel(new GridBagLayout());
// grab the suppliers
Suppliers.Supplier[] suppliers = new Suppliers.Supplier[Suppliers.supplier.size()];
for (int i = 0; i < Suppliers.supplier.size(); i++) {
suppliers[i] = Suppliers.supplier.get(i);
}
JPanel resultsPanel = new JPanel();
JScrollPane scrollpane = new JScrollPane(resultsPanel, JScrollPane.VERTICAL_SCROLLBAR_ALWAYS, JScrollPane.HORIZONTAL_SCROLLBAR_NEVER);
scrollpane.setPreferredSize(new Dimension(120, 300));
// style properties
c.gridx = 0;
c.gridy = 0;
c.insets = new Insets(10, 10, 10, 10);
supplier.add(scrollpane, c);
int position = 0;
for (int i = 0; i < Suppliers.supplier.size(); i++) {
b_supplierSuppliers.add(new JButton(suppliers[i].getName()));
b_supplierSuppliers.get(i).setActionCommand(suppliers[i].getId());
b_supplierSuppliers.get(i).addActionListener(this);
// style properties
c.gridx = 0;
c.gridy = position;
c.insets = new Insets(10, 10, 10, 10);
c.gridwidth = 1;
resultsPanel.add(b_supplierSuppliers.get(i), c);
position++;
}
JPanel resultsPaneltwo = new JPanel(new GridBagLayout());
// style properties
c.gridx = 1;
c.gridy = 0;
supplier.add(resultsPaneltwo, c);
// code label
l_supplierCode = new JLabel("Supplier Code");
// style properties
c.gridx = 1;
c.gridy = 0;
c.insets = new Insets(0, 10, 10, 10);
c.gridwidth = 4;
c.fill = 4;
resultsPaneltwo.add(l_supplierCode, c);
However I'm after:
Any help is much appreciated.

First, to answer your initial question. Yes, you should use different GridBagConstraints objects for each component. It's worth noting however that it is not essential to create new ones for each component, and changes to the constraint after it has been assigned to another won't affect the earlier component's position. So, for the sake of readability and later debugging it is worth declaring multiple constraints but it's not essential.
Also, it looks as though you need to specify a weighty for your constraint on your right cell. By default cells are centered in any spare space. In order to specify where that extra space is placed (vertically for y, and horizontally for x), you need to give the constraint a weight value;
c.weighty = 1;
This should make it so all extra vertical space is allocated to that cell's constraint, and as such push the cell to the top. If you create a second constraint and do the following;
c2.weighty = 1;
The extra space would be spread evenly between those two cell's constraints.I hope this helps. Let me know how you get on.
The official Oracle GridBagLayout guide says the following on the weight attributes;
weightx, weighty
Specifying weights is an art that can have a
significant impact on the appearance of the components a GridBagLayout
controls. Weights are used to determine how to distribute space among
columns (weightx) and among rows (weighty); this is important for
specifying resizing behavior. Unless you specify at least one non-zero
value for weightx or weighty, all the components clump together in the
center of their container. This is because when the weight is 0.0 (the
default), the GridBagLayout puts any extra space between its grid of
cells and the edges of the container.
Generally weights are specified with 0.0 and 1.0 as the extremes: the
numbers in between are used as necessary. Larger numbers indicate that
the component's row or column should get more space. For each column,
the weight is related to the highest weightx specified for a component
within that column, with each multicolumn component's weight being
split somehow between the columns the component is in. Similarly, each
row's weight is related to the highest weighty specified for a
component within that row. Extra space tends to go toward the
rightmost column and bottom row.

Layout problems - Java

I am using GridBagLayout in a project I've been working on, the problem is that when I compile in my computer or in others at my uni it shows properly how I want it to be.
But when I run it on a different PC it is displayed different, the top-left panel and the radar panel are not like they should be.
We both have the same JDK and use NetBeans 7.3, so I don't know where the problem is.
This is the method I am using to add the panels to the frame.
private void agregarPaneles() {
this.setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(10, 10, 10, 10);
gbc.gridx = 0;
gbc.gridy = 0;
gbc.gridwidth = 1;
gbc.gridheight = 1;
add(scrollerVuelos, gbc);
gbc.gridx = 1;
gbc.gridy = 0;
gbc.gridwidth = 1;
gbc.gridheight = 1;
add(panelEstado, gbc);
gbc.gridx = 2;
gbc.gridy = 0;
gbc.gridwidth = 1;
gbc.gridheight = 1;
add(panelOrdenes, gbc);
gbc.gridx = 0;
gbc.gridy = 1;
gbc.gridwidth = 3;
gbc.gridheight = 1;
add(panelRadar, gbc);
}

The code you posted in not enough to give you an exact answer, but in general:
If GridBagLayout doesn't have enough space to display a component at its preferred size it will then use the minimum size of the component. Since many components have a small minimum size the component can get shrunk to almost nothing.
So you may need to look at setting minimum sizes on your panels. You can also look at the weightX and weighty values as they have an impact on how a component is resized.
Read the Swing tutorial on How to Use GridBagLayout for more information and examples.
Also remember you can use nested panels with different layout managers if that makes the layout easier. For example maybe the main layout should be a BorderLayout. Then in the NORTH you add a panel using a GridLayout. In the CENTER you add your other panel.

It is possible that the preferred size of the component does not fit within the available space of the frame and GridBagLayout is reverting to use the components minimum size instead.
You could use GridBagConstraints#weightx and GridBagConstraints#weighty and GridBagConstraints#fill = GridBagConstraints.BOTH to try and force the component to use the entire available space of the cell it's within
You should also be using Frame#pack to pack the frame rather then setting it's size manually, this will attempt to size of the frame so that it can meet the requirements of the contents preferred size

JList border disappears on scrolling

I've five lists (enclosed in a jscrollpane) added to a jpanel in a group layout. The problem with the lists is that when a scrollbar appears automatically, the border on the bottom/top disappears (lists 2,3,4). How do I make sure that all lists look the same w.r.t border just like the first/last lists?
I've tried setting viewportborder using setViewPortBroder, but it doesn't change things much. 2,3,4 appear with light border while the rest of the lists have double borders.
EDIT
Adding code sample:
Each list you see is created using this code:
MyJList jList = new MyJList(value);
jList.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
jList.setModel(listModel);
jList.setMinimumSize(new Dimension(135, 300));
jList.setMaximumSize(new Dimension(135, 300));
jList.clearSelection();
jList.setSelectionBackground(Color.darkGray);
jList.setSelectionForeground(Color.white);
jList.setBorder(new LineBorder(Color.darkGray, 1));
jList.setFixedCellHeight(30);
jList.setFixedCellWidth(100);
Font font = jList.getFont();
jList.addListSelectionListener(new ListListener());
return jList;
MyList is an extension of JList. It does nothing special, other than storing some domain related metadata. And, then lists are added to the middle panel like this:
private void layoutLists(JLabel[] labels, JList[] lists) {
panel.removeAll();
panel.setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.fill = GridBagConstraints.NONE;
JScrollPane[] jScrollPanes = new JScrollPane[lists.length];
for (int index = 0; index < lists.length; index++) {
jScrollPanes[index] = new JScrollPane(lists[index]);
jScrollPanes[index].setBorder(BorderFactory.createEmptyBorder());
jScrollPanes[index].setMinimumSize(new Dimension(135, 300));
jScrollPanes[index].setMaximumSize(new Dimension(135, 300));
jScrollPanes[index].setPreferredSize(new Dimension(135, 300));
}
for (int index = 0; index < labels.length; index++) {
gbc.gridx = index;
gbc.gridy = 0;
gbc.insets = new Insets(8, 8, 8, 8);
panel.add(labels[index], gbc);
gbc.gridy = 1;
if (index == labels.length - 1) {
gbc.insets = new Insets(8, 8, 8, 13);
}
panel.add(jScrollPanes[index], gbc);
}}

The explanation of the top/bottom part of the inner (JList) border not being visible is that ... they are not visible if the vertical scrollBar appears (the list is scrolled off)
If you insist, either:
switch the borders - empty on the list itself and lineBorder on the scrollPane or
set the viewportBorderProperty of the scrollPane to the lineBorder
Beware: it's not recommended to fiddle with the default LAF settings - where-to or not the components have a border should be left to the ui to guarantee consistent visuals across your application. Nor does it look exactly good to have the left border line beside (either outside or inside) the scrollPane's vertical scrollbar.
Edit
Just noticed that you already tried the second option (and are not satisfied with the result :-) But then: where do you want the vertical border line if the scrollBar is visible? Anyway, back to the beware: the outcome is highly LAF dependent ...