Cleaning up a Nested J panel - java

Rebuilt the SCCE for you guys.
My goal is this
The general idea is that clicking on the title bars of the menus (right side) will collapsible (set visible to false) the content panes associated with them:
gender_panel_BG collapses gender_panel_body
race_panel_BG collapses race_panel_body
class_panel_BG collapses class_panel_body
base_stats_panel_BG collapses base_stats_panel_body
merits_panel_BG collapses merits_panel_body
You get the idea
Another thing that is bugging me is the huge space at the top of the body and it's content.
Gradient bar img source
background source source
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.EventQueue;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
import javax.swing.border.EmptyBorder;
import javax.swing.border.LineBorder;
import java.awt.*;
import javax.swing.*;
import javax.swing.text.*;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.*;
public class JaGCharCreation {
//set inital size of window
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
int initalWidth = (int) screenSize.width - 50;
int initalHeight = (int) screenSize.height - 50;
JPanel gender_panel_body;
GridBagConstraints gbc;
JLabel viewdata_gender = new JLabel("gender");
ImageIcon BGicon = new ImageIcon("parchmentTall.jpg");
Image img1 = BGicon.getImage();
public static void main(String[] args) {
new JaGCharCreation ();
}
//set up thread safe invoking for GUI
public JaGCharCreation () {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new BorderLayout());
frame.add(new TestPane());
frame.pack();
//frame.setLocationRelativeTo(null);
frame.setVisible(true);
// Give the frame an initial size.
frame.setSize(initalWidth, initalHeight);
}
});
}
//main panel to hold all others
public class TestPane extends JPanel {
public TestPane() {
setLayout(new GridLayout(0, 2));
add(createLeftPane());
add(createRightPane());
}//end of class for master frame
/////////////////////////////////Left Panel Nest Begin//////////////////////////////////////////////////////////////
protected JPanel createLeftPane() {
img1 = img1.getScaledInstance(initalWidth/2, initalHeight, java.awt.Image.SCALE_SMOOTH);
final ImageIcon BGiconSM = new ImageIcon(img1);
JPanel panel = new JPanel(new BorderLayout()) {
protected void paintComponent(Graphics g)
{
// Dispaly image at full size
g.drawImage(BGiconSM.getImage(), 0, 0, null);
super.paintComponent(g);
}
};
panel.setOpaque( false );
panel.setBorder(new EmptyBorder(35, 80, 35, 80));
//panel.setBackground(Color.RED);
return panel;
}//end left pane
/////////////////////////////////Left Panel Nest End//////////////////////////////////////////////////////////////
/////////////////////////////////Right Panel Nest Begin//////////////////////////////////////////////////////////////
protected JPanel createRightPane() {
img1 = img1.getScaledInstance(initalWidth/2, initalHeight, java.awt.Image.SCALE_SMOOTH);
final ImageIcon BGiconSM = new ImageIcon(img1);
JPanel content = new JPanel(new GridBagLayout());
content.setOpaque(false);
JPanel panel = new JPanel(new BorderLayout()) {
protected void paintComponent(Graphics g)
{
// Dispaly image at full size
g.drawImage(BGiconSM.getImage(), 0, 0, null);
super.paintComponent(g);
}
};
panel.setOpaque( false );
panel.setBorder(new EmptyBorder(35, 80, 35, 80));
//panel.setBackground(Color.BLUE);
//set up our image for the title bars
ImageIcon icon = new ImageIcon("GradientDetail.png");
Image img = icon.getImage();
img = img.getScaledInstance(initalWidth/2, 40, java.awt.Image.SCALE_SMOOTH);
final ImageIcon iconSM = new ImageIcon(img);
/////////////////////////////////Gender Panel Nest Begins//////////////////////////////////////////////////////////////
JPanel gender_panel_BG = new JPanel(new BorderLayout())
{
protected void paintComponent(Graphics g)
{
// Dispaly image at full size
g.drawImage(iconSM.getImage(), 0, 0, null);
super.paintComponent(g);
}
};
gender_panel_BG.setOpaque( false );
JLabel gender_panel_label = new JLabel("Gender");
gender_panel_label.setFont(new Font("Impact", Font.BOLD, 30));
gender_panel_label.setForeground(Color.white);
gender_panel_label.setOpaque(false);
gender_panel_body = new JPanel(new GridLayout(1, 3));
gender_panel_body.setBackground(Color.WHITE);
gender_panel_BG.add(gender_panel_label, BorderLayout.NORTH);
JPanel gender_panel = new JPanel(new GridLayout(2, 1));
//gender_panel.setBorder(new EmptyBorder(0, 10, 0, 10));
//gender_panel.setBackground(Color.GREEN);
gender_panel.setOpaque(false);
gender_panel.add(gender_panel_BG);
gender_panel.add(gender_panel_body);
MouseAdapter gender = new MouseAdapterMod(){
public void mousePressed(MouseEvent e) {
//System.out.println(e.getSource());
System.out.println("A mouse was pressed");
gender_panel_body.setVisible(!gender_panel_body.isVisible());
}//end of mousePressed(MouseEvent e)
};
// Create radio buttons and add them to content pane.
JRadioButton g1 = new JRadioButton("Male");
g1.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
viewdata_gender.setText("Gender: Male");
}//action perfomed;
});//g1 add action listener
gender_panel_body.add(g1);
JRadioButton g2 = new JRadioButton("Female");
g2.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
viewdata_gender.setText("Gender: Female");
}//action perfomed;
});//g2 add action listener
gender_panel_body.add(g2);
JRadioButton g3 = new JRadioButton("<Unknown>");
g3.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae) {
viewdata_gender.setText("Gender: <Unknown>");
}//action perfomed;
});//g3 add action listener
gender_panel_body.add(g3);
// Define a button group.
ButtonGroup genderButtons = new ButtonGroup();
genderButtons.add(g1);
genderButtons.add(g2);
genderButtons.add(g3);
gender_panel_BG.addMouseListener(gender);
content.add(gender_panel, gbc);
/////////////////////////////////Gender Panel Nest End//////////////////////////////////////////////////////////////
/////////////////////////////////Race Panel Nest Begins//////////////////////////////////////////////////////////////
JPanel race_panel_BG = new JPanel(new BorderLayout())
{
protected void paintComponent(Graphics g)
{
// Dispaly image at full size
g.drawImage(iconSM.getImage(), 0, 0, null);
super.paintComponent(g);
}
};
race_panel_BG.setOpaque( false );
JLabel race_panel_label = new JLabel("Race");
race_panel_label.setFont(new Font("Impact", Font.BOLD, 30));
race_panel_label.setForeground(Color.white);
race_panel_label.setOpaque(false);
JPanel race_panel_body = new JPanel(new GridLayout(5, 8));
race_panel_body.setBackground(Color.WHITE);
race_panel_BG.add(race_panel_label, BorderLayout.NORTH);
JPanel race_panel = new JPanel(new GridLayout(2, 1));
//race_panel.setBorder(new EmptyBorder(0, 10, 0, 10));
//race_panel.setBackground(Color.GREEN);
race_panel.setOpaque(false);
race_panel.add(race_panel_BG);
race_panel.add(race_panel_body);
for (int i=0; i <= 60; i++){
ImageIcon RCicon = new ImageIcon("headshot.jpg");
Image RCimg = RCicon.getImage();
RCimg = RCimg.getScaledInstance(40, 40, java.awt.Image.SCALE_SMOOTH);
final ImageIcon RCiconSM = new ImageIcon(RCimg);
JButton button = new JButton(RCiconSM);
button.setBorder(BorderFactory.createEmptyBorder());
button.setContentAreaFilled(false);
race_panel_body.add(button);
};//for loop
MouseAdapter race = new MouseAdapterMod();
race_panel_body.addMouseListener(race);
content.add(race_panel, gbc);
/////////////////////////////////Race Panel Nest End//////////////////////////////////////////////////////////////
/////////////////////////////////Class Panel Nest Begins//////////////////////////////////////////////////////////////
JPanel class_panel_BG = new JPanel(new BorderLayout())
{
protected void paintComponent(Graphics g)
{
// Dispaly image at full size
g.drawImage(iconSM.getImage(), 0, 0, null);
super.paintComponent(g);
}
};
class_panel_BG.setOpaque( false );
JLabel class_panel_label = new JLabel("Class");
class_panel_label.setFont(new Font("Impact", Font.BOLD, 30));
class_panel_label.setForeground(Color.white);
class_panel_label.setOpaque(false);
JPanel class_panel_body = new JPanel(new GridLayout(5, 8));
class_panel_body.setBackground(Color.WHITE);
class_panel_BG.add(class_panel_label, BorderLayout.NORTH);
JPanel class_panel = new JPanel(new GridLayout(2, 1));
//class_panel.setBorder(new EmptyBorder(0, 10, 0, 10));
//class_panel.setBackground(Color.GREEN);
class_panel.setOpaque(false);
class_panel.add(class_panel_BG);
class_panel.add(class_panel_body);
for (int g=0; g <= 50; g++){
ImageIcon CCicon = new ImageIcon("headshot.jpg");
Image CCimg = CCicon.getImage();
CCimg = CCimg.getScaledInstance(40, 40, java.awt.Image.SCALE_SMOOTH);
final ImageIcon CCiconSM = new ImageIcon(CCimg);
JButton cbutton = new JButton(CCiconSM);
cbutton.setBorder(BorderFactory.createEmptyBorder());
cbutton.setContentAreaFilled(false);
class_panel_body.add(cbutton);
};//for loop
MouseAdapter cclass = new MouseAdapterMod();
class_panel_body.addMouseListener(cclass);
content.add(class_panel, gbc);
/////////////////////////////////Class Panel Nest End//////////////////////////////////////////////////////////////
/////////////////////////////////Base Stats Panel Nest Begins//////////////////////////////////////////////////////////////
JPanel base_stats_panel_BG = new JPanel(new BorderLayout())
{
protected void paintComponent(Graphics g)
{
// Dispaly image at full size
g.drawImage(iconSM.getImage(), 0, 0, null);
super.paintComponent(g);
}
};
base_stats_panel_BG.setOpaque( false );
JLabel base_stats_panel_label = new JLabel("Base Attributes");
base_stats_panel_label.setFont(new Font("Impact", Font.BOLD, 30));
base_stats_panel_label.setForeground(Color.white);
base_stats_panel_label.setOpaque(false);
JPanel base_stats_panel_body = new JPanel(new GridLayout(1, 2));
base_stats_panel_body.setBackground(Color.WHITE);
base_stats_panel_BG.add(base_stats_panel_label, BorderLayout.NORTH);
JPanel base_stats_panel = new JPanel(new GridLayout(2, 1));
//base_stats_panel.setBorder(new EmptyBorder(0, 10, 0, 10));
//base_stats_panel.setBackground(Color.GREEN);
base_stats_panel.setOpaque(false);
base_stats_panel.add(base_stats_panel_BG);
base_stats_panel.add(base_stats_panel_body);
MouseAdapter base_stats = new MouseAdapterMod();
base_stats_panel_body.addMouseListener(base_stats);
content.add(base_stats_panel, gbc);
/////////////////////////////////Base Stats Panel Nest End//////////////////////////////////////////////////////////////
/////////////////////////////////Merits Panel Nest Begins//////////////////////////////////////////////////////////////
JPanel merits_panel_BG = new JPanel(new BorderLayout())
{
protected void paintComponent(Graphics g)
{
// Dispaly image at full size
g.drawImage(iconSM.getImage(), 0, 0, null);
super.paintComponent(g);
}
};
merits_panel_BG.setOpaque( false );
JLabel merits_panel_label = new JLabel("Advantages and Disadvantages");
merits_panel_label.setFont(new Font("Impact", Font.BOLD, 30));
merits_panel_label.setForeground(Color.white);
merits_panel_label.setOpaque(false);
JPanel merits_panel_body = new JPanel(new BorderLayout());
merits_panel_body.setBackground(Color.WHITE);
merits_panel_BG.add(merits_panel_label, BorderLayout.NORTH);
JPanel merits_panel = new JPanel(new GridLayout(2, 1));
//merits_panel.setBorder(new EmptyBorder(0, 10, 0, 10));
//merits_panel.setBackground(Color.GREEN);
merits_panel.setOpaque(false);
merits_panel.add(merits_panel_BG);
merits_panel.add(merits_panel_body);
MouseAdapter merits = new MouseAdapterMod();
merits_panel_body.addMouseListener(merits);
content.add(merits_panel, gbc);
/////////////////////////////////Merits Panel Nest End//////////////////////////////////////////////////////////////
/////////////////////////////////Group Panel Nest Begin//////////////////////////////////////////////////////////////
JPanel viewData = new JPanel(new GridLayout(5, 1));
viewData.add(gender_panel);
viewData.add(race_panel);
viewData.add(class_panel);
viewData.add(base_stats_panel);
viewData.add(merits_panel);
panel.add(new JScrollPane(viewData));
return panel;
/////////////////////////////////Group Panel Nest End//////////////////////////////////////////////////////////////
}//end right pane
/////////////////////////////////Right Panel Nest End//////////////////////////////////////////////////////////////
public class MouseAdapterMod extends MouseAdapter {
// usually better off with mousePressed rather than clicked
public void mousePressed(MouseEvent e) {
//System.out.println(e.getSource());
System.out.println("A mouse was pressed");
if (e.getSource() == "gender_panel_BG"){
gender_panel_body.setVisible(!gender_panel_body.isVisible());
}//end of if (e.getSource() == "gender")
}//end of mousePressed(MouseEvent e)
}//end of MouseAdapterMod extends MouseAdapter
}//end master panel set
}//end master class

