We Keep Coding

Layouts swing java

I want to create a layout like this
This was my code (does not work):
outer.setLayout(new BorderLayout());
panel1 = new JPanel();
...
outer.add(panel1, BorderLayout.PAGE_START);
outer.add(panel2, BorderLayout.LINE_START);
outer.add(panel3, BorderLayout.CENTER);
outer.add(panel4, BorderLayout.LINE_END);
outer.add(panel5, BorderLayout.PAGE_END);
note: panel5 above should contain 2 more panels inside it
In the above code, I can get them on the correct places but the center one (panel3) is very big so that all others are squashed to the side.
How can i get some ratio of size in these eg 2:10:2 etc?
Should i change my layout?

If you want to do something like that, using BorderLayout is a good start. So yes I would use BorderLayout as well here.
However you should change they way you are adding the panels:
outer.add(panel1, BorderLayout.NORTH);
outer.add(panel2, BorderLayout.WEST);
outer.add(panel3, BorderLayout.CENTER);
outer.add(panel4, BorderLayout.EAST);
//Create a additional Panel for the two at the bottom
JPanel southPanelContainer = new JPanel(new BorderLayout());
southPanelContainer.add(panel5, BorderLayout.EAST);
southPanelContainer.add(panel6, BorderLayout.WEST);
outer.add(southPanelContainer, BorderLayout.SOUTH);
This should already look somewhat decent, however if you still want to change the way it looks then you should add some components to those panels. The layout manager will automatically resize the panels so everything fits.

Use a GridBagLayout for a table/matrix like layout, where some "cells" occupy more than one slot.
BorderLayout is for one central panel having some bordering panels around.
public MainFrame() {
JPanel outer = new JPanel(new GridBagLayout());
outer.setPreferredSize(new Dimension(800, 600));
JPanel panel1 = createPanel("1");
JPanel panel2 = createPanel("2");
JPanel panel3 = createPanel("3");
JPanel panel4 = createPanel("4");
JPanel panel5 = createPanel("5");
GridBagConstraints c = new GridBagConstraints();
c.fill = GridBagConstraints.BOTH;
c.weightx = 1.0;
c.weighty = 1.0;
c.gridx = 0;
c.gridy = 0;
c.gridwidth = 3; // col span
c.gridheight = 1;
outer.add(panel1, c);
c.weightx = 0.33;
c.gridx = 0;
c.gridy = 1;
c.gridwidth = 1;
c.gridheight = 1;
outer.add(panel2, c);
c.weightx = 0.33;
c.gridx = 1;
c.gridy = 1;
c.gridwidth = 1;
c.gridheight = 1;
outer.add(panel2, c);
c.weightx = 0.33;
c.gridx = 2;
c.gridy = 1;
c.gridwidth = 1;
c.gridheight = 1;
outer.add(panel3, c);
c.weightx = 0.33;
c.gridx = 3;
c.gridy = 1;
c.gridwidth = 3;
c.gridheight = 1;
outer.add(panel4, c);
c.weightx = 1.0;
c.weighty = 1.0;
c.gridx = 0;
c.gridy = 2;
c.gridwidth = 3;
c.gridheight = 1;
outer.add(panel5, c);
setContentPane(outer);
pack();
}
private JPanel createPanel(String title) {
JPanel panel = new JPanel();
panel.setBorder(BorderFactory.createTitledBorder(title));
setPreferredSize(new Dimension(300, 300));
return panel;
}
There is a GridBagConstraints constructor setting all fields. Not so readable here however.
It is also a quite error prone layout.

Issue when using Java Swing in a For-Loop

