How to program this GUI in Java Swing - java

I'm currently developing a small utility with the following GUI:
Right now i have a container (JPanel) with the BorderLayout layout that holds everything in place. The i have another 2 JPanels placed on BorderLayout.NORTH and BorderLayout.SOUTH respectively, each whith the GridLayout (2 columns by 1 row). The table is on the main container placed at the CENTER of it.
Do you think this is the best approach? I'm having a rough time dealing with spacing between the components and the borders of the frame.
Right now i have this code:
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JSeparator;
import javax.swing.JTable;
import javax.swing.SwingUtilities;
public class GUI extends JFrame {
private JButton loadFileBtn = new JButton("Load File");
private JButton generateReportBtn = new JButton("Generate Report");
private JButton exitBtn = new JButton("Exit");
private JLabel fileNameLbl = new JLabel("File Name Here");
private JMenuBar menuBar = new JMenuBar();
private JMenu fileMI = new JMenu("File");
private JMenuItem openFileMenu = new JMenuItem("Open File");
private JSeparator separator = new JSeparator();
private JMenuItem exitMenu = new JMenuItem("Exit");
private JMenu reportMI = new JMenu("Report");
private JMenuItem generateReportMenu = new JMenuItem("Generate Report");
private JMenu helpMI = new JMenu("Help");
private JMenuItem aboutMenu = new JMenuItem("About");
private JTable table = new JTable(5, 2);
private JPanel mainPanel = new JPanel(new BorderLayout(10, 10));
private JPanel panel1 = new JPanel(new BorderLayout());
private JPanel panel2 = new JPanel(new GridLayout(1, 2));
private JPanel panel3 = new JPanel(new GridLayout(1, 2));
public GUI() {
super("Sample GUI");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(new Dimension(300, 300));
setResizable(false);
setLayout(new BorderLayout(10, 10));
fileMI.add(openFileMenu);
fileMI.add(separator);
fileMI.add(exitMenu);
reportMI.add(generateReportMenu);
helpMI.add(aboutMenu);
menuBar.add(fileMI);
menuBar.add(reportMI);
menuBar.add(helpMI);
setJMenuBar(menuBar);
panel1.add(table, BorderLayout.CENTER);
panel2.add(fileNameLbl);
panel2.add(loadFileBtn);
panel3.add(generateReportBtn);
panel3.add(exitBtn);
mainPanel.add(panel2, BorderLayout.NORTH);
mainPanel.add(panel1, BorderLayout.CENTER);
mainPanel.add(panel3, BorderLayout.SOUTH);
add(mainPanel);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
GUI app = new GUI();
app.setVisible(true);
}
});
}
}
What do you think would be the best approach to do this?
Any help would be appreciated. Thanks.
UPDATE:
Right now, i have the following GUI
I want the components to space away from the borders evenly, like in the mockup.

2 things you can use to make this happen:
Use BorderFactory.createEmptyBorder(int, int, int, int)
Use the 4-args constructor of GridLayout
There are other LayoutManager's which can bring the same functionality (like GridBagLayout, or using nested BorderLayout), but if you feel comfortable with the current LayoutManager's, there is no imperious need to change to those. The way you did is also acceptable.
You might consider wrapping the table in a JScrollPane to make it nicer, with headers and scrollbars if ever needed.
Small example code:
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.GridLayout;
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.JPanel;
import javax.swing.JSeparator;
import javax.swing.JTable;
import javax.swing.SwingUtilities;
public class GUI extends JFrame {
private JButton loadFileBtn = new JButton("Load File");
private JButton generateReportBtn = new JButton("Generate Report");
private JButton exitBtn = new JButton("Exit");
private JLabel fileNameLbl = new JLabel("File Name Here");
private JMenuBar menuBar = new JMenuBar();
private JMenu fileMI = new JMenu("File");
private JMenuItem openFileMenu = new JMenuItem("Open File");
private JSeparator separator = new JSeparator();
private JMenuItem exitMenu = new JMenuItem("Exit");
private JMenu reportMI = new JMenu("Report");
private JMenuItem generateReportMenu = new JMenuItem("Generate Report");
private JMenu helpMI = new JMenu("Help");
private JMenuItem aboutMenu = new JMenuItem("About");
private JTable table = new JTable(5, 2);
private JPanel mainPanel = new JPanel(new BorderLayout(10, 10));
private JPanel panel1 = new JPanel(new BorderLayout());
private JPanel panel2 = new JPanel(new GridLayout(1, 2, 10, 10));
private JPanel panel3 = new JPanel(new GridLayout(1, 2, 10, 10));
public GUI() {
super("Sample GUI");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(new Dimension(300, 300));
setResizable(false);
setLayout(new BorderLayout(10, 10));
fileMI.add(openFileMenu);
fileMI.add(separator);
fileMI.add(exitMenu);
reportMI.add(generateReportMenu);
helpMI.add(aboutMenu);
menuBar.add(fileMI);
menuBar.add(reportMI);
menuBar.add(helpMI);
setJMenuBar(menuBar);
panel1.add(table, BorderLayout.CENTER);
panel2.add(fileNameLbl);
panel2.add(loadFileBtn);
panel3.add(generateReportBtn);
panel3.add(exitBtn);
mainPanel.add(panel2, BorderLayout.NORTH);
mainPanel.add(panel1, BorderLayout.CENTER);
mainPanel.add(panel3, BorderLayout.SOUTH);
mainPanel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
add(mainPanel);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
GUI app = new GUI();
app.setVisible(true);
}
});
}
}

