Java GUI La librera Swing

//java.sun.com/docs/books/tutorial/uiswing //programacion.com/java/tutorial/swing/

PROGRAMACIN CONDUCIDA POR EVENTOS

En programas tradicionales (basados en texto):
el programa controla el flujo de la ejecucin el programa controla la secuencia de las entradas Los programas con GUI son event-driven la secuencia de las entradas controlan el flujo de la ejecucin

el sistema invoca cdigo del usuario

PROGRAMACIN CONDUCIDA POR EVENTOS

Cdigo del sistem a

Su cdigo

GENERACIN DE EVENTOS
1. Las acciones tales como: pulsar un botn, mover el mouse, etc. son reconocidas e identificadas por los sistemas operativos (OS) o la JVM.
2. Por cada accin el OS/JVM determinan cul de los

programas que se estn ejecutando recibirn la seal

(de la accin). 3. Las seales que la aplicaciones reciben del OS/JVM como resultado de una accin son llamadas eventos.

GENERACIN DE EVENTOS

GUI

Acciones Mouse, Teclado,etc. Sistema Operativo

JAVA API /Windows

Eventos

Mtodos y handlers

Mtodos y handlers

Aplicacin 1

Aplicacin 2

MANEJO DE EVENTOS
Una aplicacin responde a los eventos ejecutando cdigo adecuado para cada tipo particular de eventos. No todos los eventos necesitan ser tenidos en cuenta por una aplicacin. Por ejemplo: Una aplicacin para dibujar puede estar interesada slo en movimientos del mouse. Como diseador de una aplicacin manejada por eventos, deber escribir clases/mtodos para manejar los eventos relevantes.

JAVA GUI

Java provee dos libreras para crear GUIs: Java AWT (Abstract Window Toolkit) Java Foundation Classes (JFC o Swing), a partir de Java2

JAVA FOUNDATION CLASSES

JFC es una coleccin muy grande de software. AWT y Swing son las dos grandes familias para desarrollo de GUI en el entorno Java.
JFC APIs

AWT

Swing

Drag & Drop 2D API

Accessibility

JAVA FOUNDATION CLASSES

SWING
Implementada sin usar cdigo nativo (100% Java),
con lo cual la GUI se ver de la misma forma en distintas plataformas.

Basada en la arquitectura MVC.

Ofrece una amplia variedad de Look & Feel. Los componentes de Swing continuarn siendo

mejorados en el futuro.

AWT Y SWING
Los componentes de Swing tienen nombres que
comienzan con J. Ejemplo: Button en AWT es JButton en Swing Los componentes de AWT estn 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.plaf.basic javax.swing.plaf.metal javax.swing.plaf.multi

javax.swing.table
javax.swing.tree javax.swing.border javax.swing.colorchooser

javax.swing.filechooser

javax.swing.text javax.swing.text.html javax.swing.text.html.parser javax.swing.text.rtf

javax.swing.event javax.swing.undo

PAQUETES JFC/SWING
Control del Look & Feel de Swing
Componentes, incluyendo componentes complejos

Widgets basados en texto ( incluyendo html/rtf )

Paquetes nuevos de eventos

APLICACIONES BASADAS EN GUI

El desarrollo de una aplicacin basada en GUI requiere la comprensin de: Estructura de la jerarqua de herencia, que define el comportamiento y atributos de los componentes en la GUI de la aplicacin. Estructura de la jerarqua de contenedores, que define cmo se disponen todos los componentes en la GUI de la aplicacin. Manejo de eventos.

JERARQUA DE HERENCIA

HERENCIA HEAVY
java.awt.Panel java.awt.Window

java.applet.Applet

java.awt.Dialog

JApplet

JDialog

JWindow

JFrame

HEAVYWEIGHT VS. LIGHTWEIGHT

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
La clase Component (y sus subclases) proveen soporte
para manejo de eventos, cambio del tamao de un componente, control de color y fuentes, pintado. Un componente es un objeto de una subclase concreta. Se distinguen dos clases de componentes: Componentes de control de la GUI: la interaccin