I have created a simple for-loop that changes the amount of JTextFields and JLabels based on the value of a JSpinner, as seen in the following code:
public static ArrayList<ArrayList<JTextField>> ChangeQuestionAnswerFields(int numberOfQuestions){
ArrayList<ArrayList<JTextField>> txtFieldArray = new ArrayList<ArrayList<JTextField>>();
JPanel scrollPanel = new JPanel(new GridBagLayout());
//JScrollPane scrollPane = new JScrollPane(scrollPanel);
frame.add(scrollPanel, BorderLayout.CENTER);
GridBagConstraints c = new GridBagConstraints();
c.gridx = 0;
c.gridy = 0;
for(int i = 0; i != numberOfQuestions; i++){
JTextField tempQuestion = new JTextField(10);
JTextField tempAnswer = new JTextField(10);
JLabel tempQuestionHeader = new JLabel("Question " + (i + 1)+ " ");
JLabel tempQuestionLbl = new JLabel("Question: ");
JLabel tempAnswerLbl = new JLabel("Answer: ");
ArrayList<JTextField> tempArrayList = new ArrayList<>();
tempArrayList.add(tempQuestion);
tempArrayList.add(tempAnswer);
txtFieldArray.add(tempArrayList);
c.gridy++;
c.gridx = 0;
scrollPanel.add(tempQuestionHeader, c);
c.gridy++;
c.gridx = 0;
scrollPanel.add(tempQuestionLbl, c);
c.gridx = 1;
c.gridwidth = 3;
scrollPanel.add(tempQuestion, c);
c.gridy++;
c.gridx = 0;
scrollPanel.add(tempAnswerLbl, c);
c.gridx = 1;
c.gridwidth = 3;
scrollPanel.add(tempAnswer, c);
}
return txtFieldArray;
}
}
The value of the Spinner is passed into the method, and the method is called using a change listener (where noQuestions is the value of the JSpinner):
noQuestions.addChangeListener(e -> {
ChangeQuestionAnswerFields((int) noQuestions.getValue());
frame.revalidate();
frame.repaint();
});
This method is first called in the code when the screen first appears, and works properly. However, whenever the value of the spinner changes the original labels and fields stay on the screen and more text fields simply appear, or disappear on top.
http://i.imgur.com/GBY8L3u.png - JSpinner has a value of 2
http://i.imgur.com/pSQsA3G.png - JSpinner has a value of 3
Is there any way to fix this? Any help is much appreciated.
Thanks,
Tom
Minimal Runnable Example:
import javax.swing.*;
import java.awt.*;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import java.util.ArrayList;
public class MainGUI {
static JFrame frame = new JFrame("Math Reviser");
public static void main(String[] args) {
frame.setSize(400, 600);
frame.setVisible(true);
createScreen();
frame.revalidate();
frame.repaint();
public static void createScreen(){
frame.getContentPane().removeAll();
JSpinner noQuestions = new JSpinner(new SpinnerNumberModel(1, 1, 10, 1));
frame.add(noQuestions, BorderLayout.NORTH);
);
changeQuestionAnswerFields(1);
frame.revalidate();
frame.repaint();
noQuestions.addChangeListener(e -> {
changeQuestionAnswerFields((int) noQuestions.getValue());
frame.revalidate();
frame.repaint();
});
}
public static ArrayList<ArrayList<JTextField>> changeQuestionAnswerFields(int numberOfQuestions){
ArrayList<ArrayList<JTextField>> txtFieldArray = new ArrayList<ArrayList<JTextField>>();
JPanel scrollPanel = new JPanel(new GridBagLayout());
frame.add(scrollPanel, BorderLayout.CENTER);
GridBagConstraints c = new GridBagConstraints();
c.gridx = 0;
c.gridy = 0;
for(int i = 0; i != numberOfQuestions; i++){
JTextField tempQuestion = new JTextField(10);
JTextField tempAnswer = new JTextField(10);
JLabel tempQuestionHeader = new JLabel("Question " + (i + 1)+ " ");
JLabel tempQuestionLbl = new JLabel("Question: ");
JLabel tempAnswerLbl = new JLabel("Answer: ");
ArrayList<JTextField> tempArrayList = new ArrayList<>();
tempArrayList.add(tempQuestion);
tempArrayList.add(tempAnswer);
txtFieldArray.add(tempArrayList);
c.gridy++;
c.gridx = 0;
scrollPanel.add(tempQuestionHeader, c);
c.gridy++;
c.gridx = 0;
scrollPanel.add(tempQuestionLbl, c);
c.gridx = 1;
c.gridwidth = 3;
scrollPanel.add(tempQuestion, c);
c.gridy++;
c.gridx = 0;
scrollPanel.add(tempAnswerLbl, c);
c.gridx = 1;
c.gridwidth = 3;
scrollPanel.add(tempAnswer, c);
}
return txtFieldArray;
}
}

Using static variables and methods is an indication of a poorly designed application. There is no need for the static variables or methods. I suggest you read the section from the Swing tutorial on How to Use Labels. The LabelDemo.java code will show you how to create a panel containing all the components. This panel will then be added to the frame. This panel will also contain all the instance variables you need for your program.
Not only that the example will show you how to create the GUI components on the EDT which is something you should always do to prevent random errors since Swing was designed to be single threaded.
However, the main problem with your existing code is that you continue to create and add new panels to the content pane of the frame. Try changing the spinner to 2 and then resize the frame. Then try changing the spinner to 3 and resize the frame. After the resizing the first panel is displayed. This is because Swing will paint the last component added first so the first panel added will be painted on top of the last panel you created.
You can change this in your existing code by removing the old panel before adding the new panel:
static JFrame frame = new JFrame("Math Reviser");
static JPanel scrollPanel = new JPanel();
...
frame.remove(scrollPanel);
//JPanel scrollPanel = new JPanel(new GridBagLayout());
scrollPanel = new JPanel(new GridBagLayout());
However, I do not recommend this approach. As I initially suggestion you need to redesign the entire class. When you do the redesign I would use a BorderLayout on your panel and then you can add your spinner to the PAGE_START and then add a JScrollPane to the CENTER of the panel.
Then when you want to create a new panel you add the panel to the scrollpane using code like:
scrollPane.setViewportView( scrollPanel );
The scrollpane will refresh itself and you don't need to worry about revalidate() or repaint() or anything else.

Weird layout using GridBagConstraints

