La interfaz gráfica de usuario o GUI (Graphic User Interface) por sus siglas en inglés se refiere a las ventanas gráficas e interactivas con las que el usuario de una aplicación puede interactuar, en lugar de utilizar sólo la ventana de comandos del sistema.
La interfaz de programación de aplicaciones (API) de GUI de Java permite al programador construir una aplicación gráfica que se vea bien en diferentes plataformas.
De forma general, para construir una interfaz gráfica de usuario es necesario seguir los siguientes pasos:
1Crear un contenedor superior y obtener su contenedor intermedio.
2Seleccionar un gestor de esquemas para el contenedor intermedio.
3Crear los componentes necesarios.
4Agregar los componentes al contenedor intermedio.
5Dimensionar el contenedor superior.
6Mostrar el contenedor superior.
Las Java Foundation Classes (JFC) son parte de la API de Java y están compuestas por clases que sirven para crear interfaces gráficas visuales para las aplicaciones de escritorio y applets de Java. Por su parte, Abstract Window Toolkit (AWT) es un paquete que pertenece a las JFC y permite crear aplicaciones gráficas.
AWT es un conjunto de herramientas gráficas diseñadas para trabajar con múltiples plataformas. En la API las herramientas gráficas se encuentran dentro del paquete java.awt desde la primera versión de Java.
AWT también funciona en navegadores que soportan Java y las aplicaciones gráficas que se ejecutan dentro de un navegador se conocen como applets.
Jerarquía de clases de AWT
Swing
Swing es un paquete grafico que apareció en la versión 2 de Java. Está compuesto por un amplio conjunto de componentes de interfaz de usuario, los cuales pretenden funcionar en el mayor número posible de plataformas.
Las clases que componen a Swing se encuentran disponibles en el paquete javax.swing. Dentro de los cambios incluidos en Swing se encuentra que los componentes del paquete pueden presentar diversos aspectos en función de una biblioteca de clases (bibliotecas de aspecto) que se utilice.
Componentes de Swing
Los componentes de Swing están basados en el patrón de diseño modelo-vista-controlador (MVC), por lo que pueden ser modelados en tres partes separadas:
Para construir una interfaz gráfica de usuario con Swing se utilizan los siguientes elementos:
Swing vs AWT
Una las principales diferencias entre los componentes de java.awt y los de javax.swing es que los primeros están enlazados directamente a las herramientas de la interfaz gráfica de usuario de la plataforma local. Por otro lado, a los componentes de Swing se les conoce como componentes puros de Java (o componentes ligeros) y, por tanto, ofrecen mayor portabilidad y flexibilidad.
Por lo anterior, un programa realizado con AWT que se ejecuta en distintas plataformas tiene una apariencia distinta y, en algunas ocasiones, hasta las interacciones con el usuario cambian.
Por otro lado, los componentes de Swing permiten especificar una apariencia visual distinta para cada plataforma, una apariencia visual uniforme entre todas las plataformas o, incluso, puede cambiar la apariencia visual mientras el programa se ejecuta.
Algunas ventajas de utilizar Swing en vez de AWT son:
|
Aspecto modificable |
Escritorios virtuales |
|
Arquitectura Modelo-Vista-Controlador |
Objetos de acción |
|
Bordes complejos |
Potentes manipuladores de texto |
|
Componentes para tablas y árboles de datos |
Variedad de componentes |
|
Contenedores anidados |
Independiente de la plataforma |
Componentes y contenedores
Los elementos que provee el paquete javax.swing son los componentes y los contenedores.
Los componentes son los elementos visibles en la interfaz gráfica, como los botones, las etiquetas, los campos de texto, entre otros. Estos componentes se sitúan dentro de algún contenedor.
Los contenedores son los elementos que permiten almacenar componentes u otros contenedores. Existen dos tipos de contenedores:
Como los JApplet, JFrame, JDialog o JWindow.
Contenedores superiores
JPanel, JScrollPane, JSplitPane, JTabbedPane, JToolBar, etc.
Jerarquía de clases de los contenedores intermedios
Para poder crear una interfaz gráfica se necesita crear un contenedor superior. Así mismo, para crear un diseño personalizado en cuanto a distribución de elementos se necesitan crear contenedores intermedios.
JFrame: Representa una ventana básica, capaz de contener otros componentes. Casi todas las aplicaciones construyen al menos un marco de este tipo.
Ejemplo
JDialog: Los cuadros de diálogo son marcos restringidos, dependientes de un marco principal, normalmente utilizados para solicitar datos.
JOptionPane: Son cuadros de diálogo sencillos predefinidos para solicitar confirmación, realizar advertencias o notificar errores.
JInternalFrame: es una ventana interna que no puede salir de los límites marcados por la ventana principal. Es muy común en aplicaciones que permiten tener varios documentos abiertos simultáneamente.
Icon: es una interfaz que permite el manejo de imágenes.
JPanel: Un panel sirve para agrupar y organizar otros componentes. Puede estar decorado por un borde y una etiqueta.
ScrollPane: Es un panel que permite visualizar un componente de un tamaño mayor que el disponible mediante el uso de barras de desplazamiento.
JTabbedPane: Permite definir varias hojas con pestañas que pueden albergar otros componentes. El usuario puede seleccionar la hoja que desea ver mediante las pestañas.
JToolBar: Es un contenedor que permite agrupar otros componentes, normalmente botones con iconos, en una fila o columna. Las barras de herramientas tienen la particularidad de que el usuario puede situarlas en distintas posiciones sobre el marco principal.
SplitPane: Permite visualizar dos componentes en un marco, ya sea de manera horizontal o vertical, así como, personalizar la distribución.
Los componentes básicos permiten diseñar la aplicación de manera gráfica, creando los elementos necesarios para interactuar con el usuario.
JButton: Botón que permite disparar una acción cuando se presiona.
JCheckBox: Caja que permite elegir (check) o no una opción.
JRadioButton: Botón para seleccionar una opción entre varias disponibles, siendo éstas mutuamente excluyentes.
JComboBox: Lista desplegable que permite seleccionar una opción entre varias posibles.
JList: Lista con barra de desplazamiento que permite seleccionar uno o más elementos.
JSpinner: Contenedor que permite seleccionar un valor entre un rango de opciones dadas. Los valores cambian al pulsar los botones de desplazamiento. También es posible introducir un valor directamente.
JTextField: Campo de texto.
JFormattedTextField: Campo de texto que permite indicar el conjunto de caracteres legales que pueden introducirse.
JPasswordField: Campo de texto que no muestra su contenido.
JSlider: Barra de desplazamiento que permite introducir un valor numérico entre un máximo y un mínimo de manera rápida.
Son componentes que permiten diseñar una aplicación gráfica entendible o vistosa pero que no tienen como objetivo la interacción con el usuario (no se utilizan para recibir un impulso del usuario).
JLabel: Permite insertar un texto, una imagen o un texto con imagen en la ventana.
JProgressBar: Barra de progreso que permite mostrar el porcentaje de avance de una tarea.
ToolTip: Etiqueta de ayuda que se despliega al pasar el cursor sobre una imagen. Sin embargo, los componentes poseen el método setToolTipText, el cual permite realizar la misma acción.
Los componentes especializados permiten crear elementos gráficos más vistosos o interesantes, sin necesidad de programarlos desde cero, simplemente se crea el objeto y se puede ocupar.
JColorChooser: Permite generar una paleta o selector de colores.
JFileChooser: Permite abrir un cuadro de diálogo para elegir uno o varios archivos.
JTree: Permite mostrar información en forma de árbol (de manera jerárquica).
Aspecto de la aplicación (look and feel)
Como se mencionó, los elementos de javax.swing permiten modificar su aspecto. Para determinar el aspecto de una aplicación se utiliza el atributo setLookAndFeel a través de la clase UIManager, la cual maneja el look and feel de la aplicación que se encuentra en ejecución.
NOTA: Descomenta los diferentes LookAndFeel que trae la aplicación para que veas cómo cambia su aspecto el botón y la ventana.
Un menú es tipo especial de componente debido a que es, en sí, un contenedor. Además, un contenedor superior solo puede poseer un menú.
Existen dos tipos de menús: la barra de menú (JMenuBar) y el menú contextual (JPopupMenu).
Un menú (JMenu) puede estar constituido por los siguientes elementos:
Los pasos para crear un menú son los siguientes:
La distribución de componentes permite controlar la posición y orden en la que se muestran los componentes en la aplicación gráfica, para lo cual se ocupan a los administradores de posición.
La mayoría de los administradores de posición están definidos en el paquete java.awt, siendo los principales:
Disposición fluida
Permite colocar los componentes dentro de un contenedor, los cuales se distribuyen de izquierda a derecha de arriba hacia abajo en forma de lista.
Disposición por malla
Divide al componente en una rejilla o malla (grid). Los componentes mantienen un tamaño similar dentro de cada celda. Se agregan de izquierda a derecha y de arriba hacia abajo.
Disposición por bordes
Divide el contenedor en 5 partes NORTH, SOUTH, EAST, WEST y CENTER. Los componentes se ajustan hasta rellenar completamente cada parte.
Existen otros tipos de disposiciones para los componentes gráficos:
Dentro del paquete java.awt:
Dentro del paquete javax.swing
Si es de tu interés puedes ahondar en ellos por tu cuenta.
Un evento es una acción iniciada por el usuario desde la aplicación gráfica. Los eventos se pueden activar (disparar) por los diferentes elementos que componen a la GUI.
Cualquier componente puede activar eventos, los cuales están declarados en los paquetes java.awt y javax.swing:
java.awt.event
javax.swing.event
Los eventos se pueden activar, por ejemplo, al presionar un componente de diversas maneras.
Existen eventos de ventana, eventos de teclado, eventos de ratón, eventos de barra, eventos de lista y eventos varios. Cualquier componente puede dar de alta un evento.
Cuando se activa un evento, existen objetos que están monitoreando dichos componentes a la escucha de que un evento sea disparado. A estos objetos se les conoce como listeners.
Los oyentes o listeners proveen métodos que están a la escucha de los eventos activos. Estos objetos ejecutan la acción deseada al momento en que un evento acontece (se dispara).
Dependiendo del evento que se desea activar, el oyente tiene que implementar una interfaz relacionada a dicho evento.
Para activar un oyente se debe dar de alta en el componente, es decir, se debe declarar explícitamente el evento en el componente y decir qué oyente va a estar al pendiente de la acción.
Tabla de Interfaces Listener y sus métodos.
Los eventos se implementan como subclases de la clase java.util.EventObject. Los eventos y los oyentes se encuentran en los paquetes java.awt.event y javax.swing.event y tienen la forma:
Interfaces XxxxxListener
Evento XxxxxEvent
ActionListener
Es un evento general de acción, el cual se dispara por prácticamente cualquier interacción con el componente:
La interfaz solo posee un método, cuya sintaxis es la siguiente:
void actionPerformed(ActionEvent)
Un oyente puede estar al pendiente de varios componentes, por ello, debe saber qué componente lo activa. Para esto se cuenta con el método:
Object getSource()
KeyListener
Es un evento de teclado, se dispara cuando se pulsa o libera una tecla en un componente que tiene el foco. La interfaz posee los métodos:
void keyTyped(KeyEvent)
void keyPressed(KeyEvent)
void keyReleased(KeyEvent)
La clase KeyEvent define como constante cualquier pulsación. Posee los siguientes métodos:
int getKeyChar()
int getKeyCode()
getKeyText(int keyCode)
int getModifiersText()
MouseListener
Es un evento de ratón, permite capturar cualquier pulsación del ratón desde cualquier componente (solo pulsaciones, no sensa movimientos). Posee los métodos:
void mouseClicked(MouseEvent)
void mousePressed(MouseEvent)
void mouseReleased(MouseEvent)
void mouseEntered(MouseEvent)
void mouseExited(MouseEvent)
La clase MouseEvent define como constantes el tipo de pulsación del ratón. Posee los siguientes métodos:
int getClickCount()
Point getPoint()
int getX()
int getY()
boolean isPopupTrigger()
WindowListener
Esta interfaz permite monitorear todos los movimientos de una ventana.
Posee los métodos:
void windowClosing(Windowvent)
void windowOpened(WindowEvent)
void windowIconified(WindowEvent)
void windowDeiconified(WindowEvent)
void windowClosed(WindowEvent)
void windowActivated(WindowEvent)
void windowDeactivated(WindowEvent)
Dentro de los principios SOLID, Interface segregation indica que los clientes no deben ser forzados a implementar métodos innecesarios, los cuales no se van a utilizar.
Sin embargo, los oyentes de Java obligan a implementar todos los métodos definidos aunque no se ocupen. Para evitar esto Java posee lo que se conoce como adaptadores.
Los adaptadores son clases que implementan una interfaz sin comportamiento, de tal manera que para reaccionar ante un evento en un componente, solo se necesita heredar de la clase adaptador y sobrescribir el método requerido.
La ventaja con este tipo de diseño es que no es necesario sobrescribir los métodos que no se vayan a ocupar. La desventaja es que la clase ya no puede heredar de otra y se puede perder cohesión.
Existen adaptadores para diferentes interfaces de oyente.
| Oyente | Adaptador |
|
ComponentListener |
ComponentAdapter |
|
ContainerListener |
ContainerAdapter |
|
FocusListener |
FocusAdapter |
|
KeyListener |
KeyAdapter |
|
MouseListener |
MouseAdapter |
|
MouseMotionListener |
MouseMotionAdapter |
|
WindowListener |
WindowAdapter |
Las aplicaciones gráficas hacen más llamativa una aplicación y permiten un uso generalizado. En Java se pueden crear GUI utilizando las clases que se encuentran en los paquetes java.awt y javax.swing.
Las aplicaciones de escritorio se pueden ejecutar en un entorno de texto o en un entorno gráfico. Crear aplicaciones en un entorno gráfico hace más llamativo e intuitivo su uso. En una ventana se pueden agregar imágenes, capturar eventos y dar respuesta a las solicitudes del usuario de forma gráfica e interactiva. Para crear aplicaciones gráficas en Java se utilizan los paquetes AWT y SWING.
Fuentes de información
Ceballos, F. (2010). Java 2: Curso de programación (4.ª ed.). RA-MA.
Cómo citar
Solano, J. A. (2020). Interfaz gráfica de usuario. Unidades de Apoyo para el Aprendizaje. CUAIEED/Facultad de Ingeniería-UNAM. (Vínculo)
