POO Introducción a GUI

Modelo de Capas
POO Introducción a GUI

¿Qué es la interfaz de usuario?

la interfaz de usuario o user interface UI es el espacio donde se producen las interacciones

entre seres humanos y máquinas. El objetivo de esta interacción es permitir el funcionamiento
y control más efectivo de la máquina desde la interacción con el humano.

Las interfaces básicas de usuario son aquellas que incluyen elementos como menús, ventanas,
imágenes, cursor, sonidos, entrada de datos, etc.

El objetivo del diseño de una interfaz es producir una interfaz que sea fácil de usar (explicarse
por sí misma), eficiente y agradable para que al operar la máquina dé el resultado deseado.
POO Introducción a GUI

Las interfaces de usuario pueden clasificarse según su tipo:

 Interfaz de línea de comandos (Command-Line Interface, CLI): Interfaces alfanuméricas

(intérpretes de comandos) que solo presentan texto.
 Interfaces gráficas de usuario (Graphic User Interface, GUI): Permiten comunicarse con
la computadora de forma rápida e intuitiva representando gráficamente los elementos
de control y medida.
 Interfaz natural de usuario (Natural User Interface, NUI): Pueden ser táctiles (teléfonos
o tablets), pueden funcionar mediante reconocimiento del habla (Siri o Alexa) o
mediante movimientos corporales (Kinect o Wii).

o según su construcción:

 Interfaz física o hardware: teclados, ratones, pantallas, pulsadores, sensores, etc.

 Interfaz lógica o software: programas o parte de programa que permiten expresar las
órdenes a la computadora o visualizar su respuesta (vistas, menús, ventanas,
formularios, etc.)

El modelo de eventos de Java

En Java, cada evento está representado por un objeto que es una subclase de la clase
EventObject en el paquete java.util. Cada subclase de EventObject representa un tipo de
evento particular. Por ejemplo:

MouseEvent, para representar acciones del ratón: mover, arrastrar, hacer clic en un botón del
ratón, etc.

KeyEvent, para representar acciones del teclado, esto es, pulsar teclas.

ActionEvent, para representar una acción del usuario en la interfaz, por ejemplo, pulsar un
botón en la pantalla.
POO Introducción a GUI

No obstante, en el modelo de eventos de Java, los EventObject no realizan acciones por si

mismos, sino que esos eventos son enviados a otro objeto encargado de responder a un tipo
de evento en particular. Estos objetos son los que conocemos como listeners o "escuchadores",
y existen diferentes listeners que "escuchan" a los diferentes eventos, tales como los mouse
listeners, key listeners o action listeners.

Los listener no se implementan como clases en java, sino como interfaces. Un interface sería
entonces una colección de métodos que definen un comportamiento en particular. De este
modo, cualquier clase que suministre información para dichos métodos puede declarar que
implementa a dicho interface.

Los listeners que usaremos estarán en el paquete java.awt.event (que debemos importar antes
de implementarlos) y nos podemos encontrar los siguientes:

Nombre: ActionListener

Descripción: Se produce al hacer click en un componente, también si se pulsa Enter teniendo el

foco en el componente.

Método:

public void actionPerformed(ActionEvent e)

Eventos:

JButton: click o pulsar Enter con el foco activado en él.

JList: doble click en un elemento de la lista.

JMenuItem: selecciona una opción del menú.

JTextField: al pulsar Enter con el foco activado.

Nombre: KeyListener

Descripción: Se produce al pulsar una tecla. según el método cambiara la forma de pulsar la
tecla.

Métodos:

public void keyTyped(KeyEvent e)

public void keyPressed(KeyEvent e)

public void keyReleased(KeyEvent e)

Eventos: Cuando pulsamos una tecla, según el listener:

keyTyped: al pulsar y soltar la tecla.

keyPressed : al pulsar la tecla.

keyReleased : al soltar la tecla.

Nombre: FocusListener
POO Introducción a GUI

Descripción: Se produce cuando un componente gana o pierde el foco, es decir, que esta
seleccionado.

Métodos: Recibir o perder el foco.

Nombre: MouseListener

Descripción: Se produce cuando realizamos una acción con el ratón.

Métodos:

public void mouseClicked(MouseEvent e)

public void mouseEntered(MouseEvent e)

