Universidad Nacional de Trujillo Tecnología de la Programación II

Ingeniería de Sistemas Componentes Interfaz Gráfica de Usuario – Parte I

COMPONENTES DE LA INTERFAZ GRÁFICA DE USUARIO

Parte I

1. Introducción.

El desarrollo de aplicaciones que utilizan interfaces gráficas a base de ventanas es una realidad. Una
de las grandes ventajas de trabajar con ventanas es que todas se comportan de la misma forma
independientemente del sistema operativo con el que se trabaje (Windows, Linux, etc.) y, en muchas
ocasiones, utilizan los mismos componentes básicos para introducir órdenes (menús descendentes,
botones, etc.).

Una Interfaz Gráfica de Usuario (GUI por sus siglas en inglés) presenta un mecanismo amigable al
usuario para interactuar con un programa; ya que a este último le proporciona una “apariencia visual”
única. Como ejemplo de una GUI, a continuación se muestra la ventana del navegador Mozilla, con
algunos componentes de la GUI etiquetados.

Cuadro Barras de
Botón Barra de menú combinado desplazamiento

Figura Nº 1. Ventana de Mozilla con sus componentes de la GUI.

2. Formularios.

La unidad fundamental de una aplicación que visualice una interfaz gráfica es el formulario. Un
formulario es realmente una ventana sobre la que se dibujan otros objetos llamados componentes o
controles, tales como etiquetas, cajas de texto, casillas de verificación, botones de opción, botones de
pulsación, barras de desplazamiento, etc., con el fin de aceptar, procesar o visualizar datos.

En una aplicación se pueden utilizar tantos formularios como se necesiten, y dependiendo de la

utilidad que se les dé, éstos serán de diferentes tipos. Así, se puede crear un formulario para que
contenga un gráfico, para visualizar información o bien para aceptar datos.

Finalizado el diseño de la interfaz gráfica (medio de comunicación con el usuario de la aplicación), se

escribe el código fuente relacionado con cada objeto (formularios y controles). Esto quiere decir que cada
objeto está ligado a un código que permanece inactivo hasta que se produzca el evento que lo activa.
Por ejemplo, se puede programar un botón de órdenes (objeto que se puede pulsar) para que
responda a un clic del ratón haciendo alguna cosa.

Así, una aplicación con una interfaz gráfica trabaja estableciendo entre los objetos que componen la
misma una comunicación mediante mensajes, los cuales son producidos por eventos. Cuando un
mensaje llega a un objeto, éste tiene que procesarlo.

Ing. Zoraida Yanet Vidal Melgarejo, Mg. -1-

Universidad Nacional de Trujillo Tecnología de la Programación II
Ingeniería de Sistemas Componentes Interfaz Gráfica de Usuario – Parte I

3. Biblioteca JFC.

Para diseñar aplicaciones que utilicen interfaces gráficas (ventanas con controles, como etiquetas,
cajas de texto, botones, barras de desplazamiento, etc.), Java proporciona una biblioteca de clases
denominada JFC (Java Foundation Classes – clases base de Java). Actualmente bajo esta denominación
se agrupan un conjunto de APIs (Interfaces para Programación de Aplicaciones), algunas de las
cuales, son enumeradas a continuación:

 Swing. Conjunto de componentes escritos en Java para diseñar interfaces gráficas de usuario
que se ejecutan uniformemente en cualquier plataforma nativa que soporta la máquina virtual de
Java.
 AWT (Abstract Window Toolkit – Kit de Herramientas de Ventanas Abstractas). Grupo de
componentes, para diseñar interfaces gráficas de usuario, común a todas las plataformas, pero
escritos específicamente para cada plataforma en código nativo; esto es, no están escritos en
Java. Este grupo ha sido sustituido en gran medida por el conjunto de componentes Swing;
muchos es éstos heredan de sus correspondientes componentes AWT.
 Accessibility (Accesibilidad). Ofrece soporte para usuarios con limitaciones.
 Java 2D. Permite incorporar en los programas, gráficos 2D de alta calidad, texto e imágenes.
 Drag and Drop (Arrastrar y colocar). Permite la transferencia de datos entre aplicaciones
mediante la simple operación de arrastrarlos hasta el lugar de destino.

4. Generalidades de los componentes de Swing.

Las GUIs se crean a partir de componentes de la GUI (también conocidos como controles o widgets
[accesorios de ventana]). Un componente de la GUI es un objeto con el cual interactúa el usuario
mediante el ratón, el teclado u otra forma de entrada, como el reconocimiento de voz. En el siguiente
cuadro se listan algunos de los componentes de la GUI de Swing de Java.

Tabla Nº 1. Algunos componentes básicos de la GUI de Swing de Java.

Componente Descripción
JLabel Área en donde pueden mostrarse íconos o texto no editable.
JTextField
Área en la que el usuario introduce datos desde el teclado. Esta área
también puede mostrar información.
JButton
Área que, cuando el ratón hace clic sobre ella, desencadena un
evento.
JCheckBox Componente de la GUI que puede estar o no seleccionado.

