I have a JPanel (extended by my GeneralOptions class) implemented as:
public GeneralOptions() {
setLayout(new MigLayout("", "[grow]", "[][][][]"));
JLabel lblWyzywienie = new JLabel("Food");
add(lblWyzywienie, "cell 0 0");
JCheckBox chckbxHb = new JCheckBox("HB");
add(chckbxHb, "cell 0 1");
JCheckBox chckbxBb = new JCheckBox("BB");
add(chckbxBb, "cell 0 1,alignx trailing");
JCheckBox chckbxAll = new JCheckBox("All Inclusive");
add(chckbxAll, "cell 0 1,alignx trailing");
}
As you can see, there is a list of checkboxes in one cell of MigLayout. This JPanel in placed as left panel of SplitPanel component, so its width is resizable.
What I want to achieve is to force this list of checkboxes to act like "inline" html list of checkboxes. This means, that they should break line when width of panel is not enough to show them in single line.
Now I can't resize this panel below width of whole list and if init width is less than this list of checkboxes, some of them are just hidden.
Example html code
http://jsfiddle.net/
You can try to resize right panel to see what I'm talking about.
Take a look on the following discussion: http://migcalendar.com/forums/viewtopic.php?f=8&t=2393
Scroll down to see the code. He actually implemented his own layout manager that does exactly what you want.
Related
I am attempting to design a panel with MiGFormat that has a label at the top, and two buttons at the bottom - a yes/no prompt.
I achieve this closely, but the label yesOrNoText (text is "TEST") is not fully centered:
I initialize the panel containing this prompt like so:
private JPanel createYesNoPrompt() {
JPanel panel = new JPanel(new MigLayout());
panel.setBorder(BorderFactory.createLineBorder(Color.red));
JButton yesButton = new JButton("Yes");
JButton noButton = new JButton("No");
yesOrNoText = new JLabel();
yesOrNoText.setText("TEST");
yesOrNoText.setFont(panel.getFont().deriveFont(Font.BOLD, 30f));
yesOrNoText.setHorizontalAlignment(SwingConstants.CENTER);
Dimension dimension = new Dimension(500, 125);
Font font = panel.getFont().deriveFont(Font.BOLD, 20f);
yesButton.setFont(font);
yesButton.setBackground(new Color(35, 138, 35));
yesButton.setPreferredSize(dimension);
noButton.setFont(font);
noButton.setBackground(new Color(183, 19, 19));
noButton.setPreferredSize(dimension);
yesButton.addActionListener(e -> isYes = true);
noButton.addActionListener(e -> isYes = false);
panel.add(yesOrNoText, "wrap, dock center");
panel.add(yesButton);
panel.add(noButton);
return panel;
}
Then, I add it to gamePanel, then gamePanel to mainPanel, then mainPanel to the frame.
gamePanel.add(YesOrNoPanel, "align center");
mainPanel.add(gamePanel);
add(mainPanel);
I'm unsure of what would be causing yesOrNoText to not become fully centered within the YesNoPanel. Please let me know if I need to clarify anything!
Thank you.
I needed to make the add call for the yesNo label span 2 cells. By adding one component in the first row, then adding two in the next, I essentially created a 2x2 grid.
panel.add(yesOrNoText, "wrap, align center, span 2 1");
panel.add(yesButton);
panel.add(noButton);
Notice that on the first component I add yesOrNoText I use span to tell MiGFormat to take up two cells for this component. I can then center that with the remaining two components because it becomes the only component in the row.
I'm trying Swing programming but I can't do what I want.
I would like to place a top bar button with 2 lines of button but I just have 1 line in my case.
Here is my code:
Container contentPane = getContentPane();
contentPane.setLayout(new BorderLayout());
setMinimumSize(new Dimension(1000,500));
setMaximumSize(new Dimension(1000,500));
JPanel panelButton = new JPanel();
JPanel panelTopButton = new JPanel();
JPanel panelBottomButton = new JPanel();
panelTopButton.add(dashboard);
panelTopButton.add(journal);
panelTopButton.add(myPlans);
panelTopButton.add(myFavorites);
panelTopButton.add(shoppingCart);
panelBottomButton.add(profile);
panelBottomButton.add(notifications);
panelButton.add(panelTopButton, BorderLayout.NORTH);
panelButton.add(panelBottomButton, BorderLayout.SOUTH);
contentPane.add(panelButton,BorderLayout.NORTH);
//Display
setSize(400,120);
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
I have this
And I want this
Can somebody help me?
You need one panel for each line.
Try to do this:
JPanel panelButtonsL1 = new JPanel();
JPanel panelButtonsL2 = new JPanel();
panelButtonsL1.add(dashboard);
panelButtonsL1.add(journal);
panelButtonsL1.add(myPlans);
panelButtonsL1.add(myFavorites);
panelButtonsL1.add(shoppingCart);
panelButtonsL2.add(profile);
panelButtonsL2.add(notifications);
The default layour of JPanel is FlowLayout. Bear in mind that layout is very important to work with swing component disposition.
Define the bottom panel as GridLayout.
JPanel panelButton = new JPanel(new GridLayout(2, 1)); // 2 rows x 1 column
panelButton.add(panelButtonsL1);
panelButton.add(panelButtonsL2);
Details of GridLayout you can find on API.
You can achieve that using a GridLayout: assign a GridLayout to panelButton with two rows and one column, and then add the two panels to it.
According to what you want there is a simpler alternative by continue using the default FlowLayout from the panel. It is more appropriate than using GridLayout since you wanted the last 2 buttons to move to the next row and center itself.
If you use GridLayout, the buttons at the next row are likely going to be directly below one of the buttons above. Here are 2 ways to get what you want.
Method 1. Reduce the width of the main panel holding your buttons:
Dosing so, you will have to add the main panel using BorderLayout.CENTER.
Method 2. Add the buttons to a sub-panel of smaller width and add it to the main panel. All your buttons will be added to the smaller sub-panel:
MigLayout supports adding multiple components to a dock. I want to add multiple components to the west dock, from top to bottom. However, it seems as if MigLayout can only manage a horizontal layout inside a dock. I tried many parameters (e.g., wrap, growy, flowy) without success.
So, is there any possibility to wrap or set a vertical flow inside a dock? Or is this not possible with MigLayout itself, but only by using an extra sidepanel-component?
Here an example of the unwanted horizontal layout inside the west dock:
How to get the red, green, blue components below each other? Here is the code:
import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.JTextField;
import net.miginfocom.swing.MigLayout;
public class MigTest extends JFrame {
MigTest() {
setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
setSize(800, 600);
setLayout(new MigLayout("fill"));
JTextField dockW1 = new JTextField("West 1"); dockW1.setBackground(Color.red);
JTextField dockW2 = new JTextField("West 2"); dockW2.setBackground(Color.green);
JTextField dockW3 = new JTextField("West 3"); dockW3.setBackground(Color.blue);
JTextField center = new JTextField("Center"); center.setBackground(Color.lightGray);
add(center, "grow");
// HOW TO LAYOUT THESE COMPONENTS VERTICALLY INSIDE WEST DOCK ?
add(dockW1, "dock west, wrap, growy, flowy");
add(dockW2, "dock west, wrap, growy, flowy");
add(dockW3, "dock west, wrap, growy, flowy");
setVisible(true);
}
public static void main(String[] args) {
new MigTest();
}
}
[edit]: Note that I do not want to put dockW1, dockW2,dockW3, and center into a single grid, since I plan to apply a complex layout in the center area, independently of the side-area, which is the reason why the docking feature was invented :)
My first suggestion is to change the constructor of the MigLayout to
new MigLayout("fill","[][grow]","[][][]")
Then change your add statement to :
add(center, "cell 1 0 1 3, grow");
add(dockW1, "cell 0 0");
add(dockW2, "cell 0 1");
add(dockW3, "cell 0 2");
Edit
After you edited the question, I would suggest you to create a new JPanel object say dockWest and add the components dockW1, dockW2 and dockW3 to dockWest and finally dock the dockWest to the west of the current JFrame like:
JPanel dockWest = new JPanel();
dockWest.setLayout(new MigLayout("fill", "[]", "[grow][grow][grow]");
dockWest.add(dockW1, "cell 0 0");
dockWest.add(dockW2, "cell 0 1");
dockWest.add(dockW3, "cell 0 2");
add(dockWest, "dock west, growy");
IMHO the side-panel is easier option with the same result.
You can also try using cell coordinates as written on page 2 in Quick guide.
This is my code:
frame2 = new JFrame("Confirmation");
frame2.setLayout(new BorderLayout());
JRadioButton y,n,c;
panel = new JPanel();
ButtonGroup buttonGroup = new ButtonGroup();
y = new JRadioButton("Add");
buttonGroup.add(y);
panel.add(y);
n = new JRadioButton("Update");
buttonGroup.add(n);
panel.add(n);
c = new JRadioButton("Delete");
buttonGroup.add(c);
panel.add(c);
y.setSelected(true);
b1=new JButton();
b1.setBounds(300,100,2,2);
b1.setIcon(new ImageIcon(searchresult.class.getResource("/images/yes.png")));
b2=new JButton();
b2.setBounds(100,10,2,2);
b2.setIcon(new ImageIcon(searchresult.class.getResource("/images/no.png")));
panel.add(b1);
panel.add(b2);
frame2.add(panel);
frame2.setSize(182,150);
frame2.setVisible(true);
Right now this gives me the following output
whereas I want this
with an increased width but I am not able to do it..Could anyone provide me with further details that could help me
JPanel uses a FlowLayout by default, which, as the name suggests, layouts out components one after the after, in a flow...
Two choices. Use a compound layout, using BorderLayout as the base, create JPanel that uses a GridLayout for the radio buttons (using 0 rows and 1 column), add this to the CENTER position of the base panel.
Create a second JPanel using a FlowLayout and your buttons to it. Add this to the SOUTH position of the base pane.
Second choice is to use a GridBagLayout
Take a look at Laying out Components within a Container for more details
I have this layout that I need to program for an assignment and this is the first time I have used layout managers in the GUI so I'm having problems getting the layout to match. I need your help
I Have two tabs labeled Account creation and Account transfer (those are ok) what I need is to have the JLabel (Account ID) and the first text field in one line then the next JLabel (Amount) and text field in the line under the first. Under that needs to be the JButton Centered (Create an Account). Lastly the JTextArea (No account) needs to be in a column to the right in the empty space separate from the labels, text fields, and button.
Here is the code I have started with:
public CreatePanel(Vector accountList, TransferPanel transferPanel)
{
this.accountList = accountList;
this.transferPanel = transferPanel;
JLabel l1 = new JLabel("Account ID");
JTextField t1 = new JTextField();
JLabel l2 = new JLabel("Amount");
JTextField t2 = new JTextField();
JButton b1 = new JButton("Create an Account");
JTextArea a1 = new JTextArea("No Account");
JPanel panel1 = new JPanel();
panel1.setLayout(new GridLayout(2,3));
panel1.add(l1);
panel1.add(t1);
panel1.add(l2);
panel1.add(t2);
panel1.add(b1, BorderLayout.SOUTH);
b1.setVerticalAlignment(JLabel.CENTER);
JPanel panel2 = new JPanel();
panel2.add(a1);
a1.setSize(200, 300);
add(panel1);
add(panel2);
}
This is how I would approach it. Instead of adding the outer panel to a frame though, it would be added to a tab of the tabbed pane.
The above is an example of a nested or compound layout. The titled borders show the layouts used and the arguments (if any) used to construct them.
The size of the button is suggested by the content (the text). The sizes of the text fields and text area is suggested in the constructor (which itself has been included as the text value).
To get the TALL effect in the text fields, set an HUGE font but use less columns for the constructor.
See also
Another nested layout.
GridBagLayout is the most powerful Layout that you can use to easily implement grid-like displays. It's a layout with n rows and m columns where each cell is customizable independently of the others in several aspects. In this layout you have to attach a GridBagConstraints object to each panel.add(JComponent, Constraints) as constraints. In the tutorial it's clearly specified what is customizable. It might look a little harsh at the beginning but once you get the hang of it it's great. It's powerful and flexible and you don't have to worry about the uncustomizable restrictions you might encounter with other Layouts.
In your layout, the most inconvenient thing I see is having the "Account ID" label aligned by its center with the TextField AND with the empty space over both of them. It would be easier if the label was aligned with the bottom of the TextField. To solve this I'll assume that the Label and the TextField are inside a panel I constructed beforehand that aligns each other correctly (easily with BorderLayout or GridBagLayout... or anything really) and I'll just place the panels in the Layout.
Then I see this Layout as a GridBagLayout with 3 rows and 2 columns that looks like this:
This is an overview of how I'd put the constraints to specify each component in the layout.
Panel 1 (Account ID Label + TextField)
gridx = 0
gridy = 0
weighty = 0.5
weightx = 0.5
anchor = PAGE_END
fill = HORIZONTAL
Panel 2 (Amount Label + TextField)
gridx = 0
gridy = 1
weighty = 0.0
fill = HORIZONTAL
Button
gridx = 0
gridy = 2
anchor = PAGE_START
weighty = 0.5
TextArea
gridx = 1
gridy = 0
gridheight = 3
weightx = 0.5
fill = BOTH
There is a couple of details I overlooked but the core issues can be aproached with these constraints. The least obvious thing to learn about the GridBagLayout is how do weights work in complex cases, for example what happens when there are several different weightx values in the same column. Does it count the max? or the sum?...
For the sake of discussion, you could avoid having those panels using an extra initial row with an invisible component with weighty > 0 and then having 2 columns: one for the JLabels and the other one for the JTextFields, with the apropiate anchors; the button would have gridwith = 2... but that's totally unnecesary, go for the two auxiliar panels.