In the past, I have found that using MigLayout, solves all my problems

Here's how I would arrange your GUI. This is just one way. It's not the only way.
The JTable goes inside of a JScrollPane.
Button2 and Button3 go inside of a button JPanel with a FlowLayout.
Label and Button1 go inside of a label JPanel with a FlowLayout.
File, Report, and Help are JMenuItems on a JMenuBar.
The main JPanel has a BoxLayout with a Y_AXIS orientation.
Add the label JPanel, the JScrollPane, and the button JPanel to the main JPanel.

The best way is to create a GUI is to code in a way you and others will understand . Take a look at this Guide to Layout Managers. You can use different layout managers for different components. This will help you setting correct spacing.
If your problem is just the spacing around the components, set its Insets.

Related

How to fix the position of the JPanels after expanding the JFrame

I am trying to make the interface of a program using Java Swing. I have a container where I add 3 JPanels with some components. The problem is that when I expand the frame all those 3 JPanels come on the first row one next to another.
Here is my code:
import java.awt.Color;
import java.awt.Container;
import java.awt.FlowLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SpringLayout;
import javax.swing.border.LineBorder;
public class GraphicRefact extends JFrame {
private Container container;
private JButton button2;
private JButton button1;
private JTextField textField01;
private JLabel label01;
private JButton button03;
private JButton button04;
private JTextField textField03;
private JLabel label03;
private JButton button02;
private JButton button01;
private JTextField textField02;
private JLabel label02;
public static void main(String[] args) {
new GraphicRefact();
}
public GraphicRefact() {
initializeComponents();
setTitle("Title");
setSize(500, 150);
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE);
container = new JPanel();
JPanel panel01 = new JPanel();
panel01.add(label01);
panel01.add(textField01);
panel01.add(button2);
panel01.add(button1);
panel01.setBorder(new LineBorder(Color.BLACK, 3));
container.add(panel01);
JPanel panel02 = new JPanel();
panel02.add(label02);
panel02.add(textField02);
panel02.add(button02);
panel02.add(button01);
container.add(panel02);
JPanel panel03 = new JPanel();
panel03.add(label03);
panel03.add(textField03);
panel03.add(button03);
panel03.add(button04);
container.add(panel03);
add(container);
}
private void initializeComponents() {
button1 = new JButton("Open");
button2 = new JButton("Close");
textField01 = new JTextField("Choose the path...");
label01 = new JLabel("Choose File: ");
button01 = new JButton("Button01");
button02 = new JButton("Button02");
textField02 = new JTextField("Choose the path...");
label02 = new JLabel("Choose Dir:");
button03 = new JButton("Button03");
button04 = new JButton("Button03");
textField03 = new JTextField("Choose the path...");
label03 = new JLabel("Choose Dir:");
}
}
Here is how the program looks before and after I expand the frame.
Before:
After:
So, even after I expand the frame, I want the program to leave those 3 JPanels on the middle of cotainer.
Thank you!
You can set the gridLayout and put those elements inside.
JPanel jp = new JPanel();
GridLayout gl = new GridLayout(3,4); //3 rows, 4 columns
jp.setLayout(gl);
After you do this, just put your elements inside layout, by order.
jp.add(label1);
jp.add(button1);
//etc...
You have to use a proper LayoutManager. Look at the examples there. BoxLayout seems to be what you want.
I can't see where you have defined any positions for anything, if you need to read how that's done you can start here
Positioning a JPanel in a JFrame at specific position
The inbuilt layout manger of java swing are not that useful.
You should use this
frame.setLayout(null);
component.setLocation(x, y);
frame.add(component);