Now I need to figure out how to select multiple JButtons. It's not quite a check box, as I want to have images instead of tick boxes.
JToggleButton, the parent of JCheckBox, works well for this, as each button knows its selected state. You can nest GridLayout instances in a vertical Box, as shown below.
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import javax.swing.AbstractAction;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JToggleButton;
import javax.swing.UIManager;
import javax.swing.border.TitledBorder;
/** #see http://stackoverflow.com/a/16733710/230513 */
public class Test {
private static final int N = 4;
private void display() {
JFrame f = new JFrame("Test");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Box b = new Box(BoxLayout.Y_AXIS);
b.add(createPanel());
b.add(createPanel());
f.add(new JScrollPane(b){
#Override
public Dimension getPreferredSize() {
return new Dimension(400, 500);
}
});
f.pack();
f.setLocationRelativeTo(null);
f.setVisible(true);
}
private JPanel createPanel() {
JPanel p = new JPanel(new GridLayout(N, N));
p.setBorder(new TitledBorder(String.valueOf(p.hashCode())));
for (int i = 0; i < N * N; i++) {
p.add(createButton());
}
return p;
}
private JToggleButton createButton() {
JToggleButton b = new JToggleButton(new AbstractAction() {
#Override
public void actionPerformed(ActionEvent e) {
System.out.println(e.getActionCommand());
}
});
b.setIcon(UIManager.getIcon("html.pendingImage"));
b.setText(String.valueOf(b.hashCode()));
b.setHorizontalTextPosition(JToggleButton.CENTER);
b.setVerticalTextPosition(JToggleButton.BOTTOM);
return b;
}
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
new Test().display();
}
});
}
}

