Introducción a Diseño de Interfaces

con Swing

Ana Belén Martínez

EUITIO
Universidad de Oviedo

Contenidos
n JFC
n AWT
n Swing
n Estructura básica de Swing
n Componentes
n Contenedores
n El Entorno de JBuilder
n Componentes Básicos implicados en la construcción de
IGU
n Esquema de trabajo de JBuilder

Comunicación Persona-Máquina 2 A. Belén Martínez

1
 JFC
„ JFC es la abreviatura de Java Foundation Classes y
representa un conjunto de clases que ayudan en la
construcción de interfaces gráficas de usuario
„ Está constituido por 5 librerías:
„ AWT. Permite la construcción de IGU para todas las versiones del JDK
„ Swing. Basada en la anterior, permite la construcción de IGU más avanzadas
que las construidas con AWT.
„ Accesibility. Proporciona asistencia a usuarios que tienen problemas con los
interfaces de usuario tradicionales. Todos los componentes Swing soportan
accesibilidad
„ 2D API. Incorpora clases para implementar diferentes formas, fuentes,
colores, etc.
„ Drag and Drop. Permiten implementar el drag and drop sobre diferentes
elementos de las aplicaciones

Comunicación Persona-Máquina 3 A. Belén Martínez

1
Abstract Window
Toolkit (AWT)

Comunicación Persona-Máquina 4 A. Belén Martínez

2
 AWT – Características
„ Permite la construcción de IGU que pueden ejecutarse
en cualquier sistema y para todas las versiones del JDK

„ Muestra los componentes (botones, etiquetas, campos

de texto) utilizando (por defecto) el aspecto de la
plataforma local

Comunicación Persona-Máquina 5 A. Belén Martínez

AWT – Elementos implicados

„ En una aplicación construida con AWT se distinguen:
„ Componentes

„ Contenedores

„ Eventos

„ Administradores de Diseño (layouts)

„ Los componentes (botones, etiquetas, etc.) de la IGU se organizan en

contenedores y esperan hasta que el usuario ejecuta alguna acción
sobre ellos (evento)

„ A su vez los contenedores son componentes y pueden por tanto ser

agrupados en otros contenedores

„ Por lo general en un contenedor habrá varios componentes y para

situarlos de forma conveniente pueden usarse los administradores de
diseño
Comunicación Persona-Máquina 6 A. Belén Martínez

3
 AWT – Elementos implicados
„ En resumen, las clases del paquete AWT pueden clasificarse
en :
„ Gráficos
„ Componentes
„ Administradores de Diseño (layouts)
„ Manipuladores de eventos
„ Manipuladores de imágenes

„ Toda esta funcionalidad se encuentra en los paquetes:

„ java.awt.*;
„ java.awt.event.*;

Comunicación Persona-Máquina 7 A. Belén Martínez

2
Swing

Comunicación Persona-Máquina 8 A. Belén Martínez

4
 Swing
„ Swing es la biblioteca de clases más importante de JFC
„ Surge en 1997 debido a que AWT presentaba muchas limitaciones a la
hora de construir aplicaciones de cierta entidad
„ La mayoría de la funcionalidad que necesitamos se encuentra
en el paquete:
„ javax.swing
„ En Swing, los componentes
„ Están escritos en Java
„ Proporcionan un Look&Feel (L&F) consistente entre plataformas
„ Se pueden usar sobre cualquier plataforma que soporte Java 1.1 o posteriores
„ A partir de JDK 1.2 Swing forma parte de la distribución estándar de Java
(no hay que hacer nada especial para emplear sus componentes)

Comunicación Persona-Máquina 9 A. Belén Martínez

Swing – Diferencias con AWT

„ Swing permite cambiar el Look&Feel de la aplicación en tiempo de
ejecución Metal Mac OS

Motif
Windows

Comunicación Persona-Máquina 10 A. Belén Martínez

5
 Swing – Diferencias con AWT (II)
„ Swing permite la construcción de IGU para aplicaciones de cierta entidad
„ Los componentes Swing son ligeros, en su mayoría, ya que no están
basados en sus semejantes nativos (como ocurría en AWT). Emplean
primitivas gráficas para pintarse en pantalla
„ Swing incorpora un mayor número de componentes que AWT: tablas,
árboles, sliders, spinners, barras de progreso, frames internos y
componentes de texto. También permite añadirles bordes a los
componentes.
„ Los componentes Swing pueden tener tooltips colocados sobre ellos
„ Swing permite ligar eventos de teclado a componentes

