Best Swing Layout for 2-dimensional grid of buttons? - java

I'm trying to create a JDialog like the Symbol dialog in Microsoft Word that you get by choosing Symbol... from the Insert menu. Basically, it's an n x m (n and m are not known until runtime) grid of small buttons. I've got a first version of this working nicely using a GridLayout. The problem is that when you resize the dialog (and there is a requirement that you should be able to resize it), the size of the buttons changes. I need the size of the buttons to remain constant.
But I want the dimensions of the grid containing the buttons to change. For example, if the dialog gets wider, but stays the same height, the number of rows should lessen, while the number of columns increases.
I've thought of a couple of ways to fix this:
When the dialog is resized, create a new GridLayout and repopulate it with the buttons. I'm going to try this and see how it looks, but it seems like a clumsy way of doing it.
Use some other type of layout such as a FlowLayout. I took a stab at this, but it put all n x m buttons in one row. I do not want to use horizontal scroll-bars and the buttons ran off the right edge. Anyway, it's supposed to be a 2-dimensional grid of buttons.
What is the best way to solve this layout problem?

Create a buttons panel with GridLayout and set a fixed size (could be calculated at runtime of course) to it. The buttons panel should be contained in a panel of BoxLayout.
Check out the BoxLayout Tutorial
Very Very basic example:
public static void main(String[] args) throws Exception
{
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel buttonPanel = new JPanel();
JPanel containerPanel = new JPanel();
buttonPanel.setLayout(new GridLayout(2,2));
buttonPanel.add(new JButton("1"));
buttonPanel.add(new JButton("2"));
buttonPanel.add(new JButton("3"));
buttonPanel.add(new JButton("4"));
buttonPanel.setPreferredSize(new Dimension(300, 400));
containerPanel.add(buttonPanel);
frame.getContentPane().add(containerPanel);
frame.pack();
frame.setVisible(true);
}

if the dialog gets wider, but stays the same height, the number of rows should lessen, while the number of columns increases.
Wrap Layout might be what you are looking for.

I had a similar issue with a single column of buttons, and found that MiGLayout (third-party, available here) was simple and effective for this. It helped both with making a grid and with setting button sizes, although it took me a day or two to get used to its syntax.
But the key is really setting button sizes; GridLayout certainly seems like the way to go for a layout that is, well, a grid. I haven't tested, but I suspect that the built-in setXSize() methods would work just as well. The GridBagLayout tutorial has examples of some things you can do with sizing/positioning.

FlowLayout would be the way to go but you might have some configuration problems. What layout manager does the parent component use?

Related

Setting component sizes inside Jpanels with Borderlayout

I have a project to copy the google sign-in GUI here . So far I'm still searching on what I'm gonna start with, but after some research I think it is possible on BorderLayout to do this. Im getting how it works by readjusting everything through borders, and I kind of like it because it is quite responsive compared to having null layout and coding every setBounds for each component.
I've been imagining using a background panel, a panel for the fill up form,
and creating panels for each pair of label and textfields to properly create the space and stacking (or nesting) them on top of the other. Our teacher just told us to snip out the image, she just wants if we know how to design something out of scratch. That and also saving the input into a text file.
However, I can't seem to grasp the concept of increasing the component size inside the borders to imitate the gaps between the text fields, like some sort of a padding between components? Using setSize doesnt work and so far my search only results into resizing borders, or perhaps I still have not entered the right searachable term for it?
Also, Ive been looking for another way and I think this project will also work using GridBaglayout. However many people say GridBagLayout is too complicated. What do you think would be easier?
In my experience almost every (99%) of the panels using GridBagLayout can be designed by using all other layouts. So, someone could say that GridBagLayout is optional
In your situation, avoiding the use of a GridBagLayout is easy. Take a look at the following code:
public class NoGridBagLayout extends JFrame {
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> new NoGridBagLayout().setVisible(true));
}
public NoGridBagLayout() {
super();
setDefaultCloseOperation(EXIT_ON_CLOSE);
setExtendedState(MAXIMIZED_BOTH);
JPanel borderPanel = new JPanel(new BorderLayout());
borderPanel.setBorder(new TitledBorder("borderPanel - BorderLayout"));
JLabel label = new JLabel("Create a google account.");
label.setHorizontalAlignment(JLabel.CENTER);
label.setFont(label.getFont().deriveFont(25f));
borderPanel.add(label, BorderLayout.PAGE_START);
setContentPane(borderPanel);
JPanel gridPanel = new JPanel(new GridLayout(1, 2));
gridPanel.setBorder(new TitledBorder("gridPanel - GridLayout"));
getContentPane().add(gridPanel, BorderLayout.CENTER);
JPanel leftBoxedPanel = new JPanel(); // Fill it with panels using BoxLayout.X_AXIS
leftBoxedPanel.setLayout(new BoxLayout(leftBoxedPanel, BoxLayout.Y_AXIS));
leftBoxedPanel.setBorder(new TitledBorder("leftBoxedPanel - BoxLayout.Y_AXIS"));
gridPanel.add(leftBoxedPanel);
JPanel rightBoxedPanel = new JPanel(); // Fill it with panels using BoxLayout.X_AXIS
rightBoxedPanel.setLayout(new BoxLayout(rightBoxedPanel, BoxLayout.Y_AXIS));
rightBoxedPanel.setBorder(new TitledBorder("rightBoxedPanel - BoxLayout.Y_AXIS"));
gridPanel.add(rightBoxedPanel);
}
}
Preview:

