Metodología de la Programación Aplicaciones gráﬁcas

Metodología de la Programación - Tema 7 – p. 1/28

Metodología de la Programación

Aplicaciones gráficas

F. J. Martın Mateos

Dpto. Ciencias de la Computacion e Inteligencia Artificial

Universidad de Sevilla

http://www.cs.us.es/cursos/mp

http://www.cs.us.es/


http://www.cs.us.es/~fmartin


http://www.us.es/


Aplicaciones Gr aficas

• 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, laapariencia visual no

• import java.awt. *




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 componentesdentro de los contenedores

• Eventos: Avisan de las acciones del usuario




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);

}

}




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)




Contenedor Panel

• Agrupación de componentes

• Tiene que estar asociado a otro contenedor (Frame o Panel )

• Ayuda a posicionar los elementos gráficos




Gestores de posici on

• 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 elementosgráficos




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




Componente Button

• Tiene el aspecto de un botón que puede ser “pulsado” con el ratón


• 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)




Componente Button

• Ejemplo


public class EjemploButton {

public static void main ( String [] args ) {Frame f = new Frame();f.setTitle("Ejemplo de Bot on");f.setSize(500,100);f.setLayout(new FlowLayout());Button b = new Button("MP");f.add(b);f.setVisible(true);

}

}




Componente Label

• Se trata de una etiqueta informativa

• Sólo proporciona información


• 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)




Componente Label

• Ejemplo


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);

}

}




Componente TextField

• Tiene el aspecto de un campo de texto en el que se puede escribir


• 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)




Componente TextField

• Ejemplo


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);

}

}




Otras componentes

• Botón de opción: Checkbox

• Grupo de opciones: CheckboxGroup

• Selección: Choice

• Lista de selección: List

• Area de texto: TextArea




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 enterosentre 0 y 255

• Asignar color de fondo a una componente:b.setBackground(Color.blue)

• Válido para todas las componentes




Gestor de posici on FlowLayout

• Situa los elementos alineados de izquierda a derecha, centrados en elcontendor

• No altera el tamaño de los elementos


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);

}}




Gestor de posici on GridLayout

• Situa los elementos en una rejilla del tamaño indicado

• Altera el tamaño de los elementos


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]);


}}




Gestor de posici on null

• Situa los elementos en la posición especificada con respecto a laesquina superior izquierda del contenedor


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]);


}}




Gesti on de posici on con paneles

• Ejemplo


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);}...

}}




Gesti on de posici on con paneles

• Ejemplo


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);

}}




Eventos

• Un evento es la forma en que el usuario interacciona con unaaplicación gráfica

• Los eventos pueden corresponder a acciones físicas (ratón y teclado) oa acciones de tipo lógico (ejecución de acciones)

• El manejo de eventos se consigue mediante el uso de interfacesdefinidos en el paquete java.awt.event. *

• Para cada tipo de evento que se puede dar en una componente, setiene que definir un “manejador” en dicha componente




Interfaz WindowListener

• Gestiona los eventos de ventana: activación, desactivación,iconificación, desiconificación, apertura, cierre

• La interfaz WindowListener contiene métodos abstractos para cadauna de las acciones que se pueden realizar con una ventana

• La clase WindowAdapter es una implementación de la interfazWindowListener en la que todos los métodos tienen una definiciónpor defecto

• Se necesita para cerrar un Frame




Interfaz 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);

}}




Interfaz ActionListener

• Gestiona el evento de acción asociado a una componente

• La interfaz ActionListener contiene el método abstractoactionPerformed para implementar la acción asociada a unacomponente

• Se necesita para asignar una acción a un botón

• El método getSource() devuelve una referencia a la componentedonde se produce el evento





• 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 on 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());

}}





• Ejemplo: La acción asociada al botón consiste en cambiar su propiocolor

class EjemploActionListener implements ActionListener {

public void actionPerformed( ActionEvent e ) {((Button)e.getSource()).setBackground(Color.blue);

}}





• Para que la acción de un botón afecte a otra componente, esta últimase ha de incluir como campo en la clase que implementa la interfazActionListener

class EjemploActionListener implements ActionListener {Frame f;

EjemploActionListener( Frame f ) {this.f = f;

}

public void actionPerformed( ActionEvent e ) {f.setVisible(false);

}}



Documents

Metodología de la Programación Aplicaciones gráﬁcas