Creating a GUI for a board game

[RobbinDaHood]

First please read my topic here: http://forums.java.net/jive/message.jspa?messageID=242477#242477

As you can se I were told to go here… and i hope I have plased this topic the right place.

Thank you for reeding this.

PS: this is only the first steps, I have a lot of cool ideas to throw in this projekt.

[cylab]

I have just started experimenting with the Java Swing API. I started by reading the http://java.sun.com/docs/books/tutorial/uiswing/index.html and then i trey what i had learned. Of course there were problems, so i started to read the Swing API for my answers http://java.sun.com/javase/6/docs/technotes/guides/swing/index.html , but it seemed i were not able to find my answer there (the answer is probably there, but i can’t find it). So then i tried to search some articles on my problem, without success. So now i turn to this forum for my answers and hopes that I will be able to get it here. But first I have to apologies for my english, i am not native, but i hope that the spell checker function will help on that problem.

I have made this board game (let us call the class BAW), http://pastebin.com/f141d9fff , it compiles and it works very well (if i have to say it my self ) so now i want to make a GUI on it. I use NetBeans IDE 5.5.1 and it helped a lot.

I want to make 3 basic functions at first in my GUI:

1. make a frame, it is an application, so i have to do that, but I have learned that part.

2. There is 1010 squares on the board, they can have 3 condition, white, black and blank. these condition can be read from a object of the BAW class. so there have to be a function that displays the board with its 1010 squares and there conditions, and it have to refresh the squares constantly.

3. there have to be a way that when it is your turn in the game, to use the mouse to click on a square, then there is a method that calls the method in BAW, the method in BAW only needs a x and y coordinate to change that squares condition.

The first part Is pretty simple, so i have done that, but the 2 next parts i have trouble with. I tried to make a thread that’s refreshing the squares constantly (the squares were made of JButtons), but were not able to make that work either.

I have only one condition to the answer, and that is that i don’t want to manually program 100 squares, of 2 reasons: 1) there is a big chance of type errors 2) i am rather lazy
but if i have to manually do it, i just have to live with that fact.

If there is questions so please write them, it will increase the odds for me to get a good answer.

• Just create a JPanel inside your games JFrame with NetBeans and call it e.g. boardPanel.
• Set the boardPanel to gridLayout with 10 rows and 10 cols.
• Use two nested for loops (x and y coordinates) to add the JButtons to the cells. (See swing tutorials)
• Use aButton.putClientProperty(“location”, new Point(x,y)); to store the square’s location for later use.
• Add an ActionListener to the buttons to change the states.
• In the actionPerformed(event) you can use ((JButton)event.getSender()).getClientProperty(“location”)
  to get the location of the square which was clicked
• change the square-state in BAW class and change the state of the buttons directly

You should not need any Thread to update the squares.

[RobbinDaHood]

@cylab

• Just create a JPanel inside your games JFrame with BetBEans and call it e.g. boardPanel.
• Set the boardPanel to gridLayout with 10 rows and 10 cols.
• Use two nested for loops (x and y coordinates) to add the JButtons to the cells. (See swing tutorials)
• Use aButton.putClientProperty(“location”, new Point(x,y)); to store the square’s location for later use.
• Add an ActionListener to the buttons to change the states.
• In the actionPerformed(event) you can use ((JButton)event.getSender()).getClientProperty(“location”)
  to get the location of the square which was clicked
• change the square-state in BAW class and change the state of the buttons directly

You should not need any Thread to update the squares.

Thank you…

[RobbinDaHood]

@cylab

• Just create a JPanel inside your games JFrame with NetBeans and call it e.g. boardPanel.
• Set the boardPanel to gridLayout with 10 rows and 10 cols.
• Use two nested for loops (x and y coordinates) to add the JButtons to the cells. (See swing tutorials)
• Use aButton.putClientProperty(“location”, new Point(x,y)); to store the square’s location for later use.
• Add an ActionListener to the buttons to change the states.
• In the actionPerformed(event) you can use ((JButton)event.getSender()).getClientProperty(“location”)
  to get the location of the square which was clicked
• change the square-state in BAW class and change the state of the buttons directly

You should not need any Thread to update the squares.

One question:

When you in the game push one button you don’t only change the state of that button but probebly several buttons. what is the best method to refresh all the buttons?

[RobbinDaHood]

@cylab

• Use aButton.putClientProperty(“location”, new Point(x,y)); to store the square’s location for later use.

I cant find any methods or API’s that have such command?

[cylab]

@RobbinDaHood

When you in the game push one button you don’t only change the state of that button but probebly several buttons. what is the best method to refresh all the buttons?

You could create a updateSquares() method in BAW which updates all buttons’ state. You need to store the buttons making your squares in BAW for that. On actionPerformed of one button, set its the state in BAW and call updateSquares().

@RobbinDaHood

