Items in GridBagLayout does not properly align - java

I'm trying to align 3 items in a GridBagLayout, 2 of the items being on top and 1 item at bottom. Both Items should be the same Size. I have tried to achieve this with BorderLayout and GridBagLayout but no luck.
This is my attempt with GridBagLayout as you can see they are not properly aligned. This is what I tried to do.
Add first item
Set the x to 1
Add second item
Set the y to 1
Add the last item
I was hoping this would work because It doesn't make sense to me why this would not work, Here is the code for it.
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
JTextField oldPkg = new JTextField();
container.add(oldPkg, gbc);
gbc.gridx = 1;
JTextField newPkg = new JTextField();
gbc.gridy = 1;
JTextField apkPath = new JTextField();
container.add(apkPath, gbc);
The result I want to achieve is
I have achieved it with FlowLayout but it doesn't resign packed when the frame is resized, and the bottom bar is a bit big.
How can I achieve this with GridBagLayout or any other layout so it remains the same on size changes?

Sometimes, you need to set back and try a different approach. Maybe starting with and piece of paper, where you can draw the layout and plot out the constraints.
This will lead you to understanding that apkPath needs to start at x of 0 and "span" two columns.
Currently apkPath is using the same x position as newPkg, you need to change it before using it again.
gbc.gridy = 1;
gbc.gridx = 0;
JTextField apkPath = new JTextField();
container.add(apkPath, gbc);
Okay, but now it's the same size as oldPkg, we need to tell GridBagLayout we want to span multiple columns
gbc.gridy = 1;
gbc.gridx = 0;
gbc.gridwidth = 2;
JTextField apkPath = new JTextField();
container.add(apkPath, gbc);
should now allow the textfield to flow over both columns
I might suggest having a look at How to Use GridBagLayout for more details

Slightly off topic:
Might I just suggest not bothering with 90% of the inbuilt layouts and just going with MigLayout.
There is a MigLayout core jar, and MigLayout swing jar. (Don't take the MigLayout SWT jar by mistake, and also don't use the SWT versions in the import statements).
I guess the licence is liberal. But, you can check whether it fits your needs.
http://www.miglayout.com/
(Just a happy user. Not affiliated)
This does a lot in just a few lines:
public class LayoutAnswer extends JFrame {
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
LayoutAnswer window = new LayoutAnswer();
window.init();
window.pack();
window.setVisible(true);
window.setLocationRelativeTo(null);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
});
}
private JPanel panel = new JPanel( new MigLayout("insets 10","[300::, grow][400::, grow]","[100:150:200][100:150:200]") );
private JLabel lbl1 = new JLabel("One");
private JLabel lbl2 = new JLabel("Two");
private JLabel lbl3 = new JLabel("Three");
public void init() {
add(panel, BorderLayout.CENTER);
panel.add(lbl1, "");
panel.add(lbl2, "wrap");
panel.add(lbl3, "span 2");
}
}

Related

GridBagLayout - Trouble placing components without anchor