de la GUI con el usuario se realiza a travs de ellos.

Contenedores: contienen otros componentes (u otros contenedores).

CONTENEDORES
Anidamiento de componentes (Jerarqua de contenedores en contraste con la Jerarqua de herencia). Cada programa Swing contiene al menos una. Usan un Layout Manager para determinar cmo se disponen los componentes en los contenedores. Swing provee 4 contenedores de alto nivel (ventana base de la GUI): JFrame, JApplet, JDialog y JWindow. La jerarqua 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.

JERARQUA DE CONTENEDORES

JERARQUA DE CONTENEDORES

La apariencia de una GUI est determinada por: La jerarqua de contenedores El Layout Manager de cada contenedor Las propiedades de los componentes individuales Todos estos tems trabajan en conjunto para determinar el efecto visual final.

ESTRUCTURA DE UN JFRAME

ESTRUCTURA DE UN JFRAME

ROOT PANES
Aadido en forma invisible al contenedor de alto nivel.

Creado por Swing cuando instancia un contenedor de alto

nivel. Maneja prcticamente todo entre el contenedor de alto

nivel y los componentes atmicos.

Tener en cuenta si necesita interceptar clicks del mouse o pintar sobre varios componentes. Es una instancia de JLayeredPane la que contiene la barra de mens y el content pane.

CONTENT PANES
Usualmente es un JPanel.
En la mayora de las aplicaciones Swing contiene casi todo, excepto la barra de men.

Debe ser creado explcitamente.

LAYERED PANES
Provisto por root pane pero tambin puede crearse.
Contenedor con profundidad, tal que componentes que se superponen (ej:popup menus) pueden aparecer unos encima de otros (z-buffering).

GLASS PANES
Util para pintar o interceptar eventos (por ejemplo:
bloquear todos los eventos del mouse) en un rea que contenga uno o ms componente

CONTENEDORES DE ALTO NIVEL

Applet

Dialog

Frame

CONTENEDORES GENERALES

Panel

Scroll Pane

SplitPane

TabbedPane

Toolbar

CONTENEDORES ESPECIALES

InternalFrame

LayeredPane

Root Pane

JFRAME

ALGUNOS MTODOS DE JFRAME

Para aadir componentes al content pane:
myFrameInstance.getContentPane().add(myComponent);

Usual this

Requerido por Instancias de JFrame, JDialog y JInternalFrame

Ej.: myLabel

ALGUNOS MTODOS DE JFRAME

Para construir una ventana con un ttulo y mostrarla:
JFrame theWindow = new JFrame( "Graffiti" ); theWindow.show( ); //idem theWindow.setVisible(true);

Para determinar su tamao:

theWindow.setJMenuBar(cyanMenuBar); theWindow.setSize( 220, 100 );//o mejor theWindow.pack();

NUEVA FUNCIONALIDAD DE JFRAME

setDefaultCloseOperation(int) es la ms 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

mtodo dispose(), para liberar recursos. EXIT_ON_CLOSE, cierra la aplicacin (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 aadir al frame

JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label);

//especifica la operacin de cierre de la ventana

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // muestra el frame en pantalla frame.pack(); frame.setVisible(true);}}

COMPONENTES ATMICOS
Componentes de tipo JPanel almacenan otros objetos
de la GUI tales como: botones, etiquetas, campos de texto, etc. Estos objetos grficos son

considerados componentes atmicos, puesto que no

pueden almacenar otros objetos de la GUI.

COMPONENTES ATMICOS BSICOS

Buttons

Combo Box

List

Menu

Slider

Spinner

Text Fields

COMPONENTES ATMICOS NO EDITABLES

Label

Progress Bar

Tool tip

OTROS COMPONENTES ATMICOS

Color Chooser

