Java Swing: Vertical Layout with fixed width and variable height

Question

I'm looking for a layout manager (or set of layout managers) that help me to arrange my components vertically. All components (buttons) should have the same width, bordered by the underlaying dialog client area width. Each of these buttons is able to expand its height depending on the connected JLabel (the labels will be displayed once the user clicked on the related button) - in short: all the components should be stretched to the same fixed width, but with a variable height depending on their content. The whole dialog content should be placed within a JScrollPane to support a vertical scrollbar if needed.

I'm at the point, where I stacked a lot of different layout managers (mostly borderlayout for horizontal stretching and boxlayout for vertical arrangement) to implement my aimed behaviour. But it's neither satisfying code nor does it work completely as I want.

I spent a lot of time surfing the internet for this problem and discovered that vertical layouts are a common problem in Java. A lot of people replied that GridBagLayout would be the best layout doing this job, but I didn't get it to work the way I wanted.

I hope that is enough information to give me some help for that problem.

Best regards Michael

edit: -not needed anymore-

edit 2:

Here is an image of my current attempt: http://www.pic-upload.de/view-16978954/example-image.png.html

This is almost the result i want, but has strange beviour on resizing.

edit 3:

I think my main problem is the JScrollPane combined with a html containing JLabel, I need something like setMaximumSize(...), but it doesn't work as it should: http://www.pic-upload.de/view-16988005/example-image3.png.html

I need a fixed width, but i cannot find a way to set it.

setPreferredSize(...) works, but I don't know the height of the JLabel, because it contains html text.

edit 4:

my Button:

public class Expander extends JPanel implements ActionListener {

    private static class HtmlViewer extends JLabel {

        private static final long serialVersionUID = 8787130155299083869L;


        public HtmlViewer(String doc) {
            super(doc);
            this.setBackground(Color.WHITE);
            this.setOpaque(true);
        }
    }


    private static final long serialVersionUID = 4480221797736558685L;


    JToggleButton button;
    JComponent component;


    public Expander(String text, String doc) {
        this(text, new HtmlViewer(doc));
    }

    public Expander(String text, JComponent expandableComponent) {
        this.setLayout(new BorderLayout());

        button = new JToggleButton(text) {
            private static final long serialVersionUID = -3330376265192275758L;

            @Override
            public void paint(Graphics g) {
                super.paint(g);

                if (this.isSelected()) {
                    g.drawString("▼", this.getWidth() - 20, 15);
                } else {
                    g.drawString("■", this.getWidth() - 20, 15);
                }
            }
        };

        button.setFocusPainted(false);
        button.addActionListener(this);

        component = expandableComponent;
        component.setBorder(new EmptyBorder(5, 5, 5, 5));

        this.add(button, BorderLayout.PAGE_START);
    }


    @Override
    public void actionPerformed(ActionEvent e) {
        if (button.isSelected()) {
            this.add(component);
        } else {
            this.remove(component);
        }
        this.getTopLevelAncestor().validate();
        this.getTopLevelAncestor().repaint();
        this.setMaximumSize(this.getPreferredSize());
    }
}

the frame:

public class grid2 {

    public static void main(String[] args) {

        final JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        JPanel p = new JPanel();
        JScrollPane scroll = new JScrollPane(p, JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED, ScrollPane.HORIZONTAL_SCROLLBAR_NEVER);
        addStuff(p);

        frame.add(scroll);

        frame.pack();
        frame.setVisible(true);
    }

    public static void addStuff(Container container) {
        container.setLayout(new GridBagLayout());

        GridBagConstraints c = new GridBagConstraints();
        c.fill = GridBagConstraints.HORIZONTAL;
        c.weightx = 1;
        c.weighty = 0;

        Expander e = new Expander("test", "<html>fgb fdh fgfhg ifghiufdshfidsghfiufdsghiudsfhdsfiu dshiufhds if dhf idsufhdsiufhiufhiuds hfdshfiudshfuidsifudshfiudshf  ufdhfiushdfiudshiufhdsiufhdsiuf udshfiudshfiudshfudshf iuhfiudshfiudshfiudshf</html>"); // long html text example
        e.setMaximumSize(new Dimension(500, 10000));
        c.gridx = 0;
        c.gridy = 0;
        c.gridwidth = GridBagConstraints.REMAINDER;
        container.add(e, c);

        JButton button2 = new JButton("Button 2");
        c.gridy = 1;
        c.gridwidth = GridBagConstraints.REMAINDER;
        container.add(button2, c);

        c.gridy = 2;
        c.weighty = 1;
        c.gridwidth = GridBagConstraints.REMAINDER;
        container.add(new JLabel(), c);
    }
}

