Artículos de Tecnología

¿Qué es la biblioteca Swing?

Luis.puig
Luis.puig
Imagen de portada: 3 personas trabajando en una oficina en conjunto en sus computadores.

Con la evolución de la tecnología y el surgimiento del concepto de multiplataforma con la versión 1.2 de Java (anteriormente llamado Playground) o Java 2, en el año 1998 surge la API gráfica de Swing Java Swing que integra la JFC (Java Foundation Classes) las cuáles reúnen componentes para la construcción de una GUI (Graphical User Interface - Interface Gráfica de Usuario).

La biblioteca posibilita el desarrollo de interfaces elaboradas para un ambiente de computación heterogéneo con interacción más agradable. Las aplicaciones pueden seguir una apariencia y comportamiento de la plataforma nativa de Java o alguna plataforma personalizada. Permite el gerenciamiento de layouts, manejo de eventos, manipulación de imágenes en dos dimensiones - 2D y abarca diversos idiomas, entre otras.

Además de esto, extiende el beneficio de computación con Java y la API de accesibilidad que funciona con dispositivos de entradas y salidas, como lectores de pantalla, terminales en Braille y otros. Sus componentes son independientes de la plataforma con el patrón MCV (Modelo-Vista-Controlador).

Antes de presentar qué es un componente en el contexto de Java Swing, vale la pena mencionar que Swing emplea en su estructura conceptos para prácticas de programación con el paradigma orientado a objetos: Clases, Objetos, Encapsulación, Herencia y Polimorfismo, etc.

Componentes

En la programación orientada a objetos los componentes son Clases/Objetos que implementan la interfaz gráfica de usuario. Los componentes básicos proporcionados por la biblioteca Java Swing son:

Etiqueta (JLabel)

Estos componentes puede ser usado para mostrar textos simples, imágenes con textos. También pueden ser usados para mostrar los resultados de un proceso. Los métodos más usados son:

Descripción de la imagen: Interfaz gráfica con título 'Formulario'. Hay una etiqueta titulada 'Nombre', a la derecha de la etiqueta hay un cuadro de texto de entrada con el texto 'Jhon'. Debajo de estos dos elementos, tenemos la etiqueta titulada 'Clave', a la derecha de la misma hay un cuadro de texto de entrada con el texto enmascarado, haciendo referencia a la contraseña del usuario. Debajo de estos dos elementos, tenemos una etiqueta titulada 'Género' con dos opciones en formato de botón circular - a la derecha: la primera 'Masculino' - opción seleccionada, la segunda 'Femenino'. Debajo de estos tres elementos, tenemos una etiqueta titulada 'Idiomas', a la derecha de la misma tenemos tres opciones, con la última opción no seleccionada: primera opción, 'Español', segunda opción, 'Ingles', tercera opción, 'Italiano '. Debajo de estos cuatro elementos, tenemos una etiqueta titulada 'Grado', con la opción seleccionada 'Primaria' en cascada. Debajo de estos dos elementos tenemos la etiqueta titulada 'Comentario', debajo tenemos un campo de texto de entrada, este campo tiene el texto en latín 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet maleuada felis ut pulvinar…'. Finalmente, la interfaz cuenta con dos botones rectangulares: el primero titulado ‘Enviar’, ubicado en la base izquierda de la interfaz, y el segundo titulado ‘Salir’, ubicado en la base derecha de la interfaz. En esta imagen, las etiquetas mencionadas anteriormente están resaltadas.

Cajas de Texto (JTextField, JPasswordField y JTextArea)

