interfase gráfica de usuario (gui) - ii

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