Not Having any output after having added two JPanel on a JLayeredPane

What I'm trying to do is overwriting two panels, where I am Inserting an Image in the background panel through the use of a JLabel, and I want another smaller panel to appear on that same background Image! Here is what I have written:
import javax.swing.*;
import javax.swing.text.html.ImageView;
import java.awt.*;
public class addImage extends JFrame {
private JLabel label;
private ImageIcon Image;
private JButton b;
private JPanel panel1;
private JPanel panel2;
private JLayeredPane layerpanel;
public addImage() {
// JFRame
super("First Time adding Image");
setLayout(null);
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setSize(400, 400);
// JLabel containing Image
Image = new ImageIcon(getClass().getResource("image1.jpg"));
// Adding Image in JLabel
label = new JLabel(Image);
// Adding Label to panel1
panel1 = new JPanel();
panel1.add(label);
// JPanel2
panel2 = new JPanel();
panel2.setBackground(Color.darkGray);
panel2.setPreferredSize(new Dimension(200, 200));
panel2.setOpaque(true);
// LAyeredPane adding both panels
layerpanel = new JLayeredPane();
layerpanel.setLayout(new BorderLayout());
layerpanel.add(panel1, new Integer(0), 0);
layerpanel.add(panel2, new Integer(1), 1);
add(layerpanel);
}
public static void main(String[] args) {
new addImage();
}
}
After executing the piece of code Im not getting any output except the empty frame!
I am getting these errors :
Exception in thread "main" java.lang.IllegalArgumentException: cannot add to layout: constraint must be a string (or null)
at java.awt.BorderLayout.addLayoutComponent(Unknown Source)
at java.awt.Container.addImpl(Unknown Source)
at javax.swing.JLayeredPane.addImpl(Unknown Source)
at java.awt.Container.add(Unknown Source)
at addImage.<init>(addImage.java:45)
at addImage.main(addImage.java:53)
I have checked all the question related but still I have not been able to find the solution!!!!
Any kind of help will be appreciated ! Thank you
You're problem is here:
layerpanel.setLayout(new BorderLayout());
layerpanel.add(panel1, new Integer(0), 0);
layerpanel.add(panel2, new Integer(1), 1);
and it's not helped by
setLayout(null);
The JLayeredPane now requires that you pass it one of the valid constraints for BorderLayout (like BorderLayout.NORTH).
Having said that, I'm not sure what you hope to achieve doing this.
You could get the same effect by using a CardLayout with a lot less mess, see How to Use CardLayout for more details
I can "replicate" your desired output using something like...
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JLayeredPane;
import javax.swing.JPanel;
public class AddImage extends JFrame {
private JLabel label;
private ImageIcon Image;
private JButton b;
private JPanel panel1;
private JPanel panel2;
private JLayeredPane layerpanel;
public AddImage() {
// JFRame
super("First Time adding Image");
setLayout(new BorderLayout());
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
setSize(400, 400);
// JLabel containing Image
// Image = new ImageIcon(getClass().getResource("image1.jpg"));
// Adding Image in JLabel
label = new JLabel("Help");
// Adding Label to panel1
panel1 = new JPanel();
panel1.add(label);
// JPanel2
panel2 = new JPanel();
panel2.setBackground(Color.darkGray);
panel2.setPreferredSize(new Dimension(200, 200));
panel2.setOpaque(true);
// LAyeredPane adding both panels
layerpanel = new JLayeredPane();
layerpanel.setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
layerpanel.add(panel1, gbc);
layerpanel.add(panel2, gbc);
layerpanel.setLayer(panel1, new Integer(0));
layerpanel.setLayer(panel2, new Integer(1));
add(layerpanel);
}
public static void main(String[] args) {
new AddImage();
}
}