File Chooser

Table

Text

Tree

API DE LOS COMPONENTES GUI

Componente GUI en Java= class Propiedades Mtodos Eventos JButton

COMPONENTES GUI
1.- Crear Instanciar objeto: b = new JButton(press me); 2.- Configurar Propiedades: b.text = press me; (evitar en Java) Mtodos:
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.- Aadir panel.add(b); 4.- Manejar eventos

CARACTERSTICAS ESPECIALES
Los componentes Swing ofrecen caractersticas especiales:

Tool tip

Cuando el cursor del mouse se detiene sobre un componente se muestra una lnea de texto. Se ejecuta una accin como resultado del pulsado de una combinacin de teclas. Un componente puede ser explcitamente habilitado o deshabilitado. Rodea un componente con un borde.

Mnemonic Disable Border

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

Mnemonic
button.setMnemonic ("C");

Disable
JButton button = new JButton (Do It);

button.setEnabled (false);

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

Empty
Line Etched

Titled
Matte Compound

Bevel

BORDES

ANATOMA DE UNA APLICACIN GUI

JFrame
JFrame JPanel contenedores JPanel

JButton
JButton JLabel

JLabel
Estructura interna GUI

USO DE UN COMPONENTE GUI

1. Crearlo
2. Configurarlo 3. Aadir hijo (si es contenedor) orden importante

4. Aadir al padre (si no es JFrame)

5. Manejar los eventos

CONSTRUCCIN BOTTOM UP
Crear:
Frame Panel Componentes Listener Aadir (bottom up) JPanel JLabel Listener

JButton

Listeners a los componentes

Componentes al panel Panel al Frame JFrame

WINDOW LAYOUT
contenedores

componentes

WINDOW LAYOUT
Cada contenedor maneja la disposicin de sus
componentes. El programador slo aade componentes, el contenedor se encarga de la disposicin de los mismos. El contenedor usa un Layout Manager para manejar la disposicin de los componentes en el mismo.

Estn disponibles diferentes Layout Managers.

El layout puede ser determinado especificando Layout Managers para los contenedores.

LAYOUT MANAGERS
Hay varios Layout Managers predefinidos en: FlowLayout CardLayout GridLayout BoxLayout (en java.awt) (en java.awt) (en java.awt) (en javax.swing) BorderLayout (en java.awt)

GridBagLayout (en java.awt) OverlayLayout (en javax.swing)

LAYOUT MANAGERS (LM)

