Ejemplos

Ejemplo 03: Creando una Aplicación con GUI en Java Swing

En este ejemplo, crearemos una aplicación simple con una interfaz gráfica utilizando Java Swing. La aplicación consistirá en una ventana con un botón que, al hacer clic, mostrará un mensaje en la consola.

Imaginemos una cafetería universitaria donde el personal debe registrar pedidos de manera rápida durante los recesos entre clases. No necesitan un sistema complejo; solo algo sencillo para:

Capturar el nombre del cliente
Elegir el tipo de bebida
Indicar si desea azúcar
Registrar el pedido con un botón

En el mundo real, esto sería equivalente a una hoja de pedidos en papel, con espacios en blanco, casillas y opciones predefinidas. En el mundo digital, esa hoja se convierte en una ventana Swing.

💡 Metáfora: Swing es como diseñar un formulario físico, pero en lugar de pluma y papel, usamos componentes gráficos y propiedades visuales.

Paso 1: Definir el frame principal

Para comenzar, crearemos la clase principal que contendrá al JFrame y al JPanel donde ubicaremos los componentes. Para este ejemplo asumiremos que ya hemos creado un formulario con el plugin "Swing UI Designer" en IntelliJ IDEA y hemos nombrado el JPanel como mainPanel.

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class CoffeeOrderApp extends JFrame{
    
    private JPanel mainPanel;
    
    public CoffeeOrderApp() {
        // Configuraciones de la ventana
        setTitle("Cafetería Universitaria");
        setSize(400, 350);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        // Agregar el panel principal
        setContentPane(mainPanel);
        // Hacer Visible
        setVisible(true);
    }
}

💡 Consejo: Extender JFrame permite que nuestra clase principal actúe como la ventana de la aplicación, facilitando la gestión de sus propiedades y componentes. Además, configurar el JPanel como el contenido principal del frame nos permite organizar los elementos de la interfaz de manera estructurada.

Paso 2: Agregar componentes al formulario

Utilizando el plugin "Swing UI Designer" en IntelliJ IDEA, podemos arrastrar y soltar los siguientes componentes en el mainPanel:

JLabel para el título "Registro de Pedidos"
JTextField para ingresar el nombre del cliente
JComboBox para seleccionar el tipo de bebida (Café, Té, Jugo)
JCheckBox para indicar si desea azúcar
JButton para registrar el pedido

Después de agregar estos componentes, el código generado automáticamente en la clase CoffeeOrderApp se verá similar a esto:

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class CoffeeOrderApp extends JFrame{
    
    private JPanel mainPanel;
    private JTextField nameField;
    private JComboBox<String> drinkComboBox;
    private JCheckBox sugarCheckBox;
    private JButton orderButton;
    
    public CoffeeOrderApp() {
        // Configuraciones de la ventana
        setTitle("Cafetería Universitaria");
        setSize(400, 350);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        // Agregar el panel principal
        setContentPane(mainPanel);
        // Hacer Visible
        setVisible(true);
    }
}

Como puedes ver, los componentes que agregamos en el diseñador visual ahora están representados como variables de instancia en nuestra clase. En particular presta atención al JComboBox y al JCheckBox, ya que estos componentes nos permitirán capturar las opciones seleccionadas por el usuario.

💡 Consejo: El componente JComboBox es ideal para ofrecer una lista desplegable de opciones, sin embargo, no solo se limita a texto, también puede contener objetos más complejos si es necesario, como por ejemplo tipos enumerados. Por otro lado, el JCheckBox es perfecto para opciones binarias, como "Sí" o "No", permitiendo al usuario seleccionar o deseleccionar una opción fácilmente.

Paso 3: Manejar el evento del botón

Ahora, necesitamos agregar funcionalidad al botón "Registrar Pedido". Queremos que, al hacer clic en este botón, se capture la información ingresada por el usuario y se muestre un mensaje en la consola con los detalles del pedido. Para ello, agregaremos un ActionListener al botón dentro del constructor de la clase CoffeeOrderApp:

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class CoffeeOrderApp extends JFrame{
    
    private JPanel mainPanel;
    private JTextField nameField;
    private JComboBox<String> drinkComboBox;
    private JCheckBox sugarCheckBox;
    private JButton orderButton;
    
    public CoffeeOrderApp() {
        // Configuraciones de la ventana
        setTitle("Cafetería Universitaria");
        setSize(400, 350);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        // Agregar el panel principal
        setContentPane(mainPanel);
        
        // Agregar ActionListener al botón
        orderButton.addActionListener(e -> {
            String name = nameField.getText();
            String drink = (String) drinkComboBox.getSelectedItem();
            boolean wantsSugar = sugarCheckBox.isSelected();

            IO.println("Pedido Registrado:");
            IO.println("Cliente: " + name);
            IO.println("Bebida: " + drink);
            IO.println("Azúcar: " + (wantsSugar ? "Sí" : "No"));
        });
        
        // Hacer Visible
        setVisible(true);
    }
}

En este código, hemos agregado un ActionListener al botón orderButton. Cuando el usuario hace clic en el botón, se ejecuta el código dentro del lambda, que captura el nombre del cliente, la bebida seleccionada y si desea azúcar. Luego, imprime estos detalles en la consola.

💡 Consejo: Utilizar un lambda para el ActionListener simplifica el código y mejora la legibilidad. Además, al capturar los valores de los componentes directamente dentro del listener, aseguramos que siempre obtenemos la información más actualizada ingresada por el usuario.

Paso 4: Ejecutar la aplicación

Finalmente, necesitamos un método main para ejecutar nuestra aplicación. Agregaremos este método en otra clase llamada Main:

void main(){
    SwingUtilities.invokeLater(() -> {
        new CoffeeOrderApp();
    });
}

Con esto, hemos completado nuestra aplicación de registro de pedidos para la cafetería universitaria utilizando Java Swing. Al ejecutar el método main, se abrirá una ventana donde los usuarios podrán ingresar sus pedidos y ver los detalles en la consola al hacer clic en el botón "Registrar Pedido".

💡 Metáfora Final: Nuestra aplicación Swing es como una hoja de pedidos digital, donde los usuarios pueden llenar sus opciones y enviarlas con un simple clic, facilitando el proceso de registro en la cafetería universitaria.

Ejemplo 02: Diferencias de validar un JTextField y un JFormattedTextField

En este ejemplo, compararemos la validación de un `JTextField` con la validación de un `JFormattedTextField` utilizando una máscara de formato.

Ejemplo 4: Estilizando componentes Swing con Delegadores

En este ejemplo, se muestra cómo estilizar componentes Swing utilizando delegadores para personalizar su apariencia.