BorderLayout(); buttons not showing up

Hey guys my buttons and textarea will not display on JFrame when compiled, i have tried everything and searched this site but no luck. Any help would be greatly appreciated. Due to them not letting me post without more detail i am just adding this part so i can hit the submit button.
import java.awt.BorderLayout;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JButton;
import javax.swing.JPanel;
import javax.swing.JTextArea;
public class DataManager extends JFrame {
private String students[] = {"John Smith","Ken Hanson","Michael Li","John Andersen","Fiona Harris","Angela Lim","Bob London","Sydney Shield","Tina Gillard",
"Ross Brinns","Scott Cairns","Grant Peterson","David Power","Joshua Kane","Alan Newton","Frady Morgan","Quinn Perth"};
private int english[] = {80,52,71,61,39,62,31,46,60,26,77,40,58,38,94,90,97};
private int maths[] = {60,45,77,90,45,55,66,87,31,42,65,55,80,71,51,55,95};
private int total[];
private JButton sortNameButton;
private JButton sortTotalButton;
private JTextField searchTextField;
private JButton statisticsButton;
private JButton exitButton;
private JTextArea infoTextArea;
private JPanel jPan;
public DataManager() {
super("Data Manager ");
jPan = new JPanel();
sortNameButton = new JButton("Sort By Name");
sortTotalButton = new JButton("Sort By Total");
searchTextField = new JTextField("Search");
statisticsButton = new JButton("Statistics");
exitButton = new JButton("Exit");
infoTextArea = new JTextArea();
setLayout(new BorderLayout());
jPan.add(sortNameButton, BorderLayout.NORTH);
jPan.add(sortTotalButton, BorderLayout.NORTH);
jPan.add(searchTextField, BorderLayout.NORTH);
jPan.add(statisticsButton, BorderLayout.NORTH);
jPan.add(exitButton, BorderLayout.NORTH);
jPan.add(infoTextArea, BorderLayout.CENTER);
}
public static void main(String[] args) {
DataManager frame = new DataManager();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(800,600);
frame.setVisible(true);
} // End of main method.
} // End of DataManager class
You add your JButtons to the jPan JPanel but never add the jPan to anything -- it must be added to your JFrame, to this to be seen.
jPan.add(sortNameButton);
jPan.add(sortTotalButton);
jPan.add(searchTextField);
jPan.add(statisticsButton);
jPan.add(exitButton);
jPan.add(infoTextArea);
add(jPan); // don't forget this! ************
Note other problems:
You set the JFrame's layout to BorderLayout -- it's already using BorderLayout
You add components to your jPan JPanel with BorderLayout constants, but it's not using a BorderLayout.
If it were, many buttons would not be seen since many are added to the same BorderLayout position and will cover the previous component added there.
In other words, read the tutorials as you're making wrong assumptions.
Better would be something like:
// setLayout(new BorderLayout());
jPan.setLayout(new BorderLayout());
JPanel northPanel = new JPanel(); // **** to hold buttons
northPanel.add(sortNameButton);
northPanel.add(sortTotalButton);
northPanel.add(searchTextField);
northPanel.add(statisticsButton);
northPanel.add(exitButton);
jPan.add(northPanel, BorderLayout.PAGE_START);
jPan.add(infoTextArea, BorderLayout.CENTER);

Position JLabel within JPanel