I'm making an assignment planner program. For the containers (the assignments), I want to place certain components into certain places. However. I can only seem to move components around by using anchor. It seems as if my gridx and gridy do nothing. Could anyone point out my problem and possibly offer some suggestions. My code and a picture of the intended final result are provided below.
Code:
import javax.swing.*;
import java.awt.*;
import static java.awt.GridBagConstraints.*;
//import java.util.ArrayList;
public class MyWindow
{
private final JFrame frame = new JFrame();
private final int WINDOW_WIDTH = 500, WINDOW_DEPTH = 500;
private JPanel panel;
private JPanel toDoList, completed;
private int scrollPaneValue = 110;
//ArrayList<JFrame> frame = new ArrayList<>();
public MyWindow()
{
frame.setTitle("Assignment Planner");
this.contents();
}
private void contents()//make a border above each panel stating "TO-DO" or "COMPLETED"
{//use an arraylist to create containers ArrayList<JPanel> container = new ArrayList<>();
frame.setSize(WINDOW_WIDTH, WINDOW_DEPTH);
panel = new JPanel(new GridLayout(2, 1));
toDoList = new JPanel();
toDoList.setLayout(new /*GridLayout(0,1,5,5)*/BoxLayout(toDoList, BoxLayout.PAGE_AXIS));
toDoList.setPreferredSize(new Dimension(250, 110));
panel.add(toDoList);
completed = new JPanel();
//panelCompleted.setLayout(new GridLayout(0, 1)); //fix like one above
panel.add(completed);
JScrollPane scroll = new JScrollPane(toDoList);
panel.add(scroll); //scroll panes for both panels
JScrollPane scroll2 = new JScrollPane(completed);
panel.add(scroll2);
toDoList.add(Box.createRigidArea(new Dimension(0,1)));
toDoList.add(assignment());
scrollPaneValue += 110; //add these 2 lines of code, beginning after the first two containers to increase jscrollpane
toDoList.setPreferredSize(new Dimension(250, scrollPaneValue));
//toDoList.revalidate(); may not even need
frame.getContentPane().add(panel, BorderLayout.CENTER);//add the panel in the JFrame's content pane in the center
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
JPanel assignment()
{
JPanel container = new JPanel(new GridBagLayout());
container.setMaximumSize(new Dimension(500,100));
GridBagConstraints cDefault = new GridBagConstraints();
cDefault.weightx = 0.5;
cDefault.insets = new Insets(5,5,5,5);
JCheckBox cb;
JLabel dueDate, description;
JButton edit;
cb = new JCheckBox();
GridBagConstraints cCb = new GridBagConstraints();
cCb.weightx = 0.5;
cCb.weighty = 1;
cCb.fill = GridBagConstraints.NONE;//originally none
cCb.gridx = 0;
cCb.gridy = 0;
//cCb.gridwidth = 1;
//cCb.gridheight = 1;
cCb.anchor = FIRST_LINE_START;//may not need, plus needs static import
cCb.insets = cDefault.insets;
cb.setBackground(Color.RED);
container.add(cb, cCb);
dueDate = new JLabel("Due Date");
GridBagConstraints cDueDate = new GridBagConstraints();
cDueDate.gridx = 1;
cDueDate.gridy = 0;
cDueDate.gridwidth = 2;
//cDueDate.fill = GridBagConstraints.HORIZONTAL;
cDueDate.anchor = PAGE_START;
dueDate.setBackground(Color.BLUE);
//cDueDate.anchor = FIRST_LINE_START;
container.add(dueDate, cDueDate);
edit = new JButton("Edit");
GridBagConstraints e = new GridBagConstraints();
e.gridx = 4;
e.gridy = 0;
e.anchor = GridBagConstraints.FIRST_LINE_END;
e.insets = cDefault.insets;
edit.setBackground(Color.GREEN);
container.add(edit, e);
description = new JLabel("Description...");
GridBagConstraints d = new GridBagConstraints();
d.gridx = 1;
d.gridy = 3;
d.gridwidth = 3;
d.fill = GridBagConstraints.HORIZONTAL;
description.setBackground(Color.YELLOW);
container.add(description, d);
container.setBackground(Color.LIGHT_GRAY);//does no fill area behind checkbox
return container;
}
}
What I want the container to look like:
This just concerns my lack of knowledge with GridBagLayout.
Start with the section from the Swing tutorial on How to Use GridBagLayout for working examples and an explanation of all the constraints.
A few things about the code:
//container.setMaximumSize(new Dimension(500,100));
Don't set a maximum size. The layout manager will determine the size of the panel.
//cCb.weightx = 0.5;
//cCb.weighty = 1;
The above code assigns all the extra space of the panel to the check box, since it is the only component with a weightx/y constraint. I doubt you want that. Try commenting out those statements to see what happens.
dueDate.setOpaque(true);
dueDate.setBackground(Color.BLUE);
Yes, that is a good idea to set a background to see the actual size of the component. Problem is a JLabel is transparent by default so the background is never painted. You need need to make your labels opaque if you want to see the background. Another approach to help with debugging is to add LineBorder to the label, then you don't need to worry about transparency.
//e.gridx = 4;
e.gridx = 3;
Be careful with the grid value. You can't just use an value. The first component has a width of 1 and the second a width of 2, so the this component should start at 3.
I can only seem to move components around by using anchor
Actually, I don't this the anchor is doing anything. As I understand it, the anchor only has meaning when the component size is smaller than the grid size. In your original code, only the check box used weightx/y values, so that is the only component where this is true.
The GridBagLayout is one of the most complicated (and flexible) layout manager to use, so yes it takes practice to learn how to use it. Reread the tutorial and play with the constraints.

JScrollPane can resize smaller, but JTextArea does not

I have a window containing a JScrollArea, which contains a JPanel which contains a JTextArea. When I resize the window to make it larger, the layout updates perfectly, but if I make the window smaller, the JPanel does not shrink its contents. I attempted to add a ComponentListener on the JScrollArea to resize the JPanel based on the new size of the viewport, but this seems to defeat the purpose of the vertical scroll bar.
UPDATE: The idea here is that the JScrollArea will contain a JPanel (since it can only contain one component for its viewport), and within that JPanel I will be adding multiple JPanels containing components that describe processes that are running to the user. Since there could be any number of these processes running, I need to have some kind of scroll bar functionality available. Hence the component hierarchy I'm using below.
The desired behavior here is that the window can be resized larger or smaller and the text area will wrap its contents accordingly, and a vertical scroll bar will appear if the contents of the JPanel are larger vertically than the window. Any suggestions?
public class TestWindow extends JFrame {
JPanel scrollContentPanel;
JScrollPane scrollPane;
public TestWindow() {
setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
JPanel mainPanel = new JPanel();
this.setContentPane(mainPanel);
GridBagLayout mainPanelLayout = new GridBagLayout();
mainPanel.setLayout(mainPanelLayout);
scrollContentPanel = new JPanel();
scrollPane = new JScrollPane();
scrollPane.setViewportView(scrollContentPanel);
scrollPane.setHorizontalScrollBarPolicy(ScrollPaneConstants.HORIZONTAL_SCROLLBAR_NEVER);
GridBagLayout scrollContentLayout = new GridBagLayout();
scrollContentPanel.setLayout(scrollContentLayout);
JPanel contentEntry = new JPanel();
GridBagConstraints contentEntryConstraints = new GridBagConstraints();
contentEntryConstraints.weightx = 1.0;
contentEntryConstraints.insets = new Insets(3, 3, 5, 3);
contentEntryConstraints.fill = GridBagConstraints.BOTH;
contentEntryConstraints.gridx = 0;
contentEntryConstraints.gridy = 1;
scrollContentPanel.add(contentEntry, contentEntryConstraints);
GridBagLayout contentEntryLayout = new GridBagLayout();
contentEntry.setLayout(contentEntryLayout);
JTextArea descTextArea = new JTextArea();
descTextArea.setEditable(false);
descTextArea.setFont(new Font("Dialog", Font.PLAIN, 11));
descTextArea.setText("This is a description of an arbitrary unspecified length that may easily span multiple lines without any breaks in-between. Therefore it is necessary that the description automatically wrap as appropriate.");
descTextArea.setLineWrap(true);
descTextArea.setWrapStyleWord(true);
GridBagConstraints descTextAreaConstraints = new GridBagConstraints();
descTextAreaConstraints.weightx = 1.0;
descTextAreaConstraints.weighty = 1.0;
descTextAreaConstraints.insets = new Insets(0, 0, 3, 0);
descTextAreaConstraints.fill = GridBagConstraints.BOTH;
descTextAreaConstraints.gridx = 0;
descTextAreaConstraints.gridy = 1;
descTextAreaConstraints.gridwidth = 2;
contentEntry.add(descTextArea, descTextAreaConstraints);
GridBagConstraints scrollPaneConstraints = new GridBagConstraints();
scrollPaneConstraints.insets = new Insets(0, 0, 5, 0);
scrollPaneConstraints.weightx = 1.0;
scrollPaneConstraints.weighty = 1.0;
scrollPaneConstraints.fill = GridBagConstraints.BOTH;
scrollPaneConstraints.gridx = 0;
scrollPaneConstraints.gridy = 0;
mainPanel.add(scrollPane, scrollPaneConstraints);
scrollPane.addComponentListener(new ComponentAdapter() {
#Override
public void componentResized(ComponentEvent evt) {
super.componentResized(evt);
scrollContentPanel.setPreferredSize(scrollPane.getViewportBorderBounds().getSize());
scrollContentPanel.validate();
}
});
pack();
}
public static void main(String[] args) {
TestWindow wnd = new TestWindow();
wnd.setVisible(true);
}
}
JTextArea should be placed directly into the JScrollPane, as long as that is the component your are trying to scroll. If there are other items you want to scroll with it (and hence the intermediate JPanel), then you might want to consider making that JPanel implement Scrollable so that the JScrollPane knows what to do with it. JTextArea implements Scrollable, which is why it works with JScrollPane out of the box.
no idea about your goal without detailed description, explanation
JTextArea should be placed in JScrollPane
set intial setPreferredSize for JTextArea, e.g. JTextArea(5, 10)
you are put three JPanels (is there reason ??? for this components hierarchy) one to JScrollPane, JTextArea is placed directly into JPanel instead of to the JScrollPane
then usage of ComponentListener is useless and contraproductive

Controlling textbox height in a Java Swing layout

I have a form, and when it renders using pack, the textboxes have a nice default height. But when I resize it - or in this case, if I override getPreferredSize to make it larger on startup - the textboxes resize proportionally.
I keep going in circles trying to understand the layout manager classes... the related questions that are coming up seem like they're really close, but I'm just not following them!
In the class below, if I comment out the getPreferredSize overload, the textboxes are sized by the system to be "just right". Add getPreferredSize back, or resize manually, and the textbox proportions expand/contract with the form. There's got to be something simple I'm missing!
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.TitledBorder;
public class TestTextBox extends JFrame {
private JTextField jtfRate = new JTextField();//jtfAnnualInterestRate
private JButton jbtComputeLoan = new JButton("Compute Sentence");
// Constructor buids the panel
public TestTextBox() {
// a panel with the fields
JPanel p1 = new JPanel(new GridLayout(5, 2));
p1.add(new JLabel("Annual Interest Rate"));
p1.add(jtfRate);
p1.setBorder(new TitledBorder("This is a border with enough text that I want to see it"));
// a panel with the button
JPanel p2 = new JPanel(new FlowLayout(FlowLayout.CENTER));
p2.add(jbtComputeLoan);
// Put the panels on the frame
add(p1, BorderLayout.CENTER);
add(p2, BorderLayout.SOUTH);
}
#Override
public Dimension getPreferredSize() {
// This will help Pack to pack it up better
return new Dimension(600, 300);
}
public static void main(String[] args) {
TestTextBox jailCell = new TestTextBox();
jailCell.pack(); // Arrange controls compactly based on their properties
jailCell.setTitle("Calculate your Sentence");
jailCell.setLocationRelativeTo(null); // sure, center it, whatever
jailCell.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
jailCell.setVisible(true);
}
}
Obviously, this is a case for a GUI layout tool. But this isn't production code, this is a Java class in which I'm trying my best to learn why it works - that way I'll know what the GUI tools are doing.
Update: Thanks to the answer I got, I was able to figure out the basics of the GridBag. It seems pretty closely related to HTML <table>s. It took much longer than it should have, mostly because I kept forgetting , c); to apply the GridBagConstraints to the control! Here's a sample of what the relatively simple add above turned into:
GridBagConstraints c = new GridBagConstraints();
c.fill = GridBagConstraints.HORIZONTAL;
c.gridx = 0;
c.gridy = 0;
p1.add(new JLabel("Annual Interest Rate"), c);
c = new GridBagConstraints();
c.fill = GridBagConstraints.HORIZONTAL;
c.gridx = 1;
c.gridy = 0;
c.weightx = 0.25;
p1.add(jtfRate, c);
The default behaviour of GridLayout is to provide each component with equal amounts of available space. This means, as you make the component larger, they will get bigger, as you make it smaller, the will get smaller.
You could use a GridBagLayout instead, which will allow you to layout your components in a grid pattern but control how much of the cell they should occupy...
Take a look at How to use GridBagLayout for more details...