I cant find any methods or API’s that have such command?

http://java.sun.com/j2se/1.4.2/docs/api/javax/swing/JComponent.html#putClientProperty(java.lang.Object,%20java.lang.Object)
JButton extends from JComponent. NetBeans’ code completion should have given you that method.

[ddyer]

Building a board game GUI using stock widgets is like trying to build a car by going down
the to the appliance store and buying a refrigerator, blender, and self propelled vacuum cleaner.

You will be much happier with the eventual result if you go all the way down to a plain Canvas
class and build it up from there.

[cylab]

Actually it might be the easiest way to start. And for what he want’s to do, using a grid layout and JButtons might be just right. Going down to a plain canvas for a beginner is likely a frustrating task - you have to know so much more details to get it going.

[RobbinDaHood]

Now i have read the swing tutorial again, i have read a lot of API’s too.

But there I have some questions still.

this is what i have done for now, not at all finished but still i get a lot of problems and questions to ask (it is only a part of the class, this snippet is a part of the BWA class): http://pastebin.com/f5d55545a

In the first line i get a “interface expected here” when i have “import java.awt.event.MouseAdapter;” why that?

Then i get a error in line 9: I have “import java.awt.Point;” but it says the “Cannot find symbol” error

line 14 and 21 also give errors but i think that have something to do with that error in line 1.

is this done enterily wrong?

Documentation:

mouse adapter/listener
file:///C:/Documents%20and%20Settings/STS-b%C3%A6rbar/Skrivebord/programering/tutorial/tutorial/uiswing/events/mouselistener.html

JPanels
file:///C:/Documents%20and%20Settings/STS-b%C3%A6rbar/Skrivebord/programering/tutorial/tutorial/uiswing/components/panel.html

[cylab]

In the first line i get a “interface expected here” when i have “import java.awt.event.MouseAdapter;” why that?

the MouseAdapter is a class, not an interface, so your can not use it with implements. You need to implement a MouseListener instead or create an anonymous instance of the MouseAdapter directly while adding.

Anyway, this is not what you should do. Implement an ActionListener and add it to the button instead.

Speaking of the button:

int placering = y+i;
Pladen.add(new JButton().putClientProperty(placering , Point(y,i)));

is wrong, since this way you would add the result of putClientProperty() to “pladen”. Also you are missing a “new” statement before the Point, hence the “Cannot find symbol” message. The meanign of your “placering” variable is not clear to me. You won’t gain anything by having a client property name, that’s changing for every button. How do you know, which client property you would extract in the actionPerformed() method? Reread my post that suggests the putClientProperty().

Try

JButton button= new JButton();
button.putClientProperty("location" , new Point(y,i));
button.addActionListener(this); // implement ActionListener in PladenPanel.
pladen.add(button);

Btw. you should adhere to some coding conventions:

• class and interface names should start with a capital letter (public class PladenPanel extends JPanel implements ActionListener)
• method and variable names should start with a lower case letter (JPanel pladen = new JPanel(new GridLayout(10,10));)
• name your interfaces, classes, methods and variables in english

All this is fairly basic stuff. I would advice to find some decent tutorials to teach you java and swing and follow them word by word until you have grasped the concepts.

mouse adapter/listener
file:///C:/Documents%20and%20Settings/STS-b%C3%A6rbar/Skrivebord/programering/tutorial/tutorial/uiswing/events/mouselistener.html

JPanels
file:///C:/Documents%20and%20Settings/STS-b%C3%A6rbar/Skrivebord/programering/tutorial/tutorial/uiswing/components/panel.html

Linking to your local drive will obviously not work

[RobbinDaHood]

@cylab

the MouseAdapter is a class, not an interface, so your can not use it with implements. You need to implement a MouseListener instead or create an anonymous instance of the MouseAdapter directly while adding.

Anyway, this is not what you should do. Implement an ActionListener and add it to the button instead.

Speaking of the button:

int placering = y+i;
Pladen.add(new JButton().putClientProperty(placering , Point(y,i)));

is wrong, since this way you would add the result of putClientProperty() to “pladen”. Also you are missing a “new” statement before the Point, hence the “Cannot find symbol” message. The meanign of your “placering” variable is not clear to me. You won’t gain anything by having a client property name, that’s changing for every button. How do you know, which client property you would extract in the actionPerformed() method? Reread my post that suggests the putClientProperty().

Try

JButton button= new JButton();
button.putClientProperty("location" , new Point(y,i));
button.addActionListener(this); // implement ActionListener in PladenPanel.
pladen.add(button);

Btw. you should adhere to some coding conventions:

• class and interface names should start with a capital letter (public class PladenPanel extends JPanel implements ActionListener)
• method and variable names should start with a lower case letter (JPanel pladen = new JPanel(new GridLayout(10,10));)
• name your interfaces, classes, methods and variables in english