Estos componentes son usados para que el usuario introduzca un valor textural y capturarlo. JTextField permite introducir una línea de texto, JPasswordField permite introducir un valor pero lo muestra camuflado para no poder ver el valor introducido y JTextArea permite introducir varias líneas de texto. Los métodos más usados son:

 Interfaz gráfica con título 'Formulario'. Tiene una etiqueta titulada 'Nombre', a derecha de la etiqueta hay un cuadro de texto de entrada con el texto 'Jhon'. Debajo de estos dos elementos, tenemos la etiqueta titulada 'Clave', a la derecha de la misma hay un cuadro de texto de entrada con el texto enmascarado, haciendo referencia a contraseña del usuario. Debajo de estos dos elementos, tenemos una etiqueta titulada 'Género' con dos opciones en formato de botón circular - a la derecha: la primera 'Masculino' - opción seleccionada, la segunda 'Femenino'. Debajo de estos tres elementos, tenemos una etiqueta titulada 'Idiomas', a la derecha de la misma tenemos tres opciones, con la última opción no seleccionada: primera opción, 'Español', segunda opción, 'Ingles', tercera opción, 'Italiano '. Debajo de estos cuatro elementos, tenemos una etiqueta titulada 'Grado', con la opción seleccionada 'Primaria' en cascada. Debajo de estos dos elementos tenemos la etiqueta titulada 'Comentario', debajo tenemos un campo de texto de entrada, este campo tiene el texto en latín 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet maleuada felis ut pulvinar…'. Finalmente, la interfaz cuenta con dos botones rectangulares: el primero titulado ‘Enviar’, ubicado en la base izquierda de la interfaz, y el segundo titulado ‘Salir’, ubicado en la base derecha de la interfaz. En esta imagen, los cuadros de texto de entrada mencionados anteriormente están resaltados.

Botones (JRadioButton, JCheckBox y JButton)

Estos componentes permiten varias formas gráficas con las cuales el usuario puede interactuar, el JRadioButton permite elegir una opción dentro de un grupo de elecciones, en cuanto al JCheckBox permite seleccionar más de una de estas opciones. Finalmente los JButton son usados para ejecutar un evento cuando son presionados.

Descripción de la imagen: Interfaz gráfica con título 'Formulario'. Tiene una etiqueta titulada 'Nombre', a la derecha de la etiqueta hay un cuadro de texto de entrada con el texto 'Jhon'. Debajo de estos dos elementos, tenemos la etiqueta titulada 'Clave', a la derecha de la misma hay un cuadro de texto de entrada con el texto enmascarado, haciendo referencia a contraseña del usuario. Debajo de estos dos elementos, tenemos una etiqueta titulada 'Género' con dos opciones en formato de botón circular - a derecha: la primera 'Masculino' - opción seleccionada, la segunda 'Femenino'. Debajo de estos tres elementos, tenemos una etiqueta titulada 'Idiomas', a la derecha de la misma tenemos tres opciones, con la última opción no seleccionada: primera opción, 'Español', segunda opción, 'Ingles', tercera opción, 'Italiano '. Debajo de estos cuatro elementos, tenemos una etiqueta titulada 'Grado', con la opción seleccionada 'Primaria' en cascada. Debajo de estos dos elementos tenemos la etiqueta titulada 'Comentario', debajo tenemos un campo de texto de entrada, este campo tiene el texto en latín 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet maleuada felis ut pulvinar…'. Finalmente, la interfaz cuenta con dos botones rectangulares: el primero titulado ‘Enviar’, ubicado en la base izquierda de la interfaz, y el segundo titulado ‘Salir’, ubicado en la base derecha de la interfaz. En esta imagen, los botones mencionados anteriormente están resaltados.

Listas Desplegables (JComboBox)

Parecido al JRadioButton, permite seleccionar una opción de un grupo de alternativas pero sin ocupar espacio en la pantalla.

Descripción de la imagen: Interfaz gráfica con título 'Formulario'. Tiene una etiqueta titulada 'Nombre', a la derecha de la etiqueta hay un cuadro de texto de entrada con el texto 'Jhon'. Debajo de estos dos elementos, tenemos la etiqueta titulada 'Clave', a la derecha de la misma hay un cuadro de texto de entrada con el texto enmascarado, haciendo referencia a contraseña del usuario. Debajo de estos dos elementos, tenemos una etiqueta titulada 'Género' con dos opciones en formato de botón circular - a derecha: la primera 'Masculino' - opción seleccionada, la segunda 'Femenino'. Debajo de estos tres elementos, tenemos una etiqueta titulada 'Idiomas', a la derecha de la misma tenemos tres opciones en formato de botón cuadrado, con la última opción no seleccionada: primer opción, 'Español', segunda opción, 'Ingles', tercer opción, 'Italiano'. Debajo de estos cuatro elementos, tenemos una etiqueta titulada 'Grado', con la opción en cascada 'Primaria' seleccionada; hay otras opciones no seleccionadas: 'Secundaria' y 'Superior'. Debajo de estos dos elementos tenemos la etiqueta titulada 'Comentario', debajo tenemos un campo de texto de entrada, este campo tiene el texto en latín 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'. Sed imperdiet maleuada felis ut pulvinar…'. Finalmente, la interfaz cuenta con dos botones rectangulares: el primero titulado ‘Enviar’, ubicado en la base izquierda de la interfaz, y el segundo titulado ‘Salir’, ubicado en la base derecha de la interfaz. En esta imagen, las opciones en cascada mencionadas anteriormente están resaltadas.

