Componentes de la GUI:

Parte 1
 OBJETIVOS
- Comprender los principios de diseño de las interfaces graficas de usuario
(GUI).

- Crear interfaces graficas de usuario y manejar los eventos generados por

las interacciones de los usuarios con las GUIs.

- Aprender acerca de los paquetes que contienen componentes

relacionados con las GUIs, clases e interfaces manejadoras de eventos.

- Crear y manipular botones, etiquetas, listas, campos de texto y paneles

- Entender el manejo de los eventos de ratón y los eventos de teclado.

- Aprender a utilizar los administradores de esquemas para ordenar los
componentes de las GUIs.
• Una interfaz gráfica de usuario (GUI) presenta un
mecanismo amigable al usuario para interactuar con una
aplicación. Una GUI proporciona a una aplicación una
“apariencia visual” única. Al proporcionar distintas
aplicaciones en las que los componentes de la interfaz de
usuario sean consistentes e intuitivos, los usuarios pueden
familiarizarse en cierto modo con una aplicación, de manera
que pueden aprender a utilizarla en menor tiempo y con
mayor productividad.
 Centro de Industria y de la Construcción

Ejercicio de JLabelFrame
 Centro de Industria y de la Construcción

Ejercicio de JLabelFrame
 Centro de Industria y de la Construcción

Ejercicio de PruebaLabel
 Centro de Industria y de la Construcción
Campos de texto y una introducción al
manejo de eventos con clases anidadas
En este ejemplo presentaremos dos nuevos componentes de GUI que pueden generar
eventos: JTextField y JPasswordField del paquete de Java.swing. La clase JTextField
extiende a la clase JText Component, que proporciona muchas características comunes
para los componentes de Swing basados en texto. La clase JPasswordField extiende a
JTextField y agrega varios métodos específicos para el procesamiento de contraseñas.
Cada uno de estos componentes es un área de una sola línea, en el cual el usuario
puede introducir texto mediante teclado.
Las aplicaciones también pueden mostrar texto en un objeto JTextField.
Un objeto JPasswordField, muestra que están escribiendo caracteres a medida que el
usuario los introduce, pero oculta los caracteres reales con un carácter de eco,
asumiendo que representan una contraseña que sólo el usuario debe conocer.
Cuando el usuario escribe datos de un en un objeto JTextField o JPasswordField y
después oprimen intro, ocurre un evento. Nuestro siguiente ejemplo demuestra como
un programa puede realizar una tarea en respuesta a ese evento. Las técnicas que se
muestran aquí se pueden aplicar a todos los componentes de GUI que generen
 Centro de Industria y de la Construcción

Objetos JTextField y JPasswordField

 Centro de Industria y de la Construcción

Objetos JTextField y JPasswordField

 Centro de Industria y de la Construcción

Objetos JTextField y JPasswordField

 Campos de texto y una introducción al manejo de Centro de Industria y de la Construcción

eventos con clases anidadas

• Las líneas 3 a 9 importan las clases e interfaces que utilizamos en este ejemplo. La clase CampoTextoMarco
extiende a JFrame y declara tres variables JTextField y una variable JPasswordField (líneas 13 a 16). Cada uno
de los correspondientes campos de texto se instancia y se adjunta al objeto CampoTextoMarco en el
constructor que se encuentran las líneas 19 a 47.

CREACION DE LA GUI
• La línea 22 establece el esquema del objeto CampoTextoMarco a FlowLayout.
• La línea 25 crea el objeto campoTexto1 con 10 columnas de texto. La anchura en píxeles de una columna de
texto se determina con base a la altura promedio de un carácter en el tipo de letra actual del campo de texto.

Cuando se muestra texto en un campo de texto, y el texto es más ancho que el campo de texto en si, no está
visible una parte del texto del lado derecho. Si usted escribe en un campo de texto y el cursor llega el extremo
derecho del campo, el texto en el extremo izquierdo se empuja hacia el lado izquierdo del campo de texto y ya
no estará visible.
Los usuarios pueden usar las flechas de dirección izquierda y derecha para recorrer el texto completo, aun
cuando éste no se pueda ver todo a la vez.

La línea 26 agrega el objeto campoTexto1 al objeto JFframe.

La línea 29 crea el objeto campoTexto2 con el texto inicial “escriba el texto aquí” para mostrarlo en el campo de
texto. La anchura del campo se determina con base al texto predeterminado especificado en el constructor.
 Centro de Industria y de la Construcción

