Interfase gráfica de usuario (GUI) - II
Transcript of Interfase gráfica de usuario (GUI) - II
![Page 1: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/1.jpg)
Principios de Computadoras II
Interfase gráfica de usuario (GUI) - II
Departamento de Ingeniería Electrónica y ComputadorasUniversidad Nacional del Sur
Mg. Ricardo [email protected]
![Page 2: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/2.jpg)
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
![Page 3: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/3.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
3Universidad Nacional del Sur
Ejemplo 1: Uso de JLabel
![Page 4: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/4.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
4Universidad Nacional del Sur
Ejemplo 1: Uso de JLabel
![Page 5: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/5.jpg)
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
![Page 6: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/6.jpg)
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ú
![Page 7: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/7.jpg)
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
![Page 8: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/8.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
8Universidad Nacional del Sur
Jerarquía de clases de EventObject
![Page 9: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/9.jpg)
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…
![Page 10: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/10.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
10Universidad Nacional del Sur
Jerarquía de interfases de EventListener
![Page 11: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/11.jpg)
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 ) {…}
}
![Page 12: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/12.jpg)
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.
![Page 13: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/13.jpg)
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.
![Page 14: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/14.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
14Universidad Nacional del Sur
Manejo de eventos del usuario
![Page 15: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/15.jpg)
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.
![Page 16: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/16.jpg)
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
![Page 17: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/17.jpg)
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
![Page 18: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/18.jpg)
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
![Page 19: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/19.jpg)
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
![Page 20: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/20.jpg)
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
![Page 21: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/21.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
21Universidad Nacional del Sur
Ejemplo 2
![Page 22: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/22.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
22Universidad Nacional del Sur
Ejemplo 3: JButton� Jerarquía de botones
![Page 23: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/23.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
23Universidad Nacional del Sur
Ejemplo 3: JButton
![Page 24: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/24.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
24Universidad Nacional del Sur
Ejemplo 3: JButton
![Page 25: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/25.jpg)
Principios de Computadoras IIInterfase gráfico del usuario (GUI) – IIMg.Ricardo Coppo
25Universidad Nacional del Sur
Ejemplo 3: JButton
![Page 26: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/26.jpg)
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.
![Page 27: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/27.jpg)
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
![Page 28: Interfase gráfica de usuario (GUI) - II](https://reader036.fdocumento.com/reader036/viewer/2022071420/62cf2c13a887461c5b58ef79/html5/thumbnails/28.jpg)
Principios de Computadoras II
Interfase gráfica de usuario (GUI) - II
Departamento de Ingeniería Electrónica y ComputadorasUniversidad Nacional del Sur
Mg. Ricardo [email protected]