Cajas de Diálogo (JOptionPane)

Este permite mostrar una caja con un mensaje, un icono y botones. Un código de ejemplo sería:

JOptionPane.showMessageDialog(null, “Mensaje”, “Título”, JOptionPane.WARNING_MESSAGE);

El segundo y tercer parámetro indican el mensaje y el título, estas cajas pueden ser usadas para mostrar mensajes de confirmación, errores, avisos entre otras posibilidades.

Jerarquía de Componentes

Ahora que ya vimos sobre los componentes, podemos hablar sobre la jerarquía existente entre ellos dentro de la biblioteca Swing. Este rango es utilizado en la funcionalidad de estos elementos para la comprensión de una aplicación Swing y es comúnmente visualizada como un árbol de componentes.

Descripción de la imagen: La imagen consta de un diagrama que resume las clases AWT y Swing y la relación entre ellas utilizando dos grupos de componentes, el primer grupo está compuesto por dos componentes Swing son: 'JFrame' y 'JDialog', 'JFrame' se vincula al componente 'Frame', 'JDialog' se vincula al componente 'Dialog'. Los componentes AWT 'Frame' y 'Dialog' se conectan al componente AWT 'Windows', este componente se conecta al componente AWT 'Container', este componente se conecta al componente AWT 'Component' que, finalmente, se conecta al componente genérico 'Object'. El segundo grupo, en lado derecho del primer grupo, tenemos otras tres clases de Swing: 'JCheckBox', 'JRadioButton' y 'JMenu', las dos primeras están vinculadas a otro componente Swing 'JToggleButton', 'JMenu' está vinculado al componente de Swing 'JMenuItem', y, en el lado derecho de 'JMenuItem' tenemos el componente Swing 'JButton'. Los componentes 'JToggleButton', 'JMenuItem' y 'JButton' se unen al componente Swing 'AbstractButton'. Los siguientes componentes Swing enlazan con otro componente Swing 'JComponent': 'AbstractButton', 'JScrollBar', 'JPane', 'JOptionPane', 'JMenuBar', 'JList', 'JLabel', 'JComboBox' y 'JText'. Finalmente, hay dos componentes Swing que enlazan con el componente 'JText': 'JTextField' y 'JTextArea'.

Este árbol trabaja con tres tipos de elementos en una aplicación:

  1. Contenedor de nivel superior: Es un elemento que generalmente se usa como base, es decir, proporcionar un lugar para usar otros elementos. Ejemplos de este tipo serían: JFrame, JDialog y JApplet.
  2. Componente de nivel intermedio: Es un elemento que se usa solo para manejar la ubicación de los elementos de botones y etiquetas. Ejemplos de este tipo serían: JPanel, JScrollPane y JTabbedPane.
  3. Contenedor Atómico: Es un elemento que no se usa para almacenar otros elementos, es una entidad autosuficiente, que sirve para presentar información al usuario o para recibir información proporcionada por el usuario. Algunos de los ejemplos de este tipo son: JButton, JLabel, JComboBox, JTextField y JTable.

Al utilizar JFrame, este componente acaba creando otros tres componentes, estos de tipo intermedio, se utilizan para configuraciones avanzadas de la interfaz gráfica: Root Pane, Layered Pane y Glass Pane. Este artículo fue diseñado para presentar Swing, por lo que no profundizaremos en estos componentes.

