Tema6resumido PDF

Las interfaces grficas de usuario
Hasta ahora hemos desarrollado programas que usan la consola

para interactuar con el usuario.
Esa forma de interfaz de usuario es muy simple y nos ha
permitido centrarnos en todo aquello que tiene que ver tan slo
con la programacin orientada a objetos con el lenguaje Java, sin
tener que tratar al mismo tiempo con ventanas, botones y otros
elementos similares.
Las interfaces grficas de usuario (GUI) ofrecen al usuario
Interfaces grficas ventanas, cuadros de dilogo, barras de herramientas, botones,
listas desplegables y muchos otros elementos con los que ya
de usuario
estamos muy acostumbrados a tratar.
Las aplicaciones son conducidas por eventos y se desarrollan
haciendo uso de las clases que para ello nos ofrece la API de Java.
P.O.O Tema 6 Interfaces grficas de usuario

Carlos Cervign
P.O.O Tema 6 Interfaces grficas de usuario - 1
La API de Java para desarrollo de GUI Algunos componentes de AWT
La interfaz de usuario es la parte del programa que permite Label Canvas

al usuario interaccionar con l.
Frame
La API de Java proporciona una biblioteca de clases para el
desarrollo de Interfaces grficas de usuario (en realidad son dos).
List
La biblioteca proporciona un conjunto de herramientas para TextArea
la construccin de interfaces grficas que tienen
una apariencia y se comportan de forma semejante
en todas las plataformas en las que se ejecuten.
La estructura bsica de la biblioteca gira en torno a componentes
y contenedores. Los contenedores contienen componentes y
son componentes a su vez, de forma que los eventos pueden
tratarse tanto en contenedores como en componentes.
La API est constituida por clases, interfaces y derivaciones.
CheckBox
AWT y Swing TextField Button
P.O.O Tema 6 Interfaces grficas de usuario - 2 P.O.O Tema 6 Interfaces grficas de usuario - 3
Algunos componentes de Swing Algunos componentes de Swing
Swing Jerarqua de clases para las GUI
Paquete de Java para la generacin del GUI en aplicaciones

reales de gran tamao. Disponible como paquete externo Dimension Classes in the java.awt
en Java 1.1 e integrado desde Java 1.2.

LayoutManager package
Heavyweight
Font 1
Es una de las API de JFC (Java Foundation Classes):

AWT, Java 2D, Accessibility, Drag and Drop, Swing, ... FontMetrics
Escrito totalmente en Java. No reemplaza a AWT. Object Color Panel Applet JApplet
Se apoya sobre AWT y aade JComponents. Graphics
Utiliza el modelo de eventos de Java 1.1. Component Container Window Frame JFrame
*
Eleccin entre diferentes aspectos (look & feel). Dialog JDialog
Arquitectura Model-View-Controller (MVC).

Nuevos componentes (rboles, tablas, frames internos, iconos, JComponent Swing Components
in the javax.swing package
bordes, tooltips, beans, etctera).
Lightweight
Las clases de AWT reemplazadas por Swing
se llaman igual pero con una J delante.
Jerarqua de clases para las GUI Jerarqua de clases para las GUI
Component: superclase de todas las clases de interfaz grfica. Color: color de los componentes grficos.
Container: para agrupar componentes. Font: aspecto de los caracteres.
JComponent: superclase de todos los componentes de Swing FontMetrics: clase abstracta para propiedades de las fuentes.
que se dibujan directamente en los lienzos (canvas).
Sus subclases son los elementos bsicos de la GUI. Categoras de clases:
JFrame: ventana que no est contenida en otras ventanas. 9 Contenedores:
JDialog: cuadro de dilogo. JFrame, JApplet, JWindow, JDialog
JApplet: subclase de Applet para crear applets tipo Swing. 9 Componentes intermedios:
JPanel, JScrollPane
JPanel: contenedor invisible que mantiene componentes
de interfaz y que se puede anidar, colocndose en otros paneles 9 Componentes:
o en ventanas. Tambin sirve de lienzo. JLabel, JBbutton, JTextField, JTextArea, ...
Graphics: clase abstracta que proporciona contextos grficos 9 Clases de soporte:
donde dibujar cadenas de texto, lneas y otras formas sencillas. Graphics, Color, Font, ...
Jerarqua de clases para las GUI: JComponent Jerarqua de clases para las GUI: AWT
. JCheckBoxMenuItem
JMenuItem JMenu
AWTEvent Container Panel Applet
AbstractButton JButton JRadioButtonMenuItem
Font Button Window Frame
JToggleButton JCheckBox
FontMetrics Label Dialog FileDialog
TextField
JRadioButton
JComponent JEditorPane Object Color TextComponent
JTextComponent JTextField JPasswordField TextArea

Graphics List
JTextArea
Component Choice
CheckBox
JLabel JList JComboBox JMenuBar JPanel JOptionPane JScrollBar JScrollPane
LayoutManager CheckBoxGroup
JTabbedPane JFileChooser
Canvas
JPopupMenu JSeparator JSlider JRootPane JPane

MenuComponent MenuItem Menu
JProgressBar JToolBar JSplitPane JTable JTree
MenuBar
Scrollbar
JInternalFrame JToolTip JLayeredPane JTableHeader JColorChooser
Jerarqua de componentes (repaso) Contenedores
Graphics (java.awt) Contenedores de alto nivel:

Component (funcionalidad bsica de componentes grficos)
Button, Canvas, CheckBox, Choice, Label, List, ScrollBar JFrame
TextComponent Habitualmente la clase JFrame se emplea para crear
TextField, TextArea la ventana principal de una aplicacin en Swing.
Container (permite agrupar, aadir y eliminar componentes)
JDialog
(tambin definir diseo o disposicin (layout managers))
Ventanas de interaccin con el usuario.
ScrollPane
Panel
Applet (java.applet)
JApplet (javax.swing)
Contenedores intermedios:
Window JPanel
Frame Agrupa a otros componentes.
JFrame (javax.swing)
Dialog JScrollPanel
FileDialog Incluye barras de desplazamiento.
JDialog (javax.swing)
JWindow (javax.swing)
JComponent (javax.swing)
Contenedores Jerarqua
Esquema de aplicacin en Swing Esquema de aplicacin en Swing sin herencia
import javax.swing.*; import javax.swing.*;