Confusion about Layout Managers to use

I am creating a simple game using Java. I have created the game's menu using JFrame. I am having confusion about what layouts to be used to place the Menu Buttons(Start,High Scores,Instructions,Exit) at the center. I have an approach in mind that is :
Creating a grid layout of three columns and in the middle column adding a box layout(having the menu buttons) positioned at the center of this column.
Should I use this approach? if not then please tell me the solution.
Use a GridBagLayout
JButton startButton = new JButton("Start");
JButton scoreButton = new JButton("High Score");
JButton instructButton = new JButton("Instructions");
JButton exitButton = new JButton("Exit");
GridBagConstraints gbc = new GridBagConstraints();
gbc.fill = java.awt.gbc.HORIZONTAL;
gbc.insets = new java.awt.Insets(2, 2, 2, 2);
gbc.gridx = 0;
gbc.gridy = 0;
getContentPane().add(startButton, gbc);
gbc.gridy = 1;
getContentPane().add(scoreButton, gbc);
gbc.gridy = 2;
getContentPane().add(instructButton, gbc);
gbc.gridy = 3;
getContentPane().add(exitButton, gbc);
Madprogrammer is right, use a gridbaglayout. I myself am actually too lazy to fool around with layout managers so I use WindowBuilder for Eclipse SDK. Search for it on google. WindowBuilder has bi directional code generation (ie, it can parse swing code and then generate it from what you do in the gui), and its all drag and drop.