Comunicación Persona-Máquina 11 A. Belén Martínez

Swing – Jerarquía de Clases

Componentes de Alto Nivel

JApplet JDialog JFrame JWindow

JComponent

JComboBox JLabel JList JMenuBar

JPanel JPopupMenu JScrollBar JScrollPane

JTable JTree JInternalFrame JOptionPane

JProgressBar JRootPane JSeparator JSlider

JSplitPane JTabbedPane JToolBar JTooltip

JViewPort JColorChooser JTextComponent JSpinner

JFileChooser JLayeredPane

AbstractButton

JToggleButton

JButton

JMenuItem
Comunicación Persona-Máquina 12 A. Belén Martínez

6
 3
Estructura Básica
de Swing

Comunicación Persona-Máquina 13 A. Belén Martínez

Estructura Básica de Swing

„ La estructura básica de Swing se basa en
„ Componentes y
„ Contenedores

„ La interacción con el usuario y el sistema se realiza por medio

de eventos

Comunicación Persona-Máquina 14 A. Belén Martínez

7
 Componentes
„ Los componentes son objetos y algo más…que permiten al
usuario interaccionar con la aplicación
„ En definitiva, un componente está formado por
„ Propiedades
„ Métodos
„ Eventos
„ Los componentes (botones, etiquetas, listas,...) representan
los elementos básicos para la construcción de los programas

Comunicación Persona-Máquina 15 A. Belén Martínez

Propiedades
„ Representan un valor o estado asociado al componente
„ Las propiedades son atributos y algo más... Ya qué:
„ No es solamente una variable cuyo valor se puede leer o escribir
directamente
„ Normalmente tiene asociado una acción que se ejecuta con la
modificación de la propiedad

Componente JButton

Propiedad text

Comunicación Persona-Máquina 16 A. Belén Martínez

8
 Propiedades (II)
„ Las propiedades tienen un valor antes de que se use el
componente
„ El valor de una propiedad puede cambiarse en tiempo de
ejecución

jButton1.setText(“Cancelar”)

„ Los resultados de modificar una propiedad son inmediatos al

desencadenarse la acción ligada a la propiedad
Comunicación Persona-Máquina 17 A. Belén Martínez

Métodos
„ Los métodos de un componente funcionan tal y como lo haría
cualquier método de una clase de Java

„ Cada método proporciona un comportamiento de un

componente, ya que obligan al componente a realizar una
acción

„ Ej.
jTextArea1.setText (“ Un texto de prueba”)

Comunicación Persona-Máquina 18 A. Belén Martínez

9
 Eventos o Sucesos
„ Un evento es una señal, externa o interna a la aplicación, que
produce la ejecución de un bloque de código que se escribe
como un método.
„ Ejemplos
„ Pulsar el ratón
„ Llamar a un método
„ Modificar el valor de una propiedad

Comunicación Persona-Máquina 19 A. Belén Martínez

Manejo de Eventos
„ Es el código que responde al evento cuando éste ocurre

„ El programador tiene que escribir el código adecuado

para responder a cada evento

Comunicación Persona-Máquina 20 A. Belén Martínez

10
 Manejo de Eventos (II)
„ Ejemplo:

click

Manejador del evento

panel.setBackground(Color.magenta);

Comunicación Persona-Máquina 21 A. Belén Martínez

Contenedores
„ Los componentes no se encuentran aislados, sino agrupados
dentro de contenedores.
„ Los contenedores
„ Se utilizan para recoger y gestionar otros componentes
„ También son componentes

„ Generalmente, en los contenedores no se emplean posiciones

fijas, sino que los componentes están situados con una
disposición controlada (layouts)

Comunicación Persona-Máquina 22 A. Belén Martínez

11
 Principales Tipos de Contenedores
„ Marco (JFrame)
„ Ventana que no está contenida dentro de otra ventana
„ Tiene borde, título, menú de control, botones para maximizar y
minimizar, controles para redimensionar y puede contener barra de
menús
„ Suele ser el contenedor principal para una aplicación con IGU
„ Cuadro de Diálogo (JDialog)
„ Generalmente se emplean para recoger datos del usuario y mostrar
mensaje de advertencia
„ Tiene que tener un componente del que se derive
„ No puede contener barra de menús
„ Pueden ser modales o no modales
Comunicación Persona-Máquina 23 A. Belén Martínez

Principales tipos de contenedores (II)

„ Otros
„ Panel (JPanel)
„ Contenedor sencillo de la IU que se emplea para agrupar otros
componentes como botones, etiquetas, campos de texto, etc.
„ No tiene borde ni título
„ Los paneles están incrustados en otros elementos como Frame o Dialog.