Campos de texto y una introducción al manejo de

eventos con clases anidadas

La línea 30 agrega el objeto campoTexto2 al objeto JFrame.

La línea 33 crea el objeto campo texto 3 y llama al constructor de JTextField
con dos argumentos: el texto predeterminado “campo de texto no editable”
para mostrarlo y el número de columnas en este caso 21.
La anchura del campo de texto se determina con base al número de
columnas especificadas.
La línea 34 utiliza el método setEditable heredado d JTextField de la clase
JTextComponent, para hacer el campo de texto no editable, es decir, el
usuario no puede modificar el texto.
La línea 35 agrega el objeto campoTexto3 al objeto JFrame.
 Centro de Industria y de la Construcción

La línea 38 crea campoContrasenia con el texto “texto oculto” a mostrar en el

campo de texto. La anchura de este campo de texto se determina con base a la
chura el texto predeterminado. Al ejecutar la aplicación, observe que el texto se
muestra como una cadena de *.
La línea 39 agrega campoContrasenia al objeto JFrame.
 Centro de Industria y de la Construcción
Uso de una clase anidada para implementar un
manejador de eventos
Todas las clases que hemos visto hasta ahora se conocen como clases de nivel
superior, es decir las clases no se declararon dentro de otras clases. Java nos
permite declarar clases dentro de otras clases; a éstas clases se les conoce como
clases anidadas. Las clases anidadas pueden ser static o no static. Las clases
anidadas no static se llaman clases internas, y se utilizan con frecuencia para el
manejo de eventos.
Antes de poder crear un objeto de una clase interna debe haber primero un objeto
de la clase de nivel superior que contenga la clase interna esto se requiere debido
a que un objeto de la clase interna y en implícitamente una referencia a un objeto
de su clase de nivel superior también hay una relación especial entre estos objetos
el objeto de la clase interna Puede acceder directamente a todas las variables de
instancia y métodos de la clase externa una clase interna que es estática no
requiere un objeto de su clase de nivel Superior y no tiene implícitamente una
referencia a un objeto de la clase nivel Superior.
 Centro de Industria y de la Construcción

El manejo de eventos en Este ejemplo se realiza mediante un objeto de la

clase interna private ManejadorCampoTexto (línea 50 a 80). Esta clase es
private debido a que se utilizará sólo para crear manejadores de eventos para
los campos de texto en la clase de nivel superior CampoTextoMarco. Al igual
que con los otros miembros de una clase, las clases internas pueden
declararse como public, protected o private.

Los componentes de GUI pueden generar una variedad de eventos en

respuesta a las interacciones del usuario. Cada evento se representa mediante
una clase, y sólo puede procesarse mediante el tipo apropiado de manejador
de eventos. En la mayoría de los casos, los eventos que soporta un
componente GUI se describen en la documentación de la API de Java para la
clase de ese componente y sus superclases. Cuando el usuario oprime intro en
un objeto JTextField y JPasswordField, el componente de GUI genera un
evento ActionListener.
 Centro de Industria y de la Construcción

Registro del manejador de evento para cada

campo de texto
En el constructor de MarcoCampoTexto, la línea 42 crea un objeto
ManejadorCampoTexto y lo asigna a la variable manejador. El método
actionPerformed de este objeto se llamará en forma automática cuando el
usuario oprima intro en cualquiera de los campos de texto de la GUI. Sin
embargo, antes de que pueda ocurrir esto, el programa debe registrar este objeto
como el manejador de eventos para cada campo de texto.
Las líneas 43 a 46 son ls instrucciones de registro de eventos que especifican a
manejador como el manejador de eventos para los tres objetos JTextField y el
objeto JPasswordField.
La aplicación llama el método addActionListener de JTextField para registrar el
manejador de eventos para cada componente. Este método recibe como
argumento un objeto ActionListener, el cual puede ser un objeto de cualquier
clase que implemente a ActionListener.
 Centro de Industria y de la Construcción

Registro del manejador de evento para cada

campo de texto
El objeto manejador es una ActionListener, ya que la clase
ManejadorCampoTexto implementa a ActionListener.

Una vez que se ejecutan las líneas 43a 46, el objeto manejador
escucha los eventos. Ahora, cuando el usuario oprime intro en
cualquiera de estos cuatro campos de texto, se hace una llamada al
método actionPerformed (líneas 53 a 79) en la clase
ManejadorCampoTexto para que maneje el evento.

