Cómo hacer una interfaz gráfica de grilla en Java

Información del autor

En esta etapa, la Grilla no hará nada especial. Pero si investigas un poco podrás agregarle actionlisteners y un poco de lógica para crear un juego sencillo en 2D como el Tres en línea, o algunos más complicados como la Batalla naval.

Nota: Este artículo usa Eclipse en todos los ejemplos, por lo que puede verse distinto en tu IDE. Esto debería ser muy similar a lo que necesitarías para JCreator, pero no servirá tanto si usas un IDE con interfaz gráfica como NetBeans, principalmente debido al método de arrastrar y soltar de NetBeans.

Pasos

1
Crea un proyecto Java. Esto es bastante simple. Inicia tu IDE y crea un proyecto nuevo. Llámalo como quieras. En el ejemplo, será buttongrid.
- El nombre no importa, ya que sólo se trata del nombre del archivo.
2
Crea una clase Java con el método main. Crea una clase nueva y llámala como gustes. En el ejemplo será buttongrid. Para los usuarios de Eclipse, habrá que marcar la caja llamada public static void main(string[] args), así no tienes que escribirlo cuando comiences.
- Este nombre es más importante que el anterior, ya que tendrá que ser una única palabra o no será utilizable.
3
Importa las bibliotecas. Esto trae a tu código toda la información que necesitarás para escribirlo. Necesitarás importar javax.swing.JFrame, javax.swing.JButton, y java.awt.Gridlayout. Esto se coloca antes del comienzo de la clase, en algún lugar entre las líneas 1 y 3, sin importar el orden en el que estén.
4
Crea un constructor. El constructor crea una instancia nueva de la clase buttongrid, permitiendo que varias buttongrid's tengan la información separada. Todos los constructores deben llamarse igual que sus clases. Los constructores no necesitan nada antes, pero se les suele poner 'public' para una mejor referencia. Los constructores suelen colocarse como el primer método en una clase, por lo que va inmediatamente después del nombre de la clase. Sin embargo, debe colocarse dentro de la clase. El constructor buttongrid necesita parámetros, que van puestos en los paréntesis a continuación del nombre del constructor. Los parámetros en este ejemplo son los enteros 'x' e 'y'.
5
Crea el Marco:
1. El marco debe nombrarse. Para asegurarte de que pueda referenciarse por fuera del método constructor ButtonGrid debes colocarlo afuera de ese método pero dentro de la clase. La mayoría de las variables son nombradas en la clase de arriba, justo antes del constructor. Para crear un marco nuevo escribe: JFrame frame = new JFrame();
2. Adentro del método constructor necesitamos asegurarnos de que todos los botones serán colocados dentro del diseño de la grilla. Para hacerlo fijamos el diseño del marco escribiendo: frame.setLayout(new GridLayout(x, y));
3. No es obligatorio, necesariamente, pero para hacer que el marco se cierre al hacer clic en el botón 'x' de la esquina superior derecha necesitaremos agregar la línea: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
4. Para que el marco tenga un tamaño adecuado y que entre todo, necesitaremos ejecutar el comando pack: frame.pack();
5. Finalmente, necesitamos hacer que el marco sea visible: frame.setVisible(true);
6
Crea la grilla de botones:
1. Los botones con los que el usuario interactúa necesitan hacerse, pero como no sabemos cuántos necesitaremos, primero deben nombrarse. Así que inmediatamente después de la línea en la que creaste el marco, crea los botones: JButton[][] grid; Los dos pares de corchetes están allí para indicar que los JButton's de la grilla tienen un formato de dos dimensiones; si hubiera sólo un juego de corchetes entonces sería simplemente una hilera de JButton's, lo que igualmente funcionaría, pero es más fácil referenciar cuál botón se está creando o con cuál se está interactuando si está en dos dimensiones.
2. Los JButton's han sido nombrados, pero aún tenemos que saber cuántos botones habrá. Necesitas agregar una línea de código al constructor que fuje esa cantidad: grid=new JButton[width][length];
3. Ahora que se ha determinado que habrá un cierto número de botones, se debe crear cada uno. La manera más fácil de hacerlo es con dos bucles, uno para el eje x y el otro para el eje y. Adentro de los dos bucles crearemos un botón nuevo, y para mejor referencia el ejemplo pone texto adentro de cada botón para que sepamos dónde está cada botón en el array de dos dimensiones. Para crear un botón, adentro del bucle debes poner grid[x][y] = new JButton ("("+x+","+y+")");
7
Agrega los botones al marco. Adentro del bucle debemos poner los botones en el marco con un comando sencillo: frame.add(grid[x][y]);
8
Crea la Instancia ButtonGrid. En el tipo principal de clase escribe: new ButtonGrid(3,3); Los dos tres la hacen una grilla de 3 por 3, y se pueden poner dos números positivos cualesquiera.
9
Ejecuta el Programa. Para hacerlo en Eclipse presiona Ctrl+F11
10
Descubre más sobre java: http://java.sun.com/j2se/1.4.2/docs/api/index-files/index-1.html
1. More with buttons: To make the buttons do something look up actionListener()
Anuncio