Answer 1

See http://docs.oracle.com/javase/tutorial/uiswing/layout/box.html

setLayout(new BoxLayout(pane, BoxLayout.Y_AXIS));

Answer 2

What I would use is a GridBagLayout . It is akin to an HTML table, and by using GridBagConstraints you can set the objects to expand in both the horizontal and vertical direction (ex. constraints.fill = GridBagConstraints.BOTH )

I believe this fixes your issue with in the picture below (there is a small hack to make it the buttons stay on the top by adding a blank label at the bottom, but I'm sure that with more tinkering this can be removed)

public static void main(String[] args) {
    final JFrame frame = new JFrame();
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    addStuff(frame.getContentPane());

    frame.pack();
    frame.setVisible(true);
}

public static void addStuff(Container container) {
    container.setLayout(new GridBagLayout());

    GridBagConstraints c = new GridBagConstraints();
    c.fill = GridBagConstraints.HORIZONTAL;
    c.weightx = 1;
    c.weighty = 0;

    JButton button = new JButton("Button 1");
    c.gridx = 0;
    c.gridy = 0;
    container.add(button, c);

    JButton button2 = new JButton("Button 2");
    c.gridy = 1;
    container.add(button2, c);

    c.gridy = 2;
    c.weighty = 1;
    container.add(new JLabel(), c);
}

Answer 3

Several issues here:

1. the BorderLayout of the JFrame will stretch your JPanel p
2. you don't set weightx , therefore the fill attribute is useless

Solutions:

1. Either wrap your JPanel p in another panel that will put it at the top, either add an extra invisible JPanel at the end to push your component
2. set the weightx property to 1.0

Here is a demo code (based on yours) which works:

import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;

public class Gridbag {

    public void initUI() {
        JFrame frame = new JFrame();

        frame.setSize(500, 500);
        frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);

        JPanel p = new JPanel(new GridBagLayout());

        GridBagConstraints constraints = new GridBagConstraints();
        JButton button = new JButton("button 1");
        constraints.fill = GridBagConstraints.HORIZONTAL;
        constraints.anchor = GridBagConstraints.PAGE_START;
        constraints.gridwidth = GridBagConstraints.REMAINDER;
        constraints.weightx = 1.0;
        p.add(button, constraints);

        button = new JButton("button 2");
        constraints.fill = GridBagConstraints.HORIZONTAL;
        constraints.anchor = GridBagConstraints.PAGE_START;
        p.add(button, constraints);
        JPanel root = new JPanel(new GridBagLayout());
        constraints.weighty = 1.0;
        root.add(p, constraints);
        frame.add(root);
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                new Gridbag().initUI();
            }
        });
    }

}

Answer 4

OK, I got it to work. I was completely wrong, I thought the JScrollPane was the trouble maker for this issue, but it was the JLabel. If a JLabel contains HTML text, it won't wrap the text automatically, that's why everything got stretched horizontally, if the dialog's width was too little. I found a good solution for this problem here: make a JLabel wrap it's text by setting a max width

Answer 6:

JLabel labelBeingUsed = myLabel;
View view = (View) labelBeingUsed.getClientProperty(BasicHTML.propertyKey);
view.setSize(scrollPane1.getWidth(), 0.0f);
float w = view.getPreferredSpan(View.X_AXIS);
float h = view.getPreferredSpan(View.Y_AXIS);
labelBeingUsed.setSize((int) w, (int) h);

Everytime the dialog is resized, it is necessary to update the width of each HTML containing JLabel to the desired width using the code above.

Thank you very much for all your useful tips.