How to use GridBagConstraints to create the layout?

I want to layout my JPane like so:
-------
| |
| |
| |
-------
| |
-------
This way, the top section is bigger/taller than the bottom section (the top section consists of another JPanel and uses the Graphics object to display an image, while the bottom section also consists of another JPanel but uses the Graphics object to draw some lines and text).
I've heard that the best way to do this was using the GridBagLayout and GridBagConstraints.
I'm trying to figure out the appropriate properties for the GridBagConstraints, and I'm having some difficulties. This is what I have so far...
For the top part, I have:
gridx = 0
gridy = 0
weighty = 1.0; // expand downwards, because the bottom should never expand in the Y direction
fill = GridBagConstraints.BOTH
For the bottom part, I have:
gridx = 0
gridy = 1
fill = GridBagConstraints.HORIZONTAL
anchor = GridBagConstraints.PAGE_END
Unfortunately, all the ends up happening is a large gray rectangle appears (I have a white background for the application) - no images load, no lines/text appear.
What should I do? What should I adjust?
I've read a few tutorials, but it just seems really confusing, I got it working in my first application, but now when I try to do this it just doesn't seem to work for me.
In general, for gridbag layout
if you want a component scale, you must give its scale direction a weight, and any sizes (width/height) you set for that direction will be ignored by the layout manager.
If you don't want a component scale, the component must have its size defined (if you want, you can dig into this topic in documents of java). In your case of the bottom panel, you need to give its, at least, a preferred height.
This can work as your expectation
pnlTop.setBackground(Color.WHITE);
pnlBottom.setBackground(Color.BLUE);
// Because you don't want the bottom panel scale, you need to give it a height.
// Because you want the bottom panel scale x, you can give it any width as the
// layout manager will ignore it.
pnlBottom.setPreferredSize(new Dimension(1, 20));
getContentPane().setLayout(new GridBagLayout());
GridBagConstraints cst = new GridBagConstraints();
cst.fill = GridBagConstraints.BOTH;
cst.gridx = 0;
cst.gridy = 0;
cst.weightx = 1.0; // --> You miss this for the top panel
cst.weighty = 1.0;
getContentPane().add(pnlTop, cst);
cst = new GridBagConstraints();
cst.fill = GridBagConstraints.HORIZONTAL;
cst.gridx = 0;
cst.gridy = 1;
cst.weightx = 1.0; // You miss this for the bottom panel
cst.weighty = 0.0;
getContentPane().add(pnlBottom, cst);
Further more, if you want to use gridbag layout, I recommend you to try the painless-gridbag library http://code.google.com/p/painless-gridbag/ (I'm the author of that library). It doesn't solve this problem for you (as your problem concerns managing component's size in gridbag layout) but it will save you a lot of typing and make your code easier to maintain
pnlBottom.setPreferredSize(new Dimension(1, 20));
PainlessGridBag gbl = new PainlessGridBag(getContentPane(), false);
gbl.row().cell(pnlTop).fillXY();
gbl.row().cell(pnlBottom).fillX();
gbl.done();
not sure from your question, maybe will help you Top at 70%, Bottom at 30%
import java.awt.*;
import javax.swing.*;
import javax.swing.border.*;
public class BorderPanels extends JFrame {
private static final long serialVersionUID = 1L;
public BorderPanels() {
getContentPane().setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
JPanel panel1 = new JPanel();
Border eBorder = BorderFactory.createEtchedBorder();
panel1.setBorder(BorderFactory.createTitledBorder(eBorder, "70pct"));
gbc.gridx = gbc.gridy = 0;
gbc.gridwidth = gbc.gridheight = 1;
gbc.fill = GridBagConstraints.BOTH;
gbc.anchor = GridBagConstraints.NORTHWEST;
gbc.weightx = gbc.weighty = 70;
getContentPane().add(panel1, gbc);
JPanel panel2 = new JPanel();
panel2.setBorder(BorderFactory.createTitledBorder(eBorder, "30pct"));
gbc.gridy = 1;
gbc.weightx = 30;
gbc.weighty = 30;
gbc.insets = new Insets(2, 2, 2, 2);
getContentPane().add(panel2, gbc);
pack();
}
public static void main(String[] args) {
new BorderPanels().setVisible(true);
}
}
If you may use 3th party libs, you may consider the FormLayout as well. It allows you to specify the height of each row, and the resize behavior.
I did not test this but
FormLayout layout = new FormLayout(
"pref", //columns
"50dlu:grow(0.2)","25dlu:grow(0.1)" //rows
);
might do the trick. More information on the syntax can be found in the JGoodies Forms pdf

Categories

Resources