PDF de programación - LPS: Interfaces gráficas de usuario con Swing

Federico Peinado
www.federicopeinado.es

Depto. de Ingeniería del Software e
Inteligencia Artificial
disia.fdi.ucm.es

Facultad de Informática
www.fdi.ucm.es

Universidad Complutense de Madrid
www.ucm.es

 Bibliotecas para programar interfaces gráficas de usuario (GUIs) en Java:

• Abstract Windowing Toolkit (AWT), la primera que ofreció el lenguaje Java
• Swing, muy popular y también integrada en Java
• Standard Widget Toolkit (SWT), creada por IBM y usado en Eclipse

• JavaFX, orientado a la web como Flash o Silverlight

www.eclipse.org/swt

javafx.com/

• XML User Interface Language (XLU)

developer.mozilla.org/En/XUL

 Herramientas WYSIWYG (what you see is what you get) para crear GUIs:

• NetBeans Swing GUI Builder (y ahora también para JavaFX)

http://netbeans.org/

• Eclipse WindowBuilder (para Swing, SWT, RCP, XWT y GWT… ¡muy prometedor!)

www.eclipse.org/windowbuilder/

• JavaServer Faces, orientado a la web

www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.html

• …

• …

Laboratorio de Programación de Sistemas – Swing

2

Abstract Windowing Toolkit (AWT)
 “Look & Feel” dependiente de la plataforma

 La apariencia de ventanas, menús, etc. es distinta en

Windows, Mac, Motif, y otros sistemas

 Funcionalidad independiente de la plataforma
 Básico y experimental
 Único estándar que ofrecía Java hasta la versión 1.1.5

Laboratorio de Programación de Sistemas – Swing

3

Swing ( desde JDK 1.1.5)

 “Look & Feel” y funcionalidad independiente de la

plataforma (“Java Look & Feel”)
 Los menús y controles son como los de las aplicaciones

“nativas“

 A las aplicaciones se les puede dar una apariencia en función

de la plataforma específica
 Nuevas funcionalidades

 API de accesibilidad para personas con necesidades

específicas

Laboratorio de Programación de Sistemas – Swing

4

 Composición de la interfaz gráfica de la

aplicación
• Elección de un contenedor (ventana) en la que se incluyen el resto de

los elementos gráficos de interacción

• Diseño del interfaz gráfico añadiendo componentes gráficos de

interacción (p.e. Botones, etiquetas, menús, ...)

• Establecer la ubicación de los elementos manualmente o mediante un

LayoutManager
 Un Layout Manager gestiona la organización de los componentes gráficos

de la interfaz

 Establecer los gestores de eventos para

responder a las interacciones de los usuarios
con la interfaz gráfica

 Visualizar la interfaz gráfica

Laboratorio de Programación de Sistemas – Swing

5

Tres elementos esenciales en la interfaz gráfica

Contenendores (containers)
Contenendores
(containers)

-- agrupan el resto de los elementos gráficos

(e.g. ventana principal de la aplicacion)

File Edit Help

Componentes gráficos
Componentes
gráficos
-- elementos gráficos de interacción (e.g.,

botones)

Gestores
Gestores de de disposición
disposición
((LayoutManagers
LayoutManagers))
-- algoritmo utilizado para organizar los
elementos gráficos dentro del contenedor
Laboratorio de Programación de Sistemas – Swing

Boton

o
f
f
s
e
t

offset

6

 Contenedores

• Contienen otros componentes (o contenedores)

 Estos componentes se tienen que añadir al contenedor y para
 Mediante un gestor de diseño controlan la disposición
 Ejemplo: JPanel, JFrame, JApplet

ciertas operaciones se pueden tratar como un todo
(layout) de estos componentes en la pantalla

 Lienzo (clase Canvas)
 Componentes de interfaz de usuario

• Superficie simple de dibujo

• botones, listas, menús, casillas de verificación, campos

de texto, etc.

 Componentes de construcción de ventanas

• ventanas, marcos, barras de menús, cuadros de

diálogo

Laboratorio de Programación de Sistemas – Swing

7

Jerarquía de clases

Object

Graphics

Component

TextComponent

Container

TextField

TextArea

Window

Panel

ScrollPane

Frame Dialog

java.applet.

Applet

FileDialog

Button

Canvas

Checkbox

Choice

Label

List

Scrollbar

Laboratorio de Programación de Sistemas – Swing

8

Laboratorio de Programación de Sistemas – Swing

9

Laboratorio de Programación de Sistemas – Swing

10

import javax.swing.*;
public class GUISimple extends JFrame {

public GUISimple (){

setSize(200, 100);
setVisible(true);

}
public static void main(String args[]) {

GUISimple ventana = new GUISimple();
ventana.setTitle("ventana tipo frame");

}

}

Laboratorio de Programación de Sistemas – Swing

11

 Contenedores de alto nivel
 Contenedores intermedios
 Componentes atómicos

Ventana (JFrame)

Panel raíz

Panel de contenido

Panel (JPanel)

Etiqueta (JLabel)

Botón Hola (JButton)

Botón Adios (JButton)

Laboratorio de Programación de Sistemas – Swing

12

Al pulsar los botones, aparece texto en el

cuadro blanco

Laboratorio de Programación de Sistemas – Swing

13

Loro (JFrame)

Panel Principal
(JSplitPane)

Botonera (JPanel)

Eco (JTextField)

Hola (JButon)

Adios (JButon)

Laboratorio de Programación de Sistemas – Swing

14

 java.awt.Component

• Esta clase abstracta define la funcionalidad básica de todos los

