Form layout to call JColorChooser

Question

I'm writing a Java Swing program that needs to enable the user to select 8 different colors from a Settings form. This is quite straightforward as far as it goes with JColorChooser, but I'm wondering is there a recommended way to lay out the form. This is what I'm currently contemplating:

For each color,
Display a square in the current selected color,
Display to the right of that, a button that will bring up the JColorChooser to change the selected color.

However, I suspect the 8 buttons will make the form look clunky if not downright ugly (particularly if more get added later). An alternative approach might be to make the square double as the button; in that case, how to visually indicate it's clickable?

Is there an alternative recommended method?

Andrew Thompson · Accepted Answer · 2011-06-20T20:23:15.463

Here is a ColorButton that I use in the pscode API.

package org.pscode.ui.widget;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.*;
import javax.swing.*;

/** Provides a button for popping a color chooser.
The Color can be obtained by calling ColorButton.getBackground().
@author Andrew Thompson. */
public class ColorButton extends JButton implements ActionListener {

    private JColorChooser chooseColor;
    private String htmlColor;

    private String text;

    public ColorButton(String label) {
        super(label);
        text = label;
        chooseColor = new JColorChooser();
        addActionListener( this );
    }

    @Override
    public void setText(String text) {
        super.setText(
            "<html><body style='text-align: left;'><center>" +
            "<p>" +
            text +
            "<br>" +
            "<span style='width: 5px; height: 5px; " +
            "border: solid 1px black; background-color: " +
            htmlColor +
            "; color: " +
            htmlColor +
            ";'>AA</span>  " +
            "</center></body></html>");
        this.text = text;
    }

    public void actionPerformed(ActionEvent ae) {
        Color c = chooseColor.showDialog(
            this,
            "Choose Color",
            getBackground() );
        if (c!=null) {
            setBackground(c);
        }
    }

    @Override
    public void setBackground(Color bg) {
        super.setBackground( new Color(bg.getRed(), bg.getGreen(), bg.getBlue()) );
        int r = bg.getRed();
        int g = bg.getGreen();
        int b = bg.getBlue();

        htmlColor = "rgb(" + r + "," + g + "," + b + ")";
        setText(text);
    }
}

Screenshot

Screenshot of typical usage.

Color scheme chooser using ColorButtons

In Other News..

@rwallace: how did you get them to be all the same shape (regardless of length of caption)..

That part of the layout (for the 5 buttons and check box) is using a GridLayout. You might also alter the size of the buttons by:

Setting the preferred size (dangerous to presume we can second guess it).
Adding some padding in the style for the body element of the HTML.

"..and with the slightly rounded corners and shiny effect?"

DukeBox (from which that screenshot was obtained) uses the native PLAF - I'm running Windows 7.

Is good, thanks! But how did you get them to be all the same shape (regardless of length of caption) and with the slightly rounded corners and shiny effect? When I create some just by calling the constructor, they just come out as plain rectangles. — rwallace, Jun 20 '11 at 20:09

score 1 · Answer 2 · edited May 23 '17 at 12:04

1

As an alternative, consider implementing the Icon interface and using the icon on the button. Together, PieceButton and ColorIcon comprise an example.

edited May 23 '17 at 12:04

Community

1
1

answered Jun 20 '11 at 17:03

trashgod

203,806
29
246
1,045

Form layout to call JColorChooser

2 Answers2

Screenshot

In Other News..

Linked