Indice

Administradores de diseo avanzados

CardLayout
Interfaz Grfica de Usuario (GUI)

GridBagLayout
Ejemplos

Uso de mens

Menu

MenuBar
Unidad: 2
MenuItem
Laboratorio de Programacin
Ejemplos

Gestin de eventos

Repaso
Universidad Nacional de la Patagonia Austral
Ejemplos
Unidad Acadmica Ro Gallegos
Pasos para la creacin de una aplicacin

GUI Laboratorio de Programacion 1

CardLayout
Administradores de diseo
Este administrador es el nico que
avanzados permite cambiar los componentes en
pantalla en tiempo de ejecucin.

Su potencia radica en el uso de
Layouts Managers paneles.

Podremos en un instante determinado
visualizar uno de los paneles dejando
los otros paneles sin visualizar.

GUI Laboratorio de Programacion 3

CardLayout: pasos CardLayout: mtodos

Crear un panel que tenga por administrador a CardLayout.
Constructores CardLayout

Crear los diferentes paneles que contendr nuestra aplicacin,
CardLayout()

insertando, claro est, los componentes necesarios en cada
CardLayout(int distancia_h, int distancia_v)
panel.

Mtodos de CardLayout

Aadir mediante el mtodo add() de la clase Container los
first(Container padre) Visualiza el primer contenedor.
paneles creados, al panel cuyo administrador es CardLayout.

last(Container padre) Visualiza el ltimo contenedor.

En el mtodo add se asigna una etiqueta al componente
gestionado:
next(Container padre) Visualiza el siguiente contenedor.

Component add(String label, Component c);
show(Container padre, String nombre) Visualiza un

Usar los mtodos next(), previous(), first() o show() contenedor especfico.

pertenecientes a la clase CardLayout para poder visualizar el
panel correspondiente.

GUI Laboratorio de Programacion 4 GUI 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 Botn");
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 GUI Laboratorio de Programacion 7

CardLayout: ejemplo GridBagLayout

Mostrar la primera:
Similar al GridLayout, con las

miCard.first(p); diferencias siguientes:

Mostrar siguiente:
Los componentes, pueden tener diferente

miCard.next(p); tamao.

Mostrar la ltima:
Los componentes pueden ocupar ms de

miCard.last(p); una celda.

Mostrar por nombre:
Los componentes se pueden agregar en

miCard.show(p, segundo); cualquier orden.

GUI Laboratorio de Programacion 8 GUI Laboratorio de Programacion 9

GridBagLayout: clase GridBagLayout/

GridBagConstraints GridBagConstraints

Esta clase especifica las restricciones de los componentes que sern
colocados en un GridBagLayout.
Ejemplo:

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: Posicin 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: Nmero de columnas que un componente ocupa.

gridheight: Nmero de filas que un componente ocupa.

GUI Laboratorio de Programacion 10 GUI Laboratorio de Programacion 11

2
GridBagLayout: ejemplo GridBagLayout: ejemplo

GridBagLayout layout = new GridBagLayout();
setLayout(layout); c.gridx = 0;
GridBagConstraints c = new GridBagConstraints(); c.gridy = 1;
Button b1 = new Button("uno"); c.gridwidth = 1;
Button b2 = new Button("dos"); c.fill = GridBagConstraints.BOTH;
Button b3 = new Button("tres"); layout.setConstraints(b2,c);
Button b4 = new Button("cuatro"); add(b2);

c.gridx = 0; c.gridx = 0;
c.gridy = 0; c.gridy = 2;
c.gridwidth = 2; // el valor de c.gridwidth era 1
c.fill = GridBagConstraints.BOTH; c.fill = GridBagConstraints.BOTH;
layout.setConstraints(b1,c); layout.setConstraints(b3,c);
add(b1); 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;
Uso de Menu en los frames
c.fill = GridBagConstraints.BOTH;
layout.setConstraints(b4,c);
add(b4);

// fin codigo

GUI Laboratorio de Programacion 14

Menu Menu

Los frames pueden tener barra de
Constructor:
mens.
Menu();

Constructor: crear una barra de mens:
Menu(String menuLabel);

MenuBar();
Menu(String menuLabel,boolean
allowTearoff);

Aadir una barra de mens a un frame:

void setMenuBar(MenuBar mb);
Aadir un menu a una barra de mens:

Menu add(Menu m);

GUI Laboratorio de Programacion 16 GUI Laboratorio de Programacion 17

3
Menu

Creacin de un men:

1 se crea una MenuBar, despus se
crean los Menus y los MenuItem

Los MenuItems se aaden al Menu, los
Menus se aaden a la MenuBar y la
MenuBar se aade a un Frame
Menu

