Introducción a las interfaces gráficas

A medida que vamos adquiriendo mas conocimientos en el mundo de Java, nos damos cuenta que es indispensable hacer nuestros programas "bonitos" y para eso necesitamos implementar gráficos, imágenes, audio, etc. Por ahora solo verán una pequeñisima y austera parte de como se puede hacer una interfaz sencilla. Este programa es una ayuda para un compañero que recurrió a Buenas Intenciones para despejar ciertas dudas.

Sin mas preámbulos esta es la interfaz que realice:

(El sistema operativo en el que trabaje fue Linux Mint 13 maya)

El código es el siguiente:

/**
 * @author Bello Cerecero
 * @since 1-dic-2012
 */
import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

public class Principal extends JFrame implements ActionListener
{
 private JPanel contenedor;
 private JLabel etiquetaToken;
 private JLabel etiquetaResultado;
 private JTextField cajaToken;
 private JTextField cajaResultado;
 private JButton botonAceptar;
 private JButton botonCancelar;

 
 public Principal()
 {
  super("Interfaz");
  getContentPane().setLayout(null);
  setLocation(100,100);
        setSize(380,330);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setResizable(false);
        contenedor();
        setVisible(true);
 }
 
 public void contenedor()
 {
  contenedor = new JPanel();
  contenedor.setLayout(null);
  
  etiquetaToken = new JLabel("Tokens");
  etiquetaToken.setBounds(30,30,116,16);
  contenedor.add(etiquetaToken);
  
  cajaToken = new JTextField();
  cajaToken.setBounds(100,25,200,30);
  contenedor.add(cajaToken);
  
  botonAceptar = new JButton("Aceptar");
  botonAceptar.setBounds(30,100,100,30);
  botonAceptar.addActionListener(this);
  contenedor.add(botonAceptar);
  
  botonCancelar = new JButton("Cancelar");
  botonCancelar.setBounds(220,100,100,30);
  botonCancelar.addActionListener(this);
  contenedor.add(botonCancelar);
  
  etiquetaResultado = new JLabel("Resultado");
  etiquetaResultado.setBounds(30,180,116,16);
  contenedor.add(etiquetaResultado);
  
  cajaResultado = new JTextField();
  cajaResultado.setBounds(120,175,200,30);
  contenedor.add(cajaResultado);
  
  setContentPane(contenedor);
 }
 
 public void actionPerformed(ActionEvent evento) 
 {
  if(evento.getSource() == botonAceptar)
  {
   //codigo a ejecutarse al dar clic en aceptar
  }
  else if(evento.getSource() == botonCancelar)
  {
   //codigo a ejecutarse al dar clic en cancelar
  }
 }
 
 public static void main(String args [])
 {
  Principal ejemplo = new Principal();
 }
}

Análisis: Comenzamos en la linea 5, aquí importamos todas las librerías que ocuparemos para la realización de nuestra interfaz (que son la swing y la awt), en la linea 14 comenzara nuestra clase la cual se llama "Principal" que hereda de la clase "JFrame" e implementa "ActionListener". 

Aquí haremos un pequeños paréntesis para explicar esto un poco mejor, al decir que nuestra clase "Principal" hereda de la clase "JFrame" estamos diciendo que nuestra clase hereda todos los métodos de la clase "JFrame", así no habrá necesidad de declarar un objeto. Al implementar "ActionListener" estamos diciendo que usaremos su método (que ya se encuentra declarado en esta interface) el cual se llama "actionPerformed", esté método nos servirá para poder manejar los eventos al dar clic en los botones (ya sea en el botón "aceptar" o en el botón "cancelar"). 

 Continuando con el análisis, en la linea 16 comenzaremos con la declaración de nuestras variables, como vemos ocuparemos un "JPanel" (linea 16) que tomara el papel de un "contenedor" donde estarán los botones, las etiquetas y los cuadros de texto (En la siguiente imagen se describe lo que vendría siendo el JPanel (color rojo)).

Se ocuparan dos etiquetas "JLabel" una que es la que dice "Token" y la otra es la que dice "Resultado" (La siguiente imagen muestra cuales son las etiquetas (color azul)).

También usaremos dos cajas de texto (linea 19 y 20) y dos botones (linea 21 y 22). 

En la linea 25 declaramos nuestro constructor, en la linea 27 con "super" pondremos el titulo que tendrá nuestra ventana en este caso "Interfaz", en la linea 28 lo que se esta haciendo es decirle que la ventana no tendrá diseño, en la linea 29 se usa para dar la localización que tendrá la ventana en nuestra pantalla, en la linea 30 definimos el tamaño de la ventana, en la linea 31 estamos configurando en botón "cerrar" (la "x" que tienen las ventanas en la barra de titulo) para que al dar clic en ella el programa se detenga, en la linea 32 estamos configurando la ventana para que no pueda cambiar su tamaño, en la linea 33 estamos llamando al método contenedor y en la linea 34 hacemos que la ventana se visible. 

 En el método "contenedor" (linea 37) configuramos todos los componentes (posición y tamaño), primero creamos un objeto de tipo JPanel (linea 39), este panel no tendrá diseño (linea 40).

Comenzaremos a configurar la etiqueta token: 

 Primero declaramos un objeto de la clase "JLabel" al cual le pasaremos de parámetro como queremos que se visualice en la ventana, en este caso sera "Tokens" (linea 42), después definimos la posición y las dimensiones que tendrá la etiqueta (linea 43) y por ultimo lo agregamos al contenedor (linea 44). 

Ahora va la caja de texto de la etiqueta Tokens:

 Primero creamos el objeto del tipo JTextFiel el cual no recibe parámetros (linea 46), después le damos la posición y las dimensiones (linea 47) y por ultimo lo agregamos al contenedor (linea 48). 

Ahora configuramos el botón Aceptar:

 Primero creamos el objeto de tipo JButton pasando-le de parámetro el nombre que llevara el botón en este caso "Aceptar" (linea 50), después definimos la posición y dimensiones que tendrá (linea 51), ahora le añadiremos la acción para poder "reconocer" cuando hagan clic en este botón (linea 52) y por ultimo lo añadimos al contenedor. 

Para los objetos restantes se hace lo mismo. al terminar de configurar todo, ahora agregamos el contenedor a la ventana (linea 68). 

 Como ya les había mencionado al inicio, al implementar ActionListener tendremos que usar el método "actionPerformed" (linea 71) que recibe de parámetro el evento, que este caso seria cuando le demos clic a cualquier botón, y para poder distinguir cual fue el botón que recibió el clic usamos un if (linea 73). Y ya para poder probar el programa hacemos un main (linea 83).