Java GUI Layouts - java

Could somebody tell me which java layout I need to use to achieve the layout below:
I am currently playing out with the FlowLayout however I can’t get the entry fields to line up beside the output window:
Apologies if this is a simple question this is my first time using java. Here is my frame code:
private void makeFrame()
{
setLayout(new FlowLayout(0));
JPanel panel1 = new JPanel();
JPanel panel2 = new JPanel();
JPanel panel3 = new JPanel();
JPanel panel4 = new JPanel();
JPanel panel5 = new JPanel();
JPanel panel6 = new JPanel();
JPanel panel7 = new JPanel();
panel1.setLayout(new FlowLayout(0));
panel2.setLayout(new FlowLayout(0));
panel3.setLayout(new FlowLayout(0));
panel4.setLayout(new FlowLayout(0));
panel5.setLayout(new FlowLayout(0));
panel6.setLayout(new FlowLayout(0));
panel7.setLayout(new FlowLayout(0));
JLabel firstnameJLabel = new JLabel("First Name");
JLabel lastnameJLabel = new JLabel("Last Name");
JLabel streetJLabel = new JLabel("Street");
JLabel townJLabel = new JLabel("Town");
JLabel postcodeJLabel = new JLabel("Post Code");
panel1.add(listAllBtn);
panel1.add(listPersonalBtn);
panel1.add(listBusinessBtn);
panel1.add(addPersonalBtn);
panel1.add(addBusinessBtn);
panel1.add(deleteBtn);
panel1.add(findBtn);
panel1.add(quitBtn);
panel2.add(firstnameJLabel);
panel2.add(this.firstNameField);
panel2.add(this.bookScrollPane);
this.outputArea.setEditable(false);
panel3.add(lastnameJLabel);
panel3.add(this.lastNameField);
panel4.add(streetJLabel);
panel4.add(this.streetField);
panel5.add(townJLabel);
panel5.add(this.townField);
panel6.add(postcodeJLabel);
panel6.add(this.postcodeField);
panel7.add(enterBtn);
add(panel1);
add(panel2);
add(panel3);
add(panel4);
add(panel5);
add(panel6);
add(panel7);
enterBtn.addActionListener(this);
}

Use multiple nested layout managers
The example looks like a top-level BorderLayout with scroll pane in the CENTER location, a row of buttons (using FlowLayout) in the NORTH location and a GridLayout for the text fields in the WEST location. The latter could be improved by using a GroupLayout, which allows rows and columns to be sized individually but is somewhat complex to use.
There's a great tutorial on using layout managers (unfortunately it seems to have disappeared from Oracle's servers and the link points to a probably transient copy).

Been a while since I worked with Swing, but it looks like the architecture is something like this:
You have a panel in the bottom which is BorderLayout
Inside that, you add a total of 4 new panels, NORTH, WEST, CENTER and EAST
in BorderLayout.NORTH you add a panel which have FlowLayout.LEFT
in BorderLayout.WEST you add a panel which have GroupLayout.YAXIS. this panel contains the labels for names etc and the ENTER button
in BorderLayout.CENTER you add the textfields that corresponds with the labels
in BorderLayout.EAST you add the JSCrollpane.
This might give you an idea and you can play around with these different panels to achive what you want

I would just use MigLayout for the high level page layout, and then dropdown to the simple layout managers for the . It's essentially a grid layout, but it's very easy to use. Miglayout cannot wrap items though, and this is apparently a design issue in Swing. WrapLayout is a layout manager that gives you that functionality, but it can have issues.
http://tips4java.wordpress.com/2008/11/06/wrap-layout/
Looking at the screen shot you've provided I've mocked up the way you would want to divide it up. You'd have 9 rows total (0-8) and 3 columns total (0-2). For stuff like the controls at the very top, you will "span" them across all three columns.
For the text, you just put the text inside of it's individual box in row 1, column 1 for First Name, or row 2, column 1 for Last Name, etc.
You do the same thing with the input boxes.
In the picture below the blue are the columns and the orange are the rows.
So to summarize;
Use Miglayout for your high level layout. It's like using a table in HTML.
Use other layout managers to layout the items inside of the grid boxes that Miglayout provides.

