Download Swing 1

Desarrollo de Aplicaciones en
Java
INF 473
Desarrollo de Interfaces Gráficas
Componentes Swing
Prof. José Miguel Rubio
[email protected]
[email protected]
PUCV
Marzo 2008
0
Interfaces de usuario
en java
El concepto de “interfaz de usuario” (IU) se
refiere a modos de interacción entre un
programa y el usuario.
El entorno de Java contiene clases para
funcionalidades de IU como:
» Componentes gráficas
» Sonido
» Información de configuración (argumentos
de línea de comandos en aplicaciones)
» Lectura y escritura por teclado:
– System.in, System.out
» Ficheros
Interfaces gráficas de usuario:
» Swing contiene las clases para generar una
IU gráfica.
– Package javax.swing
» Contiene botones, listas, menús, zonas de
texto,...
1
Jerarquía de
componentes
Object
JDialog
java.awt.Container
JApplet
JComponent
JFrame
JLabel
JPanel
JComboBox
JList
JAbstractButton
JTextComponent
JButton
JCheckBox
JMenuItem
JTextArea
JTextField
Contenedores terminales: JFrame, JDialog, JApplet
Línea discontinua: otras clases intermedias
2
Interfaces gráficas
Referencia:
» “A Visual Index to the Swing Components”
– The Java Tutorial (java.sun.com)
Tamaños, formas, colores, tipos de
letra, etc (java.awt.*):
»
»
»
»
»
Point, Rectangle, Polygon
Color (Color.black, Color.red, ...)
Image
Font, FontMetrics
Graphics es un contexto gráfico (un pincel
virtual): color actual, font actual, ...
En clase JComponent: colores de
background y foreground; font (tipo de
letra).
–
–
–
–
Color getBackground()
void setBackground(Color)
Foreground: {set/get}Foreground
Font: {set/get}Font
3
Ejemplo
4
Ejemplo
public class MiVentana extends javax.swing.JFrame {
private javax.swing.JButton jButton2;
private javax.swing.JButton jButton1;
public MiVentana() {
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
getContentPane().setLayout(null);
setTitle("Un ejemplo");
jButton1.setBackground(java.awt.Color.red);
jButton1.setText("Boton 1");
getContentPane().add(jButton1);
jButton1.setBounds(121, 146, 120, 50);
jButton2.setText("Boton 2");
getContentPane().add(jButton2);
jButton2.setBounds(130, 70, 77, 26);
pack(); // COLOCA SEGÚN “tamaños preferidos”
}
public static void main(String args[]) {
new MiVentana().setVisible(true);
// o bien .show(); que es “deprecated”
}
}
5
Disposición geométrica
de componentes
Acomodadores o gestores de disposición
geométrica (layout managers)
» Objetos que controlan la disposición (posición y
tamaño) de componentes incluidas dentro de un
contenedor
Objetos contenedores:
» getContentPane() aplicado a objetos de:
– JFrame, JDialog, JApplet
» objetos de la clase JPanel
Cada objeto contenedor un tipo de layout
manager por defecto:
» BorderLayout (si provienen de ejecutar
“getContentPane()”)
» FlowLayout (en objetos de la clase JPanel)
Creación de una jerarquía a partir de un
contenedor C con elementos E1, E2, .., EN y
un layout manager A:
» C.setLayout(A)
» C.add(E1); C.add(E2); ... C.add(EN);
El layout manager puede ser “null”:
» Posiciones absolutas
6
Ejemplo, I
7
Ejemplo, II
public class MiVentana extends javax.swing.JFrame {
private javax.swing.JButton jButton2;
private javax.swing.JButton jButton1;
private javax.swing.JPanel jPanel2;
private javax.swing.JPanel jPanel1;
public MiVentana() {
jPanel1 = new javax.swing.JPanel();
jPanel2 = new javax.swing.JPanel();
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
getContentPane().setLayout(null);
setTitle("Un ejemplo de layout null");
jPanel1.setBackground(java.awt.Color.orange);
getContentPane().add(jPanel1);
jPanel1.setBounds(30, 10, 270, 130);
jPanel2.setLayout(null);
…………
8
Ejemplo, III
………
jPanel2.setBackground(java.awt.Color.red);
jButton1.setText("jButton1");
jPanel2.add(jButton1);
jButton1.setBounds(20, 20, 81, 26);
jButton2.setText("jButton2");
jPanel2.add(jButton2);
jButton2.setBounds(120, 30, 81, 26);
getContentPane().add(jPanel2);
jPanel2.setBounds(30, 180, 230, 80);
pack();
}
public static void main(String args[]) {
new MiVentana().setVisible(true);
}
}
9
Tipos de layout
managers
Tipos (java.awt.*):
– Null (posiciones absolutas)
– BorderLayout. Uso de norte, sur, este, oeste,
centro.
– FlowLayout: De izquierda a derecha, empezando
una nueva fila si es necesario
– GridLayout: Filas y Columnas de igual tamaño
– CardLayout. Dos o más componentes comparten
la misma zona visual.
Para un contenedor con un layout
manager asociado se tiene:
– (TP) tamaño preferido
Es una “suma” de los tamaños preferidos de las
componentes hijas
Observación: Tamaño preferido es 0 cuando
el layout manager es null.
– (MC) modo de colocación de componentes hijas
para un tamaño dado del contenedor
10
BorderLayout, I
Basado en DIRECCIONES CARDINALES
(MC): Las componentes se extienden en la dirección
cardinal especificada (cuando no hay extensión, se
considera el tamaño preferido).
(TP): según “pack()”.
public class MiVentana extends javax.swing.JFrame {
private javax.swing.JButton jButton2;
private javax.swing.JButton jButton1;
private javax.swing.JButton jButton3;
private javax.swing.JButton jButton5;
private javax.swing.JButton jButton4;
public MiVentana() {
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
jButton3 = new javax.swing.JButton();
jButton4 = new javax.swing.JButton();
jButton5 = new javax.swing.JButton();
………
11
BorderLayout, II
……
setTitle("Un ejemplo de BorderLayout");
jButton1.setText("Oeste");
getContentPane().
add(jButton1, java.awt.BorderLayout.WEST);
jButton2.setText("Norte");
getContentPane().
add(jButton2, java.awt.BorderLayout.NORTH);
jButton3.setText("Centro");
getContentPane().
add(jButton3, java.awt.BorderLayout.CENTER);
jButton4.setText("Sur");
getContentPane().
add(jButton4, java.awt.BorderLayout.SOUTH);
jButton5.setText("Este");
getContentPane().
add(jButton5, java.awt.BorderLayout.EAST);
pack();
}
public static void main(String args[]) {
new MiVentana().setVisible(true); }
}
12
Ejemplo
13
FlowLayout, I
(MC): colocación de sus hijos en una fila (o varias) con
tamaño preferido y centrado
(TP): según colocación en una fila.
public class MiVentana extends javax.swing.JFrame {
private javax.swing.JButton jButton2;
private javax.swing.JButton jButton1;
private javax.swing.JButton jButton3;
private javax.swing.JButton jButton5;
private javax.swing.JButton jButton4;
public MiVentana() {
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
jButton3 = new javax.swing.JButton();
jButton4 = new javax.swing.JButton();
jButton5 = new javax.swing.JButton();
getContentPane().
setLayout(new java.awt.FlowLayout());
setTitle("Un ejemplo de FlowLayout");
………
14
FlowLayout, II
………
setTitle("Un ejemplo de FlowLayout");
jButton1.setText("Oeste");
getContentPane().add(jButton1);
jButton2.setText("Norte");
getContentPane().add(jButton2);
jButton3.setText("Centro");
getContentPane().add(jButton3);
jButton4.setText("Sur");
getContentPane().add(jButton4);
jButton5.setText("Este");
getContentPane().add(jButton5);
pack();
}
public static void main(String args[]) {
new MiVentana().setVisible(true);
}
}
15
Ejemplo
16
GridLayout, I
(MC): componentes en un enrejado de celdas con el
mismo tamaño y ocupando todo el contenedor
(TP): según pack()
public class MiVentana extends javax.swing.JFrame {
private javax.swing.JButton jButton2;
private javax.swing.JButton jButton1;
private javax.swing.JButton jButton3;
private javax.swing.JButton jButton5;
private javax.swing.JButton jButton4;
public MiVentana() {
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
jButton3 = new javax.swing.JButton();
jButton4 = new javax.swing.JButton();
jButton5 = new javax.swing.JButton();
………
17
GridLayout, II
………
getContentPane().
setLayout(new java.awt.GridLayout(2, 3));
setTitle("Un ejemplo de GridLayout");
jButton1.setText("Oeste");
getContentPane().add(jButton1);
jButton2.setText("Norte");
getContentPane().add(jButton2);
jButton3.setText("Centro");
getContentPane().add(jButton3);
jButton4.setText("Sur");
getContentPane().add(jButton4);
jButton5.setText("Este");
getContentPane().add(jButton5);
pack();
}
public static void main(String args[]) {
new MiVentana().setVisible(true); }
}
18
Ejemplo
19
Cardlayout, I
Dos o más componentes (normalmente
paneles) que comparten espacio (una
baraja de cartas donde sólo una es
visible)
Cada vez que aparece una
componente, ocupa totalmente la
componente contenedora
Se puede mostrar una componente
añadida (identificada con un nombre)
mediante el método de CardLayout:
– public void show(Container parent,
String name)
TP: tamaño preferido máximo de las
componentes (anchura y altura)
20
Cardlayout, II
public class MiVentana extends javax.swing.JFrame {
private javax.swing.JButton jButton2;
private javax.swing.JButton jButton1;
private javax.swing.JPanel jPanel2;
private javax.swing.JPanel jPanel1;
public MiVentana() {
jPanel1 = new javax.swing.JPanel();
jButton1 = new javax.swing.JButton();
jPanel2 = new javax.swing.JPanel();
jButton2 = new javax.swing.JButton();
getContentPane().
setLayout(new java.awt.CardLayout());
setTitle("Un ejemplo de CardLayout");
……
21
Cardlayout, III
………
jButton1.setText("Un boton");
jPanel1.add(jButton1);
getContentPane().add(jPanel1, "carta1");
jPanel2.setLayout(new java.awt.BorderLayout());
jButton2.setText("Boton 2");
jPanel2.
add(jButton2, java.awt.BorderLayout.CENTER);
getContentPane().add(jPanel2, "carta2");
pack();
java.awt.Container c = this.getContentPane();
java.awt.LayoutManager lm = c.getLayout();
((java.awt.CardLayout)lm).show(c, "carta2");
}
public static void main(String args[]) {
javax.swing.JFrame v = new MiVentana();
v.setVisible(true);
}
}
22
Ejemplo
23
Tratamiento de
eventos, I
Generación de eventos:
» Una componente gráfica
(java.awt.Container) genera objetos de tipo
evento al interaccionar con ella (ratón,
teclado).
Se pueden programar respuestas ante
la generación de eventos (event
handling) mediante:
» Entrega de objetos de tipo evento a objetos
registrados como oyentes:
– Fuente del evento (una componente gráfica)
– Un oyente (listener):
Un objeto de alguna clase. Este objeto actúa
de oyente de esos eventos, ejecutando una
respuesta al recibir un evento.
En una aplicación se pueden establecer
varias relaciones “fuente-oyente” entre
un conjunto de fuentes y otro de
24
oyentes
Tratamiento de
eventos, II
Pasos:
» Declaración de clases listeners:
<clase-oyente>
implements <tipo-oyente>
» Registrar un objeto oyente para un
objeto fuente:
<una-componente-fuente>
.add<tipo-oyente>
(<un-objeto-de-clase-oyente>)
25
Algunos eventos, I
Se
genera un
java.awt.event.ActionEvent en
acciones como:
» “Click” en un JButton
» Presionar “enter” en un
JTextField
Código:
» public class Oyente implements ActionListener {
...
public void actionPerformed(ActionEvent e) {
// codigo a ejecutar ante el evento,
// es decir la respuesta
}
... }
» <un-boton>.addActionListener
(<una-instancia-de-Oyente>)
26
Algunos eventos, II
Oyentes:
» Interface java.awt.event.ActionListener:
– public void actionPerformed (ActionEvent e)
En clases JButton, JTextField:
– public void addActionListener(ActionListener l)
Se genera un
java.awt.event.MouseEvent al
interaccionar con el ratón en un
java.awt.Container:
» Interface java.awt.event.MouseListener:
public void
mouse{Clicked|Pressed|Released|Enter|Exited}
(MouseEvent e)
» En java.awt.Container:
– public void addMouseListener(MouseListener l)
27
Ejemplo, I
import java.awt.*;
import java.awt.event.*;
public class MiVentana extends javax.swing.JFrame
implements ActionListener, MouseListener {
private StringBuffer texto;
private javax.swing.JButton jButton2;
private javax.swing.JLabel jLabel1;
private javax.swing.JButton jButton1;
private javax.swing.JPanel jPanel1;
public void actionPerformed (ActionEvent e) {
this.texto.append("Click en botón 1.");
this.jLabel1.setText(this.texto.toString());
}
public void mouseClicked (MouseEvent e) {
}
public void mousePressed (MouseEvent e) {
}
public void mouseReleased (MouseEvent e) {
}
public void mouseEntered (MouseEvent e) {
this.texto.append("Entrar en botón 2.");
this.jLabel1.setText(this.texto.toString());
}
………
28
Ejemplo, II
………
public void mouseExited (MouseEvent e) {
this.texto.append("Salir de botón 2.");
this.jLabel1.setText(this.texto.toString());
}
public MiVentana() {
jLabel1 = new javax.swing.JLabel();
jPanel1 = new javax.swing.JPanel();
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
setTitle("Un ejemplo de eventos");
jLabel1.setHorizontalAlignment(
javax.swing.SwingConstants.CENTER);
getContentPane().
add(jLabel1, java.awt.BorderLayout.CENTER);
jButton1.setText("Boton 1");
jPanel1.add(jButton1);
jButton2.setText("Boton 2");
jPanel1.add(jButton2);
getContentPane().
add(jPanel1, java.awt.BorderLayout.SOUTH);
pack();
………
29
Ejemplo, III
………
this.texto=new StringBuffer();
this.jButton1.addActionListener(this);
this.jButton2.addMouseListener(this);
}
public static void main(String args[]) {
javax.swing.JFrame v = new MiVentana();
v.setVisible(true);
}
}
30
Ejemplo, IV
31
Más eventos
Otros eventos:
» Generados por java.awt.Container:
–
–
–
–
addFocusListener (java.awt.event.FocusEvent)
addKeyListener (java.awt.event.KeyEvent)
addMouseListener (java.awt.event.MouseEvent)
addMouseMotionListener
(java.awt.event.MouseEvent)
» Generados por JFrame y por JDialog
addWindowListener(java.awt.event.WindowEvent)
Otros eventos más sencillos:
» java.awt.event.ActionEvent. Generado por:
–
–
–
–
JButton
JCheckBox
JTextField
JComboBox
» java.awt.event.ItemEvent. Generado por:
– JCheckBox
– JComboBox
» javax.swing.event.ListSelectionEvent. Generado
por:
– JList
Referencia: “Listeners Supported by Swing
Components“
– The Java Tutorial (java.sun.com)
32
Adaptadores
Algunas
interfaces oyentes
tienen adaptadores para
simplificar el código
(java.awt.event.*):
» Ejemplo: public abstract class
MouseAdapter extends Object
implements MouseListener
» Código vacío en métodos de la
“interface”
Ejemplo:
»El mismo que antes pero con
uso de adaptadores
33
Adaptadores
34
Ejemplo, I
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class MiVentana extends javax.swing.JFrame
implements ActionListener {
StringBuffer texto;
private JButton jButton2; private JLabel jLabel1;
private JButton jButton1; private JPanel jPanel1;
public void actionPerformed (ActionEvent e) {
this.texto.append("Click en botón 1.");
this.jLabel1.setText(this.texto.toString());
}
public MiVentana() {
jLabel1 = new javax.swing.JLabel();
jPanel1 = new javax.swing.JPanel();
jButton1 = new javax.swing.JButton();
jButton2 = new javax.swing.JButton();
setTitle("Un ejemplo de eventos");
addWindowListener(
new WindowAdapter() {
public void
windowClosing (WindowEvent evt) {
System.exit(0);
}
});
………
35
Ejemplo, II
………
jLabel1.setHorizontalAlignment(
javax.swing.SwingConstants.CENTER);
getContentPane().
add(jLabel1, java.awt.BorderLayout.CENTER);
jButton1.setText("Boton 1");
jPanel1.add(jButton1);
jButton2.setText("Boton 2");
jPanel1.add(jButton2);
getContentPane().
add(jPanel1, java.awt.BorderLayout.SOUTH);
pack();
………
36
Ejemplo, III
………
this.texto=new StringBuffer();
this.jButton1.addActionListener(this);
this.jButton2.addMouseListener(
new MouseAdapter() {
public void mouseEntered(MouseEvent e) {
// Aquí no sería válido this.texto
texto.append("Entrar en botón 2.");
jLabel1.setText(texto.toString());
}
public void mouseExited(MouseEvent e) {
texto.append("Salir de botón 2.");
jLabel1.setText(texto.toString());
}
});
}
public static void main(String args[]) {
javax.swing.JFrame v = new MiVentana();
v.setVisible(true);
}
}
37