Introducción a las
Interfaces Gráficas
d
de Usuario en Java
i
Ingeniería del Software II
Curso 2008/2009
Sergio Ilarri Artigas
Sergio Ilarri Artigas
[email protected]
Parte del material está extraído de JavaSun y Java Tutorial:
Copyright 1994-2007 Sun Microsystems, Inc. All Rights Reserved.
Índice
Swing:
Swing vs. AWT
Ejemplos: HelloWorld SwingApplication
Ejemplos: HelloWorld, SwingApplication
Manejadores de eventos
Ot
L&F
Otros: Layout Managers, Borders, L&F
pp
Introducción
Ciclo de vida
Ciclo de vida
Restricciones de seguridad
B d
Applets:
L
t M
S iSwing
AWT vs. Swing (I)
AWT(AbstractWindow Toolkit)
abstrae de la
plataforma
Desde Java 1.0
Facilidades básicas para crear GUIs
Facilidades básicas para crear GUIs
Facilidades básicas para gráficos
d l SO
Sobre el sistema GUI nativo del SO
En Java 1.1 se extendió para permitir
GUI
S b
l
i t
ti
Botón Windows
Botón Macintosh
componentes gráficos ligeros (lightweight)
No asociados a componentes GUI nativos
AWT vs. Swing (II)
Swing
Parte de Java 2 y como extensión en Java 1.1
Extensión de AWT
Extensión de AWT
Todos sus componentes son ligeros:
ió
Responsables de su propia representación gráfica
Más portable (100% Java, sin componentes nativos)
Pl bl L k dF l
Pluggable Look and Feel
áfi
t
R
bl
d
i
Mucho más completo y potente
Arquitectura MVC (I)
Model-View-Controller
División de una aplicación visual en 3 partes:
Modelo: representa los datos de la aplicación
Modelo: representa los datos de la aplicación
Vista: es la representación visual de los datos
Controlador: recibe entradas del usuario a través
Controlador: recibe entradas del usuario a través
de la vista y actualiza el modelo en consecuencia
Modelo
Vista
Controlador
Arquitectura MVC (II)
El primer prototipo de Swing seguía ese estilo
Pero luego se determinó que la vista y el
p
controlador requerían un fuerte acoplamiento
q
Separable model architecture (quasi-MVC)
UIObject= UIdelegate= delegateobject
UI Object= UI delegate = delegate object
Vista + controlador
p
Componente
Modelo
Objeto
UI
Gestor de UI
http://java.sun.com/products/jfc/tsc/articles/architecture/
Paquetes Swing en Java 1.4
javax accessibility
javax.accessibility
javax swing plaf
javax.swing.plaf
javax swing text html
javax.swing.text.html
javax.swing
javax.swing.plaf.basic
javax.swing.text.parser
javax.swing.border
javax.swing.plaf.metal
javax.swing.text.rtf
javax.swing.colorchooser
javax.swing.plaf.multi
javax.swing.tree
javax.swing.event
javax.swing.table
javax.swing.undo
javax.swing.filechooser
javax.swing.text
java.awt, java.awt.event
Ejemplo: HelloWorld
import javax.swing.*;
public class HelloWorldSwing {
private static void createAndShowGUI() {
private static void createAndShowGUI() {
Top-level
container
(otros: JDialog,
JApplet)
tD f
ltCl
JFrame.setDefaultLookAndFeelDecorated(true);
JFrame frame = new JFrame("HelloWorldSwing");
f
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label);
f
frame.pack();
frame.setVisible(true);
EXIT ON CLOSE)
O
ti
(JF
k()
}
public static void main(String[] args) {
{
javax.swing.SwingUtilities.invokeLater(new Runnable() {
public void run() {createAndShowGUI();}
});
}
}
Evita problemas
(thread-safe)
bl
Se añade
al content
al content
pane
Ejemplo: SwingApplication (I)
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
p
j
Implementa manejadores de eventos
action, luego puede registrarse como
listener de un objeto gráfico
listener de un objeto gráfico
public class SwingApplication implements ActionListener {
p
g pp
{
p
private static String labelPrefix =
Number of button clicks: ;
"Number of button clicks: ";
private int numClicks = 0;
final JLabel label = new JLabel(labelPrefix + "0 ");
...
}
Ejemplo: SwingApplication (II)
public Component createComponents() {
JButton button = new JButton("I'm a Swing button!");
button.setMnemonic(KeyEvent.VK_I);
button.addActionListener(this);
button.addActionListener(this);
label.setLabelFor(button);
JPanel pane = new JPanel(new GridLayout(0, 1));
pane add(button)
pane.add(button);
pane.add(label);
pane.setBorder(BorderFactory.createEmptyBorder(30, 30, 10, 30);
return pane;
Este objeto va a escuchar
eventos actiondel botón
ó
Píxels:
top, left,
right,
bottom
}
JPanel: contenedor para agrupar componentes
GridLayout: layout manager
E tB d
ió
EmptyBorder: crear “hueco”/separación
”/
“h
Ejemplo: SwingApplication (III)
public void actionPerformed(ActionEvent e) {
Implementa el
interface
Ati Lit
ActionListener
numClicks++;
label.setText(labelPrefix + numClicks);
}
Cuando se haga clicken el botón
Hay un único event-dispatching thread
(para el tratamiento de eventos y repintado).
(p
)
Por tanto, ¡hay que ser rápidos!
p
y
Ejemplo: SwingApplication (IV)
private static void createAndShowGUI() {
JFrame.setDefaultLookAndFeelDecorated(true);
JFrame frame = new JFrame("SwingApplication");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
SwingApplication app = new SwingApplication();
Component contents = app.createComponents();
frame.getContentPane().add(contents, BorderLayout.CENTER);
frame.pack();
f
frame.setVisible(true);
tVi ibl (t
()
)
}
public static void main(String[] args) {
bli
javax.swing.SwingUtilities.invokeLater(new Runnable() {
i (St i
t ti
id
[]
) {
public void run() {createAndShowGUI();}
})});
}
g
Algunos Manejadores de
Eventos
j
Acción que desencadena el evento
b
l
h
l
El usuario hace click en un botón, presiona Enter al escribir texto en un campo,
o selecciona una opción de menú
b ó
l k
El usuario cierra una ventana
El usuario presiona un botón del ratón cuando el cursor está sobre un
El usuario presiona un botón del ratón cuando el cursor está sobre un
componente
El usuario mueve el ratón sobre un componente
Un componente se hace visible
Un componente se hace visible
Un componente obtiene el foco del teclado
Cambia la opción seleccionada en una lista
Manejador
ActionListener
WindowListener
MouseListener
MouseMotionListener
ComponentListener
ComponentListener
FocusListener
ListSelectionListener
Cambia cualquier propiedad de un componente (ej.: el texto de una etiqueta)
PropertyChangeListener
Hay muchos ejemplos de distintos tipos de manejadores de eventos en:
http://java.sun.com/docs/books/tutorial/uiswing/events/intro.html
Layout Managers (I)
java.awt
javax.swing
5 áreas: top, bottom, right, left, center
El área centeracapara todo el espacio sobrante
Por defecto en los content panep
(diálogos, frames y applets)
-Sitúa en una rejilla
-Las filas y columnas pueden
tener diferentes clturas y
anchuras
-Un componente puede
ocupar varias celdas
1 única fila
o columna
Layout Managers (II)
1 única fila
Si se llena, empieza otra
Por defecto en un JPanel
Contiene componentes distintos dependiendo de la selección
Layout Managers (III)
Componentes de igual tamaño
Componentes de igual tamaño
Rejilla de filas y columnas
Permite especificar relaciones (distancias)
entre componentes
Layout Managers (VI)
¡No es recomendable utilizar
¡No es recomendable utilizar
posicionamiento absoluto!
Componentes (I)
h
l
http://java.sun.com/docs/books/tutorial/uiswing/components/components.html
Guía visual e interactiva de los componentes de Swing:
/
/b k /
//j
h
/d
i l/ i
i
/
Los componentes Jxxx, menos los contenedores de nivel superior, heredan de:
javax.swing.JComponent
javax.swing.JComponent
1) Contenedores de nivel superior
1) Contenedores de nivel superior
Componentes (II)
2) Contenedores de propósito general
Componentes (III)
3) Contenedores de propósito especial
Componentes (IV)
4) Controles básicos
Componentes (V)
5) Elementos de información no editables
Componentes (VI)
6) Elementos de información interactivos
Componentes (VII): Texto
p
Componentes (VIII):
Nombres (I)
(
)
Botones (javax.swing.JButton)
Casillas de verificación (javax.swing.JCheckBox)
Campos de texto de 1 línea
(javax.swing.JTextField)
Campos de texto y edición de varias líneas
(j
)
(javax.swing.JTextArea)
JT
A
i
Etiquetas (javax.swing.JLabel)
Listas (javax.swing.JList)
Menús contextuales (javax.swing.Popup)
p
Componentes (IX):
Nombres (II)
)
(
Barras de desplazamiento (javax.swing.JScrollBar)
Sliders (javax.swing.JSlider)
Áreas de dibujo (java.awt.Canvas)
Menus (javax.swing.JMenu,javax.swing.JMenuBar
javax.swing.JMenuItem,
)
javax.swing.JCheckBoxMenuItem)
j
JCh kB M
Contenedores (javax.swing.JPanel,
b l
j
)
javax.swing.JWindow and its subclasses)
…
JWi d
d it
I
i
i
Algunos Tipos de Borders (I)
Elementos clave: clase BorderFactoryy método setBorderde JComponent
Paquete: javax.swing.border
Algunos Tipos de Borders (II)
Algunos Look and Feels
Ejemplo: Dibujar Círculo (I)
package is2.silarri;
import java awt *
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class CircleDrawer extends JFrame {
... /* Desarrollado en las dos transparencias siguientes */
}}
class PanelWithCircle extends JPanel {
public void paintComponent(Graphics g)
{
super.pa
Comentarios de: Introducción a las Interfaces Gráficas de Usuario en Java (0)
No hay comentarios