Task: make the same window as in the screenshot below using JAVA swing:
What did I do:
Created a panel for the top block (BorderLayout), added two more panels to it (GridLayour), one for the left buttons(FR, FG, FB), the other for the right buttons (A, B,C), added it all to my JFrame window
Created a JScrollPane and added it to the JFrame too
Created a panel for the bottom block (BorderLayout), added two more panels to it (GridLayour), one for the left buttons(1,2,3,4...), the other for the JTextFiel text field, added it all to my JFrame window.
The result is below:
I tried using other layouts, but it still doesn't work. I attach the code.
import javax.swing.*;
import java.awt.*;
public class MyJFrame extends JFrame {
JPanel pan1 = new JPanel();
JPanel pan2 = new JPanel();
JPanel pan3 = new JPanel();
JPanel pan4 = new JPanel();
JPanel pan5 = new JPanel();
JPanel pan6 = new JPanel();
JButton jButton1 = new JButton("FR");
JButton jButton2 = new JButton("FG");
JButton jButton3 = new JButton("FB");
JButton jButton4 = new JButton("A");
JButton jButton5 = new JButton("B");
JButton jButton6 = new JButton("C");
public MyJFrame(){
super("Simple Swing App");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocation(650,300);
setLayout(new GridLayout(3,2));
setResizable(true);
JScrollPane scrollPane = new JScrollPane();
jButton1.setBackground(Color.red);
jButton2.setBackground(Color.green);
jButton3.setBackground(Color.blue);
pan1.setLayout(new GridLayout(1,3,2,2));
pan2.setLayout(new GridLayout(1,3,2,2));
pan3.setLayout(new BorderLayout());
pan4.setLayout(new GridLayout(3,3,2,2));
pan5.setLayout(new GridLayout(3,1,1,1));
pan6.setLayout(new BorderLayout());
pan1.add(jButton1);
pan1.add(jButton2);
pan1.add(jButton3);
pan2.add(jButton4);
pan2.add(jButton5);
pan2.add(jButton6);
pan3.add(pan1, BorderLayout.WEST);
pan3.add(pan2, BorderLayout.EAST);
for (int i=1; i<10; i++) {
JButton jButton = new JButton(i+"");
pan4.add(jButton);
}
for (int i=1; i<4; i++){
JTextField jTextField = new JTextField(" Pole tekstowe " + i + " typu jTextField ");
jTextField.setBackground(Color.WHITE);
jTextField.setBorder(BorderFactory.createLineBorder(Color.CYAN));
pan5.add(jTextField);
}
pan6.add(pan4, BorderLayout.WEST);
pan6.add(pan5, BorderLayout.EAST);
add(pan3);
add(scrollPane);
add(pan6);
setSize(700,450);
setVisible(true);
}
}
If the question is "How to make this GUI?" I would use this approach:
3 x BorderLayout (red) - one for the entire GUI, one each for the PAGE_START and PAGE_END constraints of the main GUI panel.
In the panel used in the PAGE_START, 2 x FlowLayout (green), one in the LINE_START, the other in the LINE_END. (1)
In the panel in the PAGE_END, 2 x GridLayout (blue), the first a 3 x 3, the other a single column.
If the components at the top (the groups of buttons on the left & right) need to be the exact same size, also use grid layouts for them.
Related
I created two panels and a main panel. Each panel contains a very large image, and I wanted both of them to be scroll-able to see the rest of the image. But when I add the two panels in the main panel and run it, the first panel is soo big that it covers the second panel. How would I implement ScrollPane for both panels?
import java.awt.BorderLayout;
import javax.swing.*;
public class BoardFrame extends JFrame {
JPanel mainPanel = new JPanel(new BorderLayout());
JLabel jLabel = new JLabel();
JPanel jPanelNorth = new JPanel();
JScrollPane scrollPane = new JScrollPane();
JLabel jLabel2 = new JLabel();
JPanel jPanelSouth = new JPanel();
JScrollPane scrollPane2 = new JScrollPane();
public BoardFrame() {
jLabel.setIcon(new ImageIcon("an image here"));
jPanelNorth.add(jLabel);
jLabel2.setIcon(new ImageIcon("an image here"));
jPanelSouth.add(jLabel2);
mainPanel.add(jPanelNorth, BorderLayout.NORTH);
mainPanel.add(jPanelSouth, BorderLayout.SOUTH);
add(mainPanel);
//where would I use this?
//scrollPane.setViewportView();
}
}
Each panel contains a very large image>
//JPanel mainPanel = new JPanel(new BorderLayout());
JPanel mainPanel = new JPanel(new GridLayout(0, 1));
You may want to use a GridLayout so that each scroll pane takes up half the frame so as much of each image as possible is displayed.
//JScrollPane scrollPane = new JScrollPane();
JScrollPane scrollPane2 = new JScrollPane(jPanelNorth);
The easiest way to use the scroll pane is to create the scrollpane with the component you want displayed and the scrollpane will add the component to the viewport for you.
//mainPanel.add(jPanelNorth, BorderLayout.NORTH);
mainPanel.add(scrollPane); // don't need the constraint when using GridLayout.
Then you add the scrollPane to the main panel, since the scrollpane contains the panel with the image.
it seems to use grid layout is much better than using border layout , in this case :
import java.awt.BorderLayout;
import javax.swing.*;
public class BoardFrame extends JFrame {
//1. use GridLayout with 2 rows and 1 column .
JPanel mainPanel = new JPanel(new GridLayout(2,1));
JLabel jLabel = new JLabel();
JPanel jPanelNorth = new JPanel();
JScrollPane scrollPane = new JScrollPane();
JLabel jLabel2 = new JLabel();
JPanel jPanelSouth = new JPanel();
JScrollPane scrollPane2 = new JScrollPane();
public BoardFrame() {
jLabel.setIcon(new ImageIcon("an image here"));
jPanelNorth.add(jLabel);
jLabel2.setIcon(new ImageIcon("an image here"));
jPanelSouth.add(jLabel2);
//2.you should place .setViewportView() here :
scrollPane.setViewportView(jPanelNorth);
scrollPane2.setViewportView(jPanelSouth);
mainPanel.add(scrollPane);//is in the top ("North")
mainPanel.add(scrollPane2);//next ("South")
//3.use setContentPane instead of add()
setContentPane(mainPanel);
}
}
So I'm trying to create a gui, I've tinkered with gui's before in java but I'm still new to them. So my issued here is that my JLabels (butLabel & cbLabel) are filled with buttons and checkboxes. Sadly my JFrame will only show whichever is set to the BorderLayout.CENTER. NORTH & SOUTH don't ever show, even if I only set the butLabel to SOUTH and don't even use the cbLabel. What am I overlooking?? It's much appreciated, thanks!
public class mainWindow
{
JFrame frame = new JFrame("Main Window");
JLabel butLabel = new JLabel();
JLabel cbLabel = new JLabel();
JButton showBut = new JButton("Show");
JButton exitBut = new JButton("Exit");
JButton addBut = new JButton("Add");
JButton remBut = new JButton("Remove");
JCheckBox aCB = new JCheckBox("Airplane");
JCheckBox bCB = new JCheckBox("Boat");
JCheckBox cCB = new JCheckBox("Clock");
public mainWindow()
{
frame.setLayout(new BorderLayout()); //I know this is set by default to BorderLayout but I just did it when I was out of options to try.
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setMinimumSize(new Dimension(360, 480));
butLabel.setLayout(new GridLayout(1,4));
cbLabel.setLayout(new GridLayout(2, 2));
butLabel.add(showBut);
butLabel.add(exitBut);
butLabel.add(addBut);
butLabel.add(remBut);
cbLabel.add(aCB);
cbLabel.add(bCB);
cbLabel.add(cCB);
frame.add(butLabel, BorderLayout.CENTER);
frame.add(cbLabel, BorderLayout.NORTH);
}
public void setVisible()
{
butLabel.setVisible(true);//Didn't think I needed butLabel.setVisible or the cbLabel.setVisible but
cbLabel.setVisible(true);//again I was trying things that I thought might make sense.
frame.setVisible(true);
}
}
do not use Label for grouping elements, use JPanel instead
I have tried replace all
Label
with
Panel
it works
The button is supposed to extend from the top textfield to the bottom button and to each side of the number pad. For some reason the center panel is not taking up this space. Here is my code:
package activeLearningAssignment5;
import java.awt.*;
import javax.swing.*;
public class FrameExample extends JFrame {
public FrameExample() {
//create font
Font font1 = new Font("Times New Roman", Font.ITALIC, 20);
//Create Panel for right side letters
JPanel p1 = new JPanel();
p1.setLayout(new GridLayout(4, 3));
//Add buttons to panel
for (char ch = 'a'; ch <= 'l'; ch++) {
p1.add(new JButton("" + ch));
}
//Create panel/add button for center
JPanel p2 = new JPanel();
p2.add(new JButton("This is the center"));
//Create Panel/add button for west. Simple way to make buttons but won't actually be usable
JPanel p3 = new JPanel();
for (char ch = 'l'; ch <= 'o'; ch++) {
p3.add(new JButton("" + ch));
}
//Creates the textfield and sets the font
JTextField JText = new JTextField("This is my First GUI Program");
JText.setFont(font1);
//Click me or else button
JButton JClick = new JButton("Click me or else!");
// add stuff to frame
add(p1, BorderLayout.EAST);
add(p2, BorderLayout.CENTER);
add(p3, BorderLayout.WEST);
add(JClick, BorderLayout.SOUTH);
add(JText, BorderLayout.NORTH);
}
public static void main(String[] args) {
JFrame frame = new FrameExample();
frame.setTitle("Learning Assignment 5");
frame.setSize(700, 250);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
}
Sorry the spacing got messed up a bit.
Thanks!
Your p2 JPanel is being stretched out fine! But that is not being reflected in the button that is inside it. Either get rid of p2 and add the button directly, or set the layout for JPanel to BorderLayout like so :
// Create panel/add button for center
JPanel p2 = new JPanel(new BorderLayout());
I am trying to encapsulate JTextPane within JButtons, within JPanel, within JScrollPane & within JPanel again, where the entire panel is returned. The following is my code, however it displays buttons horizontally. How and where can I make those buttons fit into the panel? Answer may seem obvious but I still cannot get it right.
JTextPane tp = new JTextPane();
JScrollPane sp = new JScrollPane();
SimpleAttributeSet attribs = new SimpleAttributeSet();
StyleConstants.setAlignment(attribs , StyleConstants.ALIGN_CENTER);
tp.setParagraphAttributes(attribs,true);
tp.setEditable(false);
tp.setOpaque(false);
tp.setPreferredSize(new Dimension (100,100));
JButton jb = new JButton();
jb.setPreferredSize(new Dimension(100, 100));
//jb.setHorizontalAlignment(SwingConstants.CENTER);
tp.setText(food_Name);
jb.add(tp);
panel1.add(sp);
sp.add(panel2);
panel2.add(jb);
As has been suggested you need to use a layout manager.
FlowLayout -placed left–to–right then top–to–bottom (default)
BorderLayout -five fixed positions, north, south, east, west, centre
BoxLayout - in a single row or column
GridLayout -within cells of a grid with standard sized rows and columns
example code for border layout - check out layout manager on Java API for others
public MySupportPanel () { // constructor
setLayout( new BorderLayout() );
JButton b1 = new JButton("Button 1");
JButton b2 = new JButton("Button 2");
JButton b3 = new JButton("Button 3");
JButton b4 = new JButton("Button 4");
JButton b5 = new JButton("Button 5");
add(b1, BorderLayout.CENTER);
add(b2, BorderLayout.NORTH);
add(b3, BorderLayout.SOUTH);
add(b4, BorderLayout.EAST);
add(b5, BorderLayout.WEST);
}
Which is the most suitable layout for this interface? I have tried FlowLayout, but can't get the SUBMIT button place in the correct position.
I recommend miglayout, it is very easy to use and it always handles, what I am throwing at it.
In this case, I would create two panels. The first panel has a "wrap 3" constraint as a parameter for the miglayout constructor, the second only has one button, which is added with a "alignx center, aligny center" constraint.
Here is an example:
public class TestApplet extends JApplet{
#Override
public void init() {
super.init();
setSize(400, 300);
setLayout(new MigLayout("fill, insets 0"));
JPanel leftPanel = new JPanel(new MigLayout("wrap 3"));
for (int i = 0; i < 9; i++) {
leftPanel.add(new JButton(""+i));
}
add(leftPanel);
JPanel rightPanel = new JPanel(new MigLayout());
rightPanel.add(new JButton("submit"), "alignx center, aligny center");
add(rightPanel);
}
}
You only have to sort the numbers on the buttons by your needs.
First Grid Layout with two columns.
in first column add panal1 and in second add submit with BorderLayout.CENTER.
In that panal1 you can use 3x3 grid layout.
I tried this out on a JFrame and you can do the same in your applet.
Create a Grid of One row two columns.
Create a Box Layout on the second Panel with Page Axis and then ensure you have vertical glues with button in center.
Create a Grid of 3x3 and add buttons.
Code sample:
JFrame frame = new JFrame();
frame.setLayout(new GridLayout(1, 2));
JPanel leftPanel = new JPanel(new GridLayout(3, 3));
for(int i=0;i<9;i++)
{
JButton button = new JButton();
button.setText(i+"");
leftPanel.add(button);
}
frame.add(leftPanel);
JPanel rightPanel = new JPanel();
BoxLayout layout = new BoxLayout(rightPanel, BoxLayout.PAGE_AXIS);
rightPanel.setLayout(layout);
JButton button = new JButton("Submit");
button.setAlignmentX(
Component.CENTER_ALIGNMENT);
rightPanel.add(Box.createVerticalGlue()); //Ensure this order
rightPanel.add(button);
rightPanel.add(Box.createVerticalGlue());
frame.add(rightPanel);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);