All this is fairly basic stuff. I would advice to find some decent tutorials to teach you java and swing and follow them word by word until you have grasped the concepts.

Linking to your local drive will obviously not work

thank you for the answer.

I see now that there is some basic stuff i forgot to make, i were to fast on that ocation sry, and then there is some stuff that i am very unsercure in (especially swing) and i thank you for advecing me

[RobbinDaHood]

Just one more problem (I hope)… I cant find any getSender() method in the ActionEvent API http://java.sun.com/javase/6/docs/api/java/awt/event/ActionEvent.html

This is the last error NetBean shows to me right now, thank you for all your support so far… sry becuse it is kind af basic, but i hope i just need a push in the right direction then i can stand for myself

[cylab]

getSource()

[RobbinDaHood]

I have made a method that checks the status of the button and then returns the IconImage coresponding to that:

public ImageIcon KnapIcon(int x, int y) {
        
        Image White = null;
                try {
                    White = ImageIO.read(new File(File.separator + "Engine" + File.separator + "White.JPEG"));
                } catch (Exception e) {
                    
                    System.out.println("White billedet mangler");
                    
                }
        
        Image Blank = null;
                try {
                    Blank = ImageIO.read(new File(File.separator + "Engine" + File.separator + "Blank.JPEG"));
                } catch (Exception e) {
                    
                    System.out.println("Blank billedet mangler");
                    
                }
        
        Image Black = null;
                try {
                    Black = ImageIO.read(new File(File.separator + "Engine" + File.separator + "Black.JPEG"));
                } catch (Exception e) {
                    
                    System.out.println("Black billedet mangler");
                    
                }
        
        if(feltFarveTjekker(x,y,felter.WHITE)) {
                   return new ImageIcon(White);
                }
        else if(feltFarveTjekker(x,y,felter.BLACK)) {
                   return new ImageIcon(Black);
                }
                
        else {
                   return new ImageIcon(Blank); 
                }
    }

I compile and it goes fine, then at runtime i get this error:

White billedet mangler
Blank billedet mangler
Black billedet mangler
Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException
        at javax.swing.ImageIcon.<init>(ImageIcon.java:161)
        at Engine.blackAndWhite.KnapIcon(blackAndWhite.java:529)
        at Engine.blackAndWhite$pladenPanel.<init>(blackAndWhite.java:575)
        at Engine.blackAndWhite.<init>(blackAndWhite.java:93)
        at Engine.Main$1.run(Main.java:23)
        at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:209)
        at java.awt.EventQueue.dispatchEvent(EventQueue.java:597)
        at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:273)
        at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:183)
        at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:173)
        at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:168)
        at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:160)
        at java.awt.EventDispatchThread.run(EventDispatchThread.java:121)

What am I doing wrong?

[cylab]

Looks like either Black or White is null. NetBeans (like mostly all IDEs) has an integrated debugger, which will be useful for such problems. You can set breakpoints (the debugger will stop at this line and you can inspect the values of your variables) and start your code in debug mode. You can then step through your code line by line to see, what is going wrong.

[RobbinDaHood]

I tryed that now, and all 3 variables are comming out with “null” values"

The files are in the same map as the class files, and i treid to load them with:

(“White.JPEG”)

(File.separator + “White.JPEG”)

(File.separator + “Engine” + File.separator + “White.JPEG”)

(File.separator + “build” + File.separator + “Engine” + File.separator + “White.JPEG”)

but nothing works, i also tried with jpg and gif files too.

[cylab]

Load your resources from the classpath using ClassLoader.getResource(). See the following related Thread for more information http://www.java-gaming.org/forums/index.php?topic=15424.0

[RobbinDaHood]

hmmm… it seems that i canot get it to work.

i read the api too http://java.sun.com/j2se/1.5.0/docs/api/java/lang/Class.html#getResourceAsStream(java.lang.String)

I have tried different things and they all return null:

[quote] return new ImageIcon(getClass().getClassLoader().getResource(“White.png”));
[/quote]

[quote]Image Black = null;
// try {
// Black = ImageIO.read(getClass().getClassLoader().getResourceAsStream(“Black.png”));
// } catch (IOException e) {
//
// System.out.println(“Black billedet mangler”);
//
// }
[/quote]
as you can se i have also changed my images to png.

[cylab]

It is important, that your images are on the classpath (e.g. in the same folder - or later jar - like your compiled classes). If you use getClass().getClassLoader().getResource(), You have to use the full qualified location under that folder, like getClass().getClassLoader().getResource("/your/package/White.png") including the fist slash (/).

[RobbinDaHood]

so if they are in the same folder as the class files it is (File.seperator + “Filename.type”); ?

becuse i tried that and “/Filename.type” and “Filename.type”

and it didnt work

my calling of the images is in a nested class, do that effect something here?