How to reduce the space between the 3 swing checkboxes?

I want to reduce the size between the components with in the Formatting group (left side on the image). How to do this?
JPanel formattingGroup = createGroupWithName("Formatting");
formattingGroup.setMinimumSize(new Dimension(250, 20));
formattingGroup.setLayout(new GridLayout(5, 0));
add(formattingGroup);
final JCheckBox showSurface = new JCheckBox("Show surface");
showSurface.setSelected(true);
formattingGroup.add(showSurface);
final JCheckBox showTerrain = new JCheckBox("Show terrain");
showTerrain.setSelected(true);
formattingGroup.add(showTerrain);
final JCheckBox showVehicleStatus = new JCheckBox("Show vehicle status");
showVehicleStatus.setSelected(true);
formattingGroup.add(showVehicleStatus);
JPanel pnl = createGroupWithName("Depth Stretch");
formattingGroup.add(pnl);
JSlider slider = new JSlider(0, 10);
pnl.add(slider);
When using a GridLayout all components are made the same size.
You are adding a JPanel with a TitledBorder and a JSlider to the grid. Therefore the checkboxes will take the same vertical height as that panel.
You need to use a different layout manager for the panel. Maybe a vertical BoxLayout.
You might look at available size variants, discussed in Resizing a Component.
Use gridbaglayout because that gives you the opportunity to give weights, to columns or rows and set spacing and padding values.
I made a Swing application that contains out of 12 Frames and they all are made with GridBagLayout.
I also tried other before that but they all had limits. That's where the GridBagLayout kicks in. It's a bit harder in begin to understand how it works, but once you get feeling with it, it really is best thing to get the components where you want.
If you want i'll give you a cool example of a frame created with GridBagLayout.

Java netbeans autoresize textarea

I am using netbeans 7.0.1 to build a simple JFrame application
I am putting a textarea and a couple of buttons on using the gui builder
the buttons are on the same vertical level and the right hand button shifts right on resize of the window - that is fine but I would like the text area to do the same - i.e. resize to fit the relevant width of the window.
For the life of me I cannot see how this is done - I have looked around and I can find code for a hand coded app but not for netbeans gui builder
Update: Ah sorry, didn't read the full question, you really want to do it with netbeans.. :) Well, well, now you have this post how to do it hand-crafted aswell! :)
I wouldn't use an GUI builder for this task. It is easy to create such layout with FlowLayout and BorderLayout:
Screenshot was produced by this code:
public static void main(String... args) throws Exception {
JFrame frame = new JFrame("Test");
JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));
buttonPanel.add(new JButton("Hello"));
buttonPanel.add(new JButton("World!"));
frame.add(buttonPanel, BorderLayout.NORTH);
frame.add(new JTextArea("Hello World!"), BorderLayout.CENTER);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(600, 400);
frame.setVisible(true);
}
It's all about the layout you're using. I would personally use GridBagLayout, probably because I am accustomed to it. Basically, you should follow these steps:
Change the layout of the container which owns the textarea to GridBagLayout. You can do that by right-clicking on the container(being it the JFrame, a panel, whatever) and there you will see the Layout menu. It contains a GridBagLayout option.
In the component inspector select the JScrollPane that owns the JTextArea. Check out the "Layout" section in the properties tab. It contains the GridBagConstraints which command the layout behaviour of the JScrollPane and thus commands the JTextArea.
Play with the layout properties :). Basically you should set the X and Y weight to 1, and the Fill to "Both". This will tell the JScrollPane to fill any vertical and horizontal space there is on the Frame, and the X and Y weight will pull any other components as far as possible.
You can read more about GridBagLayout here: http://netbeans.org/kb/docs/java/gbcustomizer-basic.html
Learning GridBagLayout could take a couple of hours, getting used to it could take a couple of days, but it's worth learning. Just my 2 cents.

How to put my check box under my text fields in Swing?

