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
Related
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
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.
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"));
I am using WindowBuilder Pro for eclipse, and I would like to have two Jpanels that perfectly overlap each other. I would then be able to toggle their visibilty based on the selection of a combox box. When I try and acheive this in the gui builder, the first panel gets displaced by the second panel. And advice please?
It is possible using groupLayout, according to the tutorial .
What you must do is add the components to a mother JPanel , and set that panel to use GroupLayout.
Then add the components to the layout as a ParallelGroup in both the horizontal and vertical spacing. This means they will occupy the same X and Y space. Then disable/enable as needed, hiding the JPanels as well.
I believe the way it would work is so:
JPanel panel1, panel2, panel3;
//initialize panel3, etc
panel1=new JPanel();
panel2 = new JPanel();
panel1.add(new JTextField("Panel1"));
panel2.add(new JTextField("PANEL2"));
groupLayout = new GroupLayout(panel3);
panel3.setLayout(groupLayout);
groupLayout.setHorizontalGroup(
groupLayout.createParallelGroup(GroupLayout.Alignment.LEADING)
.addComponent(panel1)
.addComponent(panel2)
);
groupLayout.setVerticalGroup(
groupLayout.createParallelGroup(GroupLayout.Alignment.LEADING)
.addComponent(panel1)
.addComponent(panel2)
);
panel1.setEnabled(false);
panel1.setVisible(false);
then add a jCheckBox with an ActionPerformed method containing:
if(panel1.isEnabled()) {
panel1.setEnabled(false);
panel1.setVisible(false);
panel2.setEnabled(true);
panel2.setVisible(true);
}else
if(panel2.isEnabled()) {
panel2.setEnabled(false);
panel2.setVisible(false);
panel1.setEnabled(true);
panel1.setVisible(true);
}
That produced the desired behaviour for me. You should be able to switch the JComboBox for the JCheckBox fairly easily.
EDIT: Removed the necessity of having "Jpanel of their own". That should not be the case, and the above method allows you to get the benefits of both GroupLayout and CardLayout.
I would like to have two Jpanels that perfectly overlap each other. I would then be able to toggle their visibilty based on the selection of a combox box
See: How to Use Card Layout for an example that does exactly this.
I would like to have two Jpanels that perfectly overlap each other.
I believe the CardLayout is there exactly for that reason.
Basically, you can nest different panels or 'Cards' using the CardLayout and set the appropriate card to be displayed programmatically (on some event).
How to get a sidebar JPanel of a fixed with with Swing. Now I'm trying this:
public SidebarPanel() {
this.setLayout(new BoxLayout(this, BoxLayout.PAGE_AXIS));
this.setPreferredSize(new Dimension(200, this.getPreferredSize().height));
...
But when I resize the window also the width of the sidebar changes. How to fix this?
There is no guarantee in Swing that the preferred size is respected. This depends on the layout manager of the container.
If the container uses a BorderLayout, you can add the SidebarPanel using:
container.add(sidebarPanel, BorderLayout.EAST)
This will respect the preferred width.
You'll have to rely upon the good old GridBagLayout. A good helper class is the GBC, which will allow you to position elements with ease.
You can use BorderLayout, adding to JPanel
mainContent.setLayout(new BorderLayout());
mainContent.add(pnlHeader, BorderLayout.WEST);
mainContent.add(pnlResultList, BorderLayout.EAST);