I want to position a JLabel within a JPanel, so that it appears at the top of the window. I then want to position two drop-down menu below that so that the user can choose from two sets of options.
How would I go about positioning these elements?
Here's a JLabel title with two JComboBoxes. I have no idea what else you mean by a "drop-down menu".
I created a JPanel with a BorderLayout to hold the GUI.
The title is a JLabel inside of a JPanel using the default FlowLayout.
The JComboBoxes are inside of a JPanel using the default FlowLayout.
Here's the code:
package com.ggl.testing;
import java.awt.BorderLayout;
import javax.swing.DefaultComboBoxModel;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class DropDownLayout implements Runnable {
public static void main(String[] args) {
SwingUtilities.invokeLater(new DropDownLayout());
}
#Override
public void run() {
JFrame frame = new JFrame("Drop Down Layout");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new JPanel();
panel.setLayout(new BorderLayout());
panel.add(createTitlePanel(), BorderLayout.NORTH);
panel.add(createDropDownPanel(), BorderLayout.CENTER);
frame.add(panel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
private JPanel createTitlePanel() {
JPanel panel = new JPanel();
JLabel titleLabel = new JLabel("Title");
panel.add(titleLabel);
return panel;
}
private JPanel createDropDownPanel() {
JPanel panel = new JPanel();
DefaultComboBoxModel<String> model1 = new DefaultComboBoxModel<String>();
model1.addElement("Selection 1");
model1.addElement("Selection 2");
model1.addElement("Selection 3");
model1.addElement("Selection 4");
JComboBox<String> comboBox1 = new JComboBox<String>(model1);
panel.add(comboBox1);
DefaultComboBoxModel<String> model2 = new DefaultComboBoxModel<String>();
model2.addElement("Choice 1");
model2.addElement("Choice 2");
model2.addElement("Choice 3");
model2.addElement("Choice 4");
JComboBox<String> comboBox2 = new JComboBox<String>(model2);
panel.add(comboBox2);
return panel;
}
}

JToolbar, Stop it going horizontal

I have a JToolbar. I was wondering if there was way to stop it going horizontal. I would prefer it to only go vertical. I do want it floating.
I have tried making a property changed listener and changing the orientation back to vertical but no luck.
Thanks
Just use an other layout than the default floating one. And use a vertical layout.
JToolbar toolbar= new JToolbar();
toolbar.setLayout(new BoxLayout(toolbar, BoxLayout.Y_AXIS));
You can also use no layout at all
toolbar.setLayout(null);
But this will be horizontal by default.
Have a look at this https://bugs.openjdk.java.net/browse/JDK-4203039, it has an example how you can filter where the JToolbar is allowed to dock.
You need to add the line:
toolBar.setOrientation(javax.swing.SwingConstants.VERTICAL);
Code Example:
import java.awt.Color;
import java.awt.Dimension;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JPanel;
import javax.swing.JToolBar;
import javax.swing.SwingConstants;
class VerticalJToolbar
{
public static void main(String args[])
{
JFrame frame = new JFrame("VerticalJToolbarTest");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(480, 480);
frame.setResizable(true);
frame.setLocationRelativeTo(null);
JPanel panelOrange = new JPanel();
panelOrange.setBackground(Color.ORANGE);
panelOrange.setPreferredSize(new Dimension(100, 100));
JPanel panelBlue = new JPanel();
panelBlue.setBackground(Color.BLUE);
panelBlue.setPreferredSize(new Dimension(100, 100));
JPanel panelGreen = new JPanel();
panelGreen.setBackground(Color.GREEN);
panelGreen.setPreferredSize(new Dimension(100, 100));
JPanel panelRed = new JPanel();
panelRed.setBackground(Color.RED);
panelRed.setPreferredSize(new Dimension(100, 100));
JMenu menu1 = new JMenu("Menu 1");
JMenu menu2 = new JMenu("Menu 2");
JMenu menu3 = new JMenu("Menu 3");
JMenu menu4 = new JMenu("Menu 4");
JToolBar toolBarHorizontal = new JToolBar();
toolBarHorizontal.add(menu1);
toolBarHorizontal.add(menu2);
toolBarHorizontal.add(menu3);
toolBarHorizontal.add(menu4);
JToolBar toolBarVertical = new JToolBar();
toolBarVertical.setOrientation(SwingConstants.VERTICAL);
toolBarVertical.add(panelOrange);
toolBarVertical.add(panelBlue);
toolBarVertical.add(panelGreen);
toolBarVertical.add(panelRed);
JPanel panelCenter = new JPanel();
panelCenter.setBackground(Color.WHITE);
frame.add(toolBarHorizontal, java.awt.BorderLayout.NORTH);
frame.add(toolBarVertical, java.awt.BorderLayout.WEST);
frame.add(panelCenter, java.awt.BorderLayout.CENTER);
frame.setVisible(true);
}
}
Screen capture:

Categories