Related

Drawline not working with JPanel or JFrame

I cant seem to get the line to appear. I have a Background color and a few pictures. If I have frame.setSize(x, y); and frame.setVisible(true);
then the outcome is as expected but without the line there. If I change the code and remove frame. from these two lines, leaving setSize(x,y); and setVisible(true);. I have tried using extends JPanel and extends JFrame but neither work. I have tried adding and removing #Override, paintComponent and g2d.drawLine.
It either one or the other, how do I get both to work?
import javax.swing.*;
import java.awt.*;
import javax.imageio.*;
import java.io.*;
public class CodeBreaker extends JPanel
{
JFrame frame = new JFrame("Code Breaker!");
Picture picture = new Picture("Empty.png");
JLabel label = new JLabel(picture);
JLabel label2 = new JLabel(picture);
JLabel label3 = new JLabel(picture);
JLabel label4 = new JLabel(picture);
JLabel label5 = new JLabel(picture);
JLabel label6 = new JLabel(picture);
JLabel label7 = new JLabel(picture);
JLabel label8 = new JLabel(picture);
JPanel panel = new JPanel();
JPanel panel2 = new JPanel();
public CodeBreaker()
{
frame.setSize(600, 900);
frame.setContentPane(panel);
frame.add(panel2);
frame.setResizable(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().setBackground(new Color(141, 100, 21));
panel.add(label);
panel.add(label2);
panel.add(label3);
panel.add(label4);
panel2.add(label5);
panel2.add(label6);
panel2.add(label7);
panel2.add(label8);
panel2.setOpaque(false);
frame.setVisible(true);
}
/*
void drawLines(Graphics g)
{
Graphics2D g2d = (Graphics2D) g;
g2d.drawLine(120, 50, 360, 50);
}
*/
#Override
public void paintComponent(Graphics g)
{
super.paintComponent(g);
g.setColor(Color.white);
g.drawLine(120, 50, 360, 50);
}
}
And this is my main:
public class CodeBreakerDriver
{
public static void main(String[] args)
{
CodeBreaker cb = new CodeBreaker();
}
}
Introduction
Oracle has a helpful tutorial, Creating a GUI With Swing. Skip the Learning Swing with the NetBeans IDE section.
Since the code you posted isn't executable, I went ahead and created the following GUI.
You can see a black line in the lower right of the GUI.
Explanation
All Swing applications must start with a call to the SwingUtilities invokeLater method. This method ensures that the Swing components are created and executed on the Event Dispatch Thread.
Create the JFrame and JPanels in separate methods. This makes the code much easier to read and understand.
Use Swing layout managers. The JFrame has a default BorderLayout. I used a FlowLayout for both JPanels.
Code
Here's the complete runnable code. I made the Picture class an inner class so I could post the code as one block.
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import javax.swing.BorderFactory;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class CodeBreakerGUI implements Runnable {
public static void main(String[] args) {
SwingUtilities.invokeLater(new CodeBreakerGUI());
}
private final Picture picture;
public CodeBreakerGUI() {
this.picture = new Picture();
}
#Override
public void run() {
JFrame frame = new JFrame("Code Breaker!");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(createTopPanel(), BorderLayout.NORTH);
frame.add(createBottomPanel(), BorderLayout.SOUTH);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public JPanel createTopPanel() {
JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER, 25, 25));
panel.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
JLabel label = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label);
JLabel label2 = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label2);
JLabel label3 = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label3);
JLabel label4 = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label4);
return panel;
}
public JPanel createBottomPanel() {
JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER, 25, 25)) {
private static final long serialVersionUID = 1L;
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.black);
g.drawLine(120, 50, 360, 50);
}
};
panel.setBorder(BorderFactory.createEmptyBorder(5, 5, 5, 5));
JLabel label5 = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label5);
JLabel label6 = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label6);
JLabel label7 = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label7);
JLabel label8 = new JLabel(new ImageIcon(picture.getEmptyImage()));
panel.add(label8);
return panel;
}
public class Picture {
private final BufferedImage emptyImage;
public Picture() {
this.emptyImage = new BufferedImage(64, 64, BufferedImage.TYPE_INT_RGB);
}
public BufferedImage getEmptyImage() {
return emptyImage;
}
}
}

