¿Tocamos Swing?
¡Saludos nuevamente blogueros!
En este post veremos algunas de las características de la biblioteca de clases Swing que posee Java, la cual utilizaremos para el diseño de una interfaz de usuario básica. También revisaremos la gestión de posicionamiento de los componentes gráficos en la pantalla, a través de las diferentes clases de contenedores (Layout) de componentes que posee el lenguaje, en particular le dedicaremos mucha atención a la clase GridBagLayout, que nos permite crear una presentación más elaborada.
También hay que señalar que en esta ocasión nos encargaremos únicamente de la aparición de los elementos gráficos en la pantalla, por lo que trabajaremos con el nivel de Vista, dejando la implementación del Controlador y el Modelo para los siguientes artículos.
La Vista
Bueno, dicho esto entremos en acción. El primer paso consistirá en la creación de una clase que funcionará como un panel que contendrá a los diferentes elementos de la interface que iremos incorporando. Para este propósito es que incluí el siguiente código fuente:
PanelSwing.java
import javax.swing.*;
import java.awt.*;
/**
* @Desc Clase que crea un panel con una serie de componentes visuales que podemos incluir en una ventana de la clase JFrame
* @author Beto González
*/
public class PanelSwing extends JPanel {
//Atributos de la clase que consisten en una serie de componentes visuales
public JPanel panelCentral, panelSuperior, panelInferior;
public JLabel lblTitulo, lblPie, lblMensaje, lblInfo,lblCampo1, lblCampo2;
public JTextField txtCampo1, txtCampo2;
public JButton btnAccion1;
//Constructor de la clase
PanelSwing() {
this.setLayout(new BorderLayout());
this.panelCentral = new JPanel(new GridBagLayout());
this.panelSuperior = new JPanel(new FlowLayout(FlowLayout.LEFT));
this.panelInferior = new JPanel(new GridLayout(1,3)); //Este panel consistirá en una tabla de 1 x 3 (1 renglon con 3 columnas)
this.lblTitulo = new JLabel("Encabezado o Banner de la ventana");
this.lblPie = new JLabel("Barra de estado");
this.lblInfo = new JLabel("Autor: Beto González");
this.lblMensaje = new JLabel("Bienvenido a esta práctica");
this.lblCampo1 = new JLabel("Nombre completo:");
this.lblCampo2 = new JLabel("Correo electrónico:");
this.txtCampo1 = new JTextField("", 30);
this.txtCampo2 = new JTextField("",20);
this.btnAccion1 = new JButton("Buscar");
}
/**
* @Desc Método en el que se lleva a cabo la colocación de cada uno de los componentes en el panel principal
*/
public void estableceContenedores() {
//Establecemos el panel superior
panelSuperior.add(this.lblTitulo);
this.add(panelSuperior, BorderLayout.NORTH);
//Establecemos el panel central
GridBagConstraints delimitador = new GridBagConstraints(); //Creamos un delimitador que usaremos para especificar la ubicación de los componentes dentro del panel
delimitador.ipadx = 8; //Espacio mínimo entre los componentes de un mismo renglon
delimitador.ipady = 5; //Altura de los componentes
delimitador.gridx = 0;
delimitador.gridy = 0;
delimitador.anchor = GridBagConstraints.EAST;
panelCentral.add(lblCampo1, delimitador);
delimitador.gridx = 1;
delimitador.anchor = GridBagConstraints.WEST;
panelCentral.add(txtCampo1, delimitador);
delimitador.gridy = 1;
delimitador.gridx = 0;
delimitador.anchor = GridBagConstraints.EAST;
panelCentral.add(lblCampo2, delimitador);
delimitador.gridx = 1;
delimitador.anchor = GridBagConstraints.WEST;
panelCentral.add(txtCampo2, delimitador);
delimitador.gridx = 3;
delimitador.gridy = 3;
panelCentral.add(btnAccion1, delimitador);
this.add(panelCentral, BorderLayout.CENTER);
//Establecemos el panel inferior
panelInferior.add(lblPie, 0); //Primera celda
panelInferior.add(lblMensaje,1); //Segunda celda
panelInferior.add(lblInfo,2); //Tercera celda
this.add(panelInferior, BorderLayout.SOUTH);
}
}
La clase recibe el nombre de PanelSwing, ya que básicamente consistirá en un panel que extenderá a la clase JPanel, la cual se encuentra contenida en la biblioteca swing. Este panel representa todo el contenido de la ventana de nuestra aplicación, ya que dentro de él se agregarán otra serie de paneles en los que se colocarán diferentes algunos de los componentes que utilizamos regularmente en el diseño de interfaces de usuario. Estos componentes aparecen declarados como atributos de nuestra clase como podemos ver:
public JPanel panelCentral, panelSuperior, panelInferior;
public JLabel lblTitulo, lblPie, lblMensaje, lblInfo,lblCampo1, lblCampo2;
public JTextField txtCampo1, txtCampo2;
public JButton btnAccion1;
Entre ellos se incluyen tres paneles, etiquetas, campos de texto y un botón, todos de la biblioteca Swing. Estos objetos son creados dentro del constructor de la clase como podemos ver:
this.setLayout(new BorderLayout());
this.panelCentral = new JPanel(new GridBagLayout());
this.panelSuperior = new JPanel(new FlowLayout(FlowLayout.LEFT));
this.panelInferior = new JPanel(new GridLayout(1,3));
this.lblTitulo = new JLabel("Encabezado o Banner de la ventana");
this.lblPie = new JLabel("Barra de estado");
this.lblInfo = new JLabel("Autor: Beto González");
this.lblMensaje = new JLabel("Bienvenido a esta práctica");
this.lblCampo1 = new JLabel("Nombre completo:");
this.lblCampo2 = new JLabel("Correo electrónico:");
this.txtCampo1 = new JTextField("", 30);
this.txtCampo2 = new JTextField("",20);
this.btnAccion1 = new JButton("Buscar");
Donde además se declara que el Layout de la clase PanelSwing será BorderLayout; este tipo de contenedor nos permite colocar los elementos en cinco ubicaciones distintas dentro de la pantalla, utilizando como referencia los puntos cardinales:
Ya que al momento de agregar cada uno de los elementos a este contenedor se utilizan los valores NORTH, SOUTH, EAST, WEST y CENTER, que corresponden a cada una de las ubicaciones indicadas en la imagen y que se encuentran declarados como valores estáticos dentro de la clase BorderLayout.
El objeto panelSuperior será ubicado en el NORTH de este contenedor, panelCentral en CENTER y panelInferior en el SOUTH. Pueden darse cuenta que este tipo de delimitación está pensada especialmente para diseñar nuestras ventanas para aplicaciones, ya que cada una de las ubicaciones corresponde a un componente específico de la pantalla, por ejemplo la parte Norte puede llevar una barra de menú o de iconos, o una sección de encabezados, los menús también podrían aparecer en las ubicaciones Oeste y Este. Mientras que la parte Central está pensada para colocar el contenido principal de la pantalla, como pueden ser las imagenes, videos, formularios, texto, etc. Finalmente el área Sur por lo general será usada para llevar una barra de estado. Aunque al final la decisión sobre como distribuyamos los elementos de la interface será únicamente de los diseñadores.
El panelSuperior utilizará un Layout de tipo FlowLayout, que ordena los elementos como una secuencia horizontal de izquierda a derecha, similar a como escribimos texto en un editor común. Mientas que panelInferior estará delimitado por un Layout GridLayout, que hace aparecer a los componentes como si estuvieran dentro de una cuadricula de tamaño constante, es decir que en este contenedor se especifica el número de celdas que tendrá, al declarar el número de filas y columnas dentro de su constructor, como vemos que se escribió en el código:
this.panelInferior = new JPanel(new GridLayout(1,3));
Hasta aquí hemos hablado un poco de los tres Layout básicos para interfaces, aún falta ver el más poderoso de todos, es decir el GridBagLayout, que es utilizado por el panelCentral para ubicar los componentes de un formulario. Este contendedor nos permite colocar los componentes dentro de una estructura similar a una tabla HTML, es decir que también cuenta con renglones y columnas, pero con la gran diferencia de que el tamaño y número de las filas y columnas son variables, al mismo tiempo que podemos controlar la ubicación y el relleno que tendrán cada uno de los componentes dentro de la fila. La apariencia que se busca lograr para este ejemplo es la siguiente:
La cual es similar a la apariencia de un formulario básico como los que hemos manejado en las páginas HTML de los temas sobre aplicaciones Web.
Para lograr este propósito es que se incluye el código que vemos dentro del método estableceContenedores():
GridBagConstraints delimitador = new GridBagConstraints();
delimitador.ipadx = 8;
delimitador.ipady = 5;
delimitador.gridx = 0;
delimitador.gridy = 0;
delimitador.anchor = GridBagConstraints.EAST;
panelCentral.add(lblCampo1, delimitador);
delimitador.gridx = 1;
delimitador.anchor = GridBagConstraints.WEST;
panelCentral.add(txtCampo1, delimitador);
delimitador.gridy = 1;
delimitador.gridx = 0;
delimitador.anchor = GridBagConstraints.EAST;
panelCentral.add(lblCampo2, delimitador);
delimitador.gridx = 1;
delimitador.anchor = GridBagConstraints.WEST;
panelCentral.add(txtCampo2, delimitador);
delimitador.gridx = 3;
delimitador.gridy = 3;
panelCentral.add(btnAccion1, delimitador);
Dentro del cual es necesario crear un objeto de la clase GridBagConstraints, que se encarga de especificar la delimitación de cada uno de los componentes que serán colocados en el panelCentral, como vemos en el código, se declara el espaciado entre los elementos de un mismo renglón y la altura de los componentes a través de las propiedades ipadx e ipady respectivamente. Las propiedades gridx y gridy sirven para ubicar al componente en una celda específica. Finalmente el anchor se utiliza para especificar hacia que parte se cargarán los componentes en caso de que esta resulten más pequeños que la celda.
De esta forma después de agregar los componentes a sus paneles correspondientes, solo se agregan estos paneles en las ubicaciones que mencionamos dentro del objeto de la clase PanelSwing.
Para probar este sencillo código, es necesario contar con una clase que extienda a la clase JFrame para crear una ventana de aplicación, y además tener una clase que contenga el método estático main() para su ejecución. En este caso haremos realizaremos ambas tareas en una sola clase con el código que aparece a continuación:
Ventana.java
import java.awt.Container;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;
import javax.swing.*;
/**
* @Desc Clase que utilizamos para crear una ventana que contendrá el panel principal de la aplicación
* @author Beto González
*/
public class Ventana extends JFrame {
PanelSwing panelPrincipal;
/**
* @param args
*/
public static void main(String[] args) {
Ventana ventana = new Ventana();
ventana.setBounds(120, 120, 800, 600);
ventana.setVisible(true);
ventana.setDefaultCloseOperation(DISPOSE_ON_CLOSE);
ventana.addWindowListener(new WindowAdapter()
{
public void WindowCloser(WindowEvent e)
{
System.exit(0);
}
});
}
//Constructor de la clase
Ventana(){
super("Primer paso en la interfaces gráficas de Java"); //Llamada al constructor de la clase padre
Container contentPane = getContentPane();
panelPrincipal = new PanelSwing();
panelPrincipal.estableceContenedores();
contentPane.add(panelPrincipal);
}
}
El código del método estático main lleva a cabo la instanciación de la clase Ventana, especifica sus dimensiones, la hace visible y finalmente habilita la operación de cierre para que el usuario pueda finalizar su ejecución.
Dentro del construcctor de la clase Ventana se instancia a la clase PanelSwing y después de establecer los elementos visuales que componen a este objeto, se agrega al objeto de la clase Container de la ventana para que se incluya en la presentación.
Solo tenemos que agregar este código a un nuevo archivo de clase dentro del proyecto y ejecutarlo. El resultado tiene que ser una ventana con la siguiente apariencia:
Ahora podemos apreciar el trabajo realizado del lado de la presentación de la aplicación, con el plus de que nuestra ventana es 100% redimencionable, ya que todos los componentes ocupan posiciones relativas dentro de ella.
Además de esta propiedad de posicionamiento, Swing nos ofrece la ventaja de poder modificar la apariencia de todos los elementos visuales de una ventana con un par de líneas de código. Por defecto la apariencia que poseen los componentes es Metal, que como podemos apreciar en las imagenes no se parece a las ventanas estandar de ningún sistema operativo, pero además se pueden elegir además las apariencias como Windows (apariencia de ventanas de Windows) y Motif (apariencia de ventanas de Unix); estás tres son lo que se denimona independientes de la plataforma, ya que pueden ser usadas en cualquier S.O. También hay una apariencia llamada Mac, para que nuestras ventanas luscan como las de los sistemas operativos de la Mac, pero a diferencia de las anteriores ésta es dependiente de la plataforma. Pueden encontrar más información sobre la modificación de la apariencia en este artículo de Java en castellano.
Si deseamos modificar la apariencia del ejemplo que acabamos de realizar para que lusca como una ventana de Windows, bastará con agregar unas cuantas líneas de código a la clase Ventana como aparece a continuación:
import java.awt.Container;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;
import javax.swing.*;
/**
* @Desc Clase que utilizamos para crear una ventana que contendrá el panel principal de la aplicación
* @author Beto González
*/
public class Ventana extends JFrame {
PanelSwing panelPrincipal;
/**
* @param args
*/
public static void main(String[] args) {
Ventana ventana = new Ventana();
ventana.setBounds(120, 120, 800, 600);
ventana.setVisible(true);
ventana.setDefaultCloseOperation(DISPOSE_ON_CLOSE);
ventana.addWindowListener(new WindowAdapter()
{
public void WindowCloser(WindowEvent e)
{
System.exit(0);
}
});
}
//Constructor de la clase
Ventana(){
super("Primer paso en la interfaces gráficas de Java"); //Llamada al constructor de la clase padre
Container contentPane = getContentPane();
panelPrincipal = new PanelSwing();
panelPrincipal.estableceContenedores();
contentPane.add(panelPrincipal);
try{
UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");
}catch(Exception ex){}
SwingUtilities.updateComponentTreeUI(getContentPane());
}
}
Para obener un resultado como el siguiente:
De esta forma es fácil modificar la apariencia general de nuestras aplicaciones de una manera muy fácil.
Y con este último ejemplo es que terminamos este pequeño artículo, espero que se hayan dado una pequeña idea de como pueden integrar la apariencia de una interface de usuario en Java, ya que la parte que sigue es el manejo de eventos del usuario, que corresponde al Controlador de la aplicación. Además de los controles vistos iremos revisando algunos más que nos pueden ser muy útiles, y finalizaremos con un pequeño proyecto que demostrará un poco el poder que tiene la plataforma Java.
Hasta la próxima.
Entradas
