Clase 3 - Carreras de Sistemas - UARG - UNPA

Indice
Administradores de diseño avanzados
Interfaz Gráfica de Usuario (GUI)
Uso de menús
Unidad: 2
Laboratorio de Programación
Menu
MenuBar
MenuItem
Ejemplos
Gestión de eventos
Pasos para la creación de una aplicación
Universidad Nacional de la Patagonia Austral
Unidad Académica Río Gallegos
CardLayout
GridBagLayout
Ejemplos
GUI
Repaso
Ejemplos
Laboratorio de Programacion
1
CardLayout
Administradores de diseño
avanzados
Layouts Managers
GUI
CardLayout: pasos
GUI
Component add(String label, Component c);
Usar los métodos next(), previous(), first() o show()
pertenecientes a la clase CardLayout para poder visualizar el
panel correspondiente.
Laboratorio de Programacion
Laboratorio de Programacion
3
CardLayout: métodos
Crear un panel que tenga por administrador a CardLayout.
Crear los diferentes paneles que contendrá nuestra aplicación,
insertando, claro está, los componentes necesarios en cada
panel.
Añadir mediante el método add() de la clase Container los
paneles creados, al panel cuyo administrador es CardLayout.
En el método add se asigna una etiqueta al componente
gestionado:
Este administrador es el único que
permite cambiar los componentes en
pantalla en tiempo de ejecución.
Su potencia radica en el uso de
paneles.
Podremos en un instante determinado
visualizar uno de los paneles dejando
los otros paneles sin visualizar.
4
GUI
Constructores CardLayout
CardLayout()
CardLayout(int distancia_h, int distancia_v)
Métodos de CardLayout
first(Container padre) Visualiza el primer contenedor.
last(Container padre) Visualiza el último contenedor.
next(Container padre) Visualiza el siguiente contenedor.
show(Container padre, String nombre) Visualiza un
contenedor específico.
Laboratorio de Programacion
5
1
CardLayout
CardLayout: ejemplo
Ejemplo:
Ejemplo:
…
CardLayout layout = new CardLayout();
setLayout(layout);
Button b1 = new Button(“Primer Boton");
Button b2 = new Button(“Segundo Botón");
add(“primero",b1);
add(“segundo",b2);
ActionListener al = new ActionListener() {
public void actionPerformed(ActionEvent ev) {
layout.next(this);
}
};
b1.addActionListener(this);
b2.addActionListener(this);
GUI
Laboratorio de Programacion
6
CardLayout: ejemplo
Mostrar la última:
Mostrar por nombre:
miCard.last(p);
miCard.show(p, “segundo”);
Laboratorio de Programacion
8
GridBagLayout: clase
GridBagConstraints
GUI
Los componentes, pueden tener diferente
tamaño.
Los componentes pueden ocupar más de
una celda.
Los componentes se pueden agregar en
cualquier orden.
GUI
Laboratorio de Programacion
9
GridBagLayout/
GridBagConstraints
Esta clase especifica las restricciones de los componentes que serán
colocados en un GridBagLayout.
Las propiedades son:
setConstraints(Component comp, GridBagConstraints gbc);
gridx: Columna en la cual se pone al componente.
gridy: Fila en la cual se pone al componente.
fill: Como rellenar el espacio si la celda es mayor que el
componente. Los valores posibles son:
GridBagConstraints.NONE/HORIZONTAL/VERTICAL/BOTH
anchor: Posición del componente dentro de la celda: NORTH,
NORTHWEST, CENTER, etc.
insets (int top, int left, int bottom, int right) : es el margen que
tienen los componentes dentro de la celda.
gridwidth: Número de columnas que un componente ocupa.
gridheight: Número de filas que un componente ocupa.
Laboratorio de Programacion
7
Similar al GridLayout, con las
diferencias siguientes:
miCard.next(p);
GUI
miCard.first(p);
Mostrar siguiente:
Laboratorio de Programacion
GridBagLayout
Mostrar la primera:
GUI
10
GUI
Ejemplo:
Laboratorio de Programacion
11
2
GridBagLayout: ejemplo
GridBagLayout: ejemplo
…
GridBagLayout layout = new GridBagLayout();
setLayout(layout);
GridBagConstraints c = new GridBagConstraints();
Button b1 = new Button("uno");
Button b2 = new Button("dos");
Button b3 = new Button("tres");
Button b4 = new Button("cuatro");
…
c.gridx = 0;
c.gridy = 1;
c.gridwidth = 1;
c.fill = GridBagConstraints.BOTH;
layout.setConstraints(b2,c);
add(b2);
c.gridx = 0;
c.gridy = 0;
c.gridwidth = 2;
c.fill = GridBagConstraints.BOTH;
layout.setConstraints(b1,c);
add(b1);
c.gridx = 0;
c.gridy = 2;
// el valor de c.gridwidth era 1
c.fill = GridBagConstraints.BOTH;
layout.setConstraints(b3,c);
add(b3);
GUI
Laboratorio de Programacion
12
GUI
Laboratorio de Programacion
13
GridBagLayout: ejemplo…
…c.gridx = 1;
c.gridy = 1;
// el valor de c.gridwidth era 1
c.gridheight = 2;
c.fill = GridBagConstraints.BOTH;
layout.setConstraints(b4,c);
add(b4);
Uso de Menu en los frames
// fin codigo
GUI
Laboratorio de Programacion
14
Menu
Los frames pueden tener barra de
menús.
Constructor: crear una barra de menús:
Menu…
MenuBar();
Añadir una barra de menús a un frame:
Constructor:
void setMenuBar(MenuBar mb);
Añadir un menu a una barra de menús:
GUI
Laboratorio de Programacion
16
GUI
Menu();
Menu(String menuLabel);
Menu(String menuLabel,boolean
allowTearoff);
Menu add(Menu m);
Laboratorio de Programacion
17
3
Menu…
Menu…
Creación de un menú:
1º se crea una MenuBar, después se
crean los Menus y los MenuItem
Los MenuItems se añaden al Menu, los
Menus se añaden a la MenuBar y la
MenuBar se añade a un Frame
Puede añadirse un Menu a otro Menu
GUI
Laboratorio de Programacion
Frame myFrame = new Frame();
// Crear barra de menús
MenuBar myMenuBar = new MenuBar();
// Añadir la barra de menús al frame
myFrame.setMenuBar(myMenuBar);
// Crear menú
Menu fileMenu = new Menu("File");
// Añadir menú a barra de menús
myMenuBar.add(fileMenu);
18
Menu…
GUI
Para añadir un separador al menú usar:
Los menús pueden contener entradas de tipo Checkbox:
void addSeparator();
La colocación de los menús en la barra es de izquierda a derecha.
Puede crearse un único menú en el lado derecho (normalmente de
ayuda) con:
GUI
Laboratorio de Programacion
20
Menu: ejemplo
GUI
Ejemplo: menú de Archivo
Laboratorio de Programacion
void setHelpMenu(Menu helpMenu);
Laboratorio de Programacion
21
Menu: ejemplo…
Ejemplo: los menús Edición y Ayuda
// Menu Edicion
Menu me = new Menu("Edicion");
CheckboxMenuItem cmi =
new CheckboxMenuItem("mayus");
me.add(cmi);
Menu ma = new Menu("Archivos");
ma.add("Abrir");
MenuItem save = new
MenuItem("Salvar");
ma.add(save);
save.setEnabled(false);
ma.addSeparator();
Menu sm = new Menu("Submenu");
ma.add(sm);
sm.add("opcion 1");
sm.add("opcion 2");
GUI
CheckboxMenuItem(String itemLabel);
boolean getState();
void setState(boolean newState);
saveMenuItem.setEnabled(false);
Menu printSubmenu = new Menu("Print");
fileMenu.add(printSubmenu);
printSubmenu.add("Print Preview");
printSubmenu.add("Print Document");
Constructor:
Metodos:
Las entradas del menú pueden habilitarse o
deshabilitarse:
19
Creando un submenú:
fileMenu.add("Open");
MenuItem saveMenuItem = new MenuItem("Save");
fileMenu.add(saveMenuItem);
Laboratorio de Programacion
Menu…
Las entradas del menú se pueden añadir
directamente, o creando un MenuItem:
Ejemplo:
// Menu Ayuda
Menu help = new Menu("Ayuda");
help.add("ayuda");
22
GUI
Laboratorio de Programacion
23
4
Menu: ejemplo…
Ejemplo: ventana y barra de menús
Gestión de Eventos
// una ventana nueva
Frame f = new Frame();
// Barra de menus de la ventana
MenuBar mb = new MenuBar();
f.setMenuBar(mb);
// añadir menu de archivos, edicion y ayuda
mb.add(ma);
mb.add(me);
mb.setHelpMenu(help);
GUI
Laboratorio de Programacion
24
Eventos
Eventos: Funcionamiento
Los eventos representan la actividad
entre el sistema, los programas y los
usuarios.
Se definen varios tipos de eventos.
Normalmente:
Cuando se produce un evento:
Laboratorio de Programacion
26
Tipos de Eventos
El generador invoca un método en todos los objetos
escuchadores registrados.
El método que se invoca depende del tipo de evento.
Estos métodos se definen en varias interfaces
llamadas escuchadoras.
GUI
componentes generan eventos en respuesta a las acciones
de los usuarios.
objetos del usuario escuchan y atienden los eventos
generados.
Las clases escuchadoras implementan interfaces
escuchadoras.
GUI
Laboratorio de Programacion
27
Eventos: funcionamiento…
Los objetos escuchadores deben registrarse
en los generadores.
addXXX y removeXXX
XXX es el nombre de la interfaz escuchadora
Ejemplo:
boton.addActionListener(obj_escuchador);
boton.removeActionListener(obj_escuchador);
GUI
Laboratorio de Programacion
28
GUI
Laboratorio de Programacion
29
5
Métodos
GUI
Métodos…
Laboratorio de Programacion
30
Tabla resumen
GUI
Laboratorio de Programacion
31
Tabla resumen…
Component
Eventos
generados
Interfaz Listener Adapter
Métodos
Component
Eventos
generados
Interfaz Listener Adapter
Métodos
Button
ActionEvent
ActionListener
actionPerformed
Container
ContainerEvent
ItemEvent
ItemListener
itemStateChanged
ContainerListener
ContainerAdapter
2 metodos
Checkbox
Choice
ItemEvent
ItemListener
itemStateChanged
ActionEvent
ActionListener
actionPerformed
ComponentEvent
ComponentListener
ComponentAdapter
4 metodos
List
ItemEvent
ItemListener
itemStateChanged
FocusEvent
FocusListener
FocusAdapter
2 metodos
MenuItem
ActionEvent
ActionListener
actionPerformed
AdjustementListener
adjustmentValueChanged
KeyListener
KeyAdapter
3 metodos
Scrollbar
AdjustementEvent
KeyEvent
MouseListener
MouseAdapter
5 metodos
TextComponent TextEvent
TextListener
textValueChanged
MouseMotionListener
MouseMotionAdapter
2 metodos
Component
MouseEvent
GUI
Laboratorio de Programacion
32
Eventos ActionEvent
actionPerformed
Window
WindowEvent
WindowListener
WindowAdapter
7 metodos
GUI
Clase de evento: ItemEvent
Debe implementarse el interfaz ItemListener.
Métodos de la clase ItemEvent:
33
Tiene un único método:
void actionPerformed(ActionEvent event);
void itemStateChanged(ItemEvent event)
// Checkbox, CheckboxMenuItem y Choice:
// objeto donde ocurrio el evento
ItemSelectable getItemSelectable()
// List: indice elemento seleccionado o deseleccionado.
// Checkbox, CheckboxMenuItem y Choice: etiqueta elemento.
Object getItem()
// Checkbox, CheckboxMenuItem y Choice: estado
// Estados validos: ItemEvent.SELECTED,
// ItemEvent.DESELECTED
int getStateChange()
String getActionCommand();
devuelve la etiqueta del generador
Object getSource();
Devuelve objeto donde se genero el evento.
Laboratorio de Programacion
Laboratorio de Programacion
Método de EventObject:
GUI
ActionListener
Método de ActionEvent:
ActionEvent
Eventos ItemEvent
Clase de evento: ActionEvent.
Debe implementarse el interfaz ActionListener.
Tiene un único método:
TextField
34
GUI
Laboratorio de Programacion
35
6
Ejemplo
Ejemplo…
class InterfazUsuario
{
public InterfazUsuario()
{
// Se crea una ventana
Frame miFrame = new Frame("Ventana en Java");
miFrame.setLayout(new FlowLayout());
miFrame.setSize(450,150);
miFrame.setVisible(true);
// Se registran los receptores de eventos
miFrame.addWindowListener(new CerrarVentana());
}
}
GUI
Laboratorio de Programacion
class CerrarVentana implements WindowListener
{
public void windowActivated(WindowEvent we){}
public void windowClosed(WindowEvent we){}
public void windowClosing(WindowEvent we){
System.exit(0);
}
public void windowDeactivated(WindowEvent we){}
public void windowDeiconified(WindowEvent we){}
public void windowIconified(WindowEvent we){}
public void windowOpened(WindowEvent we){}
};
36
Ejemplo…
GUI
Laboratorio de Programacion
Clases Adaptadoras
public class EjemploVentana
{
public static void main(String arg[])
{
InterfazUsuario ventana = new InterfazUsuario();
}
}
Existen clases adaptadoras cuyo objetivo es
evitar que las clases escuchadoras tengan
que implementar todo el interfaz escuchador.
Las clases adaptadoras implementan los
métodos de las interfaces escuchadoras con
un cuerpo vacío.
GUI
37
Laboratorio de Programacion
38
Clases Adaptadoras: ejemplo
GUI
Así, las clases escuchadoras sólo tienen que
extender a los adaptadores y redefinir únicamente
el cuerpo de los métodos que necesitan.
Laboratorio de Programacion
39
Pasos creación aplicación (1)
1. Crear una clase InterfazUsuario
2. Constructor de la clase InterfazUsuario:
1.
2.
class CerrarVentana extends WindowAdapter
{
public void windowClosing(WindowEvent we){
System.exit(0);}
}
3.
4.
5.
3. Crear las clases encargadas de la gestión de eventos
4. Crear la clase que contenga el main()
1.
GUI
Laboratorio de Programacion
Crear componentes (botones, cajas de texto…)
Crear ventana (objeto de la clase Frame)
Asignar distribución a la ventana
Añadir componentes a la ventana y mostrarla
Registrar los gestores de eventos
40
GUI
Crear un objeto de la clase InterfazUsuario
Laboratorio de Programacion
41
7
Pasos creación aplicación (2)
Pasos creación aplicación (3)
import java.awt.*;
import java.awt.event.*;
class InterfazUsuario
{
public InterfazUsuario()
{
// Crear componentes
// Crear ventana
Frame miFrame = new Frame("Ventana en Java");
miFrame.setLayout(new FlowLayout());
// Añadir componentes a la ventana
miFrame.add(…);
// Dar tamaño y mostrar ventana
miFrame.setSize(450,150);
miFrame.setVisible(true);
// Registrar gestores de eventos
…
}
};
GUI
Laboratorio de Programacion
public class EjemploAwt
{
public static void main(String arg[])
{
InterfazUsuario ventana = new InterfazUsuario();
}
}
42
Próxima clase
GUI
GUI
Laboratorio de Programacion
43
Consultas…
Ultima teoría
Repaso general
Herramienta Eclipse Visual Editor
Ejercitación
Laboratorio de Programacion
44
GUI
Laboratorio de Programacion
45
8