How to add to a JFrame 3 JPanels: The 1st JPanel to take up 90% of the frame, the second to be on skinny top, 3rd to be drawer panel that can close

I am stuck on getting this swing UI to act the way I was hoping. I wrote this demo code to showcase what it is doing and I will now explain what I was hoping to make it do.
I have a JFrame and 3 JPanels
https://i.stack.imgur.com/B82tF.png
I want the JFrame to have an image in the background on the JFrame, like a world map, then on top of that I was trying to have: a top nav bar with buttons, then on top of the map, I want buttons that a player can click on for different areas of the map on the layer below, then I want to have a drawer that opens and closes if the user clicks on the show/hide drawer button that gives info about the action they performed by clicking the buttons.
What I have so far is three panels all aligned side by side and that is not what I want.
How can i get this UI to act like I described above?
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
class TestFrame extends JFrame {
static JFrame frame;
static JButton btnExit, btnShowHide;
static JPanel gridPanel, drawerPanel;
public static void main(String[] args)
{
GridLayout layout = new GridLayout(1,1,0,0);
frame = new JFrame("Main Frame");
frame.setLayout(layout);
// 1: Creating grid panel
gridPanel = new JPanel();
gridPanel.setBackground(Color.yellow);
gridPanel.setLayout(new GridLayout(5, 5, 0, 0));
gridPanel.setBorder(BorderFactory.createLineBorder(Color.GRAY));
gridPanel.setOpaque(false);
gridPanel.setBorder(BorderFactory.createLineBorder(Color.gray));
placeButtons();
// 2: Creating button panel
JPanel buttonPanel = new JPanel();
buttonPanel.setBackground(Color.red);
// add buttons
btnExit = new JButton("Exit");
buttonPanel.add(btnExit);
btnExit.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
try {
System.exit(0);
} catch (Exception err) {
System.out.println("doh");
}
}
});
// 3: Creating button panel
drawerPanel = new JPanel();
drawerPanel.setBackground(Color.blue);
btnShowHide = new JButton("show drawer");
buttonPanel.add(btnShowHide);
btnShowHide.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
try {
System.out.println("show drawer");
drawerPanel.setVisible(true);
} catch (Exception err) {
System.out.println("Could not close the DB: " + err);
}
if(btnShowHide.getText().equals("show drawer")){
btnShowHide.setText("hide drawer");
} else{
btnShowHide.setText("show drawer");
drawerPanel.setVisible(false);
}
}
});
// Adding panels to frame
frame.add(gridPanel);
frame.add(buttonPanel);
frame.add(drawerPanel);
frame.setSize(500, 500);
frame.setVisible(true);
}
public static void placeButtons(){
System.out.println("place buttons");
int dbx = 0;
int dby = 0;
for(int xCnt = 0; xCnt < 5; xCnt++){
dby = 0;
for(int yCnt = 0; yCnt < 5; yCnt++) {
JButton click = new JButton("x:"+xCnt+" y:"+yCnt);
gridPanel.add(click);
dby++;
}
dbx++;
}
}
}```
A common strategy to solve complex computing tasks is to break them into small, well-defined manageable tasks. Divide and conquer.
This also applies to gui: break the design into small, easy-to-layout containers and take it step by step.
First step: to have a background image implement a main panel, override its paintComponent to draw the image:
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;
public class TestFrame /*extends JFrame*/ {
private static final String imageURL = "https://previews.123rf.com/images/pingebat/pingebat1710/pingebat171000035/88604429-great-detail-illustration-of-the-world-map-in-vintage-style-.jpg";
public static void main(String[] args) throws IOException {
URL url = new URL(imageURL);
BufferedImage image = ImageIO.read(url);
JFrame frame = new JFrame("Main Frame");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new MainPane(image));
frame.pack();
frame.setVisible(true);
}
}
class MainPane extends JPanel{
private final Image background;
private final Dimension size;
MainPane(Image background) {
this.background = background;
size = new Dimension(background.getWidth(null), background.getHeight(null));
}
#Override
public Dimension preferredSize() {
return size;
}
#Override //Override to paint image at the background
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(background, 0, 0, null);
}
}
Second step: add controls buttons at the top. Define the buttons panel:
class ControlsPane extends JPanel{
public ControlsPane(ActionListener listener) {
setOpaque(false);
JButton btnShowHide = new JButton("Show Drawer");
add(btnShowHide);
btnShowHide.addActionListener(listener);
JButton btnExit = new JButton("Exit");
add(btnExit);
btnExit.addActionListener(e-> System.exit(0));
}
}
and modify MainPane constructor to use BorderLayout and add the buttons panel as suggested by #camickr:
MainPane(Image background) {
this.background = background;
size = new Dimension(background.getWidth(null), background.getHeight(null));
setLayout(new BorderLayout(5,5));
//action listener for show drawer button
ActionListener listener = e-> System.out.println("Show Drawer clicked");
add(new ControlsPane(listener), BorderLayout.PAGE_START);
}
Now take it to the next step (for example add a drawer).
Something like this?
public static void main(String[] args) {
JFrame frame = new JFrame("Test");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new GridBagLayout());
JToolBar toolBar = new JToolBar(JToolBar.HORIZONTAL);
toolBar.setFloatable(false);
frame.add(toolBar, new GridBagConstraints(0, 0, 2, 3, 0, 1.0, GridBagConstraints.NORTH, GridBagConstraints.HORIZONTAL, new Insets(0, 0, 0, 0), 0, 0));
JPanel drawer = new JPanel();
drawer.setBackground(Color.BLUE);
drawer.setOpaque(true);
drawer.setVisible(false);
JPanel content = new JPanel();
content.setBackground(Color.GREEN);
content.setOpaque(true);
frame.add(drawer, new GridBagConstraints(0, 1, 1, 2, 1, 1, GridBagConstraints.WEST, GridBagConstraints.BOTH, new Insets(4, 4, 4, 4), 0, 0));
frame.add(content, new GridBagConstraints(1, 1, 1, 2, 1, 1, GridBagConstraints.WEST, GridBagConstraints.BOTH, new Insets(4, 4, 4, 4), 0, 0));
Action toggleDrawer = new AbstractAction("Toggle Drawer") {
#Override
public void actionPerformed(ActionEvent e) {
drawer.setVisible(!drawer.isVisible());
frame.revalidate();
frame.repaint();
}
};
toolBar.add(new JButton(toggleDrawer));
frame.pack();
frame.setSize(300, 500);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}

JPanel layout - adding text box and rearranging components

I am having some issues with my Swing GUI.
It currently looks like this:
But I would like to move a couple things around.
Firstly I want the buttons underneath the keyboard
I want to add a text field on top of the keyboard with the submit button on the right hand side.
How can I accomplish this? I've tried to create a GridLayout and slot things by row,column coordinate but it doesn't seem to work.
private class Display extends JPanel {
Display() {
setPreferredSize(new Dimension(620, 420));
setBackground(new Color(250, 230, 180));
setFont(new Font("Serif", Font.BOLD, 20));
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
((Graphics2D) g).setStroke(new BasicStroke(3));
if (message != null) {
g.setColor(Color.RED);
g.drawString(message, 30, 40);
g.drawString("00:00", 30, 410);
}
}
}
private void createWindow() {
setJMenuBar(menuBarCreator());
// The ActionListener that will respond to button clicks.
ButtonHandler buttonHandler = new ButtonHandler();
// Create the subpanels and add them to the main panel.
display = new Display();
setLayout(new BorderLayout(3, 3));
add(display, BorderLayout.CENTER);
JPanel bottom = new JPanel();
bottom.setLayout(new GridLayout(1,1));
add(bottom, BorderLayout.NORTH);
// Add keyboard
JPanel keyboard = new JPanel();
JPanel keyboardHolder = new JPanel();
keyboard.setLayout(new GridLayout(2, 13));
keyboardHolder.setLayout(new GridLayout(1, 2));
for (char alphabet = 'a'; alphabet <= 'z'; alphabet++) {
JButton button = new JButton(String.valueOf(alphabet));
button.addActionListener(buttonHandler);
keyboard.add(button);
alphabetButtons.add(button);
}
keyboardHolder.add(keyboard, 0,0);
add(keyboardHolder, BorderLayout.SOUTH);
// Create three buttons, register the ActionListener to respond to clicks on the
// buttons, and add them to the bottom panel.
JButton submitButton = new JButton("Submit");
submitButton.addActionListener(buttonHandler);
keyboard.add(submitButton);
JButton startButton = new JButton(GuiText.START.toString());
startButton.addActionListener(buttonHandler);
bottom.add(startButton);
JButton nextButton = new JButton(GuiText.NEXT.toString());
nextButton.addActionListener(buttonHandler);
bottom.add(nextButton);
JButton skipButton = new JButton(GuiText.SKIP.toString());
skipButton.addActionListener(buttonHandler);
bottom.add(skipButton);
JButton quit = new JButton(GuiText.QUIT.toString());
quit.addActionListener(buttonHandler);
bottom.add(quit);
setBackground(new Color(100, 0, 0));
nextButton.setEnabled(false);
skipButton.setEnabled(false);
}
Below is a concrete example of what camickr wrote in his comment to the original question. Note that this is not the only possibility. There are many layout managers. I recommend visiting Laying Out Components Within a Container
The purpose of the code is only to show you how to achieve your desired layout.
import java.awt.BasicStroke;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.WindowConstants;
public class GuesGame implements Runnable {
private JFrame frame;
public void run() {
showGui();
}
private JPanel createBottomPanel() {
JPanel bottomPanel = new JPanel(new GridLayout(3, 1));
bottomPanel.add(createSubmitPanel());
bottomPanel.add(createKeyboardPanel());
bottomPanel.add(createButtonsPanel());
return bottomPanel;
}
private JPanel createButtonsPanel() {
JPanel buttonsPanel = new JPanel();
JButton startButton = new JButton("Start");
buttonsPanel.add(startButton);
JButton nextButton = new JButton("Next");
buttonsPanel.add(nextButton);
JButton skipButton = new JButton("Skip");
buttonsPanel.add(skipButton);
JButton quitButton = new JButton("Quit");
buttonsPanel.add(quitButton);
return buttonsPanel;
}
private JPanel createKeyboardPanel() {
JPanel keyboardPanel = new JPanel(new GridLayout(2, 13));
for (char c = 'a'; c <= 'z'; c++) {
JButton button = new JButton(String.valueOf(c));
keyboardPanel.add(button);
}
return keyboardPanel;
}
private JPanel createSubmitPanel() {
JPanel submitPanel = new JPanel();
JTextField txtFld = new JTextField(20);
submitPanel.add(txtFld);
JButton submitButton = new JButton("Submit");
submitPanel.add(submitButton);
return submitPanel;
}
private void showGui() {
frame = new JFrame("Guess Game");
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.add(new Display(), BorderLayout.CENTER);
frame.add(createBottomPanel(), BorderLayout.PAGE_END);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
EventQueue.invokeLater(new GuesGame());
}
}
class Display extends JPanel {
private String message;
Display() {
message = "Starting game";
setPreferredSize(new Dimension(620, 420));
setBackground(new Color(250, 230, 180));
setFont(new Font("Serif", Font.BOLD, 20));
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
((Graphics2D) g).setStroke(new BasicStroke(3));
if (message != null) {
g.setColor(Color.RED);
g.drawString(message, 30, 40);
g.drawString("00:00", 30, 410);
}
}
}
You want three "rows" below the Display panel as follows
Text field and "submit" button.
Keyboard
Other buttons.
Hence the "bottom" panel contains three panels laid out one above the other.
The first panel is the text field and "submit" panel.
Underneath that is the "keyboard".
And underneath the keyboard are the other buttons.
Note that the default layout manager for JPanel is java.awt.FlowLayout and this layout manager is suitable for the panel containing the "submit" button and also suitable for the panel containing the other buttons.
Here is a screen capture of the running app.

Using BoxLayout as vertical FlowLayout to hold JPanel

I want to have a vertical FlowLayout to host my JPanels. A lot of ppl suggest using BoxLayout. However, I realize its behavior is not exactly same as FlowLayout
FlowLayout
BoxLayout with Y axis
As you can see, in FlowLayout, when I stretch parent panel's width, its child panels' width remains the same.
However, in BoxLayout, when I stretch parent panel's height, its child panels' height changed!. This seems to have similar behavior as 1 column 2 rows GridLayout. This is not what I want.
Is there any way to prevent this?
I try to have vertical filler on the top and bottom of parent panel.
new javax.swing.Box.Filler(new java.awt.Dimension(0, 0), new java.awt.Dimension(0, 0), new java.awt.Dimension(0, 32767));
But it doesn't help much. My 2 child panels' height still stretch along when I change parent's height.
see how BoxLayout(accepting min, max and preferred size, then resize depends of this value) works,
in compare with FlowLayout (accepting only PreferredSize, child arent resizable with container)
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class BoxStructAndJComponents {
private JFrame frame;
private JPanel intro;
private JPanel name;
public BoxStructAndJComponents() {
frame = new JFrame("JFrame");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JComponent newContentPane = createUI();
newContentPane.setOpaque(true);
frame.setContentPane(newContentPane);
frame.pack();
frame.setVisible(true);
}
private JPanel createUI() {
intro = new JPanel() {
#Override
public Dimension getMinimumSize() {
return new Dimension(100, 100);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(100, 100);
}
#Override
public Dimension getMaximumSize() {
return new Dimension(100, 100);
}
};
intro.setBackground(Color.red);
//intro.setLabelFor(name);
name = new JPanel() {
#Override
public Dimension getMinimumSize() {
return new Dimension(100, 100);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(100, 100);
}
#Override
public Dimension getMaximumSize() {
return new Dimension(100, 100);
}
};
name.setBackground(Color.blue);
final JButton button = new JButton("Pick a new name...");
button.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
}
});
JPanel panel = new JPanel();
panel.setLayout(new BoxLayout(panel, BoxLayout.X_AXIS));
panel.setBorder(BorderFactory.createEmptyBorder(20, 20, 10, 20));
intro.setAlignmentX(JComponent.CENTER_ALIGNMENT);
name.setAlignmentX(JComponent.CENTER_ALIGNMENT);
button.setAlignmentX(JComponent.CENTER_ALIGNMENT);
panel.add(intro);
//panel.add(Box.createVerticalStrut(5));
panel.add(Box.createHorizontalStrut(5));
panel.add(name);
panel.add(Box.createRigidArea(new Dimension(150, 10)));
panel.add(button);
return panel;
}
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
BoxStructAndJComponents listDialogRunner = new BoxStructAndJComponents();
}
});
}
}
You have to use Glue (see: http://docs.oracle.com/javase/tutorial/uiswing/layout/box.html#glue).
A simple and flexible way to achieve this behaviour, is to use GridBagLayout:
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class TestGridBagLayout {
protected void initUI1() {
final JFrame frame = new JFrame("Grid bag layout");
frame.setTitle(TestGridBagLayout.class.getSimpleName());
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new JPanel(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridwidth = GridBagConstraints.REMAINDER;
// gbc.weighty = 1.0; Uncomment this line if you want the labels to spread vertically
for (int i = 0; i < 10; i++) {
panel.add(new JLabel("Label " + (i + 1)), gbc);
}
frame.add(panel);
frame.pack();
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
TestGridBagLayout test = new TestGridBagLayout();
test.initUI1();
}
});
}
}

Background image in a nested JPanel?

I have a JPanel which contains 2 more JPanel. Located on the left(leftBox) and the right(rB), I wanted to add a background image on the right JPanel (rB).
But the result I get is
http://i.imgur.com/tHz1x.jpg
the result I wanted
http://i.imgur.com/xHbpx.jpg
public void paintComponent(Graphics g)
{
//this.paintComponent(g);
if(wdimage != null) g.drawImage(wdimage,0,0,800,800,rB); //(image,location x, location y, size x, size y)
}
The rB Panel is blocking the image, what I want is to display the image on the JPanel, and add some jlabels and text field on top of the JPanel and image later on.
Here it's appearing without any problems, have a look :
import java.awt.*;
import java.awt.image.BufferedImage;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;
public class PanelExample
{
private void createAndDisplayGUI()
{
JFrame frame = new JFrame("Panel Example");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel contentPane = new JPanel();
contentPane.setOpaque(true);
contentPane.setBorder(
BorderFactory.createMatteBorder(
5, 5, 5, 5, Color.WHITE));
contentPane.setBackground(Color.WHITE);
contentPane.setLayout(new BorderLayout(10, 10));
ImagePanel imagePanel = new ImagePanel();
//imagePanel.createGUI();
BlankPanel blankPanel = new BlankPanel();
contentPane.add(blankPanel, BorderLayout.LINE_START);
contentPane.add(imagePanel, BorderLayout.CENTER);
frame.setContentPane(contentPane);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String... args)
{
SwingUtilities.invokeLater(new Runnable()
{
public void run()
{
new PanelExample().createAndDisplayGUI();
}
});
}
}
class ImagePanel extends JPanel
{
private BufferedImage image;
public ImagePanel()
{
setOpaque(true);
setBorder(BorderFactory.createLineBorder(Color.BLACK, 5));
try
{
image = ImageIO.read(new URL("http://gagandeepbali.uk.to/gaganisonline/images/background.jpg"));
}
catch(Exception e)
{
e.printStackTrace();
}
createGUI();
}
public void createGUI()
{
setLayout(new GridBagLayout());
JPanel loginPanel = new JPanel();
loginPanel.setOpaque(false);
loginPanel.setLayout(new GridLayout(2, 2, 2, 2));
JLabel userLabel = new JLabel("USERNAME : ");
userLabel.setForeground(Color.WHITE);
JTextField userField = new JTextField(10);
JLabel passLabel = new JLabel("PASSWORD : ");
passLabel.setForeground(Color.WHITE);
JPasswordField passField = new JPasswordField(10);
loginPanel.add(userLabel);
loginPanel.add(userField);
loginPanel.add(passLabel);
loginPanel.add(passField);
add(loginPanel);
System.out.println("I am finished");
}
#Override
public Dimension getPreferredSize()
{
return (new Dimension(300, 300));
}
public void paintComponent(Graphics g)
{
super.paintComponent(g);
g.drawImage(image, 0, 0, this);
}
}
class BlankPanel extends JPanel
{
public BlankPanel()
{
setOpaque(true);
setBorder(BorderFactory.createLineBorder(Color.BLACK, 5));
setBackground(Color.WHITE);
}
#Override
public Dimension getPreferredSize()
{
return (new Dimension(100, 300));
}
}

Categories