componentes gráficos en Java

• Proporciona, entre otros, los métodos de registro y eliminación de

oyentes

 java.awt.Container

• Clase abstracta que permite agrupar uno o varios componentes de

forma que se puedan tratar como una unidad.

• Proporciona métodos para añadir y eliminar componentes o para
definir el tipo de presentación que se realiza de los componentes
en la pantalla (mediante layout Managers)

 javax.swing.JComponent

• Es la clase base de casi todos los componentes de interacción que

incorpora Swing excepto los contenedores de alto nivel (p.e.
JFrame).

Laboratorio de Programación de Sistemas – Swing

15

 javax.swing.JFrame

• Habitualmente la clase JFrame se emplea para crear la ventana

principal de una aplicación en Swing

 javax.swing.JDialog

• Genera ventanas secundarias de interacción con el usuario

 Cuadros de diálogo configurables y modificables

• Son modales: el usuario no puede interactuar con otra ventana

hasta que no cierre la actual

Container

Window

Dialog

Frame

JWindow

JDialog

JFrame

Laboratorio de Programación de Sistemas – Swing

16

 La clase JFrame proporciona una ventana principal de aplicación
con su funcionalidad normal (p.e. borde, título, menús) y un panel
de contenido.

 Los contenidos se añaden en el panel de contenidos (content pane)

accesible a través del método getContentPane (por defecto, un objeto
de tipo JPane, aunque puede cambiarse con setContentPane).

 La barra de menú puede fijarse con setJMenuBar.

Laboratorio de Programación de Sistemas – Swing

17

 La clase JDialog es la clase raíz de las

ventanas secundarias que implementan
cuadros de diálogo en Swing.
• dependen de una ventana principal (normalmente

JFrame) y si la ventana principal se cierra, se
maximiza o minimiza las ventanas secundarias
realizan la misma operación de forma automática.

 Las ventanas modales bloquean la interacción

del usuario con otras ventanas.
• Se utilizan sólo cuando hay que garantizar que el
usuario recibe un mensaje o proporciona una
información que es necesaria

Laboratorio de Programación de Sistemas – Swing

18

Tipos de cuadros de dialogo más

habituales

relevante

 Message para informar al usuario sobre algún hecho

 Confirm para realizar una pregunta al usuario con las
posibilidades básicas de respuesta de si, no o cancelar.

 Input para solicitar una entrada del usuario
 Option permite crear una ventana personalizada de

cualquiera de los tipos anteriores

Todos los cuadros de diálogo que

implementa JOptionPane son modales

Laboratorio de Programación de Sistemas – Swing

19

JOptionPane.showMessageDialog(this, // La ventana
padre.
"Error deconocido!: Lo llevas muy mal!", //El
mensaje.
"Error",
// El título de la ventana de diálogo.
JOptionPane.ERROR_MESSAGE // El tipo de mensaje

);
JOptionPane.showMessageDialog(this,
"Te informo de que lo llevas fatal", "Info",
JOptionPane.INFORMATION_MESSAGE);

JOptionPane.showMessageDialog(this,
"Te aviso de que lo llevas fatal", "Aviso",
JOptionPane.WARNING_MESSAGE);
JOptionPane.showMessageDialog(this,

Este mensaje es para tí, majete!", "Mensaje",

JOptionPane.PLAIN_MESSAGE);

Laboratorio de Programación de Sistemas – Swing

20

int seleccionada =

JOptionPane.showConfirmDialog(this,
"Lo aceptas?", "Aviso",
JOptionPane.YES_NO_OPTION, // Configuración del mensaje
JOptionPane.INFORMATION_MESSAGE);
case JOptionPane.YES_OPTION: ... // tratar SI
case JOptionPane.NO_OPTION: .. // tratar NO
case JOptionPane.CLOSED_OPTION: .. // tratar ventana cerrada

switch(seleccionada) {

}
int seleccionada =

JOptionPane.showConfirmDialog(this,

"Lo aceptas?","Aviso",
JOptionPane.YES_NO_CANCEL_OPTION,
JOptionPane.WARNING_MESSAGE);

... // los posibles valores devueltos son los anteriores y
... // JOptionPane.CANCEL_OPTION
String nombre = JOptionPane.showInputDialog(this,

"Cómo te llamas, majete?",
"Petición", JOptionPane.QUESTION_MESSAGE

);
// ... procesar entrada

Laboratorio de Programación de Sistemas – Swing

21

"No se que hacer"};

// cuadro de opción personalizado
Object[] textoOpciones = {"Si adelante", "Ahora no",
int opcion = JOptionPane.showOptionDialog(ventana,
"¿ Desea realizar la operación ahora ?",
"Mensaje de confirmación",
JOptionPane.YES_NO_CANCEL_OPTION,
JOptionPane.QUESTION_MESSAGE,
null, //utilizar el icono predeterminado
textoOpciones,
textoOpciones[0]); //botón predeterminado

}

Laboratorio de Programación de Sistemas – Swing

22

if (JOptionPane.showConfirmDialog(this, panel

,"Introduzca datos"
,JOptionPane.OK_CANCEL_OPTION
,JOptionPane.PLAIN_MESSAGE)

== JOptionPane.OK_OPTION) {
String nombre = campoNombre.getText();
String apellidos = campoApellidos.getText();
int numPer=Integer.parseInt(campoNP.getText());

}

Laboratorio de Programación de Sistemas – Swing

23

import javax.swing.*;
// se crea el selector de ficheros
JFileChooser selector = new JFileChooser();
// solo