Si no está registrado un manejador de eventos para un campo de

texto específico, el evento que ocurre cuando el usuario primero en
ese campo se consume es decir la aplicación simplemente lo ignora.
 Centro de Industria y de la Construcción

DETALLES DEL METODO actionPerformed de

la clase ManejadorCampoTexto
En este ejemplo, estamos usando el método actionPerformed de un objeto
manejador de eventos (líneas 53 a 79) para manejar los eventos generados por
cuatro campos de texto. Como nos gustaría imprimir en pantalla el nombre de la
variable de instancia de cada campo de texto para fines demostrativos, debemos
determinar cuál campo de texto generó el evento cada vez que se hace una llamada
a ActionPerformed. El componente de GUI con el que interactúa el usuario es el
origen del evento. En este ejemplo, el origen del evento es uno de los cuatro
campos de texto o el campo de contraseña. Cuando el usuario oprime intro
mientras uno de estos componentes de GUI tiene el enfoque, el sistema crea un
objeto ActionEvent único que contiene información acerca del evento que acaba de
ocurrir, como el origen del evento y el texto en el campo de texto.
Después, el sistema pasa este objeto ActionEvent en una llamada al método
actionPerformed del componente escucha de eventos. En este ejemplo mostramos
parte de esa información en un diálogo de mensaje.
 Centro de Industria y de la Construcción

DETALLES DEL METODO actionPerformed de

la clase ManejadorCampoTexto
La línea 55 declara el objeto String que se va mostrar. La variable se inicializa con
la cadena vacía; una cadena que no contiene caracteres. El compilador requiere
esto, en caso de que no se ejecute ninguna de las bifurcaciones de la instrucción If
anidada en las líneas 58 a 75.

El método getSource de ActionEvent (que se llaman las líneas 58, 63, 68 y 73)
devuelve una referencia al origen del evento. La condición en la línea 58
pregunta, “Es campoTexto1 el origen del evento? Esa condición compara las
referencias en ambos lados del operador == para determinar si se refieren al
mismo objeto. Si ambos se refieren a CampoTexto1, entonces el programa sabe
que el usuario oprimió intro, en campoTexto1.

En este caso las líneas 59 y 60 crear un objeto String qué contiene el mensaje que
la línea 78 mostrará en un diálogo de mensaje.
 Centro de Industria y de la Construcción

DETALLES DEL METODO actionPerformed de

la clase ManejadorCampoTexto
La línea 60 utiliza el método getActionCommand de ActionEvent para
obtener el texto que escribió el usuario en el campo de texto que
generó el evento.

Si el usuario interactuó con el objeto JPasswordField, las líneas 74 y 75

utilizan el método getPassword de JPasswordField, para obtener la
contraseña y crear el objeto de String a mostrar.

Este método devuelve la contraseña como un arreglo de tipo char, que

se utiliza como argumento para un constructor de String, para crear
una cadena que contenga los caracteres en el arreglo.
 Centro de Industria y de la Construcción

LA CLASE PruebaCampoTexto
La clase PruebaCampoTexto contiene el método Main que ejecuta esta aplicación y
muestra un objeto de la clase CampoTextoMarco.
Al ejecutar la aplicación, observe que hasta el campoJTextField, puede generar un
evento ActionEvent.
Para probar esto, haga clic en el campo de texto para darle el enfoque y después
oprima intro. Observe además que el texto actual de la contraseña se muestra al
oprimir Intro en el campo JPasswordField;

¡!Desde luego que, por lo general, no se debe Mostrar la contraseña!!

Esta aplicación usó un solo objeto de la clase ManejadorCampoTexto como el

componente de escucha de eventos para cuatro campos de texto.
 Centro de Industria y de la Construcción

LA CLASE PruebaCampoTexto
 Centro de Industria y de la Construcción

BOTONES
Un botón es un componente en el que el usuario hace clic para
desencadenar cierta acción. Una aplicación de Java puede utilizar varios
tipos de botones, incluyendo botones de comando, casillas de verificación,
botones interruptores y botones de opción.
A continuación realizaremos el siguiente ejercicio:
 Centro de Industria y de la Construcción

Clase MarcoBoton
Empecemos la clase MarcoBoton, agregando las siguientes librerías o clases
de Java:
 Centro de Industria y de la Construcción

Clase MarcoBoton
 Centro de Industria y de la Construcción

Clase PruebaBoton