I have a text field to represent a name, and a combobox for registration type. Then, next to that I have a check box, but it's supposed to be underneath the other two fields. Here is what I have coded:
public RegPanel()
{
//create a new panel
new GridLayout(2,1);
//create one of two subpanels
subPanel = new JPanel(new FlowLayout());
//create a textfield
regTextField = new JTextField(20);
//create a combobox and don't let anyone add to it
regComboBox = new JComboBox(regOptions);
//create a border for the subpanel
subPanel.setBorder(BorderFactory.createTitledBorder("Registrant's Name & Type"));
//add regTypePanel and regBox to the panel
subPanel.add(regTextField);
subPanel.add(regComboBox);
//create a second subpanel with a flowlayout
subPanel2 = new JPanel(new FlowLayout());
//create a checkbox
regCheckBox = new JCheckBox("Dinner and Keynote Speech");
subPanel2.add(regCheckBox);
//add the subpanels to the main panel
add(subPanel);
add(subPanel2);
}
Any ideas what I am missing? Sorry for the crappy layout, I can't figure out how to fix the view.
So I realized I hadn't set the GridLayout right, so I changed that to "setLayout(new GridLayout(2,1));
But now on my gui, it totally screwed up the position of all the other elements.
Anyway new GridLayout(...) do nothing unless you use it in setLayout(...).
You can try using Box.createVerticalBox() (sample) instead of GridLayout to have your components in vertical alignment.
In your case, you are using
RegPanel (which layout?)
subPanel (FlowLayout)
regTextField
regComboBox
subPanel2 (FlowLayout)
regCheckBox
Which layout does your main RegPanel have? It has the default JPanel layout (if RegPanel is a subclass of JPanel), which is a FlowLayout. So, your RegPanel shows the two subPanels besides each other, which looks similar as if you had only one Panel with all the components. So, your RegPanel needs a LayoutManager, too - the GridLayout(2,1) seems okay (if you don't want to align the components in the two lines).
In my current project, I'm only ever using GroupLayout (apart from one occasional BorderLayout). It takes a bit to get used to (and a wrapper class to make the code easier to write and read), but for such form stuff, it seems ideal (when limited to the build-in Layout managers).
Also you might want to use a BorderLayout and realize that you nest one layout in another layout to achieve a different effect.
Have to mention MigLayout here as a great all-purpose layout manager -- it is extremely flexible and easy to use once you get to know it.

How to make JLabels start on the next line

JPanel pMeasure = new JPanel();
....
JLabel economy = new JLabel("Economy");
JLabel regularity = new JLabel("Regularity");
pMeasure.add(economy);
pMeasure.add(regularity);
...
When I run the code above I get this output:
Economy Regularity
How can I get this output, where each JLabel starts on a new line? Thanks
Economy
Regularity
You'll want to play around with layout managers to control the positioning and sizing of the controls in your JPanel. Layout managers are responsible for placing controls, determining where they go, how big they are, how much space is between them, what happens when you resize the window, etc.
There are oodles of different layout managers each of which allows you to layout controls in different ways. The default layout manager is FlowLayout, which as you've seen simply places components next to each other left to right. That's the simplest. Some other common layout managers are:
GridLayout - arranges components in a rectangular grid with equal-size rows and columns
BorderLayout - has one main component in the center and up to four surrounding components above, below, to the left, and to the right.
GridBagLayout - the Big Bertha of all the built-in layout managers, it is the most flexible but also the most complicated to use.
You could, for example, use a BoxLayout to layout the labels.
BoxLayout either stacks its components on top of each other or places them in a row — your choice. You might think of it as a version of FlowLayout, but with greater functionality. Here is a picture of an application that demonstrates using BoxLayout to display a centered column of components:
An example of code using BoxLayout would be:
JPanel pMeasure = new JPanel();
....
JLabel economy = new JLabel("Economy");
JLabel regularity = new JLabel("Regularity");
pMeasure.setLayout(new BoxLayout(pMeasure, BoxLayout.Y_AXIS));
pMeasure.add(economy);
pMeasure.add(regularity);
...
I read this piece of code:
pMeasure.setLayout(new BoxLayout(pMeasure, BoxLayout.VERTICAL));
It seems BoxLayout doesn't have VERTICAL. Upon searching, this will work using the following code:
pMeasure.setLayout(new BoxLayout(pMeasure, BoxLayout.Y_AXIS));
Here is what you need to use:
JLabel economy = new JLabel("<html>Economy<br>Regularity</html>");
A quick way is to use html within the JLabel.
For instance include the <br/> tag.
Otherwise, implement a BoxLayout.
Make a separate JPanel for each line, and set the dimensions to fit each word:
JLabel wordlabel = new JLabel("Word");
JPanel word1 = new JPanel();
word1.setPreferredSize(new Dimension(#,#);
This should work for each word. You can then add each of those JPanels to your main JPanel. This also allows you to add other components next to each word.

Categories

Resources