Post on 14-Jul-2022
Principios de Computadoras II
Interfase gráfica de usuario (GUI) - II
Departamento de Ingeniería Electrónica y ComputadorasUniversidad Nacional del Sur
Mg. Ricardo Copporcoppo@uns.edu.ar
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
2Universidad Nacional del Sur
Ejemplo 1: Uso de JLabel� En este ejemplo se usan dos clases, uno es para
iniciar la aplicación, la segunda es la ventana con un constructor apropiado.
� Se demuestra el uso de JLabel para presentar textos e imágenes
� Se introduce el administrador de esquema “FlowLayout” que distribuye los componentes uno a continuación de la otra dentro de la ventana
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
3Universidad Nacional del Sur
Ejemplo 1: Uso de JLabel
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
4Universidad Nacional del Sur
Ejemplo 1: Uso de JLabel
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
5Universidad Nacional del Sur
Ejemplo 1: Uso de JLabel� Clase iniciadora de la aplicación
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
6Universidad Nacional del Sur
Eventos y su procesamiento� Toda la interfase gráfica del usuario
responde a diferentes tipos de evento
� Eventos de teclado� Eventos de mouse� Eventos de ventana� Eventos de menú
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
7Universidad Nacional del Sur
Eventos y su procesamiento� El procesamiento de eventos se divide en cuatro partes:
� Un objeto del tipo “EventObject” o uno de sus clases derivadas que describe el evento creado por Swing.
� Un método de acción, manejador o de procesamiento que debe ser definido por el usuario o tomado por defecto (Listener)
� Localización de la ventana, control o widget que se encuentra activo en el momento en que se produce el evento (foco)
� Un mecanismo de subscripción o conexión que interconecta el widget con el manejador
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
8Universidad Nacional del Sur
Jerarquía de clases de EventObject
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
9Universidad Nacional del Sur
Eventos y su procesamiento� Cada tipo de evento debe ser procesada por un
método adecuado de una clase del tipo “EventListener”
� Se escribe una clase que implementa una de las interfases de escucha de eventos específica derivada de EventListener
� ActionListener (botones, menues, etc.)� MouseListener (click, drag, etc.)� KeyListener (teclado)� Otros…
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
10Universidad Nacional del Sur
Jerarquía de interfases de EventListener
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
11Universidad Nacional del Sur
Eventos y su procesamiento� Ejemplo de una clase que implementa
ActionListener
� La interface ActionListener posee un único método público llamado “actionPerformed()”.
private class ManejadorEvento implements ActionListener
{
public void actionPerformed( ActionEvent ev ) {…}
}
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
12Universidad Nacional del Sur
Eventos y su procesamiento� Una vez que se posee la clase “Listener” y se
han implementado los métodos de la interface se lo debe “conectar” o “subscribir”al widget.
� Una misma clase “Listener” puede subscribirse a varios widget. Esto permite que diversos botones, teclas, etc. puedan tener el mismo comportamiento.
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
13Universidad Nacional del Sur
Eventos y su procesamiento� Cada componente visual posee una lista
polimórfica de “EventListener”.
� Cuando recibe un “EventObject” o uno de sus derivados, recorre la lista buscando los objetos listener capaces de procesarlo. De encontrar alguno, invoca los métodos de la interface.
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
14Universidad Nacional del Sur
Manejo de eventos del usuario
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
15Universidad Nacional del Sur
Conexión de componentes con los manejadores de evento� El programador debe “conectar” cada componente
visual con los manejadores de evento.
� Esto se realiza mediante un mecanismo de agregación de objetos (también conocido como subscripción en este caso)
� Los componentes implementan metodos como:� addActionListener� addMouseListener� etc.
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
16Universidad Nacional del Sur
Ejemplo 2: Campos de texto y eventos� En esta aplicación se demuestra el uso de
JTextField, el manejo de eventos y las clases anidadas en Java.
� La aplicación responde al ingreso de “Intro” en el componente que actualmente posee el foco y luego presenta una ventana con un texto identificatorio.
� Se ilustra tambien como un único manejador de eventos puede responder a diferentes componentes
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
17Universidad Nacional del Sur
Ejemplo 2: Campos de texto y eventos
Programa principal
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
18Universidad Nacional del Sur
Ejemplo 2: Campos de texto y eventos
Campos internos de la ventana
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
19Universidad Nacional del Sur
Ejemplo 2: Campos de texto y eventos
Todos los componentes usanel mismo manejador de enventos
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
20Universidad Nacional del Sur
Ejemplo 2: Campos de texto y eventos
Esta clasees interna a
a la clase de la ventana
Se escribe en elmismo archivo ytene visibilidad
private
getActionCommand() retornael texto interno del componente
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
21Universidad Nacional del Sur
Ejemplo 2
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
22Universidad Nacional del Sur
Ejemplo 3: JButton� Jerarquía de botones
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
23Universidad Nacional del Sur
Ejemplo 3: JButton
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
24Universidad Nacional del Sur
Ejemplo 3: JButton
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
25Universidad Nacional del Sur
Ejemplo 3: JButton
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
26Universidad Nacional del Sur
Ejemplo 4: Calculadora simple� Utilizando el Netbeans y la capacidad de
diseño gráfico del IDE desarrollar una calculadora simple capaz de sumar dos números y presentar el resultado.
� Generar dos clases, la de la aplicación y la de la “vista” o ventana.
� Analizar el código generado por el IDE.
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
27Universidad Nacional del Sur
Bibliografía� Ver Deitel y Deitel
� Java – Cómo programar (7ta. Edición)� Cap. 11 – Componentes de la GUI
� Otros componentes:� JCheckBox, JRadioButton, JComboBox, JList, JTextArea
� Esquemas:� FlowLayout, BorderLayout, GridLayout
� Clases adaptadoras
Principios de Computadoras II
Interfase gráfica de usuario (GUI) - II
Departamento de Ingeniería Electrónica y ComputadorasUniversidad Nacional del Sur
Mg. Ricardo Copporcoppo@uns.edu.ar