Metodología de la Programación

Metodología de la Programación
Aplicaciones gráficas
F. J. Martı́n Mateos
Dpto. Ciencias de la Computación e Inteligencia Artificial
Universidad de Sevilla
Metodología de la Programación - Tema 7 – p. 1/28
Aplicaciones Gráficas
•
•
•
•
•
•
Interfaces gráficas de usuario (GUI)
Facilitan la interacción entre el usuario y el programa
Suelen ser generadas por el método main
Varias posibilidades en JAVA: AWT, Swing, ...
AWT: Abstract Window Toolkit
Los elementos gráficos son independientes de la plataforma, la
apariencia visual no
• import java.awt.*
Metodología de la Programación - Tema 7 – p. 2/28
Elementos de AWT
• Componentes: Botones, etiquetas, campos de texto
• Contenedores: Marcos, paneles
Pueden contener componentes
• Son a su vez componentes
•
• Gestores de posición: Gestionan la posición de los componentes
dentro de los contenedores
• Eventos: Avisan de las acciones del usuario
Metodología de la Programación - Tema 7 – p. 3/28
Contenedores
• Se trata de objetos que pueden contener otros componentes: Frame,
Panel, ...
import java.awt.*;
public class EjemploFrame {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de Marco (Frame)");
f.setSize(500,100);
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 4/28
Contenedor Frame
• Tiene el aspecto de una ventana del sistema gráfico: título, borde,
botones de acción (depende del sistema gráfico)
• Algunos métodos asociados:
Creación e inicialización: Frame f = new Frame()
• Asignación de título: f.setTitle("Titulo")
• Asignación de tamaño: f.setSize(500,100)
• Su visibilidad se controla con: f.setVisible(true)
•
Metodología de la Programación - Tema 7 – p. 5/28
Contenedor Panel
• Agrupación de componentes
• Tiene que estar asociado a otro contenedor (Frame o Panel)
• Ayuda a posicionar los elementos gráficos
Metodología de la Programación - Tema 7 – p. 6/28
Gestores de posición
• Controlan como se colocan las componentes dentro de un contenedor
Posicionamiento basado en coordenadas: f.setLayout(null)
• Posicionamiento en línea: f.setLayout(new FlowLayout())
• Posicionamiento en rejilla:
f.setLayout(new GridLayout(3,3))
•
• Los paneles ayudan a controlar el posicionamiento de los elementos
gráficos
Metodología de la Programación - Tema 7 – p. 7/28
Componentes
• Elementos visuales que permiten la interacción con el usuario
• Se tienen que situar en un contenedor
Contenedor f
• Componente b
• Añadir la componente al contenedor: f.add(b ...)
• El resto de los argumentos depende del gestor de posición
•
Metodología de la Programación - Tema 7 – p. 8/28
Componente Button
• Tiene el aspecto de un botón que puede ser “pulsado” con el ratón
• Algunos métodos asociados:
Creación e inicialización: Button b = new Button("MP")
• Asignación de etiqueta: b.setLabel("B")
• Valor de la etiqueta: b.getLabel()
• Asignación de tamaño: b.setSize(40,40)
•
Metodología de la Programación - Tema 7 – p. 9/28
Componente Button
• Ejemplo
import java.awt.*;
public class EjemploButton {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de Botón");
f.setSize(500,100);
f.setLayout(new FlowLayout());
Button b = new Button("MP");
f.add(b);
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 10/28
Componente Label
• Se trata de una etiqueta informativa
• Sólo proporciona información
• Algunos métodos asociados:
Creación e inicialización: Label b = new Label("MP")
• Asignación de etiqueta: b.setText("IIA")
• Valor de la etiqueta: b.getText()
• Asignación de tamaño: b.setSize(40,40)
•
Metodología de la Programación - Tema 7 – p. 11/28
Componente Label
• Ejemplo
import java.awt.*;
public class EjemploLabel {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de Etiqueta");
f.setSize(500,100);
f.setLayout(new FlowLayout());
Label b = new Label("MP");
f.add(b);
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 12/28
Componente TextField
• Tiene el aspecto de un campo de texto en el que se puede escribir
• Algunos métodos asociados:
Creación e inicialización:
TextField b = new TextField("MP",20)
• Asignación/valor del texto: b.setText("IIA"), b.getText()
• Asignación/valor del tamaño: b.setColumns(40),
b.getColumns()
• Capacidad de edición: b.setEditable(true),
b.setEditable(false)
•
Metodología de la Programación - Tema 7 – p. 13/28
Componente TextField
• Ejemplo
import java.awt.*;
public class EjemploTextField {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de Campo de Texto");
f.setSize(500,100);
f.setLayout(new FlowLayout());
TextField b = new TextField("MP",20);
f.add(b);
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 14/28
Otras componentes
•
•
•
•
•
Botón de opción: Checkbox
Grupo de opciones: CheckboxGroup
Selección: Choice
Lista de selección: List
Area de texto: TextArea
Metodología de la Programación - Tema 7 – p. 15/28
Colores
• Definidos en la clase Color
• Valores predefinidos: Color.valor
Posibles valores: black, blue, cyan, darkGray, gray, green,
lightGray, magenta, orange, pink, red, white, yellow
• Otros colores: new Color(r,g,b), con r, g, b valores enteros
entre 0 y 255
•
• Asignar color de fondo a una componente:
b.setBackground(Color.blue)
• Válido para todas las componentes
Metodología de la Programación - Tema 7 – p. 16/28
Gestor de posición FlowLayout
• Situa los elementos alineados de izquierda a derecha, centrados en el
contendor
• No altera el tamaño de los elementos
import java.awt.*;
public class EjemploFlowLayout {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de posicionamiento FlowLayout");
f.setSize(500,100);
f.setLayout(new FlowLayout());
Button [] b = new Button [9];
for ( int i = 0 ; i < 9 ; i++ ) {
b[i] = new Button("b-" + i);
f.add(b[i]);
}
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 17/28
Gestor de posición GridLayout
• Situa los elementos en una rejilla del tamaño indicado
• Altera el tamaño de los elementos
import java.awt.*;
public class EjemploGridLayout {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de posicionamiento GridLayout");
f.setSize(200,200);
f.setLayout(new GridLayout(3,3));
Button [] b = new Button [9];
for ( int i = 0 ; i < 9 ; i++ ) {
b[i] = new Button("b-" + i);
f.add(b[i]);
}
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 18/28
Gestor de posición null
• Situa los elementos en la posición especificada con respecto a la
esquina superior izquierda del contenedor
import java.awt.*;
public class EjemploNullLayout {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de posicionamiento null");
f.setSize(300,400);
f.setLayout(null);
Button [] b = new Button [9];
for ( int i = 0 ; i < 9 ; i++ ) {
b[i] = new Button("b-" + i);
b[i].setBounds(i*20+30,i*30+30,30,30);
f.add(b[i]);
}
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 19/28
Gestión de posición con paneles
• Ejemplo
import java.awt.*;
public class EjemploPanel {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de posicionamiento con paneles");
f.setSize(100,100);
f.setLayout(new GridLayout(2,1));
Panel panel1 = new Panel();
panel1.setLayout(new GridLayout(1,2));
Panel panel2 = new Panel();
panel2.setLayout(new GridLayout(1,3));
Button [] b = new Button [5];
for ( int i = 0 ; i < 5 ; i++ ) {
b[i] = new Button("b-" + i);
}
...
}
}
Metodología de la Programación - Tema 7 – p. 20/28
Gestión de posición con paneles
• Ejemplo
import java.awt.*;
public class EjemploPanel {
public static void main ( String [] args ) {
...
panel1.add(b[0]);
panel1.add(b[1]);
panel2.add(b[2]);
panel2.add(b[3]);
panel2.add(b[4]);
f.add(panel1);
f.add(panel2);
f.setVisible(true);
}
}
Metodología de la Programación - Tema 7 – p. 21/28
Eventos
• Un evento es la forma en que el usuario interacciona con una
aplicación gráfica
• Los eventos pueden corresponder a acciones físicas (ratón y teclado) o
a acciones de tipo lógico (ejecución de acciones)
• El manejo de eventos se consigue mediante el uso de interfaces
definidos en el paquete java.awt.event.*
• Para cada tipo de evento que se puede dar en una componente, se
tiene que definir un “manejador” en dicha componente
Metodología de la Programación - Tema 7 – p. 22/28
nterfaz WindowListener
• Gestiona los eventos de ventana: activación, desactivación,
iconificación, desiconificación, apertura, cierre
• La interfaz WindowListener contiene métodos abstractos para cada
una de las acciones que se pueden realizar con una ventana
• La clase WindowAdapter es una implementación de la interfaz
WindowListener en la que todos los métodos tienen una definición
por defecto
• Se necesita para cerrar un Frame
Metodología de la Programación - Tema 7 – p. 23/28
nterfaz WindowListener
• Ejemplo
import java.awt.*;
import java.awt.event.*;
public class EjemploFrameFuncional {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de Marco Funcional");
f.setSize(500,100);
f.setVisible(true);
f.addWindowListener(new EjemploWindowAdapter());
}
}
class EjemploWindowAdapter extends WindowAdapter {
public void windowClosing( WindowEvent e ) {
System.exit(0);
}
}
Metodología de la Programación - Tema 7 – p. 24/28
nterfaz ActionListener
• Gestiona el evento de acción asociado a una componente
• La interfaz ActionListener contiene el método abstracto
actionPerformed para implementar la acción asociada a una
componente
• Se necesita para asignar una acción a un botón
• El método getSource() devuelve una referencia a la componente
donde se produce el evento
Metodología de la Programación - Tema 7 – p. 25/28
nterfaz ActionListener
• Ejemplo
import java.awt.*;
import java.awt.event.*;
public class EjemploBotonFuncional {
public static void main ( String [] args ) {
Frame f = new Frame();
f.setTitle("Ejemplo de Botón Funcional");
f.setSize(500,100);
f.setLayout(new FlowLayout());
Button b = new Button("Azul");
b.addActionListener(new EjemploActionListener);
f.add(b);
f.setVisible(true);
f.addWindowListener(new EjemploWindowAdapter());
}
}
Metodología de la Programación - Tema 7 – p. 26/28
nterfaz ActionListener
• Ejemplo: La acción asociada al botón consiste en cambiar su propio
color
class EjemploActionListener implements ActionListener {
public void actionPerformed( ActionEvent e ) {
((Button)e.getSource()).setBackground(Color.blue);
}
}
Metodología de la Programación - Tema 7 – p. 27/28
nterfaz ActionListener
• Para que la acción de un botón afecte a otra componente, esta última
se ha de incluir como campo en la clase que implementa la interfaz
ActionListener
class EjemploActionListener implements ActionListener {
Frame f;
EjemploActionListener( Frame f ) {
this.f = f;
}
public void actionPerformed( ActionEvent e ) {
f.setVisible(false);
}
}
Metodología de la Programación - Tema 7 – p. 28/28