Lectura: Deitel Paul, Deitel Harvey. “COMO PROGRAMAR EN JAVA”- Cap.

11
Java GUI
La librería Swing
//java.sun.com/docs/books/tutorial/uiswing
//programacion.com/java/tutorial/swing/
Programación conducida por eventos

q En programas tradicionales (basados en texto):

§ el programa controla el flujo de la ejecución
§ el programa controla la secuencia de las entradas
q § Los programas con GUI son “event-driven”
§ la secuencia de las entradas controlan el flujo de la ejecución
§ el sistema invoca código del usuario
Programación conducida por eventos

Código
del
sistema

Su código
Generación de eventos

1. Las acciones tales como: pulsar un botón, mover el mouse,

etc. son reconocidas e identificadas por los sistemas
operativos (OS) o la JVM.
2. Por cada acción el OS/JVM determinan cuál de los programas
que se están ejecutando recibirán la señal (de la acción).
3. Las señales que la aplicaciones reciben del OS/JVM como
resultado de una acción son llamadas eventos.
Generación de eventos

GUI

Acciones Mouse, Teclado,etc.

Sistema Operativo

JAVA API /Windows

Eventos

Métodos y handlers Métodos y handlers

Aplicación 1 Aplicación 2
Manejo de eventos

q Una aplicación responde a los eventos ejecutando código adecuado

para cada tipo particular de eventos.
q No todos los eventos necesitan ser tenidos en cuenta por una
aplicación. Por ejemplo: Una aplicación para dibujar puede estar
interesada sólo en movimientos del mouse.
q Como diseñador de una aplicación manejada por eventos, deberá
escribir clases/métodos para manejar los eventos relevantes.
Java GUI

q Java provee dos librerías para crear GUIs:

§ Java AWT (Abstract Window Toolkit)
§ Java Foundation Classes (JFC o Swing), a partir
de Java2
AWT Swing

q Java Foundation Classes (JFC) es una Drag & Drop

colección muy grande de software.
2D API
q AWT y Swing son las dos grandes familias JFC APIs
para desarrollo de GUI en el entorno Java. Accessibility
Java Foundation Classes
Swing
q Implementada sin usar código nativo (100% Java), con lo cual la GUI
se verá de la misma forma en distintas plataformas.
q Basada en la arquitectura MVC.
q Ofrece una amplia variedad de Look & Feel.
q Los componentes de Swing continuarán siendo mejorados en el
futuro.
AWT y Swing

q Los componentes de Swing tienen nombres que comienzan con J.

§ Ejemplo: Button en AWT es JButton en Swing
q Los componentes de AWT están en el paquete java.awt, los de
Swing en javax.swing.

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
Paquetes JFC/Swing

• javax.swing
• javax.swing.plaf • javax.swing.table
• javax.swing.plaf.basic • javax.swing.tree
• javax.swing.plaf.metal • javax.swing.border
• javax.swing.plaf.multi • javax.swing.colorchooser
• javax.swing.filechooser

• javax.swing.text
• javax.swing.text.html
• javax.swing.text.html.parser
• javax.swing.event
• javax.swing.text.rtf • javax.swing.undo
Paquetes JFC/Swing
Componentes,
Control del incluyendo
“Look & Feel” componentes
de Swing complejos

Widgets basados en texto

Paquetes nuevos de eventos
( incluyendo html/rtf )
Aplicaciones basadas en GUI

q El desarrollo de una aplicación basada en GUI requiere la

comprensión de:
§ Estructura de la jerarquía de herencia, que define el comportamiento y
atributos de los componentes en la GUI de la aplicación.
§ Estructura de la jerarquía de contenedores, que define cómo se disponen
todos los componentes en la GUI de la aplicación.
§ Manejo de eventos.
Jerarquía de Herencia
Herencia “Heavy”

java.awt.Panel java.awt.Window

java.applet.Applet java.awt.Dialog

JApplet JDialog JWindow JFrame

Contenedores en Swing
java.awt.Container

JMenu

JMenuBar
JComponent

JLayeredPane
JRootPane
JPanel

JTabbedPane
JDesktopPane

JSplitPane
JPopupMenu JInternalFrame JScrollPane

JOptionPane JToolbar
Similar a AWT
Nuevos de
Swing
Componentes de Swing

q La clase Component (y sus subclases) proveen soporte para manejo

de eventos, cambio del tamaño de un componente, control de color
y fuentes, pintado.
q Un componente es un objeto de una subclase concreta.
q Se distinguen dos clases de componentes:
§ Componentes de control de la GUI: la interacción de la GUI con el usuario se
realiza a través de ellos.
§ Contenedores: contienen otros componentes (u otros contenedores).
Contenedores

q Anidamiento de componentes (Jerarquía de contenedores en

contraste con la Jerarquía de herencia). Cada programa Swing
contiene al menos una.
q Usan un Layout Manager para determinar cómo se disponen los
componentes en los contenedores.
q Swing provee 4 contenedores de alto nivel (ventana base de la GUI):
JFrame, JApplet, JDialog y JWindow.
q La jerarquía está compuesta de diferentes capas. Cada contenedor
de alto nivel contiene un contenedor intermedio conocido como
“content pane ”. En casi todos los programas no es necesario conocer
qué hay entre el contenedor de alto nivel y el content pane.
Jerarquía de contenedores
Jerarquía de contenedores

q La apariencia de una GUI está determinada por:

§ La jerarquía de contenedores
§ El Layout Manager de cada contenedor
§ Las propiedades de los componentes individuales

q Todos estos ítems trabajan en conjunto para determinar el efecto

visual final.
Estructura de un JFrame
Estructura de un JFrame
Root Panes

q “Añadido” en forma invisible al contenedor de alto nivel.

q Creado por Swing cuando instancia un contenedor de alto nivel.
q Maneja prácticamente todo entre el contenedor de alto nivel y los
componentes atómicos.
q Tener en cuenta si necesita interceptar clicks del mouse o pintar
sobre varios componentes.
q Es una instancia de JLayeredPane la que contiene la barra de menús
y el content pane.
Content Panes

q Usualmente es un JPanel.
q En la mayoría de las aplicaciones Swing contiene casi todo, excepto
la barra de menú.
q Debe ser creado explícitamente.
Layered Panes

q Provisto por root pane pero también puede crearse.

q Contenedor con profundidad, tal que componentes que se
superponen (ej: popup menus) pueden aparecer unos encima de
otros (z-buffering).
Glass panes

q Útil para pintar o interceptar eventos (por ejemplo: bloquear todos

los eventos del mouse) en un área que contenga uno o más
componente
Contenedores de alto nivel

Applet Dialog Frame

Contenedores generales

Panel Scroll Pane SplitPane

TabbedPane Toolbar
Contenedores especiales

InternalFrame LayeredPane

Root Pane
JFrame
Algunos métodos de JFrame

q Para añadir componentes al content pane:

myFrameInstance.getContentPane().add(myComponent);

Usual Requerido por Ej.:

“this” Instancias de “myLabel”
JFrame, JDialog
y JInternalFrame
Algunos métodos de JFrame

q Para construir una ventana con un título y mostrarla:

JFrame theWindow = new JFrame( "Graffiti" );
theWindow.show( );
//idem theWindow.setVisible(true);

q Para determinar su tamaño:

theWindow.setJMenuBar(cyanMenuBar);
theWindow.setSize( 220, 100 );//o mejor
theWindow.pack();
Nueva funcionalidad de JFrame

q setDefaultCloseOperation(int) es la más importante:

§ DO_NOTHING_ON_CLOSE
§ HIDE_ON_CLOSE (default) oculta el frame cuando el usuario lo cierra pero no
se deshace de los recursos del sistema asociados (puedo volver a mostrar).

§ DISPOSE_ON_CLOSE oculta el frame y llama al método dispose(), para

liberar recursos.
§ EXIT_ON_CLOSE, cierra la aplicación (System.exit(0))
Hello World en Swing
import javax.swing.*;
public class HelloWorldSwing {
public static void main(String[] args) {
// crear un nuevo frame
JFrame frame = new JFrame("HelloWorldSwing");
// crear una etiqueta y añadir al frame
JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label);
//especifica la operación de cierre de la ventana
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// muestra el frame en pantalla
frame.pack();
frame.setVisible(true);
}
}
Componentes atómicos

q Componentes de tipo JPanel almacenan otros objetos de la GUI tales como:

botones, etiquetas, campos de texto, etc.
q Estos objetos gráficos son considerados componentes atómicos, puesto que no
pueden almacenar otros objetos de la GUI.
Componentes atómicos básicos

Menu Combo Box List

Slider Spinner Text Fields Buttons

Componentes atómicos no editables

Label Progress Bar Tool tip

Otros componentes atómicos

Color Chooser File Chooser

Table Text Tree

API de los componentes GUI

q Componente GUI en Java = class

§ Propiedades
JButton
§ Métodos

