PDF de programación - Interfaces Gráficas - Programación de sistemas

Programación de sistemas

Interfaces Gráficas










I. Conceptos básicos
II. Eventos



Julio Villena Román

<[email protected]>



MATERIALES BASADOS EN EL TRABAJO DE DIFERENTES AUTORES:

José Jesús García Rueda, Carlos Alario Hoyos



Contenidos

 ¿Qué son las interfaces gráficas?
 Elementos de la interfaz gráfica
 Organización de elementos: Layouts

¿Qué son las interfaces gráficas?

• Parte del programa que interactúa con
el usuario, utilizando objetos gráficos
e imágenes.
– Proporcionan un entorno (gráfico) sencillo e

intuitivo



– Evolución de la línea de comandos
– GUI (Graphical User Interface)



¿Cómo construimos interfaces
gráficas en Java?

• Utilizando clases incluidas en el paquete




package javax.swing;

API: http://docs.oracle.com/javase/7/docs/api/javax/swing/package-summary.html



• Necesitamos importar esas clases en nuestro

programa



import javax.swing.*;

Ejemplos de clases en javax.swing

• JLabel
• JButton
• JTextField
• JTextArea




Etiquetas
Botones
Campos de texto
Áreas de texto





Ejemplos de clases en javax.swing

• JCheckBox
• JRadioButton
• JList
• JScrollBar
• …






Casillas de verificación
Botones de opción
Listas
Barras de desplazamiento




La metáfora de la pared




La metáfora de la pared

Ventana





Contenedor de segundo nivel

Contendor de nivel superior

Paso 1: Crear la ventana

Necesitamos importar la clase JFrame (ventana genérica)

import javax.swing.JFrame;

public class Ejemplo {
public Ejemplo() {
JFrame frame = new JFrame("Ejemplo");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(400,100);
frame.setVisible(true);
}
public static void main(String args[]) {
javax.swing.SwingUtilities.invokeLater(new Runnable(){




}
}


public void run() {
Ejemplo gui = new Ejemplo();
}
});

Creación de una instancia
de nuestra interfaz gráfica

El main() es igual en las
siguientes transparencias.

Creamos
una nueva
ventana

Siempre igual

Hay que hacer visible la
ventana explícitamente

Paso 2: El contenedor de nivel superior

• Todas las ventanas tienen un contenedor de alto

nivel sobre el que se colocan el resto de
componentes
o Incluidos otros contenedores

import javax.swing.JFrame;
import javax.swing.JPanel;




Necesitamos importar la clase JPanel (contenedor genérico)

Obtenemos la referencia al objeto que
representa al contenedor de alto nivel

public class Ejemplo {
public Ejemplo() {
JFrame frame = new JFrame("Ejemplo");
JPanel contentPane = (JPanel) frame.getContentPane();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(400,100);
frame.setVisible(true);
}
}


Alternativamente: Container contentPane = frame.getContentPane();

Paso 3: Añadir elementos

Importamos la clase JLabel
(para incluir etiquetas)

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;


public class Ejemplo {
public Ejemplo() {
JFrame frame = new JFrame("Ejemplo");
JPanel contentPane = (JPanel) frame.getContentPane();
JLabel label = new JLabel("Etiqueta");
contentPane.add(label);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(400,100);
frame.setVisible(true);
}
}


Creamos una etiqueta y la añadimos al panel

Ejercicio 1

•

Implementa el código que permite generar la siguiente
interfaz gráfica. No olvides importar las clases
necesarias y hacer visible la ventana. El programa
debe finalizar al cerrar la ventana.

200 píxel

400 píxel

Paso 4: Contenedores de niveles inferiores

• Un panel puede contener a otros paneles


import javax.swing.JFrame;

import javax.swing.JPanel;

import javax.swing.JLabel;

import javax.swing.JButton;



public class Ejemplo {

public Ejemplo() {
JFrame frame = new JFrame("Ejemplo");

JPanel contentPane = (JPanel) frame.getContentPane();
JPanel panel = new JPanel();
JLabel label = new JLabel("Etiqueta");
JButton button = new JButton("Botón");
panel.add(label);
panel.add(button);
contentPane.add(panel);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

elementos

Añadimos el panel al contenedor de nivel superior

Creamos un nuevo panel

y le añadimos los

frame.setSize(400,100);

frame.setVisible(true);

}

}


Creando nuestras propias ventanas

• También podemos crear nuestras propias ventanas

como subclases de Jframe
o Especialmente cuando se necesitan varias instancias del

mismo tipo de ventana (p.ej. ventanas de error)






Jerarquía de clases de los elementos
de las interfaces gráficas en Java