Cada contenedor tiene un Layout Manager por defecto, aunque se puede establecer otro LM para el mismo, de forma explcita. Para anular el LM por defecto se usa el mtodo setLayout (para contenedores de alto nivel se usa getContentPane().setLayout(). El Layout Manager intenta ajustar la disposicin de los componentes en el contenedor cuando se aade un nuevo componente o cuando el contenedor cambia de tamao. Puede crear su propio LM.

Layout Managers de AWT

null
ninguno, programador setea x,y,w,h FlowLayout GridLayout

Left to right, Top to bottom

BorderLayout n w c e

CardLayout

GridBagLayout

One at a time

JButton

NULL LAYOUT
setLayout(null);
El programador es responsable de establecer el tamao y posicin de cada componente (setBounds(x,y,w,h))

COMBINACIONES

JButton JButton

JTextArea

COMBINACIONES
JButton JFrame n JPanel: FlowLayout JButton

JPanel: BorderLayout

JTextArea

TAREAS COMUNES DEL LM

Prestar atencin a indicaciones de un componente: de tamao:
setMinimumSize(Dimension), setPreferredSize(..), setMaximumSize(..)

de alineamiento:
setAllignmentX(float), setAlignmentY(float)

Poner espacios entre componentes: el LM puede especificar hgap y vgap poner componentes invisibles bordes vacos: para componentes que no tienen bordes por default, por ej.:JPanel, JLabel.

Estructura del Layout

JPanel(BoxLayout(V))

label

rigidArea(0,5)

Center

JScrollPane South

HorizontalGlue JPanel (BorderLayout)

JButton

JButton JPanel(BoxLayout(H)) rigidArea(10,0)

FLOWLAYOUT

Container contentPane = getContentPane();

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

Es el LM por defecto de JPanel. Dispone los componentes de izquierda aderecha a medida que se aaden, comenzando filas nuevas si es necesario.

FLOWLAYOUT
Cada fila de componentes est centrada por defecto, pero puede alinearse por derecha o izquierda. Pueden establecerse explcitamente espacios verticales y/o horizontales entre componentes. Usar slo 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"));

Dispone los componentes en forma de matriz, con la cantidad de filas y columnas especificadas. Todas las filas tienen el mismo alto y todas las columnas tienen el mismo ancho. El tamao de cada celda es determinado por el tamao del contenedor. Permite establecer vgap y hgap. Usar si es seguro que los componentes tendrn igual tamao.

BORDERLAYOUT

Container contentPane = getContentPane(); contentPane.add(new JButton("Button 1 (NORTH)"),BorderLayout.NORTH);

//no hace falta setear el LM

Es el LM por defecto de los content pane (contenedor principal en JFrame, JDialog y JApplet). Define 5 reas en las cuales se pueden aadir los componentes.

BORDERLAYOUT

Si se agranda la ventana, la parte central toma tanto espacio como le sea posible, las otras 4 reas se expanden slo lo

necesario para llenar el espacio disponible.

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");

Permite implementar un rea que contiene distintos componentes en distintos instantes de tiempo (naipes). Normalmente controlado por una Combo Box, el estado de sta determina cul grupo de componentes muestra el LM.

GRIDBAGLAYOUT

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);

Es el LM ms sofisticado y
flexible. Alinea componentes en una matriz de celdas

permitiendo a algunos
componentes abarcar ms de una celda.

BOXLAYOUT

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);

Pone los
componentes en una sola fila o

una sola columna

Respeta los tamaos mximos requeridos de los componentes y el alineamiento X/Y.

BOXLAYOUT
Los componentes son dispuestos de arriba abajo o de
izquierda a derecha en el orden en el cual son aadidos al contenedor. Pueden crearse muchas configuraciones distintas, combinando mltiples contenedores que usen BoxLayout. Preferido a un nico contenedor que use el ms complicado

GridBagLayout (mejor: BoxLayouts anidados), es til tambin

en algunas situaciones donde se podra considerar el uso de GridLayout o BorderLayout.

BOXLAYOUT
BoxLayout tiene en cuenta el alineamiento, tamaos mnimos, mximos 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);

Para aadir espacio entre componentes se usa la clase Box o bordes invisibles a uno o ambos componentes.

BOXLAYOUT

Tipo
Rigid area horizont al vertical

Tamao

Cmo crearla?
Box.createRigidArea(size) Box.createHorizontalGlue() Box.createVerticalGlue() new Box.Filler(minSize, prefSize, maxSize)

Glue

customBox.Filler

OTRAS ESTRATEGIAS SWING

JSplitPane JTabbedPane (CardLayout) JToolBar

PASOS EN EL DESARROLLO DE UNA APLICACIN SIMPLE CON GUI

Extienda la aplicacin de JFrame

Declare las referencias a componentes necesarios

Defina el constructor Instancie un content pane y decida Layout Instancie objetos para los componentes necesarios y establezca sus propiedades Aada al objeto content pane Aada los listeners de los componentes y defina cdigo del mtodo actionPerformed Aada un mtodo main() que instancie el objeto creado y tome los recaudos para cerrar la ventana

PINTADO
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 jerarqua de contenedores El pintado es double-buffered por eficiencia Los componentes Swing normalmente se repintan ellos mismos en forma automtica Paint se ejecuta en el event-dispatching-thread

PINTADO

Los componentes se pintan automticamente Todo lo dems:Programador

JButton

CUNDO SE PINTA?
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
Pintado disparado por la aplicacin 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
Pintado de un componente que extiende JComponent

1.fondo (si es opaco)

2. custom
painting (si hay)

3. borde (si hay)

4. hijo (si tiene)

PINTADO CUSTOM
JComponent paint paintComponent paintBorder paintChildren
extends

Nunca llamar paint() directamente. Llamar repaint()

paint

JPanel paintComponent paintBorder paintChildren

extends

PaintPanel paint paintComponent paintBorder paintChildren

El mtodo correcto a anular en pintado custom

PINTADO
Qu ocurre cuando se invoca paint()?
paint(Graphics g) paintComponent(Graphics g) paintBorder(Graphics g) paintChildren(Graphics g) Antes de hacer cualquier cosa en paintComponent(...): invoque super.paintComponent (pinta background)

PINTADO
Cada componente tiene su propio sistema de coordenadas
desde (0,0) hasta (ancho-1, alto-1) (0, 0) X

Component

(ancho -1, alto -1)

PINTADO
Tener en cuenta el borde del componente (si lo tiene),
reduce el rea de pintado y desplaza coordenadas.

OBJETO GRAPHICS
El objeto Graphics provee un contexto para el pintado y
mtodos para la misma funcin. El contexto grfico consiste en el estado actual:color de

pintado, fuente, rea de pintado

PINTADO DE FORMAS
La clase Graphics define mtodos 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
La clase Graphics define mtodos para pintar texto: String (drawString)

PINTADO DE TEXTO
La clase Graphics define mtodos para pintar texto: String (drawString)

IMGENES
Cargar y mostrar imgenes es muy simple
Class ImageIcon de javax.swing. Ej.:ImageIcon myIcon=new ImageIcon(imagefile.gif);

Image image3 = getImage( new

URL("http://java.sun.com/graphics/people.gif"));

IMGENES
ImageIcon myImage = JLabel myLabel =

new ImageIcon("book.gif");

new JLabel(myImage);

getContentPane().add(myLabel);

JButton JButFeedback = new JButton JButWrite

JButton(myImage);

= new JButton("Write");

JButWrite.setIcon(myImage2);

JButton JButChange = new

JButton(myImage3);

JButChange.setRolloverEnabled(true); JButChange.setRolloverIcon(myImage4);

CARGA DE IMGENES
myImage = Toolkit.getDefaultToolkit().getImage(filenameOrURL);
retorna inmediatamente, no hay que esperar que la imagen se cargue antes de realizar otras operaciones. Algunos programas requieren ms control o informacin acerca de la carga: clase MediaTracker

mtodo imageUpdate de la interface ImageObserver (tiles

ambas tambin para no mostrar una imagen hasta que est completamente cargada o informar a ProgressBar)

MOSTRAR IMGENES
Mtodos grficos:(invocar en paintComponent) drawImage(image, x, y, observer) drawImage(image, x, y, w, h, observer) drawImage(image, x, y, bgcol, observer) drawImage(image, x, y, w, h, bgcol, ob.) La clase Component implementa la interface ImageObserver, casi siempre el ltimo argumento es this

IMGENES
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); }}

IMGENES

ANIMACIN
Se muestran sucesivos frames a una velocidad
relativamente alta (usualmente 10-20 frames por segundo), se crea una sensacin de movimiento

Para actualizar peridicamente la pantalla se usa un

loop de animacin, normalmente se implementa con un objeto javax.swing.Timer (se necesita un thread

separado, nunca poner en paintComponent ya que la

aplicacin queda congelada)

ANIMACIN
Timer
Timer timer = new Timer(delay, this); //this:action handler public synchronized void startAnimation() { if (!timer.isRunning()) {timer.start();} }

public synchronized void stopAnimation() {

if (timer.isRunning()) { timer.stop();}}