Ejemplo:
Frame myFrame = new Frame();
// Crear barra de mens
MenuBar myMenuBar = new MenuBar();
// Aadir la barra de mens al frame
myFrame.setMenuBar(myMenuBar);
// Crear men
Menu fileMenu = new Menu("File");
// Aadir men a barra de mens
myMenuBar.add(fileMenu);

Puede aadirse un Menu a otro Menu

GUI Laboratorio de Programacion 18 GUI Laboratorio de Programacion 19

Menu Menu

Las entradas del men se pueden aadir
Creando un submen:
Menu printSubmenu = new Menu("Print");
directamente, o creando un MenuItem:

fileMenu.add("Open");

MenuItem saveMenuItem = new MenuItem("Save");
fileMenu.add(saveMenuItem);

Las entradas del men pueden habilitarse o
deshabilitarse:

saveMenuItem.setEnabled(false);

Para aadir un separador al men usar:

void addSeparator();
fileMenu.add(printSubmenu);
printSubmenu.add("Print Preview");
printSubmenu.add("Print Document");

Los mens pueden contener entradas de tipo Checkbox:
Constructor: CheckboxMenuItem(String itemLabel);
Metodos: boolean getState();
void setState(boolean newState);

La colocacin de los mens en la barra es de izquierda a derecha.

Puede crearse un nico men en el lado derecho (normalmente de
ayuda) con:

void setHelpMenu(Menu helpMenu);

GUI Laboratorio de Programacion 20 GUI Laboratorio de Programacion 21

Menu: ejemplo Menu: ejemplo

Ejemplo: men de Archivo
Ejemplo: los mens Edicin y Ayuda
Menu ma = new Menu("Archivos"); // Menu Edicion
ma.add("Abrir"); Menu me = new Menu("Edicion");
MenuItem save = new CheckboxMenuItem cmi =
MenuItem("Salvar"); new CheckboxMenuItem("mayus");
ma.add(save); me.add(cmi);
save.setEnabled(false);
ma.addSeparator(); // Menu Ayuda
Menu sm = new Menu("Submenu"); Menu help = new Menu("Ayuda");
ma.add(sm); help.add("ayuda");
sm.add("opcion 1");
sm.add("opcion 2");

GUI Laboratorio de Programacion 22 GUI Laboratorio de Programacion 23

4
Menu: ejemplo

Ejemplo: ventana y barra de mens
// una ventana nueva
Gestin de Eventos
Frame f = new Frame();

// Barra de menus de la ventana

MenuBar mb = new MenuBar();
f.setMenuBar(mb);

// aadir menu de archivos, edicion y ayuda

mb.add(ma);
mb.add(me);
mb.setHelpMenu(help);

GUI Laboratorio de Programacion 24

Eventos Eventos: Funcionamiento

Normalmente:

Los eventos representan la actividad


componentes generan eventos en respuesta a las acciones
entre el sistema, los programas y los de los usuarios.

objetos del usuario escuchan y atienden los eventos
usuarios. generados.

Cuando se produce un evento:

Se definen varios tipos de eventos.
El generador invoca un mtodo en todos los objetos
escuchadores registrados.

El mtodo que se invoca depende del tipo de evento.

Estos mtodos se definen en varias interfaces
llamadas escuchadoras.

Las clases escuchadoras implementan interfaces
escuchadoras.

GUI Laboratorio de Programacion 26 GUI Laboratorio de Programacion 27

Tipos de Eventos 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
Mtodos Mtodos

GUI Laboratorio de Programacion 30 GUI Laboratorio de Programacion 31

Tabla resumen Tabla resumen

Component Eventos Interfaz Listener - Mtodos Component Eventos Interfaz Listener - Mtodos
generados Adapter generados Adapter
Button ActionEvent ActionListener actionPerformed Container ContainerEvent ContainerListener 2 metodos
Checkbox ItemEvent ItemListener itemStateChanged ContainerAdapter

Choice ItemEvent ItemListener itemStateChanged ActionEvent ActionListener actionPerformed

ComponentEvent ComponentListener 4 metodos List
ItemEvent ItemListener itemStateChanged
ComponentAdapter
FocusEvent FocusListener 2 metodos MenuItem ActionEvent ActionListener actionPerformed
FocusAdapter AdjustementEvent AdjustementListener adjustmentValueChanged
KeyEvent KeyListener 3 metodos Scrollbar
Component
KeyAdapter
MouseListener 5 metodos TextComponent TextEvent TextListener textValueChanged
MouseAdapter TextField ActionEvent ActionListener actionPerformed
MouseEvent
MouseMotionListener 2 metodos
WindowListener 7 metodos
MouseMotionAdapter Window WindowEvent
WindowAdapter
GUI Laboratorio de Programacion 32 GUI Laboratorio de Programacion 33

