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