I have several methods which create their own component, JButton or JLabel in a JPanel. Then I have a separate method which adds all these JPanels the the JFrame. I also use gridx and gridy on the JPanels to position them how I want. This is: lookreply on the left, then top right the title and below in a 2X2 table quit, restart, pickup and hello. However my current code when run displays a weird, random layout.
The lookreply is on the left, but then to the right is quit, a space, restart then hello all vertical. pickup and title aren't seen. I dont know why this is happening.
Please see my code below.:
public class GUI extends JPanel
{
/**
* Creation of variables used throughout the GUI Class.
*/
//JPanel panel = new JPanel(new GridBagLayout());
private static final long serialVersionUID = 1L;
public static void main(String[] args)
{
GUI g = new GUI();
g.create();
}
private void create()
{
JFrame screen = new JFrame("Dungeon of Doom");
screen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
screen.setLayout(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
//set size to full screen.
screen.setExtendedState(Frame.MAXIMIZED_BOTH);
//Add all JPanes to screen
screen.add(lookReply(), c);
c.gridy = 0;
c.gridx = 0;
screen.add(title(), c);
c.gridy = 0;
c.gridx = 1;
c.gridwidth = 2;
screen.add(quit(), c);
c.gridy = 1;
c.gridx = 1;
screen.add(restart(), c);
c.gridy = 1;
c.gridx = 2;
screen.add(pickup(), c);
c.gridy = 2;
c.gridx = 1;
screen.add(hello(), c);
c.gridy = 2;
c.gridx = 2;
screen.setVisible(true);
}
One of the methods (quit)
private JPanel quit()
{
JPanel quitPanel = new JPanel(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
JButton quit = new JButton("QUIT");
quitPanel.add(quit, c);
return quitPanel;
}
All the other methods are pretty much the same except the title is a a JLabel and the table iterates to create a 5x5 table of JLabel within its own JPanel. Any help is appreciated!

I have found what was doing this.
As seen in the code I was adding the component before setting the layout.
screen.add(lookReply(), c);
c.gridy = 0;
c.gridx = 0;
whereas it should be
c.gridy = 0;
c.gridx = 0;
screen.add(lookReply(), c);

gridheight moves component on top of each other

I have a JFrame which consists mainly of a left and right side. The left has 2 components 1 above the other, and the right has 9, again 1 on top of each other. As the left has 2, I want 1 component to equal the same vertical space as 6 on the right. I am using the gridBagConstraints layout and have each JPanel positioned in the main JFrame. Everything looks OK (apart from what I was just saying). To sort this problem I use c.gridHeight = 6 on the JPanel on the left. However this then puts the 6 JPanels which are on the right ontop of each other, ignoring their formatting. How can I rectify this problem? Snipets of my code which still cause the same problem are:
void create()
{
JFrame screen = new JFrame("Dungeon of Doom");
screen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
screen.setLayout(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
screen.setSize(new Dimension(screenWidth, screenHeight));
screen.setPreferredSize(new Dimension(screenWidth, screenHeight));
//Add all JPanes to screen
c.gridy = 0;
c.gridx = 0;
c.gridheight = 6;
screen.add(lookReply(), c);
c.gridy = 0;
c.gridx = 1;
screen.add(title(), c);
c.gridy = 1;
c.gridx = 1;
screen.add(space(), c);
c.gridy = 2;
c.gridx = 1;
screen.add(commands(), c);
//...So on, same for others
}
A sample method - the JPanel - all methods have the same content just different titles and less/more buttons/labels
private JPanel title()
{
JPanel titlePanel = new JPanel(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
titlePanel.setBackground(Color.red);
titlePanel.setOpaque(true);
JLabel title = new JLabel("DOD");
titlePanel.add(title, c);
return titlePanel;
}
I put a background on the JPanels just to help see where they are in the window
All help appreciated! Thanks :)

GridBagLayout & JScrollPane: how to reduce row height?

See below a simple test code using a GridBagLayout (2 rows, 2 component on row 0, 1 component on row 1). Although I have specified weighty to be 0.01 for first row and 1 for second row, the ratio on the screen looks more like 0.3 vs. 0.7. It seems that the height of the first row is resized so that the whole textarea fits in it.
How can I reduce the height of the first row, so that the scroll bars of the JScrollPane will appear?
public class Test {
public static void main(String... args) {
String text = "text\n\n\n\n\n\n\n\ntext";
JFrame frame = new JFrame();
JTextArea area;
JScrollPane pane;
JPanel desktop = new JPanel(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
c.fill = GridBagConstraints.HORIZONTAL;
c.gridx = 0;
c.gridy = 0;
c.weightx = 0.25;
c.weighty = 0.05;
area = new JTextArea(text);
area.setBackground(Color.RED);
pane = new JScrollPane(area);
desktop.add(pane, c);
c.gridx = 1;
c.gridy = 0;
c.weightx = 0.75;
c.weighty = 0.05;
area = new JTextArea(text);
area.setBackground(Color.BLUE);
pane = new JScrollPane(area);
desktop.add(pane, c);
c.fill = GridBagConstraints.BOTH;
c.gridx = 0;
c.gridy = 1;
c.weightx = 0;
c.weighty = 1;
c.gridwidth = 2;
area = new JTextArea(text);
area.setBackground(Color.GREEN);
pane = new JScrollPane(area);
desktop.add(pane, c);
frame.setContentPane(desktop);
frame.setPreferredSize(new Dimension(800, 600));
frame.pack();
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.setVisible(true);
}
}

Set the number of rows on the JTextArea so that the preferredSize of the textarea and scrollpane will adjust to that number of rows. In case there is an excessive number of rows in the text of the textarea, the scrollbar will appear.

weight - Specifies how to distribute extra vertical space. So if available space is bigger than sum of preferred sizes then extra pixes are distributed according to the weight values.