Eventos ActionEvent Eventos ItemEvent

Clase de evento: ActionEvent.
Clase de evento: ItemEvent

Debe implementarse el interfaz ItemListener.

Debe implementarse el interfaz ActionListener.
Tiene un nico mtodo:

Tiene un nico mtodo:
void itemStateChanged(ItemEvent event)

void actionPerformed(ActionEvent event);
Mtodos de la clase ItemEvent:
// Checkbox, CheckboxMenuItem y Choice:

Mtodo de ActionEvent: // objeto donde ocurrio el evento

String getActionCommand(); ItemSelectable getItemSelectable()
// List: indice elemento seleccionado o deseleccionado.

devuelve la etiqueta del generador // Checkbox, CheckboxMenuItem y Choice: etiqueta elemento.

Mtodo de EventObject: Object getItem()
// Checkbox, CheckboxMenuItem y Choice: estado

Object getSource(); // Estados validos: ItemEvent.SELECTED,

Devuelve objeto donde se genero el evento. // ItemEvent.DESELECTED
int getStateChange()

GUI Laboratorio de Programacion 34 GUI Laboratorio de Programacion 35

6
Ejemplo Ejemplo
class InterfazUsuario
{ class CerrarVentana implements WindowListener
public InterfazUsuario() {
{ public void windowActivated(WindowEvent we){}
// Se crea una ventana public void windowClosed(WindowEvent we){}
Frame miFrame = new Frame("Ventana en Java"); public void windowClosing(WindowEvent we){
miFrame.setLayout(new FlowLayout()); System.exit(0);
miFrame.setSize(450,150); }
miFrame.setVisible(true); public void windowDeactivated(WindowEvent we){}
// Se registran los receptores de eventos public void windowDeiconified(WindowEvent we){}
miFrame.addWindowListener(new CerrarVentana()); public void windowIconified(WindowEvent we){}
} public void windowOpened(WindowEvent we){}
} };

GUI Laboratorio de Programacion 36 GUI Laboratorio de Programacion 37

Ejemplo Clases Adaptadoras

Existen clases adaptadoras cuyo objetivo es
evitar que las clases escuchadoras tengan
public class EjemploVentana
{ que implementar todo el interfaz escuchador.
public static void main(String arg[])
{
Las clases adaptadoras implementan los
InterfazUsuario ventana = new InterfazUsuario(); mtodos de las interfaces escuchadoras con
}
} un cuerpo vaco.

As, las clases escuchadoras slo tienen que
extender a los adaptadores y redefinir nicamente
el cuerpo de los mtodos que necesitan.

GUI Laboratorio de Programacion 38 GUI Laboratorio de Programacion 39

Clases Adaptadoras: ejemplo Pasos creacin aplicacin (1)

1. Crear una clase InterfazUsuario
2. Constructor de la clase InterfazUsuario:
1. Crear componentes (botones, cajas de texto)
2. Crear ventana (objeto de la clase Frame)
class CerrarVentana extends WindowAdapter
3. Asignar distribucin a la ventana
{
public void windowClosing(WindowEvent we){ 4. Aadir componentes a la ventana y mostrarla
System.exit(0);} 5. Registrar los gestores de eventos
} 3. Crear las clases encargadas de la gestin de eventos
4. Crear la clase que contenga el main()
1. Crear un objeto de la clase InterfazUsuario

GUI Laboratorio de Programacion 40 GUI Laboratorio de Programacion 41

7
Pasos creacin aplicacin (2) Pasos creacin aplicacin (3)
import java.awt.*;
import java.awt.event.*;
class InterfazUsuario
{ public class EjemploAwt
public InterfazUsuario() {
{ public static void main(String arg[])
// Crear componentes {
// Crear ventana InterfazUsuario ventana = new InterfazUsuario();
Frame miFrame = new Frame("Ventana en Java"); }
miFrame.setLayout(new FlowLayout()); }
// Aadir componentes a la ventana
miFrame.add();
// Dar tamao y mostrar ventana
miFrame.setSize(450,150);
miFrame.setVisible(true);
// Registrar gestores de eventos

}
};

GUI Laboratorio de Programacion 42 GUI Laboratorio de Programacion 43

Prxima clase Consultas

Ultima teora

Repaso general

Herramienta Eclipse Visual Editor

Ejercitacin

GUI Laboratorio de Programacion 44 GUI Laboratorio de Programacion 45