§ Eventos
Componentes GUI
1. Crear
§ Instanciar objeto: b = new JButton(“press me”);
2. Configurar
§ Propiedades: b.text = “press me”; (evitar en Java)
§ Métodos:
b2 = new JButton("Middle button", middleButtonIcon)
b2.setVerticalTextPosition(AbstractButton.BOTTOM);
b2.setHorizontalTextPosition(AbstractButton.CENTER);
b2.setMnemonic(KeyEvent.VK_M);
b2.setToolTipText("This middle button does nothing “ + "when you click it.");
3. Añadir
panel.add(b);
4. Manejar eventos
Características especiales

q Los componentes Swing ofrecen características especiales:

Tool tip Cuando el cursor del mouse se detiene sobre

un componente se muestra una línea de texto.
Mnemonic Se ejecuta una acción como resultado del
pulsado de una combinación de teclas.
Disable Un componente puede ser explícitamente
habilitado o deshabilitado.
Border Rodea un componente con un borde.
Características especiales

q Tool tips
JButton button = new JButton ("Compute");
button.setToolTipText ("Calculate size.");

q Mnemonic
button.setMnemonic ("C");

q Disable
JButton button = new JButton (“Do It”);
button.setEnabled (false);
Características especiales

q Bordes
JPanel myPanel = new JPanel();
Border myBorder = BorderFactory.createEtchedBorder();
myPanel.setBorder(myBorder);

w Empty w Titled
w Line w Matte
w Etched w Compound
w Bevel
Bordes
Anatomía de una aplicación GUI

JFrame
JFrame
JPanel contenedores

JPanel
JButton

JButton JLabel
JLabel
Estructura interna

GUI
Uso de un componente GUI

1. Crearlo
2. Configurarlo orden
importante
3. Añadir hijo (si es contenedor)
4. Añadir al padre (si no es JFrame)
5. Manejar los eventos
Construcción bottom up
Listener
§ Crear:
w Frame
JLabel JButton
w Panel
w Componentes
w Listener JPanel

§ Añadir (bottom up)

w Listeners a los componentes
w Componentes al panel JFrame
w Panel al Frame
Window Layout

contenedores

componentes
Window Layout

q Cada contenedor maneja la disposición de sus componentes.

q El programador sólo añade componentes, el contenedor se encarga
de la disposición de los mismos.
q El contenedor usa un Layout Manager para manejar la disposición
de los componentes en el mismo.
q Están disponibles diferentes Layout Managers.
q El layout puede ser determinado especificando Layout Managers
para los contenedores.
Layout Managers

q Hay varios Layout Managers predefinidos en:

§ FlowLayout (en java.awt)
§ BorderLayout (en java.awt)
§ CardLayout (en java.awt)
§ GridLayout (en java.awt)
§ GridBagLayout (en java.awt)
§ BoxLayout (en javax.swing)
§ OverlayLayout (en javax.swing)
Layout Managers (LM)

q Cada contenedor tiene un Layout Manager por defecto, aunque se

puede establecer otro LM para el mismo, de forma explícita. Para
anular el LM por defecto se usa el método setLayout (para
contenedores de alto nivel se usa getContentPane().setLayout().
q El Layout Manager intenta ajustar la disposición de los componentes
en el contenedor cuando se añade un nuevo componente o cuando
el contenedor cambia de tamaño.
q Puede crear su propio LM.
Layout Managers de AWT
null FlowLayout GridLayout

ninguno,
Left to right,
programador
Top to bottom
setea x,y,w,h

BorderLayout CardLayout GridBagLayout

n

w e JButton
c One at a time

s
Null Layout

q setLayout(null);
q El programador es responsable de establecer el tamaño y posición
de cada componente (setBounds(x,y,w,h))
Combinaciones

JButton JButton

JTextArea
Combinaciones
JButton JButton
JFrame

n
JPanel: FlowLayout
JPanel: BorderLayout

JTextArea
Tareas comunes del LM

q Prestar atención a indicaciones de un componente:

§ de tamaño:

setMinimumSize(Dimension), setPreferredSize(..), setMaximumSize(..)

§ de alineamiento:
setAllignmentX(float), setAlignmentY(float)
q Poner espacios entre componentes:
§ el LM puede especificar hgap y vgap
§ poner componentes invisibles
§ bordes vacíos: para componentes que no tienen bordes por default, por ejemplo
JPanel
Estructura del Layout JPanel(BoxLayout(V))

label

rigidArea(0,5) Center

JScrollPane

South

HorizontalGlue JButton JButton

JPanel(BoxLayout(H))
JPanel (BorderLayout) rigidArea(10,0)
FlowLayout

Container contentPane = getContentPane();

contentPane.setLayout(new FlowLayout());
contentPane.add(new JButton("Button 1"));

q Es el LM por defecto de JPanel.

q Dispone los componentes de izquierda a derecha a medida que se añaden,
comenzando en filas nuevas si es necesario.
FlowLayout

q Cada fila de componentes está centrada por defecto, pero puede

alinearse por derecha o izquierda.
q Pueden establecerse explícitamente espacios verticales y/o
horizontales entre componentes.
q Usar sólo en aplicaciones muy simples (oculta componentes que no
entran).
GridLayout

Container contentPane = getContentPane();

contentPane.setLayout(new GridLayout(0,2));//tantas filas como necesita
contentPane.add(new JButton("Button 1"));

q Dispone los componentes en forma de matriz, con la cantidad de filas y columnas

especificadas.
q Todas las filas tienen el mismo alto y todas las columnas tienen el mismo ancho. El
tamaño de cada celda es determinado por el tamaño del contenedor. Permite
establecer vgap y hgap.
q Usar si es seguro que los componentes tendrán igual tamaño.
BorderLayout

Container contentPane = getContentPane();

contentPane.add(new JButton("Button 1 (NORTH)"),BorderLayout.NORTH);
//no hace falta setear el LM

q Es el LM por defecto de los content pane (contenedor principal en

JFrame, JDialog y JApplet).
q Define 5 áreas en las cuales se pueden añadir los componentes.
BorderLayout

q Si se agranda la ventana, la parte central toma tanto espacio como le

sea posible, las otras 4 áreas se expanden sólo lo necesario para
llenar el espacio disponible.
q Un contenedor, generalmente usa 1 o 2 de las 5 áreas de
BorderLayout. Por ejemplo: centro o centro y sur. Se puede
especificar vgap y hgap.
CardLayout

Jpanel cards = new JPanel();

cards.setLayout(new CardLayout());
cards.add(p1, "JPanel with JButtons");

q Permite implementar un área que contiene distintos componentes en

distintos instantes de tiempo (naipes).
q Normalmente controlado por una Combo Box, el estado de ésta
determina cuál grupo de componentes muestra el LM.
GridBagLayout

q Es el LM más sofisticado y
flexible. Alinea componentes
en una matriz de celdas
permitiendo a algunos
componentes abarcar más de
una celda. Container contentPane = getContentPane();
GridBagLayout gridbag = new GridBagLayout();
GridBagConstraints c = new GridBagConstraints();
contentPane.setLayout(gridbag);
c.fill = GridBagConstraints.HORIZONTAL;
Jbutton button = new JButton("Button 1");
c.weightx = 0.5; c.gridx = 0; c.gridy = 0;
gridbag.setConstraints(button, c);
BoxLayout

q Pone los componentes en

una sola fila o una sola
columna
q Respeta los tamaños
máximos requeridos de los
componentes y el
alineamiento X/Y.
JPanel buttonPane = new JPanel();
buttonPane.setLayout(new BoxLayout(buttonPane, BoxLayout.X_AXIS));
buttonPane.setBorder(BorderFactory.createEmptyBorder(0, 10, 10, 10));
buttonPane.add(Box.createHorizontalGlue());
buttonPane.add(cancelButton);
buttonPane.add(Box.createRigidArea(new Dimension(10, 0)));

buttonPane.add(setButton);
BoxLayout

q Los componentes son dispuestos de arriba abajo o de izquierda a

derecha en el orden en el cual son añadidos al contenedor.
q Pueden crearse muchas configuraciones distintas, combinando
múltiples contenedores que usen BoxLayout.
q Preferido a un único contenedor que use el más complicado
GridBagLayout (mejor: BoxLayouts anidados), es útil también en
algunas situaciones donde se podría considerar el uso de GridLayout
o BorderLayout.
BoxLayout

q BoxLayout tiene en cuenta el alineamiento, tamaños mínimos,

máximos y preferidos que se eligen para los componentes:
btn.setAlignmentX(float alignmentX);
lbl.setAlignmentY(float alignmentY);
lbl.setMaximumSize(new Dimension(int width, int height);
lbl.setMinimumSize(new Dimension(int width, int height);
lbl.setPreferredSize(new Dimension(int width, int height);

q Para añadir espacio entre componentes se usa la clase Box o bordes

invisibles a uno o ambos componentes.
BoxLayout

Tipo Tamaño Cómo crearla?

Rigid area Box.createRigidArea(size)

%&'()&*+," Box.createHorizontalGlue()
!"#$
-$'+(.," Box.createVerticalGlue()

new Box.Filler(minSize,
customBox.Filler prefSize, maxSize)
Otras estrategias Swing

JSplitPane JTabbedPane (CardLayout) JToolBar

Pasos en el desarrollo de una aplicación
simple con GUI
q Extienda la aplicación de JFrame
q Declare las referencias a componentes necesarios
q Defina el constructor
§ Instancie un content pane y decida Layout
§ Instancie objetos para los componentes necesarios y establezca sus propiedades
§ Añada al objeto content pane
§ Añada los listeners de los componentes y defina código del método actionPerformed
q Añada un método main() que instancie el objeto creado y tome las
medidas para cerrar la ventana
Pintado

q Cuando la GUI necesita cambiar su apariencia visual se pinta en la

pantalla, comenzando siempre desde el contenedor de alto nivel (Ej.:
JFrame o JApplet) y procediendo de esta forma hacia abajo en la
jerarquía de contenedores
q El pintado es double-buffered por eficiencia
q Los componentes Swing normalmente se repintan ellos mismos en
forma automática
q Paint se ejecuta en el event-dispatching-thread
Pintado

Los componentes se pintan automáticamente

Todo lo demás:
Programador

JButton
Cuándo se pinta?

q Pintado disparado por el sistema (se invoca paint())

§ La primera vez que el componente es visible
§ Cuando un componente es cubierto y luego descubierto
§ Cuando es necesario reflejar un cambio en el estado del programa

q Pintado disparado por la aplicación

§ Cuando cambia texto, colores, etc.
§ Cuando desea repintar (invoca a repaint(), no a paint() que pone en la
cola este requerimiento)
§ El thread de manejos de eventos llama a paint() del componente
Pintado

q Pintado de un componente que extiende JComponent

1.fondo 2. custom 3. borde 4. hijo

(si es opaco) (si hay) (si tiene)
painting (si hay)
Pintado custom

JComponent
paint paintComponent
paintBorder
Nunca llamar paintChildren
paint()
directamente. extends
Llamar repaint() JPanel
paint paintComponent
paintBorder
paintChildren
extends El método
PaintPanel correcto a
anular en
paint paintComponent
pintado custom
paintBorder
paintChildren
Pintado

q Cada componente tiene su propio sistema de coordenadas desde

(0,0) hasta (ancho-1, alto-1)
Pintado

q Tener en cuenta el borde del componente (si lo tiene), reduce el área

de pintado y desplaza coordenadas.
Objeto Graphics

q El objeto Graphics provee un contexto para el pintado y métodos

para la misma función.
q El contexto gráfico consiste en el estado actual: color de pintado,
fuente, área de pintado
Pintado de formas

q La clase Graphics define métodos para pintar formas:

§ void drawLine(int x0, int y0, int x1, int y1)

§ void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)
§ void drawPolygon(Polygon p)
§ void drawPolygon(int xPoints[ ], int yPoints[ ], int numPoints)
§ void drawRect(int x, int y, int width, int height)
§ void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)
§ void draw3DRect(int x, int y, int width, int height, boolean raised)
§ void drawOval(int x, int y, int width, int height)
Pintado de formas
Pintado de texto

q La clase Graphics define métodos para pintar texto:

String (drawString)
Pintado de texto

q La clase Graphics define métodos para pintar texto:

String (drawString)
Imágenes

q Cargar y mostrar imágenes es muy simple

q Class ImageIcon de javax.swing.

ImageIcon myIcon=new ImageIcon(“imagefile.gif”);

Image image3 = getImage( new URL("http://java.sun.com/graphics/people.gif"));
 Imágenes

• ImageIcon myImage = new ImageIcon("book.gif");

• JLabel myLabel = new JLabel(myImage);
• getContentPane().add(myLabel);

• JButton JButFeedback = new JButton(myImage);

• JButton JButWrite = new JButton("Write");
• JButWrite.setIcon(myImage2);

• JButton JButChange = new JButton(myImage3);

• JButChange.setRolloverEnabled(true);
• JButChange.setRolloverIcon(myImage4);
Mostrar imágenes

q Métodos gráficos:(invocar en paintComponent)

w drawImage(image, x, y, observer)
w drawImage(image, x, y, w, h, observer)
w drawImage(image, x, y, bgcol, observer)
w drawImage(image, x, y, w, h, bgcol, obj)

La clase Component implementa la interface ImageObserver, casi siempre el

último argumento es this
Imágenes

class MyPanel extends JPanel {

private ImageIcon myImage;
public MyPanel() {
myImage = new ImageIcon("nasa.gif");
setPreferredSize(new Dimension(myImage.getIconWidth(),
myImage.getIconHeight()));
}
public void paintComponent(Graphics g) {
g.drawImage(myImage.getImage(), 10, 10, null);
}
}
Imágenes