public class Gui00 {
public class Gui00 extends JFrame { // Constantes y componentes (objetos)
// Constantes y componentes (objetos)
public Gui00(){
public Gui00(){ Jframe frame = new Jframe(Ejemplo 00);
super("Ejemplo 00");
// Configurar Componentes ; // Configurar componentes
// Configurar Manejadores Eventos ; // y aadirlos al panel del frame
. . .
setVisible(true); frame.pack();
setDefaultCloseOperation(EXIT_ON_CLOSE); frame.setVisible(true);
} // Terminar la aplicacin al cerrar la ventana. frame.setDefaultCloseOperation(Jframe.EXIT_ON_CLOSE);
}
public static void main(String args[]){
Gui00 aplicacion = new Gui00(); Mtodo main() public static void main(String args[]){
} Gui00 aplicacion = new Gui00();
} }
GUI00.java } GUI00.java
JFrame : aadir elementos 1. Con herencia de JFrame utilizando Container

import javax.swing.*;
Modo 1: import java.awt.*;
1. Obtenemos el panel de contenido del frame: public class Gui01 extends JFrame {
private Container panel;
Container panel = this.getContentPane(); private JButton miboton;
2. Aadimos componentes a dicho panel: public Gui01() {
panel.add(unComponente); super("Ejemplo 01 con botn");
// Configurar componentes ;
miboton = new JButton("Aceptar");
panel = getContentPane();
Modo 2: panel.add(miboton);
. . .
A partir de 1.5 tambin se puede hacer directamente sobre el Jframe setSize(200,100);
setVisible(true);
add(unComponente); setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String args[]) {

Gui01 aplicacion = new Gui01(); Gui01.java
}}
2. Con herencia de JFrame sin Container 3. Ejemplo sin herencia con Container
import java.awt.*; public class Gui01 {
private JButton miboton;
public class Gui01 extends JFrame { private Container panel;
private JButton miboton;
public Gui01() {
public Gui01() { Jframe frame = new JFrame(Ejemplo 01);
super("Ejemplo 01 con botn"); panel = frame.getContentPane();
. . . . . .
miboton = new JButton("Aceptar"); miboton = new JButton("Aceptar");
add(miboton); Es el panel.add(miboton);
. . .
setSize(200,100);
mtodo //se aade al contentPane del frame
. . .
setVisible(true); utilizado en frame.pack();
setDefaultCloseOperation(EXIT_ON_CLOSE); los ejemplos frame.setVisible(true);
} frame.setDefaultCloseOperation(Jframe.EXIT_ON_CLOSE);
}
public static void main(String args[]) { public static void main(String args[]) {
Gui01 aplicacion = new Gui01(); Gui01 aplicacion = new Gui01();
} }
} }
Gui01.java Gui01.java
4. Ejemplo sin herencia sin Container Administradores de disposicin
Los componentes se agregan al contenedor con el mtodo add().

public class Gui01 {
private JButton miboton; JButton unBoton = new JButton("Texto del botn");
panel.add(unBoton);
public Gui01() {
Jframe frame = new JFrame(Ejemplo 01); El efecto de add() depende del esquema de colocacin o
. . . disposicin (layout) del contenedor que se use.
miboton = new JButton("Aceptar");
frame.add(miboton); //se aade al frame Existen diversos esquemas de disposicin: FlowLayout,
. . . BorderLayout, GridLayout, ...
frame.pack();
Los objetos contenedores se apoyan en objetos LayoutManager
frame.setVisible(true);
frame.setDefaultCloseOperation(Jframe.EXIT_ON_CLOSE); (administradores de disposicin).
} Clases ms usadas que implementa la interfaz LayoutManager:
public static void main(String args[]) { FlowLayout: un componente tras otro de izquierda a derecha.
Gui01 aplicacion = new Gui01();
} BorderLayout: 5 regiones en el contenedor (North, South, ...).
}
GridLayout: contenedor en filas y columnas.
Gui01.java
Administradores de disposicin Organizacin de contenedores
Para organizar el contenedor se utiliza el mtodo setLayout(): BorderLayout organiza FlowLayout coloca los
public void setLayout(LayoutManager mgr) el contenedor en 5 zonas: componentes de izquierda a
derecha y de arriba hacia
abajo:
Crea una disposicin para Tipo de disposicin

el contenedor actual (BorderLayout, ...)
setLayout(new BorderLayout());
setLayout(new FlowLayout());
setLayout(new GridLayout(3,4));
Para distribuciones ms complejas podemos insertar paneles
El layout manager elige la mejor posicin y tamao de cada (JPanel) en los contenedores y obtener el tamao de un
componente de acuerdo al espacio disponible. componente con el mtodo getSize().
FlowLayout BorderLayout

import java.awt.*; import java.awt.*;
public class Gui02 extends JFrame { public class Gui03 extends JFrame {
public Gui02() { public Gui03() {

super("Ejemplo de Layout"); super("Ejemplo de Layout");
// Configurar componentes ; Cambiando el tamao // BorderLayout
// Configurar layout ; se redistribuyen los componentes setLayout(new BorderLayout(5, 10));
setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20));
add(new JButton("1"), BorderLayout.EAST);
for(int i = 1; i <= 10; i++)
add(new JButton("Componente " + i)); add(new JButton("2"), BorderLayout.SOUTH);
setSize(200,200);//pack(); add(new JButton("3"), BorderLayout.WEST);
setVisible(true); add(new JButton("4"), BorderLayout.NORTH);
setDefaultCloseOperation(EXIT_ON_CLOSE); add(new JButton("5"), BorderLayout.CENTER);
} setSize(200,200); //pack();
public static void main(String args[]) { setVisible(true);
Gui02 aplicacion = new Gui02(); setDefaultCloseOperation(EXIT_ON_CLOSE);
}
}
}
Gui02.java ... Gui03.java
GridLayout GridLayout
setLayout(new GridLayout(filas, columnas)) import javax.swing.*;