The best choise is using Gridbag layout as you have a bit complex UI and GridBag layout provides all the support you needed to achive the exact UI.You will have to use a parent panel and then the child panels in it.Each panel you will have to add seperate GridBag layouts.You can add insets and necessary growing to achieve what you want.

As stated in the previous comment, I would use MigLayout in this project. As you can use split, span and wrap after each field or textbox in order to get the correct layout. You can also debug Miglayout and see where your layout its right or wrong.
download the latest version of MigLayout here : http://www.migcalendar.com/miglayout/versions/
if using eclipse,
save it in a folder called Lib in the project folder.
configure the project build path but adding the jar file to the classpath.
Then you should be able to set the layout to MigLayout.
panel.setLayout(new MigLayout());
or to debug the layout - panel.setLayout(new MigLayout("debug"));

Related

Leave small space between buttons when using GridLayout

I am trying to create a toolbar that will go at the top of all the pages in my java swing application.
I am creating a JPanel with a series of individual JPanels (containers) inside it. Each JPanel (container) has a north and south component or just a north component, set up using a GridLayout.
My problem is, I want a small gap between the north and south component, but I can't see how to do it and have not been able to find any help on the internet.
Below is a working example for the code for one of the containers:
public static void CustomersGui(){
final JFrame frame = new JFrame("Nested Layout Example");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel container1 = new JPanel();
container1.setLayout(new GridLayout(2,1));
JButton buttonDiary = new JButton("Diary");
buttonDiary.setPreferredSize(new Dimension(140, 25));
JButton buttonCars = new JButton("Cars");
buttonCars.setPreferredSize(new Dimension(140, 25));
container1.add(buttonDiary, BorderLayout.NORTH);
container1.add(buttonCars, BorderLayout.SOUTH);
frame.setContentPane(container1);
frame.pack();
frame.setVisible(true);
}
I am trying to create a toolbar that will go at the top of all the pages in my java swing application.
Why don't just use JToolBar? See How to use Tool Bars
I am creating a JPanel with a series of individual JPanels (containers) inside it. Each JPanel (container) has a north and south
component or just a north component, set up using a GridBagLayout.
Based on your code none of these statements is true: you are adding buttons (not panels) and you are using GridLayout not GridBagLayout:
JPanel container1 = new JPanel();
container1.setLayout(new GridLayout(2,1)); // GridLayout
JButton buttonDiary = new JButton("Diary"); // button here
buttonDiary.setPreferredSize(new Dimension(140, 25));
JButton buttonCars = new JButton("Cars"); // another button here
Besides you are using BorderLayout constraints that will be totally ignored by either GridLayout or GridBagLayout:
container1.add(buttonDiary, BorderLayout.NORTH);
container1.add(buttonCars, BorderLayout.SOUTH);
You should have a look to the whole Laying Out Components Within a Container lesson to learn about layout managers and how do all of them work.
In addition
As wisely pointed out by #nIcEcOw, since Java 1.4 BorderLayout the use of new constants is highly encouraged:
PAGE_START
PAGE_END
LINE_START
LINE_END
CENTER
From How to Use BorderLayout tutorial (bold text mine):
Before JDK release 1.4, the preferred names for the various areas were
different, ranging from points of the compass (for example,
BorderLayout.NORTH for the top area) to wordier versions of the
constants we use in our examples. The constants our examples use are
preferred because they are standard and enable programs to adjust to
languages that have different orientations.
Update
Well now that your question has been edited to say that you actually use GridLayout it's easy to answer by saying that you can specify horizontal and vertical gaps between components either by using class' constructor: or setHgap() and setVgap() methods:
JPanel container1 = new JPanel(new GridLayout(2, 1, 8, 8));
// Or
GridLayout gridLayout = new GridLayout();
gridLayout.setRows(2);
gridLayout.setColumns(1);
gridLayout.setHgap(8);
gridLayout.setVgap(8);
JPanel container1 = new JPanel(gridLayout);
Don't forget to remove BorderLayout constraints when you add buttons to container1 panel, because those will be ignored:
container1.add(buttonDiary);
container1.add(buttonCars);
You might want to take a look to this topic as well: Providing white space in a Swing GUI

How to create expandable panels using swing?

