Looking for layout advice

[jefff willis]

I have an application that monitors servers on our network.
It's main screen has a tabbed pane. On one of the panes I want to plot the response times of three different servers.

How can I get three canvases on a panel that I will place on the tabbed pane?

                tabbedPane
                     |
                Parentpanel 
              |      |     |
            panel  panel panel   
              |      |     |
           canvas canvas canvas
    
 

I don't know if that will display what I am trying to do or not.

Stated another way, there are three canvases placed in the CENTER of three panels. Those panels a placed in a parentPanel (NORTH, CENTER, and SOUTH). That parentPanel is then placed in the tabbedPane.

I'm running into a number of irritating problems and I was just looking here to see if anyone thinks this layout won't work, and if so, could you suggest another approach to displaying this data?

[Gregg Bolinger]

My first question would be, why do you have 3 canvas' on 3 JPanels that are placed on a parent JPanel. It seems like the 3 JPanels could just be omitted. They seem like an extra component you don't need?

With that being said, I'm not real clear yet on the layout you are needing. You seem to be using a BorderLayout and when putting components N, CENTER, and S, the center component will be larger than the N and S components.

If you just want to line up 3 components vertically, take a look at either a BoxLayout or GridLayout.

[Craig Wood]

You mention using canvases; I would use a JPanel instead of a Canvas — mixing Swing and AWT components can give undesirable results.

One of the problems of using a BorderLayout is that the North and South sections will need some component vertical size information to properly display your components. They expand the components to fill the horizontal space. This can get messy. If you know the height you want for the North and South components you can do

    Dimension d = northComponent.getPreferredSize();
    d.height = desiredHeightForNorthComponent;
    northComponent.setPreferredSize(d);

Assuming all three graphic components are to be the same size you could try GridLayout (as Gregg recommends above) or a GridBagLayout. Here's a demo of those two:

import java.awt.*;
import javax.swing.*;
 
public class TabTest
{
    public TabTest()
    {
        JTabbedPane tabbedPane = new JTabbedPane();
        tabbedPane.addTab("GridBagLayout", getGridBagLayoutPanel());
        tabbedPane.addTab("GridLayout", getGridLayoutPanel());
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(tabbedPane);
        f.setSize(400,400);
        f.setLocation(200,200);
        f.setVisible(true);
    }
 
    private JPanel getGridBagLayoutPanel()
    {
        JPanel panel = new JPanel(new GridBagLayout());
        GridBagConstraints gbc = new GridBagConstraints();
        gbc.gridwidth = gbc.REMAINDER;
        gbc.weighty = 1.0;
        gbc.weightx = 1.0;
        gbc.fill = gbc.BOTH;
        JPanel[] panels = getPanels();
        panel.add(panels[0], gbc);
        panel.add(panels[1], gbc);
        panel.add(panels[2], gbc);
        return panel;
    }
 
    private JPanel getGridLayoutPanel()
    {
        JPanel panel = new JPanel(new GridLayout(0,1));
        JPanel[] panels = getPanels();
        panel.add(panels[0]);
        panel.add(panels[1]);
        panel.add(panels[2]);
        return panel;
    }
 
    private JPanel[] getPanels()
    {
        JPanel red = new JPanel();
        red.setBackground(Color.red);
        JPanel green = new JPanel();
        green.setBackground(Color.green.darker());
        JPanel blue = new JPanel();
        blue.setBackground(Color.blue);
        return new JPanel[] { red, green, blue };
    }
 
    public static void main(String[] args)
    {
        new TabTest();
    }
}

[jefff willis]

GridLayout (3,2) seems to be yielding some better results.

It's also introduced some, but I think they are more easily explained here.

Check out this code fragment:

JButton btn = new JButton("plot");
Canvas canvas = new Canvas();
canvas.setSize( new Dimension( 350, 80) );
 
add(btn);
add(canvas);

This is placing one of my canvases on the tabbedPane, but it has the side affect of making my button the same height as my canvas. Do I have to specifically set the size of that button to get around that problem?

[Craig Wood]

GridLayout ignores the preferred size of the components you hand it and tries to display all of its components at the same size. To keep the button at its preferred size you can add it to a JPanel and add the JPanel to the GridLayout (or BorderLayout). The JPanel will expand to fill the grid cell and allow the JButton to remain at its preferred size. The general practice in Swing is to use the JComponent methods get/setPreferredSize in lieu of setSize.

[jefff willis]

OK, I'll give the button on a Panel a try.

I've changed from Canvases to panels and that has also cleared up some of my problems.

I was seeing the canvases appear drawn overtop of other components and I was assuming that it must be happeneing because of the order in which I was creating the components.

However, like I said above, as soon as I switch to JPanels in place of the Canvases, that problem went away.

Thanks a lot, guys.