Los jFrame, (ventanas en java), forman la parte principal de las interfaces de usuario en java y son muy utilizadas para realizar diferentes aplicaciones. Además, estos jFrame pueden contener laminas o JPanel.
En este ejercicio de interfaces, crearemos un formulario que pintará un JPanel en tres colores dependiendo del control que se seleccione.
Para ello, crearemos una ventana (JFrame) y encima de éste, colocaremos una lámina (JPanel) que contendrá tres RadioButton. Cada uno de ellos pintará un formulario en azul, en rojo o en verde. Todo dependerá de la opción que el usuario seleccione.
Crear ventanas en java (JFrame) y colocar una lámina (JPanel).
El código que crearemos a partir de este momento lo haremos en una clase llamada PintarVentana, dentro del paquete vista.
// Importamos el paquete swing para trabajar con interfaces gráficas
import javax.swing.*;
/**
* ESTA CLASE DEBE HEREDAR DE JFRAME PARA PODER
* CREAR LA VENTANA DE NUESTRA INTERFAZ
*/
public class PintarVentana extends JFrame{
/* Esta variable no es necesaria, pero si
* muy recomendable, ya que nos evitará problemas
* si hay futuras actualizaciones de la aplicacion*/
private static final long serialVersionUID = 1L;
// Creamos una lámina para colocar encima del JFrame
public JPanel lamina = new JPanel();
/**
* EL CONSTRUCTOR CREA LA VENTANA, LE DA UNAS PROPIEDADES
* Y ADEMÁS EN EL, SE INDICA QUE SE LE AGREGUE UN JPANEL
* O LO QUE ES LO MISMO, UNA LAMINA PARA PODER AGREGAR
* LOS CONTROLES NECESARIOS
*/
public PintarVentana() {
// Le damos un tamaño a la ventana
this.setSize(450, 300);
// Agregamos un tículo
this.setTitle("Colorear ventanas");
// Lo centramos en pantalla
this.setLocationRelativeTo(null);
/* Le decimos que no se puede redimensionar*/
this.setResizable(false);
// Le decimos que al cerrar la ventana, acabe el programa
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Agregamos una lámina a la ventana
this.getContentPane().add(lamina);
}
}
El código que acabamos de crear, nos crea una ventana (jFrame) y agrega una lámina (jPanel) para poder colocar los controles que sean necesarios encima de dicha lámina.
La lamina que vamos a pintar, lo haremos a través de una clase en el paquete controlador. Por ello, debemos declarar esta lámina como pública, para poder acceder a ella desde una clase diferente que crearemos en otro paquete.
Agregar controles a la lámina del JFrame.
Una vez ya tenemos creada nuestra ventana en java y agregada una lámina, la vamos a configurar, es decir, darle unas características. Una vez hecho esto, agregaremos los controles correspondientes.
Estos controles, se declararán con el modificador de acceso public y se instanciarán, es decir, se crearán los objetos a nivel de clase. Debemos tener en cuenta que vamos a acceder a ellos desde una clase de otro paquete de nuestro proyecto, por ello debemos declarar los objetos como públicos.
// Creamos los controles que tendrá nuestra lámina
public JRadioButton rdbAzul = new JRadioButton("Azul");
public JRadioButton rdbRojo = new JRadioButton("Rojo");
public JRadioButton rdbVerde = new JRadioButton("Verde");
public JTextField txtColor = new JTextField(10);
private ButtonGroup grupoBotones = new ButtonGroup();
/**
* ESTE MÉTODO CONFIGURA NUESTRA LÁMINA (JPANEL) Y AGREGA LOS CONTROLES
* AL JPANEL DE NUESTRA VENTANA
*/
private void configurarLaminaYagregarControles() {
// Lo primero que debemos hacer, es darle una
// distribución (un layout) a nuestra lámina.
// En este caso, no utilizaremos ningún tipo de distribución
// por lo que estableceremos el layout de la lamina (Jpanel) en null
lamina.setLayout(null);
// Agregamos cada RadioButton al ButtonGroup. Esto nos permite
// que cuando seleccionemos una opción, se desactive la que
// este seleccionada
grupoBotones.add(rdbAzul);
grupoBotones.add(rdbRojo);
grupoBotones.add(rdbVerde);
/* Damos una posicion y un tamaño (x,y, ancho, alto)
* a cada uno de los RadioButton y al cuadro de texto*/
rdbAzul.setBounds(10, 10, 60, 30);
rdbRojo.setBounds(10, 40, 60, 30);
rdbVerde.setBounds(10,70, 60, 30);
txtColor.setBounds(10, 100, 60, 20);
/* Desactivamos el txtColor para que no se pueda escribir*/
txtColor.setEnabled(false);
/* Añadimos los controles a la lamina*/
lamina.add(rdbAzul);
lamina.add(rdbRojo);
lamina.add(rdbVerde);
lamina.add(txtColor);
}
Para finalizar, llamaremos a este método desde el constructor de la clase para que los componentes se agreguen a la lámina.
Ventamos como quedaría el código completo de la clase PintarVentana.
package vista;
// Importamos el paquete swing para trabajar con interfaces gráficas
import javax.swing.*;
/**
* ESTA CLASE DEBE HEREDAR DE JFRAME PARA PODER
* CREAR LA VENTANA DE NUESTRA INTERFAZ
*/
public class PintarVentana extends JFrame{
/* Esta variable no es necesaria, pero si
* muy recomendable, ya que nos evitará problemas
* si hay futuras actualizaciones de la aplicacion*/
private static final long serialVersionUID = 1L;
// Creamos una lámina para colocar encima del JFrame
private JPanel lamina = new JPanel();
// Creamos los controles que tendrá nuestra lámina
public JRadioButton rdbAzul = new JRadioButton("Azul");
public JRadioButton rdbRojo = new JRadioButton("Rojo");
public JRadioButton rdbVerde = new JRadioButton("Verde");
public JTextField txtColor = new JTextField(10);
private ButtonGroup grupoBotones = new ButtonGroup();
/**
* EL CONSTRUCTOR CREA LA VENTANA, LE DA UNAS PROPIEDADES
* Y ADEMÁS EN EL, SE INDICA QUE SE LE AGREGUE UN JPANEL
* O LO QUE ES LO MISMO, UNA LAMINA PARA PODER AGREGAR
* LOS CONTROLES NECESARIOS
*/
public PintarVentana() {
// Le damos un tamaño a la ventana
this.setSize(450, 300);
// Agregamos un tículo
this.setTitle("Colorear ventanas");
// Lo centramos en pantalla
this.setLocationRelativeTo(null);
/* Le decimos que no se puede redimensionar*/
this.setResizable(false);
// Le decimos que al cerrar la ventana, acabe el programa
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Agregamos una lámina a la ventana
this.getContentPane().add(lamina);
// llamamos al método que configura la lamina y agrega los controles
configurarLaminaYagregarControles();
}
/**
* ESTE MÉTODO CONFIGURA NUESTRA LÁMINA (JPANEL) Y AGREGA LOS CONTROLES
* AL JPANEL DE NUESTRA VENTANA
*/
private void configurarLaminaYagregarControles() {
// Lo primero que debemos hacer, es darle una
// distribución (un layout) a nuestra lámina.
// En este caso, no utilizaremos ningún tipo de distribución
// por lo que estableceremos el layout de la lamina (Jpanel) en null
lamina.setLayout(null);
// Agregamos cada RadioButton al ButtonGroup. Esto nos permite
// que cuando seleccionemos una opción, se desactive la que
// este seleccionada
grupoBotones.add(rdbAzul);
grupoBotones.add(rdbRojo);
grupoBotones.add(rdbVerde);
/* Damos una posicion y un tamaño (x,y, ancho, alto)
* a cada uno de los RadioButton y al cuadro de texto*/
rdbAzul.setBounds(10, 10, 60, 30);
rdbRojo.setBounds(10, 40, 60, 30);
rdbVerde.setBounds(10,70, 60, 30);
txtColor.setBounds(10, 100, 60, 20);
/* Desactivamos el txtColor para que no se pueda escribir*/
txtColor.setEnabled(false);
/* Añadimos los controles a la lamina*/
lamina.add(rdbAzul);
lamina.add(rdbRojo);
lamina.add(rdbVerde);
lamina.add(txtColor);
}
}
Como interactuar con nuestra aplicación.
Una vez ya tenemos creada la vista de nuestra interfaz, crearemos la interacción del usuario con el formulario. Esto consiste en que el usuario cada vez que seleccione una u otra opción la lamina se pinte de uno u otro color.
La interacción del usuario con la interfaz, la programaremos en el paquete controlador. Para esto dentro de este paquete, crearemos una clase llamada ControlClics e importaremos el paquete vista, ya que necesitaremos acceder tanto al formulario como a los diferentes controles. El código que programaremos será el siguiente:
package controlador;
import java.awt.Color;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import vista.*;
/**
* ESTA CLASE DEBE IMPLEMENTAR LA INTERFAZ DE JAVA ACTIONLISTENER
* Y DEBE SOBREESCRIBIR TODOS LOS MÉTODOS QUE CONTENGA ESTA INTERFAZ
*/
public class ControlClics implements ActionListener {
// Creamos una variable de tipo PintarVentana
PintarVentana vistaPintarVentana;
/**
* EL MÉTODO CONSTRUCTOR RECIBIRÁ POR PARÁMETRO UN
* OBJETO DE TIPO PINTAR VENTANA Y A ESTE OBJETO
*/
public ControlClics(PintarVentana vPintar) {
// A La variable vistaPintarVentana se le asignara
// un objeto de la clase PintarVentana llamado vPintar
// y el cual se le esta pasando por parámetro
// en el constructor de esta clase
vistaPintarVentana=vPintar;
}
/**
* ESTE MÉTODO PONE A LA ESCUCHA DE LOS EVENTOS
* DE CLIC DE RATON A CADA UNO DE LOS RADIOBUTTON
* DE LA VENTANA CREADA EN EL PAQUETE VISTA
*/
public void escucharEventos() {
vistaPintarVentana.rdbAzul.addActionListener(this);
vistaPintarVentana.rdbRojo.addActionListener(this);
vistaPintarVentana.rdbVerde.addActionListener(this);
}
/**
* ESTE MÉTODO SE ENCARGA DE EJECUTAR LAS ACCIONES
*
*/
@Override
public void actionPerformed(ActionEvent e) {
// Si el RadioButton azul está seleccionado
if(vistaPintarVentana.rdbAzul.isSelected()) {
// Pintamos de azul la ventana
vistaPintarVentana.lamina.setBackground(Color.BLUE);
// Colocamos en el cuadro de texto "Azul"
vistaPintarVentana.txtColor.setText("Azul");
}
// Sino, si el RadioButton rojo está seleccionado
else if(vistaPintarVentana.rdbRojo.isSelected()) {
// Pintamos de rojo la ventana
vistaPintarVentana.lamina.setBackground(Color.RED);
// Colocamos en el cuadro de texto "Rojo"
vistaPintarVentana.txtColor.setText("Rojo");
}
// Sino, si el RadioButton verde esta seleccionado...
else if(vistaPintarVentana.rdbVerde.isSelected()) {
// Pintamos de rojo la ventana
vistaPintarVentana.lamina.setBackground(Color.GREEN);
// Colocamos en el cuadro de texto "Verde"
vistaPintarVentana.txtColor.setText("Verde");
}
}
}
Por el momento si ejecutásemos esta aplicación, no hará absolutamente nada, bien es cierto que ya hemos programado nuestra interfaz y que también le dimos las instrucciones para que el usuario puede utilizarla, pero para que esto suceda, debemos conectar nuestra interfaz que se encuentra en el paquete vista, con el controlador que hacer que se ejecuten las acciones. ¡Vamos a ver como conseguirlo!
Conectando las capas vista y controlador para poder ejecutar las acciones.
Para poder conectar ambas capas, debemos acceder a nuestro paquete vista y debemos crear en la clase que crea la ventana una instancia de nuestro controlador. Para ello dentro de la clase que construye nuestra ventana, crearemos una instancia de la clase ControlClics y acto seguido, el siguiente método:
// Importamos el paquete controlador
import controlador.*;
public class PintarVentana extends JFrame{
// Declaramos una variable de tipo ControlClics
private ControlClics ejecutarEventosClic;
/**
* METODO QUE CONECTA EL CONTROLADOR CON LA INTERFAZ GRÁFICA
*/
private void ejecutarAcciones() {
// Creamos una instancia de la clase controladorClics
// Esta instancia recibe por parámetro un objeto de tipo
// PintarVentana. Ese objeto, será esta misma clase.
ejecutarEventosClic = new ControlClics(this);
// Ahora la clase ControlClics, tiene un metodo que pone
// a la escucha a los diferentes controles, así que,
// llamaremos a ese método.
ejecutarEventosClic.escucharEventos();
}
}
El constructor de la clase para poder crear nuestras ventanas en java, quedaría de la siguiente manera:
public PintarVentana() {
// Le damos un tamaño a la ventana
this.setSize(450, 300);
// Agregamos un tículo
this.setTitle("Colorear ventanas");
// Lo centramos en pantalla
this.setLocationRelativeTo(null);
/* Le decimos que no se puede redimensionar*/
this.setResizable(false);
// Le decimos que al cerrar la ventana, acabe el programa
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Agregamos una lámina a la ventana
this.getContentPane().add(lamina);
// llamamos al método que configura la lamina y agrega los controles
configurarLaminaYagregarControles();
// Llamamos al mentodo que pone los controles a la escucha
ejecutarAcciones();
}
Como lanzar nuestras ventanas en java. Ejecutar la aplicación.
Para que nuestra aplicación se ejecute, solo debemos implementar el método main de la clase que hemos llamado Principal que se encuentra en el paquete llamado arranque de la siguiente manera:
package arranque;
// Importamos el paquete vista
import vista.*;
public class Principal {
public static void main(String[] args) {
// Creamos una instancia de la clase PintarVentana
PintarVentana ventanaPintada=new PintarVentana();
// Hacemos visible la ventana
ventanaPintada.setVisible(true);
}
}