Comunicación Persona-Máquina 24 A. Belén Martínez

12
 4
Entorno de
JBuilder

Comunicación Persona-Máquina 25 A. Belén Martínez

Aspecto del Entorno JBuilder

Comunicación Persona-Máquina 26 A. Belén Martínez

13
 Paleta de Componentes

„ Incluye componentes visuales y no visuales que se

pueden colocar en el diseñador o en el árbol de
componentes
„ Los componentes se arrastran y se insertan en el
diseñador o en el árbol de componentes
„ Es posible incorporar nuevos componentes

Comunicación Persona-Máquina 27 A. Belén Martínez

Inspector

„ El inspector es un elemento del

entorno que tiene como finalidad
facilitar la edición de las
propiedades y eventos del objeto
que se seleccione.

Comunicación Persona-Máquina 28 A. Belén Martínez

14
 Inspector-Propiedades
„ Las propiedades se
pueden modificar
directamente en el
inspector de objetos.
„ Los cambios realizados
en el inspector se
reflejan de forma visual
en el diseño y se
incorporan
inmediatamente al
código fuente

Comunicación Persona-Máquina 29 A. Belén Martínez

Inspector-Eventos
„ Los componentes
tienen definidos
propiedades y eventos

„ Los eventos están

definidos, pero el
bloque de respuesta
de código no está
escrito

Comunicación Persona-Máquina 30 A. Belén Martínez

15
 Árbol de Componentes

„ Muestra todos los componentes que

contiene el archivo fuente y las relaciones
entre ellos.
„ Se organiza en cuatro carpetas
„ IU, para componentes y contenedores de la interfaz de usuario
„ Menú, para menús y elementos de menú
„ Acceso a datos, para componentes de acceso a datos
„ Otros, para otros componentes como por ejemplo cuadros de diálogo

Comunicación Persona-Máquina 31 A. Belén Martínez

Árbol de Componentes (II)

Comunicación Persona-Máquina 32 A. Belén Martínez

16
 Componentes Básicos
Implicados en la construcción de una aplicación con IGU

„ Con Swing una ventana es representada por un contenedor de alto nivel

(normalmente JFrame)
„ Sin embargo, los componentes no se añaden directamente sobre dicho
contenedor
„ Es necesario un panel(JPanel), llamado panel de contenido, sobre el que
se sitúan los componentes
„ Este panel está contenido en el JFrame.
Componentes
Panel de contenido
JFrame

JPanel

JButton1 JButton2 JTextArea1

....

Comunicación Persona-Máquina 33 A. Belén Martínez

Esquema de Trabajo con JBuilder

Para la construcción de una aplicación con IGU

AplicacionEjemplo.java MarcoEjemplo.java

•Es la clase de inicio

de la aplicación
•Es un JFrame
•Contiene el método main()
•Es una clase de la IU
de la aplicación
•Representa el contenedor principal
•En tiempo de ejecución crea una
de la IU
instancia de la clase de la interfaz
de usuario de la aplicación

Comunicación Persona-Máquina 34 A. Belén Martínez

17
 MarcoEjemplo.java Contenedor
import java.awt.*; principal de la
import java.awt.event.*;
import javax.swing.*;
IU

public class MarcoEjemplo extends JFrame {

private JPanel contentPane;
private JButton jBoton1 = new JButton();
Panel sobre el que
//Construir el marco se sitúan los
public MarcoEjemplo() {
Componente enableEvents(AWTEvent.WINDOW_EVENT_MASK); componentes
insertado: try {
JButton jbInit();
}
catch(Exception e) {
e.printStackTrace();
}
}
//Inicialización de componentes
private void jbInit() throws Exception { Agregación del
...... botón (jBoton1)
jBoton1.setText("Colorear");
contentPane.add(jBoton1, null); en el panel
} (contentPane)
Comunicación Persona-Máquina 35 A. Belén Martínez

AplicaciónEjemplo.java
package ejemplo;
import javax.swing.UIManager;
import java.awt.*; Crea una
instancia de la
public class AplicacionEjemplo {
..... clase que
representa la
public AplicacionEjemplo() {
MarcoEjemplo frame = new MarcoEjemplo();
interfaz de
usuario
if (packFrame) {
frame.pack();
}
else {
frame.validate();
}
..}
.....
//Método Main
public static void main(String[] args) {
.......
new AplicacionEjemplo();
}
}
Comunicación Persona-Máquina A. Belén Martínez
36

18