JComboBox
Lista desplegable de elementos, de los cuales el usuario puede
seleccionar uno haciendo clic en él o escribiendo dentro del cuadro.
Área que contiene una lista de elementos, de los cuales el usuario
JList puede seleccionar cualquiera haciendo clic en él. Pueden
seleccionarse varios elementos.
JPanel
Contenedor en el cual pueden colocarse y organizarse
componentes.

Las clases que crean los componentes de la GUI que se listan en la Tabla Nº 1, son algunos de los
componentes de la GUI de Swing del paquete javax.swing, que están escritos, se manipulan y muestran
completamente en Java (los denominados componentes puros de Java).

Los componentes de Swing son parte de la JFC (Java Foundation Classes), las bibliotecas de Java para el
desarrollo de GUIs para múltiples plataformas. Comúnmente se conocen como componentes ligeros;
están escritos completamente en Java, por lo que no son “abrumados” por las complejas

Ing. Zoraida Yanet Vidal Melgarejo, Mg. -2-

Universidad Nacional de Trujillo Tecnología de la Programación II
Ingeniería de Sistemas Componentes Interfaz Gráfica de Usuario – Parte I

herramientas de la GUI de la plataforma en que se utilicen. Los componentes ligeros proporcionan

un mayor control sobre su apariencia y funcionalidad.

Los componentes originales de la GUI del paquete java.awt del AWT (Abstract Windows Toolkit)
están enlazados directamente con las herramientas de interfaz gráfica de usuario de la plataforma
local. Se les llama componentes pesados; ya que dependen del sistema de ventanas de la plataforma
local para determinar su funcionalidad y su vista y sentido.

Varios componentes de Swing son componentes pesados, como las subclases de

java.applet.Applet (como JApplet). Estos componentes aún requieren de una interacción
directa con el sistema de ventanas local. Como tal, la apariencia y funcionalidad de un componente
pesado de la GUI de Swing están restringidas por el sistema de ventanas local.

En conjunto, la apariencia y la manera en que el usuario interactúa con el programa se conocen como
la vista y el sentido de ese programa. Los componentes de Swing permiten al programador especificar
una vista y sentido uniformes entre todas las plataformas, o proporcionar una vista y sentido
personalizados para cada plataforma. Un programa puede incluso cambiar la vista y el sentido
durante su ejecución.

En la figura siguiente se muestra una jerarquía de herencia, la cual contiene clases que declaran
atributos y comportamientos comunes para la mayoría de los componentes de Swing.

Object
(paquete java.lang)

Component
(paquete java.awt)

Container
(paquete java.awt)

JComponent
(paquete javax.swing)

Figura Nº 2. Jerarquía de herencia de los componentes de Swing.

La clase Component declara los atributos y comportamientos comunes de todas las subclases de
Component. Con pocas excepciones, la mayoría de los componentes de la GUI extienden a la clase
Component en forma directa o indirecta. Un método que se origina en la clase Component es paint,
utilizado frecuentemente en subprogramas (applets). Es importante comprender los métodos de la
clase Component, ya que las operaciones comunes para la mayoría de los componentes de la GUI
(tanto de Swing como de AWT) se encuentran en la clase Component.

Una clase Container administra una colección de componentes relacionados. En aplicaciones con
objetos JFrame y en subprogramas, adjuntamos componentes al panel de contenido, que es un
objeto de la clase Container. Esta clase declara los atributos y comportamientos comunes para todas
las subclases de Container. Un método que se origina en la clase Container es add, el cual se utiliza
para adjuntar componentes al panel de contenido (un objeto Container). Otro método que se
origina en la clase Container es setLayout, el cual permite a un programa especificar el
administrador de esquemas que ayuda a un Container a posicionar y ajustar el tamaño de sus
componentes.
Ing. Zoraida Yanet Vidal Melgarejo, Mg. -3-
Universidad Nacional de Trujillo Tecnología de la Programación II
Ingeniería de Sistemas Componentes Interfaz Gráfica de Usuario – Parte I

La clase JComponent es la superclase de la mayoría de los componentes de Swing. Esta clase declara
los atributos y comportamientos comunes de todas las subclases de JComponent, incluyendo:

 Una apariencia visual adaptable, la cual puede utilizarse para personalizar la apariencia de los
componentes (por ejemplo, para usarlos en plataformas específicas).
 Teclas de método abreviado (llamadas nemónicos) para un acceso directo a los componentes de la
GUI por medio del teclado.
 Herramientas para manejo de eventos comunes, para casos en los que varios componentes de la
GUI inician las mismas acciones en un programa.
 Breves descripciones del propósito de un componente de la GUI (lo que se conoce como cuadros
de información sobre herramientas o tool tips) que se muestran cuando el cursor del ratón se coloca
sobre el componente durante un breve periodo.
 Soporte para tecnologías de ayuda, como lectores de pantalla Braille para las personas con
impedimentos visuales.
 Soporte para la localización de la interfaz de usuario; es decir, personalizar la interfaz de usuario
para mostrarla en distintos lenguajes y utilizar las convenciones de la cultura local.

Ing. Zoraida Yanet Vidal Melgarejo, Mg. -4-