I would like to create a list of expandand/collapse panels, like on this image:
I haven't found any swing component for this, so I began to create something like this.
I tried to put buttons one under the other, which fill the available width, but doesn't really works. I can only see the last added one.
JPanel panel = new JPanel();
panel.setLayout(new BorderLayout());
panel.add(new JButton("Delphi Projects"), BorderLayout.NORTH);
panel.add(new JPanel(), BorderLayout.NORTH); // hidden panel
panel.add(new JButton("Delphi Projects | Delphi Files"), BorderLayout.NORTH);
panel.add(new JPanel(), BorderLayout.NORTH); // hidden panel
panel.add(new JButton("Other Files"), BorderLayout.NORTH);
panel.add(new JPanel(), BorderLayout.NORTH); // hidden panel
panel.add(new JButton("C++ Builder Projects | C++ Builder Files"), BorderLayout.NORTH);
panel.add(new JPanel(), BorderLayout.NORTH); // hidden panel
JScrollPane scroll = new JScrollPane(panel);
You can take a look to JXTaskPaneContainer and JXTaskPane from SwingX project which have these advantages:
They are components just like a JPanel is so no extra effort is required to work with them.
Unlike accordions you can have more than one panel expanded at any
time.
They have a cool and smooth effect on collapsing/expanding events.
Unlike trees/tree tables you don't have to mess with either TreeModel nor TreeTableModel at all. Also trees and tree tables are components intended to show data in a hierarhical form, not to add components into it.
If you don't like task panes and want to implement something on your own then you have JXCollapsiblePane (also available in SwingX API).
Check SwingLabs Demos for a complete set of SwingX components demo.
Screenshot
Look at JXTreeTable from the SwingX project:
You might also look at JXTree, which is similar, and might be better, depending your exact needs.
Get it from here.
The component you're looking for is an accordion. Have a look at this question:
Accordion for Swing?
As to your code - you can only see the last one because you're adding them all to a panel with a BorderLayout, with BorderLayout.North as the layout constraint. Each one removes the previously added panel. Try switching to another layout - e.g. BoxLayout.
you have to put a grid panel in your layout panel. so in the "north" part in your layout panel, just add a grip panel of one column and the number of raw you want

How to link JLabel and JSpinner for resizing

I want to have a resizable App, and I am building a nested panels GUI. In one panel I need Spinners and Labels. I want the label to the left of the Spinner. What is the best way to achieve this when thinking about resize issues:
1.I could create a vertical BoxLayout panel, and add x sub-panels, where each sub-panel is
contains a label and a spinner:
JPanel ControlPanel = new JPanel();
ControlPanel.setLayout(new BoxLayout(ControlPanel, BoxLayout.Y_AXIS));
JPanel LabelledSpinner = new JPanel();
LabelledSpinner .setLayout(new BoxLayout(LabelledSpinner , BoxLayout.X_AXIS));
JLabel lab1 = new JLabel("Label1");
JSpinner spin1 = new JSpinner();
spin1.setModel(new SpinnerNumberModel(300, 10, 3000, 10));
LabelledSpinner .add(lab1);
LabelledSpinner .add(spin1);
ControlPanel.add(LabelledSpinner );
OR
2.I could create a GridBagLayout Panel with 2 columns and x rows. Then each row would have a label and then a spinner.
Which would best best?
Or does this "common" labeling issue have a simpler solution?
Using the layout manager approach is definitely better.
There is a JDK Swing tutorial that talks about building form like layouts using the SprintLayoutManager
http://docs.oracle.com/javase/tutorial/uiswing/layout/spring.html
Start with the standard layout managers. As you work with different layout managers, you will eventually come up with a combination that works best for your requirements.
Another alternative is using the GroupLayout which can help with adding slightly more complex components to your form UI. http://docs.oracle.com/javase/tutorial/uiswing/layout/groupExample.html
Hope that helps.

Why is my panel not positioned correctly even after setting the boundaries?

I'm trying to make a simple GUI with radio buttons and I grouped them into one panel. I wanted it positioned on the leftmost side so I used the setBounds method. Whatever numbers I put on the parameters, the panel won't move. Are panels not affected by the setBounds method? Or is there another way to position my panel. Here's the snippet of my code:
JPanel radioPanel = new JPanel();
radioPanel.setLayout(new GridLayout(3,1));
JRadioButton Rbutton1 = new JRadioButton("Credit Card");
JRadioButton Rbutton2 = new JRadioButton("E-Funds");
JRadioButton Rbutton3 = new JRadioButton("Check");
Rbutton3.setSelected(true);
ButtonGroup Bgroup = new ButtonGroup();
Bgroup.add(Rbutton1);
Bgroup.add(Rbutton2);
Bgroup.add(Rbutton3);
radioPanel.add(Rbutton1);
radioPanel.add(Rbutton2);
radioPanel.add(Rbutton3);
radioPanel.setBounds(10,50,50,40); //this is where I'm trying to position the panel with the radio buttons
paymentPanel.add(radioPanel);
contentPane.add(paymentPanel); //contentPane is the frame
contentPane.setVisible(true);
Set layout for the frame. For example:
contentPane.setLayout(new BorderLayout());
contentPane.add(paymentPanel, BorderLayout.LINE_START);
More info about layout managers you can find here: A Visual Guide to Layout Managers
You should read about Layout Managers which will do this for you. And I would suggest using a GUI Builder Tool, but that might not be allowed for your homework.
You can set layout as null layout for your contentPane.
contentPane.setLayout(null);
Then your setBounds() will work exactly as you designed.
Note:
Creating containers with absolutely positioned containers can cause problems if the window containing the container is resized.

Java GUI layout problems

I'm writing a small Java GUI program, and I'm having some issues with Java not laying things out properly. I haven't done much Java GUI code lately, so I'm having trouble seeing where the problem lies.
final JFreeChart chart = createChart(dataset);
final ChartPanel chartPanel = new ChartPanel(chart, false);
chartPanel.setPreferredSize(new Dimension(500, 270));
JPanel buttonPanel = new JPanel();
buttonPanel.setPreferredSize(new Dimension(500,50));
JButton toggleButton = new JButton("Toggle");
final JTextField minRange = new JTextField("10");
final JTextField maxRange = new JTextField("1000");
JButton setLimits = new JButton("Set Limits");
buttonPanel.add(toggleButton, BorderLayout.NORTH);
buttonPanel.add(minRange, BorderLayout.SOUTH);
buttonPanel.add(maxRange, BorderLayout.SOUTH);
buttonPanel.add(setLimits);
JSplitPane jsp = new JSplitPane(JSplitPane.VERTICAL_SPLIT, chartPanel, buttonPanel);
jsp.setDividerLocation(0.8);
setContentPane(jsp);
What's happening here is that all of the layout options are completely being ignored. The GUI components are showing up properly, and the divider specifically is ignoring the preferred size of JFreeChart, and squeezing it to about 5% of space at the top of the frame.
In addition to problems with the splitpane not respecting your desired sizes, you are using BorderLayout constants but you haven't specified the layout for the panel (the default is FlowLayout).
This:
JPanel buttonPanel = new JPanel();
Should be:
JPanel buttonPanel = new JPanel(new BorderLayout());
I believe that using a float proportion on JSplitPane only works once the split pane is "realized", otherwise you're getting a proportion of zero because it doesn't know how big its going to be.
also:
buttonPanel.add(minRange, BorderLayout.SOUTH);
buttonPanel.add(maxRange, BorderLayout.SOUTH);
BorderLayout only allows one component to be in each area, so min range will never appear, as maxRange is now "the" south component. if you want both you'll need to put those 2 components in another panel, then add that panel to the south.
Try setting the minimum size too.
See: Java GUI Problems
JSplitPane pays attention to the minimum size, not the preferred size. Try simply changing setPreferredSize to setMinumumSize.
Dan Dyer is correct, you didn't set the Layout.
You could also set it by buttonPanel.setLayout(new BorderLayout())
And John Gardner is correct that you set a component to BorderLayout.SOUTH twice.
Also check out MigLayout if you don't already know about it. Its the least "surprising" layout manager I've ever used. It just works. It takes some learning, but very straight forward once you get over the syntax.
And I would avoid SplitPane if you can...its very finicky
Never call setPreferredSize() - it should be a calculation.
For example, your ButtonPanel is being set to a fixed preferred size.
What if you add I18N support and the user is using a language with very long localizations? What if the user resizes the frame?
Check out my article on layout managers for details on how you should really use them. It's from 1999 but still applies:
http://java.sun.com/developer/onlineTraining/GUI/AWTLayoutMgr/
Enjoy!

Categories