Building a Monopoly Board with GridBagLayout

Question

I have been building a Java version of Monopoly in my spare time and am having some trouble understanding layouts etc for Swing.

Each one of my spaces on the board is a essentially a custom JButton and I have been trying to lay them around the edge of a frame (like on the monopoly board itself). I can't seem to find a useful explanation of how the layout system works and so am having trouble do so.

Could someone please give me an example of how they would lay the buttons around the edge of the frame? Should I be using a different layout?

Answer 1

A standard GridLayout might do the trick, if you leave the "inner" cells empty.

Answer 2

This seems to lend itself to work best with a BorderLayout. I would recommend creating 4 JPanels that will contain all of the JButtons.

Then add the JPanels to the BorderLayout.North, South, East, and West.

That seems to me to probably be the easiest way to layout the buttons.

Here is a great place to start using a BorderLayout.

I just threw together some code that may help you get started laying this out. It has not been compiled.

int boardWidth;
int boardHeight;
int boardSquareHeight;
int boardSqusreWidth;
JPanel north = new JPanel();
JPanel south = new JPanel();
Dimension northSouthD = new Dimension(boardWidth, boardSquareHeight);
north.setPreferedSize(northSouthD);
south.setPreferedSize(northSouthD);
JPanel east = new JPanel();
JPanel west = new JPanel();
Dimension eastWestD = new Dimension(boardSquareHeight, boardHeight - 2 * boardSquaareWidth);
east.setPreferedSize(easWestD);
west.setPreferedSize(easWestD);
// add all of the buttons to the appropriate JPanel
parentPanel.setLayoutManager(new BorderLayout());
parentPanel.add(north, BorderLayour.NORTH);
...

Answer 3

You could conceivably design the layout in something like netbeans, and then use the auto generated code (it generates spacings from the design you build) to lay out your own board, just copying the auto generated code and replacing with your custom buttons rather than whatever element you used as a placeholder.

It would allow you to place things exactly where you want them based on relative spacing rather than trying to let swing figure it out.

Answer 4

I know this has already been answered but I felt that you deserved a look at how GridLayout Works. First off http://java.sun.com/docs/books/tutorial/uiswing/layout/gridbag.html and http://www.cs.ubc.ca/local/computing/software/jdk-1.5.0/docs/api/java/awt/GridBagConstraints.html help to decipher the long and cryptic looking method signatures.

There are three main parts for this Monopoly Board Example. There is the Setup of the Layout, the addition of the Large Middle Piece as a JPanels, and the addition of the outer squares as JPanels.

public class GridBagLayoutExample extends JFrame {

public static void main(String[] args) {
    new GridBagLayoutExample().setVisible(true);
}

public GridBagLayoutExample() {

    try {
        //Setup the Layout
        setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
        GridBagLayout thisLayout = new GridBagLayout();
        thisLayout.rowWeights = new double[] { 0.2, 0.1, 0.1, 0.1, 0.1,
                0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.2 };
        thisLayout.columnWeights = new double[] { 0.2, 0.1, 0.1, 0.1, 0.1,
                0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.2 };
        getContentPane().setLayout(thisLayout);

        //Default Grid values
        int gridX = 0;
        int gridY = 0;
        //Add Panels for Each of the four sides
        for (int j = 0; j < 4; j++) {
            for (int i = 0; i < 13; i++) {
                JPanel tempPanel = new JPanel();
                switch(j)
                {
                case 0://Top Spaces
                    gridX = i;
                    gridY = 0;
                    break;
                case 1://Left Spaces
                    gridX = 0;
                    gridY = i;
                    break;
                case 2://Right Spaces
                    gridX = 12;
                    gridY = i;
                    break;
                case 3://Bottom Spaces
                    gridX = i;
                    gridY = 12;
                    break;
                }
                getContentPane().add(tempPanel,
                        new GridBagConstraints(gridX,// XGridSpot
                                gridY,// YGridSpot
                                1,// XGridSpaces
                                1,// YGridSpaces
                                0.0, 0.0, GridBagConstraints.CENTER,
                                GridBagConstraints.BOTH,//Fill
                                new Insets(0, 0, 0, 0), 0, 0));
                tempPanel.setBorder(BorderFactory
                        .createLineBorder(Color.BLACK));

            }
        }

        {// Main Inner Area Notice Starts at (1,1) and takes up 11x11
            JPanel innerPanel = new JPanel();
            getContentPane().add(
                    innerPanel,
                    new GridBagConstraints(1,
                            1,
                            11,
                            11,
                            0.0, 0.0,
                            GridBagConstraints.CENTER,
                            GridBagConstraints.BOTH,
                            new Insets(0, 0, 0, 0), 0, 0));
        }
        pack();
        setSize(260, 260);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

}

From here, if you add a structure to hold the panels and then you can add buttons and whatever you want to each of the panels. Buttons would also work in place of the panels. This should compile with the right imports, so compile it and try it out.