Figura de: http://pervasive2.morselli.unimo.it/~nicola/courses/IngegneriaDelSoftware/java/J4a_GUI_2.html

¿Cómo ordenar los elementos de
nuestra interfaz gráfica?

• Opción 1: Uso de layouts

o Plantillas que facilitan la colocación de elementos en la

interfaz

o Se asocian a paneles (cada panel puede tener un layout

diferente)


• Opción 2: Por coordenadas

o Método setBounds(int x, int y, int width, int height)
o Para usar coordenadas hay que anular el layout del panel

 setLayout(null)










Layouts

• Conjunto de clases incluidas en el paquete




package java.awt;

API: http://docs.oracle.com/javase/7/docs/api/java/awt/package-summary.html



• Necesitamos importar esas clases en nuestro

programa



import java.awt.*;

FlowLayout

• Coloca los elementos en línea uno detrás de otro

o Layout por defecto en los paneles



GridLayout

• Coloca los elementos en cuadrícula

Importamos la
clase GridLayout

Indicamos el
tipo de Layout

BorderLayout

• Coloca los elementos en cuadrícula

Importamos la

clase BorderLayout

Indicamos el

tipo de Layout y
la posición de
los elementos

Ejercicio 2

•

Implementa el código que permite generar la siguiente
interfaz gráfica. No olvides importar las clases
necesarias y hacer visible la ventana. El programa
debe finalizar al cerrar la ventana.

300 píxel

600 píxel

Ejercicio 3

•

Implementa el código que permite generar la siguiente
interfaz gráfica. No olvides importar las clases
necesarias y hacer visible la ventana. El programa
debe finalizar al cerrar la ventana.

300 píxel

600 píxel

Ejercicio 4

•

Implementa el código que permite generar la siguiente
interfaz gráfica. No olvides importar las clases necesarias
y hacer visible la ventana. El programa debe finalizar al
cerrar la ventana. Utiliza JPasswordField para el
campo de texto del password

Programación de sistemas

Interfaces Gráficas







I. Conceptos básicos
II. Eventos



Julio Villena Román

<[email protected]>



MATERIALES BASADOS EN EL TRABAJO DE DIFERENTES AUTORES:

José Jesús García Rueda, Carlos Alario Hoyos



Contenidos

 ¿Qué son los eventos en una interfaz gráfica?
 Ejemplos de escuchadores
 Adaptadores

¿Qué son los eventos en una
interfaz gráfica?

Usuario

Interfaz Gráfica

Procesamiento

Programa

¿Qué son los eventos en una
interfaz gráfica?

1. El usuario realiza acciones (genera eventos) sobre

componentes de la interfaz gráfica (p.ej. pulsar botón).
•

Los componentes de la interfaz gráfica “deben estar atentos” para
recibir los eventos generados por el usuario

2. Una vez recibido un evento hay que procesarlo

•

Comunicación con la parte del programa encargada del procesamiento

3. (Cuando proceda) modificar la interfaz gráfica para

presentar el resultado del procesamiento (ej: mensaje)



1

2








3

Paso 1: Los componentes de la interfaz
gráfica deben “estar atentos”




Acción del

usuario









Evento
ocurrido

Componente de la

interfaz gráfica

Escuchador
(Listener)

• Los escuchadores son interfaces Java incluidos en el paquete




package java.awt.event;

API: http://docs.oracle.com/javase/7/docs/api/java/awt/event/package-summary.html



• Necesitamos importar esas interfaces en nuestro programa



import java.awt.event.*;

Paso 1: Los componentes de la interfaz
gráfica deben “estar atentos”

Evento de tipo
“Acción” sobre
el botón

JButton

ActionListener




Usuario

pulsa botón









•

Interfaz ActionListener
o Incluye el método

actionPerformed(ActionEvent e),
el cual debe ser implementado



Código de partida (sesión anterior)

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;


public class Ejemplo {

public Ejemplo() {
JFrame frame = new JFrame("Ejemplo");
JPanel contentPane = (JPanel) frame.getContentPane();
JPanel panel = new JPanel();
JButton button = new JButton("Botón");








panel.add(button);
contentPane.add(panel);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(400,100);
frame.setVisible(true);
}
}


Alternativamente: Container contentPane = frame.getContentPane();

Paso 1: Los componentes de la interfaz
gráfica deben “estar atentos”




import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

public class Ejemplo {
public Ejemplo() {
JFrame frame = new JFrame("Ejemplo");
JPanel contentPane = (JPanel) frame.getContentPane();




Importar interfaz ActionListener y clase ActionEvent





JPanel panel = new JPanel();
JButton button = new JButton("Haz click aquí");
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEv