Builing First GUI - A few questions

[Zachary Wright]

I am currently working on my first program that will use a graphical user interface. I am attempting to create a Minesweeper look-a-like, being as true to the original as possible. I haven't programmed any game logic yet, but I am nearly finished with setting up the layout of my components.

Although it will technically work in the state I have it, there are a few things bugging me that I cannot seem to figure out.

First, I will post a few of the important code samples I will be discussing:

 
       JPanel minePanel = new JPanel(new GridLayout(width, height)); //Holds the field of mines.
       JPanel contentPanel = new JPanel(new BorderLayout());   //Holds the minePanel and the stat panel    
       
       //Set up the status and reset panel. Contains the timer/counter/reset button.
       JPanel statPanel = new JPanel();
       GroupLayout layout = new GroupLayout(statPanel);
       layout.setAutoCreateGaps(true);
       layout.setAutoCreateContainerGaps(true);

       statPanel.setSize(40, width*iconWidth);
       statPanel.setBorder(BorderFactory.createBevelBorder(0, Color.GRAY, Color.WHITE));
       
       JButton reset = new JButton();
       reset.setPreferredSize(new Dimension(30,30));
       reset.setIcon(new ImageIcon("deadSmilie.gif"));
       JLabel counter = new JLabel(args[2]);
       JLabel timer = new JLabel(args[3]); 
       
//This probably looks horrendous. I'm trying to set up the statPanel so that you have the timer on one end, the reset button in the middle, and the counter on the other end. 
//No layout seems to work for this. BorderLayout seems //ideal, but since the middle button stretches out, it's impossible to conceal it using an iconImage.
        layout.setHorizontalGroup(
            layout.createParallelGroup(GroupLayout.Alignment.LEADING)
            .addGroup(GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
                .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                    .addComponent(counter))
                .addGroup(layout.createParallelGroup(GroupLayout.Alignment.CENTER)
                    .addComponent(reset))
                .addGroup(layout.createParallelGroup(GroupLayout.Alignment.TRAILING)
                    .addComponent(timer)))
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addGroup(layout.createParallelGroup(GroupLayout.Alignment.LEADING)
                    .addComponent(counter))
                .addGroup(layout.createParallelGroup(GroupLayout.Alignment.CENTER)
                    .addComponent(reset))
                .addGroup(layout.createParallelGroup(GroupLayout.Alignment.TRAILING)
                    .addComponent(timer)))              
        );

//Add the mine panel and the stat panel to the main content panel.
        contentPanel.add(statPanel, BorderLayout.NORTH);
        contentPanel.add(minePanel, BorderLayout.SOUTH);
        
        // create a new frame to hold the contentPanel
        JFrame application = new JFrame("Minesweeper"); 
        application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        Dimension size = new Dimension(width*iconWidth, height*iconHeight);
        application.add(contentPanel);
        application.setJMenuBar(menuBar); //I didn't include this code since it works fine - don't see a reason to.
        application.pack();
        application.setResizable(false);
        application.setVisible(true);

Now, my questions.

1. I have read through almost all of the swing tutorial, including the section on how to use the 'GroupLayout' layout. I am using this to set up the stat panel, with the counter/reset/timer button/labels. I want the two labels to be at each end, and the reset button to be in the middle. (I realize they aren't animated yet, I'll do that later). I thought that by grouping each one in a parallel group, and using the LEADING, CENTER, TRAILING constants, this would do that for me. However, as you can see, they like to group up in the middle:



Can anyone tell me what I'm doing wrong with the group layout here? Is there another layout that will function in this way, perhaps more simply?


2. I am using the grid layout to set up the mine field. It works great - except for a gap it wants to put in between the panels edge and the grid's edge. I have tried to make the panel smaller to accomodate for this gap - no matter how much smaller I make the panel, that gap remains there. Here is an image of what I'm talking about:



Anyone with experience using gridlayouts know what is wrong with my code?

Again, all of the code governing these panels is located in the big code block I posted.


I appreciate any help, this has been frustrating me for a while.

[Michael Dunn]

1)
can't help with grouplayout (I don't use it), but a BorderLayout should do what you want
JLabel at BorderLayout.WEST (set JLabel to JLabel.LEFT)
JButton with image in a JPanel(default FLowLayout should be OK), add the panel to BorderLayout.CENTER (panel is to take up additional space)
JLabel at BorderLayout.EAST (set JLabel to JLabel.RIGHT)
don't worry about sizing - refer to (2)

2)
gridlayout 'cells' are identical in size, so if the size of the panel is not an exact multiple of the number of cells, there will be a gap left over.
generally, calling frame.pack() will fit all in nicely

[Zachary Wright]

Michael Dunn wrote:1)
can't help with grouplayout (I don't use it), but a BorderLayout should do what you want
JLabel at BorderLayout.WEST (set JLabel to JLabel.LEFT)
JButton with image in a JPanel(default FLowLayout should be OK), add the panel to BorderLayout.CENTER (panel is to take up additional space)
JLabel at BorderLayout.EAST (set JLabel to JLabel.RIGHT)
don't worry about sizing - refer to (2)

2)
gridlayout 'cells' are identical in size, so if the size of the panel is not an exact multiple of the number of cells, there will be a gap left over.
generally, calling frame.pack() will fit all in nicely

You're absolutely right about #2..it seems that I was over complicating things by trying to set the size on everything. Turns out that setSize being called on a JButton is quite a bit different that setPreferred size...I didn't know that.

However, number 1 is still giving me issues. I took your advice and placed my reset button inside of another JPanel, then added it to the statPanel, but the button still expands to take up the entire space. :\

Not sure what the deal is there.

EDIT: Aha! It appears that JButton has two methods, setContentAreaFilled and setBorderPainted - which I can use to make the button invisible.

Thanks for the help, my gui looks perfect now and I can start on making the actual game. :cool:

[pete stein]

With regards to making a JButton invisible: I have found that a CardLayout works best here. I have the CardLayout initially show a JButton, and then depending on state, the JButton can be swapped for a JLabel that's either blank, or has a number on it, or has an ImageIcon of a blown mine.

[Otto Gál]

hi,


I also have an app with the same GUI - an infoPanel and a gamePanel, they are in the mainPanel

this is how I did it, and it works fine:

these are just those parts of the code where the layout is important:

infoPanel = new JPanel();
infoPanel.add(new JLabel("Number of moves: "));
infoPanel.add(movesText);

layout    = new GridLayout(rowLength,rowLength);
gamePanel = new JPanel(layout);

mainPanel = new JPanel();
mainPanel.setLayout(new BoxLayout(mainPanel, BoxLayout.PAGE_AXIS));

mainPanel.add(infoPanel);
mainPanel.add(gamePanel);
frame.setContentPane(mainPanel);

have you tried to change the

application.add(contentPanel);  

to

application.setContentPane(contentPanel);  

?