import java.awt.*;
Crea una zona de filas x columnas componentes y stos
se van acomodando de izquierda a derecha y de arriba a abajo. public class Gui03b extends JFrame {
GridLayout tiene otro constructor que permite establecer
la separacin (en pixels) ente los componentes, public Gui03b() {
que es cero con el primer constructor. super("Ejemplo de Layout");
As, por ejemplo: setLayout(new GridLayout(4, 3, 5, 5));
new GridLayout(3, 4, 2, 2) for(int i = 1; i <= 10; i++)
crea una organizacin de 3 filas y 4 columnas donde los add(new JButton(Integer.toString(i)));
componentes quedan a dos pixels de separacin. setSize(200,200);
setVisible(true);
Ejemplo:
setDefaultCloseOperation(EXIT_ON_CLOSE);
setLayout(new GridLayout(3, 4, 2, 2); }
for(int i = 0; i < 3 * 4; i++) { ...
add(new JButton(Integer.toString(i + 1)));
} Gui03b.java
Paneles como contenedores Paneles como contenedores

// Extrado de "Introduction to Java Programming"
Los paneles actan como pequeos contenedores para agrupar // de Y. Daniel Lang (Prentice Hall, 2001) frame
componentes. Colocamos los componentes en paneles y textfield
los paneles en el frame o incluso en otros paneles. import java.awt.*; p2
import javax.swing.*; boton 12
botones p1
public class Gui04 extends JFrame {
frame public Gui04() {
textfield setTitle("Horno microondas");
p2 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout());
boton 12 // Create panel p1 for the buttons and set GridLayout
botones p1 JPanel p1 = new JPanel();
p1.setLayout(new GridLayout(4, 3));
// Add buttons to the panel
for(int i = 1; i <= 9; i++) {
p1.add(new JButton("" + i));
}
p1.add(new JButton("" + 0));
p1.add(new JButton("Start"));
p1.add(new JButton("Stop")); ...
Paneles como contenedores Dibujo de grficos en paneles
// Create panel p2 to hold a text field and p1 JPanel se puede usar para dibujar.
JPanel p2 = new JPanel();
p2.setLayout(new BorderLayout()); Para dibujar en un panel se crea una clase derivada de JPanel
p2.add(new JTextField("Aqu el tiempo"), y se redefine el mtodo paintComponent() que le indica al panel
BorderLayout.NORTH); como dibujar.
p2.add(p1, BorderLayout.CENTER);
// Add p2 and a button to the frame La clase Graphics es una clase abstracta para todos
add(p2, BorderLayout.EAST); los contextos grficos.
add(new Button("Aqu la comida"),
BorderLayout.CENTER); Una vez obtenido el contexto grfico podemos llamar desde este
objeto a las funciones grficas definidas en la clase Graphics.
setSize(400, 250);
setVisible(true); Graphics contiene informacin acerca de la zona que necesita
} ser redibujada: el objeto donde dibujar, un origen de traslacin,
el color actual, la fuente actual, etctera.
/** Main method */
public static void main(String[] args) {
Gui04 frame = new Gui04();
}
}
Gui04.java
Ejemplo de dibujo Dibujo de grficos en paneles

import java.awt.*; Cuando utilizamos el mtodo paintComponent() para dibujar
en un contexto grfico g, ese contexto es un ejemplar de
class MiPanel extends JPanel { una subclase concreta de la clase Graphics para la plataforma
public void paintComponent(Graphics g) { especfica.
super.paintComponent(g);
El mtodo paintComponent() es llamado la primera vez y
g.drawString("Interfaz grfica", 40, 40);
cada vez que es necesario redibujar el componente.
}
} Mtodo a redefinir Al hacer super.paintComponent(g) nos aseguramos de que
el rea visualizada se limpia antes de volver a dibujar.
public Gui05() { class MiPanel extends JPanel {
super("Ejemplo de dibujo"); public void paintComponent(Graphics g) {
add(new MiPanel()); super.paintComponent(g);
setSize(200, 100); g.drawString("Interfaz grfica", 40, 40);
setVisible(true); }
setDefaultCloseOperation(EXIT_ON_CLOSE); }
}
... Gui05.java
Ejemplo de dibujo Algunos mtodos de Graphics
import javax.swing.*; Graphics g;

import java.awt.*; ...
g.setColor(Color.blue);
class MiPanel extends JPanel {
public void paintComponent(Graphics g) { g.setBackground(Color.red);
Color c = new Color(180, 10, 120); Creacin de un color RGB g.drawLine(int x1, int y1, int x2, int y2);
g.setColor(c); g.drawRect(int x, int y, int ancho, int alto);
g.drawString("Dibujar en el panel", 90, 90);
g.fillOval(1, 1, 90, 90); g.drawRoundedRect(int x, int y, int ancho, int alto,
} int arcWidth, int arcHeight);
} g.fillRect(int x, int y, int ancho, int alto);
g.fillRoundedRect(int x, int y, int ancho, int alto,
int arcWidth, int arcHeight);
public Gui06(){ g.drawOval(int x, int y, int ancho, int alto);
super("Ejemplo de dibujo"); g.fillOval(int x, int y, int ancho, int alto);
add(new MiPanel());
setSize(300, 200); g.drawArc(int x, int y, int ancho, int alto, int ang1,
setVisible(true); int ang2);
setDefaultCloseOperation(EXIT_ON_CLOSE); g.drwaString(String cadena, int x, int y);
} g.setFont(Font f);
... Gui06.java ...
Interaccin con el usuario Interaccin con el usuario
Al interactuar con la aplicacin, el usuario: Cuando el usuario de un programa o applet mueve el ratn,
presiona un pulsador o pulsa una tecla, genera un evento
9 Acciona componentes (ActionEvent).
(actionEvent).
El usuario pulsa un botn.
Los eventos son objetos de ciertas clases. Normalmente
El usuario termina de introducir un texto en un campo y un objeto de alguna subclase de EventObject que indica:
presiona Intro.
9 El elemento que accion el usuario.
El usuario selecciona un elemento de una lista pulsando el
9 La identificacin del evento que indica la naturaleza
preferido (o de un men).
del evento.
Pulsa o suelta botones del ratn (MouseEvent).
9 La posicin del ratn en el momento de la interaccin.
9 Minimiza, cierra o manipula una ventana (WindowEvent).
9 Teclas adicionales pulsadas por el usuario, como la tecla
9 Escribe con el teclado (KeyEvent). Control, la tecla de Cambio a maysculas, etctera.
9 Descubre porciones de ventanas (PaintEvent).
Acciones del usuario Ejemplo
Accin Objeto origen Tipo de evento Al pulsar el botn Copiar, se debe copiar el valor del cuadro "valor"
Pulsar un botn JButton ActionEvent en el cuadro "Copia".
Cambio del texto JTextComponent TextEvent
Pulsar Intro en un campo de texto JTextField ActionEvent
Seleccin de un nuevo elemento JCombobox ItemEvent
ActionEvent Origen del evento:
Seleccin de elemento(s) JList ListSelection- Botn Copiar
Event
Pulsar una casilla de verificacin JCheckBox ItemEvent
ActionEvent Objeto evento:
Pulsar un botn de radio JRadioButton ItemEvent ActionEvent e
ActionEvent
Seleccin de una opcin de men JMenuItem ActionEvent
Mover la barra de desplazamiento JScrollBar AdjustmentEvent Objeto oyente:
Abrir, cerrar, minimizar, La ventana
maximizar o cerrar la ventana JWindow WindowEvent
...
Modelo para responder a eventos Modelo para responder a eventos
Creamos un manejador de eventos en dos pasos: class MiGui extends JFrame {

...
Definimos una clase especfica que haga de oyente de eventos public void MiGui() {
y que implemente el mtodo actionPerformed().
// Registro los componentes interesados
// en responder a eventos ...
componente.addActionListener(new MiOyente());
class MiOyente implements ActionListener {
}
public void actionPerformed() {
...
// Aqu se responde el evento
class MiOyente implements ActionListener {
public actionPerformed(ActionEvent e) {
... // Aqui se responde el evento
Registramos un ejemplar como oyente de componentes: }
componente.addActionListener(ejemplar_de_MiOyente); }
Se aade el oyente especificado (ejemplar de MiOyente)
a la lista de oyentes para recibir eventos de accin
(ActionEvent) desde ese componente.
Ejemplo: botn con pitido Ejemplo: reproducir un valor

import java.awt.*; import java.awt.*;
import java.awt.event.*; import java.awt.event.*;
JButton boton; public class Gui10 extends JFrame {
public Gui09() { JButton botonCopiar;

boton = new JButton("Pulsa!"); JTextField campoValor, resultado;
add(boton);
boton.addActionListener(new OyenteBoton());
setSize(100, 100); public Gui10() {
setVisible(true); setLayout(new FlowLayout());
setDefaultCloseOperation(EXIT_ON_CLOSE); add(new JLabel("Valor "));
}
... campoValor = new JTextField(5);
} Una clase add(campoValor);
class OyenteBoton implements ActionListener { de oyente botonCopiar = new JButton("Copiar");
public void actionPerformed(ActionEvent e) { especfica add(botonCopiar);
Toolkit.getDefaultToolkit().beep(); botonCopiar.addActionListener(new OyenteBoton());
} add(new JLabel(" Copia "));
} Gui09.java ...
resultado = new JTextField(6);
Ejemplo: reproducir un valor Ejemplo: contador de pulsaciones
setSize(400, 100); public class Gui11 extends JFrame {

setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE); ...
} public Gui11() {
boton1 = new JButton("PULSA");
public static void main(String args[]) { label1 = new JLabel("Pulsaciones: 0");
Gui10 ventana = new Gui10(); add(boton1);
} add(label1);
class OyenteBoton implements ActionListener { boton1.addActionListener(new OyenteBotonPulsaciones());
public void actionPerformed(ActionEvent e){ ...
String valor = campoValor.getText(); }
resultado.setText(valor); ...
} class OyenteBotonPulsaciones implements ActionListener {
} public void actionPerformed(ActionEvent e){
} contador++;
label1.setText("Pulsaciones: " + contador);
} ...
Ejemplo: cambio de color Ejemplo: cambio de color
public static void main(String args[]) {
import java.awt.*;import java.awt.event.*;
Gui12 ventana = new Gui12();
public class Gui12 extends JFrame { }
JButton rojo = new JButton("Rojo");
JButton azul = new JButton("Azul"); class OyenteRojo implements ActionListener {
Container p; public void actionPerformed(ActionEvent evento) {
public Gui12() { p.setBackground(Color.red);
super("Color de fondo"); }
p = this.getContentPane(); }
setLayout(new FlowLayout()); class OyenteAzul implements ActionListener {
add(rojo); public void actionPerformed(ActionEvent evento) {
add(azul); p.setBackground(Color.green);
rojo.addActionListener(new OyenteRojo()); }
azul.addActionListener(new OyenteAzul()); }
setSize(200, 200);
setVisible(true); }
setDefaultCloseOperation(EXIT_ON_CLOSE);
} ... Gui12.java
ActionEvent ActionEvent
El objeto ActionEvent ofrece un mtodo getActionCommand() El mtodo getSource() indica el objeto en el que se ha
que devuelve un objeto con la informacin sobre el origen originado el evento:
del evento (el botn en nuestro caso).
Con un botn, devuelve la etiqueta del botn. public void actionPerformed(ActionEvent e) {
if(e.getSource() == lista) {
Para identificar botones individuales: campo1.setText("En la lista.");
}
else if(e.getSource() == texto) {
public void actionPerformed(ActionEvent e) { campo2.setText("En el campo de texto.");
String s = (String)e.getActionCommand(); }
if(s.equals("Aceptar")) { else if(e.getSource() == boton) {
// Tratamiento del botn Aceptar campo3.setText("En el botn.");
}
}
... }
Un conversor Euros-Pesetas Un conversor Euros-Pesetas
import java.awt.*; public static void main(String args[]) {
import java.awt.event.*;
Gui13 ventana = new Gui13();
public class Gui13 extends JFrame { }
private JTextField cantidad;
private boton1, boton2; class OyenteBoton implements ActionListener {
public Gui13(){ public void actionPerformed(ActionEvent ae) {
super("Conversor Euros-Pesetas"); Float f = new Float(cantidad.getText());
boton1 = new JButton("A euros"); float valor = f.floatValue();
boton2 = new JButton("A pesetas"); String s = (String)ae.getActionCommand();
cantidad = new TextField(10); if(s.equals("A euros")) {
JLabel eti2 = new JLabel(new ImageIcon("logo.gif")); valor = (float) (valor / 166.321);
add(eti2); add(cantidad); }
add(boton1); add(boton2); else if(s.equals("A pesetas")) {
boton1.addActionListener(new OyenteBoton()); valor = (float) (valor * 166.321);
boton2.addActionListener(new OyenteBoton()); }
setSize(300, 250); cantidad.setText(Float.toString(valor));
setVisible(true); }
setDefaultCloseOperation(EXIT_ON_CLOSE); } La clase OyenteBoton es interna y
} } tiene acceso a los elementos de la
... clase Contenedora Gui13.java
Interfaces para procesar eventos Componentes: botones
Para facilitar la tarea del programador se han creado una serie de JButton: Botn aislado. Puede pulsarse, pero su estado no cambia
interfaces que deben implementarse cuando se quieren procesar JToggleButton : Botn seleccionable. Cuando se pulsa el botn, su
algunos de estos eventos. Algunas interfaces y sus mtodos son:
estado pasa a seleccionado, hasta que se pulsa de nuevo (entonces se
deselecciona)
ActionListener actionPerformed(ActionEvent)
Escucha eventos de tipo ActionEvent isSelected() permite chequear su estado
KeyListener keyPressed(KeyEvent) JCheckBox : Especializacin de JToggleButton que implementa una
Escucha eventos de teclado keyReleased(KeyEvent) casilla de verificacin. Botn con estado interno, que cambia de
keyTyped(KeyEvent) apariencia de forma adecuada segn si est o no est seleccionado
MouseListener mouseClicked(MouseEvent) JRadioButton: Especializacin de JToggleButton que tiene sentido
Escucha eventos de accin del ratn
dentro de un mismo grupo de botones (ButtonGroup) que controla
mouseEntered(MouseEvent)
(botones) mouseExited(MouseEvent)
mousePressed(MouseEvent) que slamente uno de ellos est seleccionado
mouseReleased(MouseEvent)
MouseMotionListener mouseDragged(MouseEvent)
Escucha eventos de movimiento del ratn mouseMoved(MouseEvent)
Componentes : JButton Ejemplos
Constructores: boton1 = new JButton("A Euros ");

JButton(String text) boton1.setIcon(new ImageIcon("flag1.gif"));
JButton(String text, Icon icon)
JButton(Icon icon)
Respuesta a botones:
9 Implementar la interfaz ActionListener
boton2 = new JButton(new ImageIcon("flag2.gif"));
9 Implementar el mtodo actionPerformed(ActionEvent e)
public void actionPerformed(ActionEvent e) {

// Obtenemos la etiqueta
String actionCommand = e.getActionCommand();
boton3 = new JButton("Botn",new ImageIcon("flag8.gif"));
if(e.getSource() instanceof JButton)
if("Aceptar".equals(actionCommand))
System.out.println("Puls Aceptar");
}
Componentes : JLabel Componentes : JTextField
Para texto, una imagen o ambos: Campos de texto para introducir caracteres:
JLabel(String text, JTextField(int columns)
int horizontalAlignment)
JTextField(String text)
JLabel(String text)
JTextField(String text, int columns)
JLabel(Icon icon)
JTextField text1 = new JTextField("hola", 10);
JLabel(Icon icon,
int horizontalAlignment)
Poner texto: text1.setText("Adios");
Obtener texto: String str = text1.getText();
Agregar al Panel: p1.add(text1);
eti1 = new JLabel("Etiqueta de texto...");
eti2 = new JLabel(new ImageIcon("flag8.gif"));
Gui14.java
Componentes : JComboBox Componentes : JList
Listas de elementos para seleccionar un solo valor:

Listas de elementos para seleccionar uno o varios valores:
Creacin: JComboBox ch1 = new JComboBox();
JList l1 = new JList();
Agregar opciones: ch1.addItem(Object elemento);
JList l2 = new JList(Object[] elements);
Registrar Evento: ch1.addItemListener( objeto);
Obtener seleccin: val = ch1.getSelectedIndex();
String[] cosas = {"Opcin 1", "Opcin 2", "Opcin 3"};
ch1.getItem()
Jlist l2 = new Jlist(cosas);
Implementar la interfaz ItemListener
Implementar el mtodo itemStateChanged(ItemEvent e)
Registrar evento: l2.addListSelectionListener(oyente);
ch1.addItemListener(new OyenteItem());
. . .
class OyenteItem implements ItemListener { Obtener seleccin:
public void itemStateChanged(ItemEvent e) { int[] indices = l2.getSelectedIndices();
...
}}
Componentes : JList Componentes : JScrollBar
Implementar la interfaz ListSelectionListenner Creacin:

Implementar el mtodo valueChanged(ListSelectionEvent e) bar1 = new Scrollbar(Scrollbar.HORIZONTAL,0,0,0,100);
Registrar evento:
l.addListSelectionListener(new OyenteLista()); bar1.addAdjustmentListener(oyente);
...
Implementar la interfaz AdjustmentListener
class OyenteLista implements ListSelectionListener { Implementar el mtodo
public void valueChanged(ListSelectionEvent e) { adjustmentValueChanged(AdjustmentEvent e)
int[] indices = l.getSelectedIndices();
bar1.addAdjustmentListener(new OyenteBarra());
int i; ...
for(i = 0; i < indices.length; i++) { class OyenteBarra implements AdjustmentListener {
... public void adjustmentValueChanged(AdjustmentEvent e) {
} ... }
} }
} Obtener valor:
int val = bar1.getValue(); // val entre 0 y 100
Componentes: JScrollBar y JComboBox Componentes: JScrollBar y JComboBox
public class Gui15 extends JFrame { ch1.addItemListener(new OyenteCombo());

Container panel; p1.add(ch1);
JPanel p1, p2; bar1 = new JScrollBar(Scrollbar.HORIZONTAL, 0, 0, 0, 100);
JLabel l1, msg; /* scroll de 0 a 100*/
JComboBox ch1; bar1.addAdjustmentListener(new OyenteBarra());
String[] lista = {"Opcin 1", "Opcin 2", "Opcin 3"}; p1.add(bar1);
JScrollBar bar1; p2 = new JPanel(new BorderLayout());
p2.setBackground(Color.lightGray);
public Gui15() { msg = new JLabel("Msg:", Label.LEFT);
super("Controles"); msg.setForeground(Color.blue);
setLayout(new BorderLayout()); p2.add("North", msg);
p1 = new JPanel(new GridLayout(1, 3, 10, 10)); add(p1, "North");
p1.setBackground(Color.lightGray); add(p2, "South");
l1 = new JLabel("Elegir:", Label.RIGHT); setSize(300, 100);
l1.setBackground(Color.yellow); setVisible(true);
p1.add(l1); setDefaultCloseOperation(EXIT_ON_CLOSE);
ch1 = new JComboBox(); }
for(int i = 0; i < lista.length; i++)
ch1.addItem(lista[i]);
... ...
Componentes: JScrollBar y JComboBox Movimientos de ratn

public static void main(String args[]) { JButton boton;
Gui15 ventana = new Gui15(); List lista;
} Container panel;
class OyenteCombo implements ItemListener { public Gui17() {

public void itemStateChanged(ItemEvent e) { ...
int ind = ch1.getSelectedIndex(); this.addMouseMotionListener(new OyenteMover());
msg.setText((String)ch1.getSelectedItem()); ...
} }
...
}
} class OyenteMover implements MouseMotionListener {
public void mouseDragged(MouseEvent e) {
class OyenteBarra implements AdjustmentListener {
lista.add("arrastrando..");
public void adjustmentValueChanged(AdjustmentEvent e) {
}
int valor = bar1.getValue();
public void mouseMoved(MouseEvent e) {
String cad = "Valor : " + valor;
msg.setText(cad);
lista.add("moviendo..");
}
}
} }
} Gui15.java
Gui17.java
Pulsaciones de ratn Interaccin modal
class OyenteRaton implements MouseListener {

public void mouseClicked(MouseEvent e) {
lista.add("click..");
}
public void mouseEntered(MouseEvent e) {
lista.add("enter.."); }
public void mouseExited(MouseEvent e) {
lista.add("exit.."); }
public void mousePressed(MouseEvent e) {
lista.add("pulsar.."); }
public void mouseReleased(MouseEvent e) {
lista.add("soltar..");
}
}
Interaccin modal Interaccin modal
Ejemplo de cuadro de mensaje Ejemplo de cuadro de opciones
public class Gui18 extends JFrame { public class Gui19 extends JFrame {
public Gui19() {
public Gui18() { super("Ttulo de la ventana");
super("Ttulo de la ventana"); p = getContentPane();
setLayout(new FlowLayout()); setLayout(new FlowLayout());
setSize(200, 100); // pack(); setSize(200, 100);
setVisible(true); // show(); setVisible(true);
setDefaultCloseOperation(EXIT_ON_CLOSE); setDefaultCloseOperation(EXIT_ON_CLOSE);
// if ocurre algo Object[] textoOpciones={"Si adelante","Ahora no","No
JOptionPane.showMessageDialog(null, s"};
"Debe introducir datos en todos los campos", int opcion = JOptionPane.showOptionDialog(null,
"Error de entrada ", "Desea continuar?", "mensaje",
JOptionPane.ERROR_MESSAGE); JOptionPane.YES_NO_CANCEL_OPTION,
} JOptionPane.QUESTION_MESSAGE, null, textoOpciones,
public static void main(String[] args) { textoOpciones[0]);
Gui18 f = new Gui18(); }
}
} ...
Ejemplo de cuadro de entrada de datos Ejemplo de cuadro de entrada de datos

class PanelDatos extends JPanel {
public PanelDatos() { public class Gui20 extends JFrame {
setLayout(new GridLayout(4, 2));
public Gui20() {
JLabel etiquetaNombre = new JLabel("Nombre: ", JLabel.RIGHT);
JTextField campoNombre = new JTextField(); super("Ttulo de la ventana");
add(etiquetaNombre); setLayout(new FlowLayout());
add(campoNombre);
JLabel etiquetaApellidos = new JLabel("Apellidos:", JLabel.RIGHT); // Cuando necesitamos el cuadro de dilogo...
JTextField campoApellidos = new JTextField(); PanelDatos pd = new PanelDatos();
add(etiquetaApellidos);
if(JOptionPane.showConfirmDialog(this, pd,
add(campoApellidos);
JLabel etiquetaNP = new JLabel("Nmero Personal:", JLabel.RIGHT); "Introduzca datos",
JTextField campoNP = new JTextField(); JOptionPane.OK_CANCEL_OPTION,
add(etiquetaNP); JOptionPane.PLAIN_MESSAGE)
add(campoNP); == JOptionPane.OK_OPTION) {
ButtonGroup grupoBotones = new ButtonGroup(); // ... tratamiento
JRadioButton maana = new JRadioButton("Grupo Maana", true); }
JRadioButton tarde = new JRadioButton("Grupo Tarde");
grupoBotones.add(maana);
}
grupoBotones.add(tarde);
add(maana); public static void main(String[] args) {
add(tarde); Gui20 f = new Gui20();
} }}
}
Gui20.java
Mens Mens
Java ofrece varias clases para poner mens en una ventana: Una ventana (frame) slo puede tener una barra de mens
(objeto MenuBar), que se sita en la parte de arriba del mismo.
JMenuBar
JMenu
JMenuItem Los submens son botones JMenu.
JCheckBoxMenuItem
JRadioButtonMenuItem
Un JFrame o JApplet puede guardar un barra de men donde Los elementos de los mens son botones JMenuItem.
se cuelgan mens desplegables.
Los mens tienen elementos de men que puede seleccionar Cuando se activa un men se despliegan automticamente
el usuario. las opciones del men.
Las barras de mens se pueden contemplar como una estructura
que soporta mens.
Mens Ejemplo de men
Ejemplo de men Ejemplo de men
JMenuBar barraMenu = new JMenuBar(); // Establecemos oyentes para las opciones elegibles:
setJMenuBar(barraMenu); // La barra de mens de este frame listar.addActionListener(new OyenteMenu());
// El men: opcionSubmenu.addActionListener(new OyenteMenu());
JMenu menuOpciones = new JMenu("Men de opciones"); ...
barraMenu.add(menuOpciones); // Aadimos el men a la barra
// Un elemento de men: class OyenteMenu implements ActionListener {
JMenuItem listar = new JMenuItem("Listar los alumnos"); public void actionPerformed(ActionEvent e) {
menuOpciones.add(listar); // Aadimos el elemento al men String actionCommand = e.getActionCommand();
// Insercin de una lnea separadora en el men: if(e.getSource() instanceof JMenuItem) {
menuOpciones.add(new JSeparator()); if("Listar los alumnos".equals(actionCommand)) {
// Un men que ser un submen del anterior: texto.setText("Listar los alumnos");
JMenu subMenu = new JMenu("Submen"); }
// Un elemento de men para el submen: if("Opcin de submen".equals(actionCommand)) {
JMenuItem opcionSubmenu = new JMenuItem("Opcin de submen"); texto.setText("Opcin de submen");
subMenu.add(opcionSubmenu); // La aadimos al submen }
// Aadimos el submen como elemento del men: }
menuOpciones.add(subMenu); }
}
Gui21.java
Otro ejemplo Otro ejemplo
import java.awt.*;
Aplicacin que permite realizar operaciones aritmticas. import java.awt.event.*;
La interfaz contiene etiquetas y campos de texto para los import javax.swing.*;
operandos y el resultado. La operacin se selecciona en el men:
Container panel;
JTextField jtfNum1, jtfNum2, jtfResult;
JMenuItem jmiSuma, jmiResta, jmiMul, jmiDiv, jmiCerrar;
public Gui22() {
super("Mens");
JMenuBar jmb = new JMenuBar();
setJMenuBar(jmb);
JMenu operationMenu = new JMenu("Operacin");
operationMenu.setMnemonic('O'); // Letra distinguida
jmb.add(operationMenu);
operationMenu.add(jmiSuma = new JMenuItem("Suma", 'S'));
operationMenu.add(jmiResta = new JMenuItem("Resta", 'R'));
operationMenu.add(jmiMul = new JMenuItem("Multiplica",'M'));
operationMenu.add(jmiDiv = new JMenuItem("Divide", 'D'));
...
Otro ejemplo Otro ejemplo
JMenu exitMenu = new JMenu("Salir"); public static void main(String args[]) {

jmb.add(exitMenu); Gui22 ventana = new Gui22();
exitMenu.add(jmiCerrar = new JMenuItem("Cerrar", 'C')); ventana.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel p1 = new JPanel(); ventana.pack();
p1.setLayout(new FlowLayout()); ventana.setVisible(true);
p1.add(new JLabel("Nmero 1")); }
p1.add(jtfNum1 = new JTextField(3));
p1.add(new JLabel("Nmero 2")); private void calculate(char operator) {
p1.add(jtfNum2 = new JTextField(3)); int num1 = (Integer.parseInt(jtfNum1.getText().trim()));
p1.add(new JLabel("Resultado")); int num2 = (Integer.parseInt(jtfNum2.getText().trim()));
p1.add(jtfResult = new JTextField(4)); int result = 0;
jtfResult.setEditable(false); switch (operator) {
getContentPane().setLayout(new BorderLayout()); case '+': result = num1 + num2; break;
getContentPane().add(p1, BorderLayout.CENTER); case '-': result = num1 - num2; break;
// Registramos oyentes case '*': result = num1 * num2; break;
jmiSuma.addActionListener(new OyenteMenu()); case '/': result = num1 / num2;
jmiResta.addActionListener(new OyenteMenu()); }
jmiMul.addActionListener(new OyenteMenu()); jtfResult.setText(String.valueOf(result));
jmiDiv.addActionListener(new OyenteMenu()); }
jmiCerrar.addActionListener(new OyenteMenu());
} ... ...
Otro ejemplo Clases adaptadoras
class OyenteMenu implements ActionListener {

public void actionPerformed(ActionEvent e) { class OyenteRaton implements MouseListener {
String actionCommand = e.getActionCommand(); public void mouseClicked(MouseEvent e) {
if(e.getSource() instanceof JMenuItem) {
if("Suma".equals(actionCommand)) calculate('+');
else if("Resta".equals(actionCommand)) calculate('-');
}
else public void mouseEntered(MouseEvent e) {}
if("Multiplica".equals(actionCommand)) calculate('*'); public void mouseExited(MouseEvent e) {}
else if("Divide".equals(actionCommand)) calculate('/'); public void mousePressed(MouseEvent e) {}
else if("Cerrar".equals(actionCommand)) System.exit(0); public void mouseReleased(MouseEvent e) {}
} }
}
}
}
Poco eficiente, slo implementamos un mtodo !
Gui22.java
Clases adaptadoras Clases adaptadoras
class OyenteRatonconAdap extends MouseAdapter {

// La clase adaptadora MouseAdapter Si por ejemplo una de nuestras clases implementa la interfaz
// se encargan de implementar todos los mtodos WindowListener, deber implementar todos los mtodos asociados,
// de la clase de escucha. Slo necesitaremos an cuando slo utilicemos uno de ellos.
// redefinir aquellos mtodos que nos van a ser tiles
Las clases adaptadoras se encargan de implementar todos los
// para gestionar eventos , sin preocuparnos del resto
mtodos del la clase de escucha. As slo necesitaremos redefinir
aquellos mtodos que nos van a ser tiles para gestionar eventos , sin
public void mouseClicked(MouseEvent e) { preocuparnos del resto.
//redefinido Para ello dedemos indicar que nuestra clase es una subclase del
adaptador:
}
}
class UnaClase extends Adaptador{ ... }
Clases adaptadoras Clases adaptadoras
Slo las clases que poseen ms de un mtodo tienen adaptador , y

son las siguientes:
class MiAdaptador extends WindowAdapter {
public void windowClosing(windowEvent e) {
System.exit(0); ComponentListener posee ComponentAdapter
}
} ContainerListener posee ContainerAdapter
FocusListener posee FocusAdapter
KeyListener posee KeyAdapter
. . . MouseListener posee MouseAdapter

this.addWindowListener(new MiAdaptador()); MouseMotionListener posee MouseMotionAdapter
. . .
WindowListener posee WindowAdapter
Ejemplo Arquitectura MVC (Modelo-Vista-Controlador)
public class Gui17b extends JFrame { La arquitectura MVC es una arquitectura tpica de diseo de GUI.
JButton boton; List lista; Container panel;
9 El modelo representa la estructura lgica de la GUI,
public Gui17b(){
independientemente de su representacin visual.
panel =this.getContentPane();
panel=getContentPane();
9 La vista constituye la representacin visual de la GUI.
panel.setLayout(new FlowLayout()); 9 El controlador constituye la lgica de interaccin con el usuario.
lista = new List(8,false ); El mejor modelo separa en las tres partes:
lista.setBounds(100,50,150,150);
add(lista ); public static void main(String args[]) {
this.addMouseListener(new OyenteAdaptador()); Modelo modelo = new Modelo();
setSize(100,100);setVisible(true); Controlador controlador = new Controlador(modelo);
} GUI gui = new GUI(controlador); }
class OyenteAdaptador extends MouseAdapter {
public void mouseClicked(MouseEvent e) {
}} . . .
Applet mnimo con Swing (JApplet) Esquema de applet con swing
//MiApplet.java import javax.swing.*

import java.swing.*; import java.awt;
class MiApplet extends JApplet { }
Anchura y altura
en pxeles public class Applet0 extends JApplet {
//MiApplet.html
<HTML>
<HEAD><TITLE>Applet mnima</TITLE> </HEAD> // constantes y componentes (atributos)
<BODY>
<APPLET CODE="MiApplet.class" WIDTH=100 HEIGHT=50>
public void init() {
</APPLET>
</BODY>
</HTML> // configurar componentes
// configurar layout;
// configurar Manejadores Eventos;
}
AppletViewer Navegador }
Ejemplo
import java.awt.*;
public class Applet01 extends JApplet

{
JLabel etiqueta;
public void init(){

// configurar componentes;
etiqueta = new JLabel("Mi primer Applet Swing");
add(etiqueta);
// configurar layout;
FlowLayout milayout = new FlowLayout();
setLayout(milayout);
...
}
}
P.O.O Tema 6 Interfaces grficas de usuario - 96

Tema6resumido PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema6resumido PDF

Cargado por

Copyright:

Formatos disponibles

Las interfaces grficas de usuario

Hasta ahora hemos desarrollado programas que usan la consola

P.O.O Tema 6 Interfaces grficas de usuario

La API de Java para desarrollo de GUI Algunos componentes de AWT

La interfaz de usuario es la parte del programa que permite Label Canvas

Swing Jerarqua de clases para las GUI

Paquete de Java para la generacin del GUI en aplicaciones

en Java 1.1 e integrado desde Java 1.2.

Es una de las API de JFC (Java Foundation Classes):

Se apoya sobre AWT y aade JComponents. Graphics

Arquitectura Model-View-Controller (MVC).

JTextComponent JTextField JPasswordField TextArea

JPopupMenu JSeparator JSlider JRootPane JPane

Graphics (java.awt) Contenedores de alto nivel:

import javax.swing.*; import javax.swing.*;

JFrame : aadir elementos 1. Con herencia de JFrame utilizando Container

public static void main(String args[]) {

4. Ejemplo sin herencia sin Container Administradores de disposicin

Los componentes se agregan al contenedor con el mtodo add().

Crea una disposicin para Tipo de disposicin

import javax.swing.*; import javax.swing.*;

public Gui02() { public Gui03() {

setLayout(new GridLayout(filas, columnas)) import javax.swing.*;

Paneles como contenedores Paneles como contenedores

Ejemplo de dibujo Dibujo de grficos en paneles

import javax.swing.*; Graphics g;

Interaccin con el usuario Interaccin con el usuario

Modelo para responder a eventos Modelo para responder a eventos

Creamos un manejador de eventos en dos pasos: class MiGui extends JFrame {

import javax.swing.*; import javax.swing.*;

public Gui09() { JButton botonCopiar;

Ejemplo: reproducir un valor Ejemplo: contador de pulsaciones

setSize(400, 100); public class Gui11 extends JFrame {

Interfaces para procesar eventos Componentes: botones

Constructores: boton1 = new JButton("A Euros ");

public void actionPerformed(ActionEvent e) {

Componentes : JLabel Componentes : JTextField

Listas de elementos para seleccionar un solo valor:

Componentes : JList Componentes : JScrollBar

Implementar la interfaz ListSelectionListenner Creacin:

public class Gui15 extends JFrame { ch1.addItemListener(new OyenteCombo());

Componentes: JScrollBar y JComboBox Movimientos de ratn

public class Gui17 extends JFrame {

class OyenteCombo implements ItemListener { public Gui17() {

class OyenteRaton implements MouseListener {

Interaccin modal Interaccin modal

Ejemplo de cuadro de entrada de datos Ejemplo de cuadro de entrada de datos

Mens Ejemplo de men

Otro ejemplo Otro ejemplo

JMenu exitMenu = new JMenu("Salir"); public static void main(String args[]) {

Otro ejemplo Clases adaptadoras

class OyenteMenu implements ActionListener {

class OyenteRatonconAdap extends MouseAdapter {

Clases adaptadoras Clases adaptadoras

Slo las clases que poseen ms de un mtodo tienen adaptador , y

. . . MouseListener posee MouseAdapter

Applet mnimo con Swing (JApplet) Esquema de applet con swing

//MiApplet.java import javax.swing.*

public class Applet01 extends JApplet

public void init(){

P.O.O Tema 6 Interfaces grficas de usuario - 96

También podría gustarte

import javax.swing.; import javax.swing.;

import javax.swing.; import javax.swing.;

import javax.swing.; import javax.swing.;