public void mouseExited(MouseEvent e)

public void mousePressed(MouseEvent e)

public void mouseReleased(MouseEvent e)

Eventos: Según el listener:

mouseClicked: pinchar y soltar.

mouseEntered: entrar en un componente con el puntero.

mouseExited: salir de un componente con el puntero

mousePressed: presionar el botón.

mouseReleased: soltar el botón.

Nombre: MouseMotionListener

Descripción: Se produce con el movimiento del mouse.

Métodos:

public void mouseDragged(MouseEvent e)

public void mouseMoved(MouseEvent e)

Eventos: Según el listener:

mouseDragged: click y arrastrar un componente.

mouseMoved: al mover el puntero sobre un elemento.

De esta forma, los listener se pueden invocar de esta manera:

Java Swing
Librería Swing - Interfaces GUI Jframe
POO Introducción a GUI

la Librería Swing para diseñar las Interfaces gráficas de usuario, utilizando las
ventanas JFrameForm, JInternalFrame, los componentes JPanel, JLabel,
JTextField, JButton, JCombobox, JList, JCheckBox, modificando las propiedades
de dichos componentes y desarrollando una GUI, utilizando el IDE BlueJ.

Librería Swing

Interfaces Gráficas de Usuario (GUI)

● Swing es una biblioteca de interfaces gráficas de usuario (GUI) para Java.

● Viene incluída con el entorno de desarrollo de Java (JDK).
● Extiende a otra librería gráfica más antigua llamada AWT.

Ventanas

JFrameForm: La clase JFrameForm proporciona operaciones para manipular

ventanas y contiene todos los componentes utilizados en la interfaz Gráfica de
Usuario.

JInternalFrame: Utilizada como Ventana interna dentro de un DesktopPane para

implementar componentes.

Componentes de una Ventana

Jpanel: Componente con un layout manager propio, y que puede contener varios
componentes en su interior.
POO Introducción a GUI

JButton: Componente que permite implementar un Botón de pulsación.

JLabel: Muestra una pequeña área de texto o imagen en la Interfaz gráfica de

usuario.

JTextField: Componente que permite ingresar una línea de texto y editarlo.

JTextArea: Componente que muestra un control para ingresar varias líneas de

texto y editarlo.

JCheckBox: Permite seleccionar o deseleccionar uno o varios ítems de un conjunto

de opciones.
POO Introducción a GUI

JRadioButton: Componente para mostrar varias opciones de las cuales sólo se

puede seleccionar una.

JComboBox: Usado para implementar una lista desplegable de varias opciones de

las cuales sólo se puede seleccionar una.

JList: Permite implementar una lista con varias opciones de las cuales se puede
seleccionar una o varias.

JMenuBar: Permite implementar un menú de ítems y subítems de opciones en

java.

JTable: Permite implementar una tabla para poder mostrar Información en sus
celdas.
POO Introducción a GUI

Propiedades de los Componentes

BackGround: Permite modificar el color de fondo de un componente.

ForeGround: Propiedad para modificar el color de la letra de un componente.

Font: Permite modificar la fuente, el estilo y el tamaño de la letra de un

componente.

Icon: Propiedad que permite insertar un icono o imagen en un componente.

Text: Para definir la línea de texto que se va a visualizar en el componente.

Cursor: Define el estilo del cursor del Mouse.

ToolTipText: Permite ingresar un mensaje de ayuda que se visualizará cuando

pasemos el mouse sobre el componente.
POO Introducción a GUI

Actividad 1:

Crear un Jpanel

Ejemplo. Crear una clase llamada Panel dentro de un paquete que visualice un componente
Jpanel
POO Introducción a GUI

Actividad 2:

Digitar, compilar el ejemplo, al finalizar describir que hace el programa, proponer ajustes que
personalicen el resultado.
POO Introducción a GUI

Actividad 3:

Digitar, compilar el ejemplo, al finalizar describir que hace el programa, proponer ajustes que
personalicen el resultado.
POO Introducción a GUI
POO Introducción a GUI

Actividad 4:

Trabajando con JRadioButton

POO Introducción a GUI
POO Introducción a GUI

Actividad 5.

Trabajando con JCheckBox

POO Introducción a GUI

Actividad 6.

Trabajando con el componente ComboBox

POO Introducción a GUI