Need help in starting with GUI programming

[Ranajoy Saha]

Hi, Everyone

Recently, I made a Tic Tac Toe program. It's quite tedious for users to put the co-ordinates every time they want to make a move, so I am thinking of implementing this on a GUI, but I have no knowledge what so ever about GUI based programs, I've tried googling but either the stuff that's coming up isn't helpful enough or the stuff that I don't understand. It would be very nice, if someone experienced would guide me here. Thanks in advance.

Regards,
Ranajoy Saha

OUTPUT:
Welcome to TicTacToe
Here is your play area....

1 2 3
1 - - -

2 - - -

3 - - -

Moves : 0
Player 'X' is to move
Enter row number [1,2,3] :2
Enter column number [1,2,3] :3


1 2 3
1 - - -

2 - - X

3 - - -

Moves : 1
Player 'O' is to move
Enter row number [1,2,3] :1
Enter column number [1,2,3] :1


1 2 3
1 O - -

2 - - X

3 - - -

Moves : 2
Player 'X' is to move
Enter row number [1,2,3] :2
Enter column number [1,2,3] :2


1 2 3
1 O - -

2 - X X

3 - - -

Moves : 3
Player 'O' is to move
Enter row number [1,2,3] :2
Enter column number [1,2,3] :1


1 2 3
1 O - -

2 O X X

3 - - -

Moves : 4
Player 'X' is to move
Enter row number [1,2,3] :3
Enter column number [1,2,3] :1


1 2 3
1 O - -

2 O X X

3 X - -

Moves : 5
Player 'O' is to move
Enter row number [1,2,3] :1
Enter column number [1,2,3] :3


1 2 3
1 O - O

2 O X X

3 X - -

Moves : 6
Player 'X' is to move
Enter row number [1,2,3] :3
Enter column number [1,2,3] :2


1 2 3
1 O - O

2 O X X

3 X X -

Moves : 7
Player 'O' is to move
Enter row number [1,2,3] :1
Enter column number [1,2,3] :2


1 2 3
1 O O O

2 O X X

3 X X -

Player 'O' has won!

TicTacToe.java

package tictactoe;

/**
 *
 * @author Ranajoy
 */
import java.util.Arrays;
public final class TicTacToe {

    private char progress[][];
    private char current_player;
    private char previous_player;
    private int moves;
    //Initializes all the variables and set's the defualt player to be 'X'
    public TicTacToe()
    {
        progress = new char[3][3];
        moves = 0;
        for(char row[]:progress)
        {
            Arrays.fill(row, '-');
        }
        setPlayer();
    }
    //Displays the status of the cross board
    void display()
    {
        System.out.println(" \t1\t\t2\t\t3");
        int ctr = 1;
        for(char row[]: progress)
        {
            System.out.print(ctr++);
            for(char ch: row)
            {
                System.out.print("\t" + ch + "\t");
            }
            System.out.println("\n");
        }
    }
    //(Overloaded function 1) Returns true if that particular box is empty
    boolean isEmpty(int x, int y)
    {
        return (progress[x][y] == '-');
    }
    //(Overloaded function 2) Returns true if there is an empty box in the cross board
    boolean isEmpty()
    {
        boolean result = false;
        for(char row[]: progress)
        {
            for(char ch: row)
            {
                if(ch == '-')
                {
                    result = true;
                    break;
                }
                else
                {
                    //Do nothing
                }
            }
        }
        return result;
    }
    //Inserts element at a particulat position
    boolean insertAt(int x, int y)
    {
        boolean result = false;
        if(isEmpty(x,y))
        {
            progress[x][y] = current_player;
            moves++;
            result = true;
            setPlayer();
        }
        else
        {
            //Do nothing
        }
        return result;
    }
    //Checks if the game has been won by a player
    boolean ifWon()
    {
        boolean diagonal = false,row = false,column = false;
        int row_ctr = 0,col_ctr = 0;
        if(progress[0][0] == progress[1][1] && progress[1][1] == progress[2][2] && progress[0][0] != '-')
        {
            diagonal = true;
        }
        else if(progress[0][2] == progress[1][1] && progress[1][1] == progress[2][0] && progress[0][2] != '-')
        {
            diagonal = true;
        }
        else
        {
            for(int i = 0; i<3; i++)
            {
                for(int j = 0; j<2; j++)
                {
                    if(progress[i][j] == progress[i][j+1] && progress[i][j] != '-')
                    {
                       row_ctr++;
                    }
                    else
                    {
                       row_ctr = 0;
                    }
                    if(progress[j][i] == progress[j+1][i] && progress[j][i] != '-')
                    {
                       col_ctr++;
                    }
                    else
                    {
                       col_ctr = 0;
                    }
                }
                if(row_ctr == 2 || col_ctr == 2)
                {
                    row = true;
                    column = true;
                    break;
                }
            }
        }
        return (diagonal||row||column);
    }
    //Sets the current player to be 'X' or 'Y'
    void setPlayer()
    {
        if(moves % 2 == 0)
        {
            current_player = 'X';
            previous_player = 'O';
        }
        else
        {
            current_player = 'O';
            previous_player = 'X';
        }
    }
    //Returns the current player
    char getPlayer()
    {
        return current_player;
    }
    //Returns the previous player
    char getPreviousPlayer()
    {
        return previous_player;
    }
    //Returns the number of moves
    int getMoves()
    {
        return moves;
    }
}

TicTacToePlay.java

package tictactoe;

/**
 *
 * @author Ranajoy
 */
import java.util.Scanner;
public class TicTacToePlay 
{
    public static void main(String[] args)
    {
        System.out.println("Welcome to TicTacToe");
        TicTacToe obj = new TicTacToe();
        System.out.println("Here is your play area....\n");
        Scanner sc = new Scanner(System.in);
        while(true)
        {
            boolean moveSuccess;
            if(obj.isEmpty())
            {
                int x,y;
                do{   
                    obj.display();
                    System.out.println("Moves : " + obj.getMoves());
                    System.out.println("Player \'" + obj.getPlayer() + "\' is to move");
                    System.out.print("Enter row number [1,2,3] :");
                    x = sc.nextInt() - 1;
                    System.out.print("Enter column number [1,2,3] :");
                    y = sc.nextInt() - 1;
                    System.out.println("\n");
                }
                while(x > 3 || y > 3);
                moveSuccess = obj.insertAt(x, y);
            }
            else
            {
                obj.display();
                System.out.println("The game is a tie!");
                break;
            }
            if(moveSuccess && obj.getMoves() >= 4)
            {
                if(obj.ifWon())
                {
                    obj.display();
                    System.out.println("Player \'" + obj.getPreviousPlayer() + "\' has won!");
                    break;
                }
                else
                {
                    //Do nothing
                }
            }
        }
    }
}

[Knute Snortum]

This site will get you going with GUI. If you have Java 8 to work with, I would suggest using JavaFX, otherwise Swing.

TicTacToe is a difficult GUI to begin with. You might want to try a simpler program first.

Edit: I have a GitHub project that uses JavaFX, if you want to look at it. Full disclosure: I am not an expert at this.

[Campbell Ritchie]

Have you got an interface in your program where you can enter the number of the square for the next move? Have you got an interface which returns the current state of the board? You need to be able to write

TicTacToeGame game = new TicTacToeGame();
while (!game.finished())
{
   game.move(input.nextInt());
   gameDisplayer.display(game.getState());
}
System.out.println(game.getResult());

or similar. Then it will be quite easy to put a 3×3 grid of JButtons on a display and use each button to signal a move made.

Yes, you would appear to have such an interface. I would suggest you want a GUI with 9 JButtons and a JLabel which displays things like, “X to play”.

[edit:]Moving to our GUIs forum.

[Ranajoy Saha]

Thanks Knute Snortum, I'll go to the GitHub right away and begin my work. Campbell Ritchie, yes, I have an interface in the program in which the user needs to enter the number of the square for the next move.

Taking the square number from the user

System.out.println("Moves : " + obj.getMoves());
System.out.println("Player \'" + obj.getPlayer() + "\' is to move");
System.out.print("Enter row number [1,2,3] :");
x = sc.nextInt() - 1;
System.out.print("Enter column number [1,2,3] :");
y = sc.nextInt() - 1;

Passing the values to the inserAt(int x, int y) method

moveSuccess = obj.insertAt(x, y);

The insertAt() method itself

boolean insertAt(int x, int y)
    {
        boolean result = false;
        if(isEmpty(x,y))
        {
            progress[x][y] = current_player;
            moves++;
            result = true;
            setPlayer();
            pos_ROW[moves] = x;
            pos_COL[moves] = y;
        }
        else
        {
            //Do nothing
        }
        return result;
    }

[Tim Nachreiner]

Here is a simple gui to get you started. You need to put two images in the tictactoe package also: named X.png and O.png.

package tictactoe;

import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.GridLayout;



public class TicTacToe extends JFrame {

    JPanel panel;
    XOButton[] buttons = new XOButton[9];
    
    public TicTacToe() {
        super("TicTacToe");
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(500, 500);
        setResizable(false);                
        initComponents();
        setVisible(true);
    }
    
    private void initComponents() {
        panel = new JPanel(new GridLayout(3,3));
        for(int i=0;i<buttons.length;i++) {
            buttons[i] = new XOButton();
            panel.add(buttons[i]);
        }
        add(panel);
    }    
    
    public static void main(String[] args) {
        new TicTacToe();
    }
}

package tictactoe;


import javax.swing.ImageIcon;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

import javax.swing.JOptionPane;

public class XOButton extends JButton implements ActionListener {

    byte val;
    ImageIcon imgX;
    ImageIcon imgO;

    XOButton() {
        val = 0;
        imgX = new ImageIcon(getClass().getResource("X.png"));
        imgO = new ImageIcon(getClass().getResource("O.png"));
        setIcon(null);
        addActionListener(this);
    }

    public void actionPerformed(ActionEvent e) {
        val++;
        val%=3;

        switch (val) {
            case 0:
                setIcon(null);
                break;
            case 1:
                setIcon(imgX);
                break;
            case 2:
                setIcon(imgO);
                break;
            default:
                JOptionPane.showMessageDialog(this, "cannot select this button");
                break;
        }
    }
}