Java GUI Layout Suggestions - java

For a school assignment I need to have 2 panels.
The right needs to be 3x3 with buttons (which I have made black for easy identification when setting up the GUI) and the left with 1 label and 4 buttons.
Label should display the name of the current picture (placed randomly on a button in the 3x3 grid), 3 buttons to place images randomly, and one button to clear them off. I don't need help with the logic, I can do that part.
I am having trouble setting up the panel so it looks somewhat decent. I was thinking of making it a 1x5 grid but I don't know how to do that. I have spent multiple hours looking up how to do it as well as trying out my own stuff (notice the commented out stuff). Any help would be greatly appreciated.
public class Characters extends JFrame {
private Container pane;
private JButton Button1, Button2, Button3, Button4, Button5, Button6;
private JButton Button7, Button8, Button9;
private JButton BMolly, BOctavious, BJimmy, BClear;
private ImageIcon Molly, Octavious, Jimmy;
private JLabel LName;
public Characters() {
setTitle("Characters");
pane = getContentPane();
pane.setLayout(new GridLayout(3, 3));
Button1 = new JButton((Icon) Button1);
Button1.setBackground(Color.BLACK);
pane.add(Button1);
Button2 = new JButton((Icon) Button2);
Button2.setBackground(Color.BLACK);
pane.add(Button2);
Button3 = new JButton((Icon) Button3);
Button3.setBackground(Color.BLACK);
pane.add(Button3);
Button4 = new JButton((Icon) Button4);
Button4.setBackground(Color.BLACK);
pane.add(Button4);
Button5 = new JButton((Icon) Button5);
Button5.setBackground(Color.BLACK);
pane.add(Button5);
Button6 = new JButton((Icon) Button6);
Button6.setBackground(Color.BLACK);
pane.add(Button6);
Button7 = new JButton((Icon) Button7);
Button7.setBackground(Color.BLACK);
pane.add(Button7);
Button8 = new JButton((Icon) Button8);
Button8.setBackground(Color.BLACK);
pane.add(Button8);
Button9 = new JButton((Icon) Button9);
Button9.setBackground(Color.BLACK);
pane.add(Button9);
LName = new JLabel(" ");
pane.add(LName);
BMolly = new JButton("Molly");
pane.add(BMolly);
BOctavious = new JButton("Octavious");
pane.add(BOctavious);
BJimmy = new JButton("Jimmy");
pane.add(BJimmy);
BClear = new JButton("Clear");
pane.add(BClear);
pack();
setResizable(false);
setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(final String[] args) {
new Characters();
}
}

What you need are two different panels.
pane = new JPanel(); //instead of pane = getContentPane();
//set your Layout
//add the 9 buttons
//...
add(pane, BorderLayout.CENTER); //add panel to the jframe
pane = new JPanel(); //creat new panel
//set your Layout
//add the other 4 buttons + label
//...
add(pane, BorderLayout.EAST); //add panel to the jframe
If it still dont work i can add the full code.

Very good starting point for dealing with layout managers is Java documentation. For your need looks like BorderLayout manager should be good choice.
Read how to use layout managers with examples, it gives you first look.

There's a few issues with your code, by convention variable names start with a lower letter, and you should only do one thing per line of code (even declaring variables). Also you shouldn't "extend" a class unless you are going to extend the functionality of it, if all you are going to do is use it, then just create your own instance of the JFrame. (Oh, and when you're posting code on fourms looking for help, if you've felt the need to add an annotation to ignore an unused warning, then you probably don't need to post it in your question either :p )
For your problem you need to consider using multiple layouts (they can even be embedded in each other to provide some very complex effects) - Swing layouts
I've used a borderLayout and a BoxLayout to achieve something along the lines of what you require.
public class Characters {
private JFrame frame;
private JButton button1;
private JButton button2;
private JButton button3;
private JButton button4;
private JButton button5;
private JButton button6;
private JButton button7;
private JButton button8;
private JButton button9;
private JButton mollyButton;
private JButton octaviousButton;
private JButton jimmyButton;
private JButton clearButton;
public Characters() {
frame = new JFrame("Characters");
JPanel rightPanel = new JPanel(new GridLayout(3, 3));
button1 = new JButton();
button1.setBackground(Color.BLACK);
rightPanel.add(button1);
button2 = new JButton();
button2.setBackground(Color.BLACK);
rightPanel.add(button2);
button3 = new JButton();
button3.setBackground(Color.BLACK);
rightPanel.add(button3);
button4 = new JButton();
button4.setBackground(Color.BLACK);
rightPanel.add(button4);
button5 = new JButton();
button5.setBackground(Color.BLACK);
rightPanel.add(button5);
button6 = new JButton();
button6.setBackground(Color.BLACK);
rightPanel.add(button6);
button7 = new JButton();
button7.setBackground(Color.BLACK);
rightPanel.add(button7);
button8 = new JButton();
button8.setBackground(Color.BLACK);
rightPanel.add(button8);
button9 = new JButton();
button9.setBackground(Color.BLACK);
rightPanel.add(button9);
JPanel leftPanel = new JPanel();
leftPanel.setLayout(new BoxLayout(leftPanel, BoxLayout.PAGE_AXIS));
JLabel nameLabel = new JLabel("Name");
leftPanel.add(nameLabel);
mollyButton = new JButton("Molly");
leftPanel.add(mollyButton);
octaviousButton = new JButton("Octavious");
leftPanel.add(octaviousButton);
jimmyButton = new JButton("Jimmy");
leftPanel.add(jimmyButton);
clearButton = new JButton("Clear");
leftPanel.add(clearButton);
JPanel centrePanel = new JPanel();
centrePanel.add(new JLabel("Stuff goes here"));
JPanel content = new JPanel(new BorderLayout());
content.add(leftPanel, BorderLayout.WEST);
content.add(centrePanel, BorderLayout.CENTER);
content.add(rightPanel, BorderLayout.EAST);
frame.setContentPane(content);
frame.pack();
frame.setResizable(false);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
public static void main(final String[] args) {
new Characters();
}
}

Related

Using JPanel to make a calculator: how to use layout?

I'm working on a question that simply states to make an GUI that looks like This calculator, it doesn't have to function, just look like it. So I think I have the JPanel and JButton components right but I can't organize the fields to make it come out right. I'm pretty new so any crash course on how to organize a GUI would be appreciated.
Here's what I have so far:
// Using a JPanel to help lay out components.
import java.awt.GridLayout;
import java.awt.BorderLayout;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import javax.swing.JTextField;
public class Calculator extends JFrame
{
private final JPanel buttonJPanel2, buttonJPanel3, buttonJPanel4,
buttonJPanel5; // panel to hold buttons
private final JButton[] buttons3, buttons4, buttons5;
private final JButton[] buttons2;
private final JTextField buttonJPanel1;
// no-argument constructor
public Calculator()
{
super("Calculator");
buttonJPanel1 = new JTextField();
add(buttonJPanel1, BorderLayout.NORTH); // add panel1 to JFrame
buttons2 = new JButton[4];
buttons2[0] = new JButton("7");
buttons2[1] = new JButton("8");
buttons2[2] = new JButton("9");
buttons2[3] = new JButton("/");
buttonJPanel2 = new JPanel();
buttonJPanel2.setLayout(new GridLayout(1, buttons2.length));
add(buttonJPanel2, BorderLayout.AFTER_LAST_LINE); // add panel2 to JFrame
buttons3 = new JButton[4];
buttons3[0] = new JButton("4");
buttons3[1] = new JButton("5");
buttons3[2] = new JButton("6");
buttons3[3] = new JButton("*");
buttonJPanel3 = new JPanel();
buttonJPanel3.setLayout(new GridLayout(1, buttons3.length));
add(buttonJPanel3, BorderLayout.AFTER_LAST_LINE); // add panel3 to JFrame
buttons4 = new JButton[4];
buttons4[0] = new JButton("1");
buttons4[1] = new JButton("2");
buttons4[2] = new JButton("3");
buttons4[3] = new JButton("-");
buttonJPanel4 = new JPanel();
buttonJPanel4.setLayout(new GridLayout(1, buttons4.length));
add(buttonJPanel4, BorderLayout.AFTER_LAST_LINE); // add panel4 to JFrame
buttons5 = new JButton[4];
buttons2[0] = new JButton("0");
buttons5[1] = new JButton(".");
buttons5[2] = new JButton("=");
buttons5[3] = new JButton("+");
buttonJPanel5 = new JPanel();
buttonJPanel5.setLayout(new GridLayout(1, buttons5.length));
add(buttonJPanel5, BorderLayout.AFTER_LAST_LINE); // add panel5 to
//JFrame
}
public static void main(String[] args)
{
PanelFrame panelFrame = new PanelFrame();
panelFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
panelFrame.setSize(700, 500);
panelFrame.setVisible(true);
}
} // end class PanelFrame
In short: every component has to be declared,
JButton button1;
initialized
button1 = new JButton("Click me!");
and added to the component above it in the hierarchy (in this case the panel)
panel1.add(button1);
If you do not add the components to the panel and the panel to the frame they will not be part of the GUI, thus not visible.
A JPanel can be set to adjust its layout in different ways using a LayoutManager as you have done with GridLayout (which seems fitting for a calculator). I suggest you read about how to use the grid layout here.
Hope I could help :)
You need to add the buttons to the `JPanel'. For example:
for(JButton b : buttons2) { buttonJPanel2.add(b); }
BorderLayout accepts one component at each location, so if you set BorderLayout.AFTER_LAST_LINE twice, the last add overwrites previous one.

Java: Make JTextArea scrollable

This is my first post so please forgive me if I am not following the rules correctly.
I am trying to do something relatively simple in Java. I want to make a JTextArea scrollable. I am aware this has been asked before (Java :Add scroll into text area). However, when I follow this example by adding JTextArea to JScrollPane my JTextArea does not become scrollable. What is it that I am missing?
Here is my code:
import ...;
public class MyControlPanel extends JPanel {
//Declare variables
private JComboBox accountsBox;
private String[] accType = {"Current Account", "Savings Account"};
private JLabel selAccType, initDeposit, logLabel, simLabel;
private JTextField depositText;
private JTextArea log;
private JScrollPane scroll;
private JButton createAccount, start, stop;
private JPanel panel1, panel2, panel3, panel4, panel5, panel6;
private Timer timer;
private MyAccount theAccount;
private Random randNum1, randNum2;
private DecimalFormat df;
//Constructor
public MyControlPanel() {
//Create instances:
selAccType = new JLabel("Please select account type: "); //JLabel
initDeposit = new JLabel("Input initial deposit: ");
logLabel = new JLabel("Log:");
simLabel = new JLabel();
accountsBox = new JComboBox(accType); //JComboBox
depositText = new JTextField("0"); // JTextField
log = new JTextArea(); //JTextArea
scroll = new JScrollPane(log); //JScrollPane
createAccount = new JButton("Create Account"); //JButton
start = new JButton("Start");
stop = new JButton("Stop");
panel1 = new JPanel(); //JPanel
panel2 = new JPanel();
panel3 = new JPanel();
panel4 = new JPanel();
panel5 = new JPanel();
panel6 = new JPanel();
timer = new Timer(); //Timer
df = new DecimalFormat("#.00");
//Add ActionListeners
createAccount.addActionListener(new ActionListener() {...});
start.addActionListener(new ActionListener() {...});
stop.addActionListener(new ActionListener() {...});
//Set JTextField size
depositText.setColumns(5);
//Set JTextArea size
log.setPreferredSize(new Dimension(780, 150));
//Set panel size
panel1.setPreferredSize(new Dimension(500, 500));
panel2.setPreferredSize(new Dimension(800, 50));
panel3.setPreferredSize(new Dimension(500, 50));
panel4.setPreferredSize(new Dimension(500, 50));
panel5.setPreferredSize(new Dimension(800, 25));
panel6.setPreferredSize(new Dimension(800, 200));
//Set layout in panel5 to align left
panel6.setLayout(new FlowLayout(FlowLayout.LEFT));
//Add components to each panel
addPanels();
//Place objects in the framed window
this.add(panel1);
this.add(panel2);
this.add(panel3);
this.add(panel4);
this.add(panel5);
this.add(panel6);
}
public void addPanels() {...}
public void removePanels() {...}
}
You need to change:
log.setPreferredSize(new Dimension(780, 150));
to:
scroll.setPreferredSize(new Dimension(780, 150));

setText issue using getActionCommand

I am a beginner programmer trying to make a simple calculator. Towards the end of my code I try and have the text field show whatever button the user presses. For some reason the text.setText("7") does not show up in the text field. Could you please help me with this?
import javax.swing.*; //imports all that is needed for the code
import java.awt.*;
import java.awt.event.*;
public class Calculator extends JFrame implements ActionListener {
public JButton button1, button2, button3, button4, button5, button6, button7, button8, button9, button10, button11, button12, button13, button14, button15, button16;
public JTextArea text;
public Calculator()
{
setSize(350,300); //sets size to 300 by 300 //LOOK UP HOW TO LOCK SIZE
setResizable(false); //does not let user change the size of the window
setDefaultCloseOperation(EXIT_ON_CLOSE);//makes app close when I press the x on the top left
Container contentPane = getContentPane();//gets the contentPane
contentPane.setBackground(Color.CYAN);//sets background color to white
contentPane.setLayout(new FlowLayout());//makes the contentPane read from left to right
JTextArea text = new JTextArea(1, 25);
contentPane.add(text);
text.setEditable(false);
button1 = new JButton ("7");
contentPane.add(button1);
button1.addActionListener(this);
button2 = new JButton ("8");
contentPane.add(button2);
button2.addActionListener(this);
button3 = new JButton ("9");
contentPane.add(button3);
button3.addActionListener(this);
button4 = new JButton ("รท");
contentPane.add(button4);
button4.addActionListener(this);
button5 = new JButton ("4");
contentPane.add(button5);
button5.addActionListener(this);
button6 = new JButton ("5");
contentPane.add(button6);
button6.addActionListener(this);
button7 = new JButton ("6");
contentPane.add(button7);
button7.addActionListener(this);
button8 = new JButton ("x");
contentPane.add(button8);
button8.addActionListener(this);
button9 = new JButton ("1");
contentPane.add(button9);
button9.addActionListener(this);
button10 = new JButton ("2");
contentPane.add(button10);
button10.addActionListener(this);
button11 = new JButton ("3");
contentPane.add(button11);
button11.addActionListener(this);
button12 = new JButton ("-");
contentPane.add(button12);
button12.addActionListener(this);
button13 = new JButton ("0");
contentPane.add(button13);
button13.addActionListener(this);
button14 = new JButton (".");
contentPane.add(button14);
button14.addActionListener(this);
button15 = new JButton ("=");
contentPane.add(button15);
button15.addActionListener(this);
button16 = new JButton ("+");
contentPane.add(button16);
button16.addActionListener(this);
}
public static void main(String[] args)
{
Calculator guiWindow = new Calculator(); //uses GUI
guiWindow.setVisible(true); //makes it visible
}
public void actionPerformed(ActionEvent e)
{
Container contentPane = getContentPane();
if (e.getActionCommand().equals("7"));
{
text.setText("7");
}
}
}
It looks like you shadowed your member field JTextArea text inside the constructor. So that means you didn't assign an instance of JTextArea to the member field but to the local variable in the constructor.
Use instead of this
JTextArea text = new JTextArea(1, 25);
this
text = new JTextArea(1, 25);

Disposing of GUI Elements

I have several GUI elements added to a JPanel. The JPanel is added to a JScrollPane. The JScrollPane is added to a JFrame (CENTER section of a BorderLayout).
At times I need to remove the JScrollPane and make the space available for other elements. I've provided a method for that. Want to make sure that this method disposes of all resources used by the old JScrollPane and makes them available for Garbage Collection. Please see code below. Is my clearCenter() method sufficient for this task? Is there a better way to do it?
Thanks.
import java.awt.*;
import javax.swing.*;
public class MyGui extends JFrame {
private JScrollPane scroll;
private JPanel panel;
private JButton button1;
private JButton button2;
private JButton button3;
private JButton button4;
// Constructor
public MyGui() {
super("Playback");
setSize(250, 200);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
BorderLayout layout = new BorderLayout();
setLayout(layout);
panel = new JPanel();
GridLayout grid = new GridLayout(0, 1, 30, 30);
panel.setLayout(grid);
button1 = new JButton("Button1");
button2 = new JButton("Button2");
button3 = new JButton("Button3");
button4 = new JButton("Button4");
panel.add(button1);
panel.add(button2);
panel.add(button3);
panel.add(button4);
scroll = new JScrollPane(panel,
JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED,
JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED);
add(scroll, BorderLayout.CENTER);
add(new JLabel("South", JLabel.CENTER),BorderLayout.SOUTH);
add(new JLabel("North", JLabel.CENTER),BorderLayout.NORTH);
add(new JLabel("East", JLabel.CENTER),BorderLayout.EAST);
add(new JLabel("West", JLabel.CENTER),BorderLayout.WEST);
setVisible(true);
}
public void clearCenter() {
button1 = null;
button2 = null;
button3 = null;
button4 = null;
panel = null;
remove(scroll);
scroll = null;
}
}
At times I need to remove the JScrollPane and make the space available for other elements.
Use a CardLayout as shown in this answer. And I would not worry too much about disposing of a scroll pane, keep it in memory. When it is next needed, update the scroll pane contents then flip back to that card in the layout.
Resetting the content of the scroll-pane can be done like below. Activate the first button to see the button panel replaced by the yellow panel as the view of the scroll-pane. Note that this code is a 'ready to run' MCVE (with a main(String[]) to show it onscreen). Please post MCVE code in future.
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;
public class MyGui extends JFrame {
private JScrollPane scroll;
private JPanel panel;
private JPanel brightPanel;
private JButton button1;
private JButton button2;
private JButton button3;
private JButton button4;
// Constructor
public MyGui() {
super("Playback");
setSize(250, 200);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
BorderLayout layout = new BorderLayout();
setLayout(layout);
// create the panel, but don't add it yet.
brightPanel = new JPanel();
brightPanel.setBackground(Color.YELLOW);
panel = new JPanel();
GridLayout grid = new GridLayout(0, 1, 30, 30);
panel.setLayout(grid);
button1 = new JButton("Button1");
button2 = new JButton("Button2");
button3 = new JButton("Button3");
button4 = new JButton("Button4");
panel.add(button1);
panel.add(button2);
panel.add(button3);
panel.add(button4);
ActionListener listener = new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
changeViews();
}
};
button1.addActionListener(listener);
scroll = new JScrollPane(panel,
JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED,
JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED);
add(scroll, BorderLayout.CENTER);
add(new JLabel("South", JLabel.CENTER), BorderLayout.SOUTH);
add(new JLabel("North", JLabel.CENTER), BorderLayout.NORTH);
add(new JLabel("East", JLabel.CENTER), BorderLayout.EAST);
add(new JLabel("West", JLabel.CENTER), BorderLayout.WEST);
setVisible(true);
}
public void changeViews() {
scroll.setViewportView(brightPanel);
}
public static void main(String[] args) {
Runnable r = new Runnable() {
#Override
public void run() {
new MyGui();
}
};
SwingUtilities.invokeLater(r);
}
}

JPanels in Jframe not shown

I am making a simple layout for a calculator, actually i am new to java and learning the basics. My problem is that when i run this code, only a JFrame opens and the other panels n its buttons are not shown. PLz help , where my i going wrong.
import java.awt.*;
import javax.swing.*;
public class Layouts extends JFrame{
public Layouts(){
super("Calculator");
setLookAndFeel();
setSize(350,350);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
BorderLayout border = new BorderLayout();
setLayout(border);
GridLayout numbers = new GridLayout(2,2);
row2.setLayout(numbers);
row2.add(one);
row2.add(two);
row2.add(three);
row2.add(four);
GridLayout operators = new GridLayout(2,2);
row3.setLayout(operators);
row3.add(plus);
row3.add(subtract);
row3.add(multiply);
row3.add(equals);
setVisible(true);
}
private void setLookAndFeel()
{
try
{
IManager.setLookAndFeel("com.sun.java.lang.plaf.nimbus.NimbusLookAndFeel");
}
catch(Exception exc)
{
}
}
//row 1
JPanel row1 = new JPanel();
JTextField text = new JTextField(20);
//row 2
JPanel row2 = new JPanel();
JButton one = new JButton("1");
JButton two = new JButton("2");
JButton three = new JButton("3");
JButton four = new JButton("4");
//row3
JPanel row3 = new JPanel();
JButton plus = new JButton("+");
JButton subtract = new JButton("-");
JButton multiply = new JButton("*");
JButton equals = new JButton("=");
public static void main(String[] args)
{
Layouts l1 = new Layouts();
}
}
Remember to add all of the components (i.e row2, row3 etc..)
Example:
add(row2,BorderLayout.CENTER)
add(row3,BorderLayout.SOUTH)
BorderLayout border = new BorderLayout();
setLayout(border);
But you aren't adding anything to border ! Add the numbers and operators.
You need to add the JPanels and JButtons to JFrame. The JFrame in this case is your Layouts class. So do something like :
row1.add(text);
this.add(row1);
row2.add(one);
row2.add(two);
row2.add(three);
row2.add(four);
this.add(row2);
...
check this tutorial is is a very useful one JButton, JPanel & JFrame examples

Categories

Resources