Método 1

Método 1 de 1:
Pasos del Código

La clase main:

public class ButtonGrid {
	public static void main(String[] args) {
		
	}
}

Importaciones:

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

public class ButtonGrid {
...

Código del Constructor:

public class ButtonGrid {
	public ButtonGrid(int width, int length){
	}
}
...

Código del Marco:

public class ButtonGrid {
	JFrame frame=new Jframe();
	public ButtonGrid(int width, int length){
		frame.setLayout(new GridLayout(width,length));
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
		frame.pack(); 
		frame.setVisible(true); 
	}
}
...

Código de la Grilla de Botones:

|JFrame frame=new JFrame(); //crea el marco
JButton[][] grid; //nombra la grilla de botones
	
public ButtonGrid(int width, int length){ //constructor con 2 parámetros
	frame.setLayout(new GridLayout(width,length)); //fija el diseño del marco
	grid=new JButton[width][length]; //define el tamaño de la grilla
	for(int y=0; y<length; y++){ 
		for(int x=0; x<width; x++){
			grid[x][y]=new JButton("("+x+","+y+")");   
			frame.add(grid[x][y]); //agrega botón a la grilla
		}
	}
	frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
	frame.pack(); 
	frame.setVisible(true);
}
...

Agregando Botones al Marco:

for(int y=0; y<length; y++){ 
	for(int x=0; x<width; x++){
		grid[x][y]=new JButton("("+x+","+y+")");  
		frame.add(grid[x][y]);
	}
}
...

Creando una instancia para grilla de botones:

public static void main(String[] args) {
	new ButtonGrid(3,3);//crea ButtonGrid nuevo con 2 parámetros
}
...

Código Final:

import javax.swing.JFrame; //importa biblioteca JFrame
import javax.swing.JButton; //importa biblioteca JButton
import java.awt.GridLayout; //importa biblioteca GridLayout

public class ButtonGrid {

	JFrame frame=new JFrame(); //crea el marco
	JButton[][] grid; //nombra la grilla de botones

	public ButtonGrid(int width, int length){ //constructor
		frame.setLayout(new GridLayout(width,length)); //crea el diseño
		grid=new JButton[width][length]; //determina el tamaño de la grilla
		for(int y=0; y<length; y++){
			for(int x=0; x<width; x++){
				grid[x][y]=new JButton("("+x+","+y+")"); //crea un botón nuevo
				frame.add(grid[x][y]); //añade el botón a a grilla
			}
		}
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.pack(); //fija un tamaño apropiado para el marco
		frame.setVisible(true); //hace visible el marco
	}
	public static void main(String[] args) {
		new ButtonGrid(3,3);//crea ButtonGrid nuevo con 2 parámetros
	}
}

import javax.swing.JFrame; //importa biblioteca JFrame import javax.swing.JButton; //importa biblioteca JButton import java.awt.GridLayout; //importa biblioteca GridLayout

public class ButtonGrid {

JFrame frame=new JFrame(); //crea el marco JButton[][] grid; //nombra la grilla de botones

public ButtonGrid(int width, int length){ //constructor frame.setLayout(new GridLayout(width,length)); //crea el diseño grid=new JButton[width][length]; //determina el tamaño de la grilla for(int y=0; y<length; y++){ for(int x=0; x<width; x++){ grid[x][y]=new JButton("("+x+","+y+")"); //crea un botón nuevo frame.add(grid[x][y]); //añade el botón a a grilla } } frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); //fija un tamaño apropiado para el marco frame.setVisible(true); //hace visible el marco } public static void main(String[] args) { new ButtonGrid(3,3);//crea ButtonGrid nuevo con 2 parámetros

}