Descripción de la imagen: Diagrama con un componente inicial titulado 'JFrame' y luego un segundo componente ligado al anterior, este con un título de puntos suspensivos, ahora un tercer componente vinculado al anterior, este con el título de 'Content Pane', luego un cuarto componente vinculado al anterior, este con título 'JPanel', finalmente dos componentes titulados 'JLabel' y 'JTextField', vinculados al componente anterior.

Considerando este diagrama, podemos crear una ventana con Swing como lo demuestra el siguiente ejemplo práctico:

import java.awt.GridBagLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextArea;

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

    // componente JFrame

   JFrame miJFrame = new JFrame("Ejemplo - Java Swing");
    miJFrame.setSize(500,300);

    // componente JPanel`

    `JPanel miJPanel = new JPanel();`

    `miJPanel.setSize(300, 300);`

    // usamos este diseño para centrar los componentes de JPanel`

    miJPanel.setLayout(new GridBagLayout());`

    // componente JTextField`

    JLabel miJLabel = new JLabel();

    miJLabel.setText("Dime tu opinión acerca de Java Swing:  ");

    // componente JTextArea

    JTextArea miJTextArea = new JTextArea(5,20);

    // conecta los componentes JLabel y JTextField en JPanel`

    miJPanel.add(miJLabel);

    miJPanel.add(miJTextArea);

    // conectar Jpanel a JFrame`

    miJFrame.add(miJPanel);

    // hacer visible JFrame

    miJFrame.setVisible(true);

  }

}

Resultado del código:

Descripción de la imagen: Interfaz gráfica con título “Ejemplo - Java Swing”, en el núcleo de la interfaz hay un texto en negrita -ubicado en el lado izquierdo- que dice “Dime tu opinión sobre Java Swing:”. A la derecha del texto, hay un campo de texto vacío.

Conclusión

Este es un ejemplo de una interfaz gráfica con Java Swing, creamos los componentes de forma individual, uno a la vez, definiendo sus características principales y al final conectamos todos los componentes para poder ver el resultado en nuestra pantalla. En general una aplicación GUI - Swing respeta las siguientes etapas:

Ahora que ya sabes la existencia de los componentes Swing es super recomendable buscar y explorar más información sobre esta biblioteca. Son innumerables las posibilidades con Java Swing. Sus componentes son divertidos para jugar y pueden ayudarte a construir aplicaciones geniales. Por lo tanto, prueba estos componentes incluyéndolos en tu aplicación Swing.

Para una mejor comprensión sobre las clases citadas en este artículo, te recomendamos leer la documentación oficial de Oracle:

foto de Perfil de Adriana

Adriana Oliveira

Scuba Back-End, estudiante de Sistemas de computacion, apasionada por la tecnología. Me encanta aprender y desarrollar habilidades para servir a la comunidad. Me encanta los códigos, la música, las artes y el deporte.

foto de Perfil de Brenda

Brenda Souza

Scuba Alura LATAM. Soy estudiante de Tecnología de la Información en la Universidad Federal de Rio Grande do Norte, en Natal (Brasil). Me enfoco en lenguajes Java y Python, con áreas de interés como BackEnd, Data Science e Inteligencia Artificial. También soy desarrolladora BackEnd.

foto de Perfil de Luiz Puig

Luis Ezequiel Puig

Soy estudiante de analisis de sistemas, formo parte del equipo de Scubas en Alura, apasionado por la tecnología y la informática. Me encanta aprender e investigar sobre nuevas tecnologías y diferentes herramientas del mundo de la programación.

Artículos de Tecnología

En Alura encontrarás variados cursos sobre . ¡Comienza ahora!

Precios en:
USD
  • USD
  • BOB
  • CLP
  • COP
  • USD
  • PEN
  • MXN
  • UYU

Semestral

  • 274 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri, la inteligencia artificial de Alura

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 6 meses
US$ 65.90
un solo pago de US$ 65.90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Anual

  • 274 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Luri, la inteligencia artificial de Alura

    Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana

  • Acceso a todo el contenido de la plataforma por 12 meses
US$ 99.90
un solo pago de US$ 99.90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana