Interfaces grficas de usuario

SWING

Objetivos
AL FINALIZAR ESTA LECCIN, DEBERA ESTAR CAPACITADO
PARA LO SIGUIENTE:

Detallar la jerarqua de contencin de la interfaz de usuario de

Swing
Describir cmo utilizar los gestores de diseo
Agregar contenedores de interfaz de usuario a una aplicacin para
agrupar componentes
Embeber componentes de interfaz de usuario en contenedores de
interfaz de usuario
Utilizar la interfaz de usuario conectable de Swing

AWT, Swing y JFC

AWT o Abstract Window Toolkit (java.awt):
Biblioteca de interfaz grfica de usuario
El predecesor a los componentes de Swing y la base de
Swing y JFC

Swing (javax.swing):
Biblioteca de interfaz grfica de usuario ms potente
Creado sobre la jerarqua de clases de AWT

Java Foundation Classes (JFC):

Recopilacin de API, incluidas AWT, Swing, la API de
accesibilidad y la interfaz de usuario conectable
API 2D de Java, soporte de arrastrar y soltar
(desde JDK 1.2)

Funciones de Swing
Swing es un juego de componentes visuales que estn

disponibles desde JDK 1.1 y que ha formado parte del

ncleo de JDK desde la versin 1.2.

Componentes sencillos en comparacin con los de AWT

API de interfaz de usuario conectable
Nmero ms elevado de componentes que AWT

JButton

JSlider

JRadioButton

JTextField

JTree

JCheckBox

Componentes Sencillos y Complejos

Componentes complejos

Fuerte dependencia del

cdigo de peer nativo
Cada uno se presenta en
su propia ventana opaca
Casi todos los
componentes de AWT
anteriores eran
complejos
Incluyen algunos
componentes de Swing
de nivel superior
(JFrame, JApplet,
JDialog)

Componentes sencillos

Sin dependencia del cdigo

de peer nativo
Pueden tener fondos
transparentes
La mayora de los
componentes de Swing son
sencillos
Al mostrarse, pueden tener
formas no rectangulares
Deben mostrarse en un
contenedor complejo

Diseo de Interfaz de Usuario

La creacin de una aplicacin de interfaz de usuario

conlleva una planificacin, sobre todo cuando se

crean aplicaciones de Swing. Para llevar a cabo la
planificacin es necesario comprender los siguientes
conceptos y sus relaciones:

Jerarqua de contencin de interfaz de usuario (un

componente raz que comprende componentes y contenedores
anidados)
Niveles y tipos de contenedor (como contenedores de nivel
superior e intermedio)
Gestores de diseo y sus tipos (utilizados por cada contenedor)
Componentes que se pueden agregar a contenedores

Jerarqua de Contencin de Swing

Contenedores de nivel superior

Marco
Recuadro de dilogo
Applet

Contenedores intermedios

Marco

Panel
Panel de desplazamiento

Componentes atmicos

Etiqueta
Elemento de texto
Botn
Panel

Componentes
atmicos

Contenedores de Nivel Superior

Swing proporciona JFrame, Jdialog y JApplet, que

tienen propiedades modificables como:

Paneles de contenido para contener componentes o

contenedores
intermedios,
mediante
los
mtodos
getContentPane()o setContentPane()
Bordes, mediante un mtodo setBorder()
Ttulos, mediante un mtodo setTitle()
Decoraciones de ventana, como botones para cerrar y
minimizar (excluye los applets)

AWT proporciona Frame, Dialog y Applet

No proporcionan propiedades como un panel de contenido o

bordes.

Contenedores Intermedios

Se disean para contener componentes (o contenedores); se

pueden anidar dentro de otros contenedores
Tipos de contenedores intermedios:

Componentes Atmicos

Botones
Casillas de control
Recuadros combinados
Texto
Listas
Etiquetas

JFRAME

Estructura de un JFrame
Varios paneles dispuestos en capas

JFrame es un contenedor donde colocar componentes.

Los componentes se sitan sobre un panel.
Puede ser un objeto de la clase JPanel o directamente sobre el
ContentPane.
Para obtener el panel de contenido se utiliza el mtodo
getContentPane().
Container panelContenido = getContentPane();
Es posible establecer un componente como panel de contenido con el
mtodo setContentPane().
setContentPane(new JLabel(Etiqueta de prueba));
Pero normalmente los componentes se aaden con el mtodo add().
panelContenido.add(new JLabel(Etiqueta de prueba));

JPanel

JCheckBox

JTextField

JTextArea

JRadioButton

JComboBox

JList

Manejadores de diseo

Gestores de Diseo

Los gestores de diseo estn diseados para gestionar varios

componentes a la vez.

Para usar un gestor de diseo con contenedores, es necesario:

FlowLayout.
BorderLayout.
GridLayout.
BoxLayout.
GridBagLayout.

Crear un objeto de gestin de diseo y un contenedor

Definir la propiedad de diseo del contenedor
Agregar elementos (componentes u otros contenedores) a las
regiones definidas por el gestor de diseo

Distintos gestores de diseo necesitan distintos argumentos

para controlar la colocacin de componentes.

Gestin de Diseo: Visin General

Diseo de borde

Diseo gridbag de ejemplo

Diseo de cuadrcula de ejemplo

Diseo de flujo de ejemplo

Diseo de FlowLayout
Los componentes fluyen de izquierda a derecha,
dejando, por omisin, un espacio vertical y horizontal
de 5 pixels entre sus componentes.
PruebasFrame(){
setTitle("JFrame de pruebas");
//Para un FlowLayout
getContentPane().setLayout(new FlowLayout());
getContentPane().add(new JButton("Botn 1"));
getContentPane().add(new JButton("Botn 2"));
getContentPane().add(new JButton("Botn 3"));
getContentPane().add(new JButton("Botn 4"));
getContentPane().add(new JButton("Botn 5"));
setSize(300,200);
}

Diseo de BorderLayout

Tiene cinco reas: North, South, East, West y Center

Tiene un rea Center que se ampla para ocupar el espacio disponible
Muestra nicamente un componente en cada rea
Habilita cada rea para contener paneles intermedios

Diseo de BorderLayout

PruebasFrame(){
setTitle("JFrame de pruebas");
//Para un BorderLayout
getContentPane().setLayout(new BorderLayout());
getContentPane().add(new JButton("CENTER"), BorderLayout.CENTER);
getContentPane().add(new JButton("NORTH"), BorderLayout.NORTH);
getContentPane().add(new JButton("SOUTH"), BorderLayout.SOUTH);
getContentPane().add(new JButton("EAST"), BorderLayout.EAST);
getContentPane().add(new JButton("WEST"), BorderLayout.WEST);
setSize(300,200);
}

Diseo de GridLayout
Los componentes se colocan en una rejilla
de celdas iguales.
Se colocan de arriba hacia abajo y de
izquierda a derecha

PruebasFrame(){
setTitle("JFrame de pruebas");
//Para un GridLayout
getContentPane().setLayout(new
GridLayout(3,2,5,5));
getContentPane().add(new JButton("Botn
getContentPane().add(new JButton("Botn
getContentPane().add(new JButton("Botn
getContentPane().add(new JButton("Botn
getContentPane().add(new JButton("Botn
getContentPane().add(new JButton("Botn
setSize(300,200);
}

1"));
2"));
3"));
4"));
5"));
6"));

Diseo GridBag

Se basa en una cuadrcula

Permite que los componentes abarquen varias filas y
columnas
Permite varios tamaos de filas y columnas
Utiliza el tamao preferido del componente para
controlar el tamao de celda

Restricciones de GridBag
Agregado externo

Posicin de la celda

Relleno de
componente

Espacio de la celda
Media ponderada
de la expansin
Reglas de relleno

Fijacin

Diseo de un GridBagLayout

Esta llamada aade el rea de

texto, dejando al
GridBagLayout total libertad
para decidir dnde y cmo
ponerlo.

PruebasFrame(){
setTitle("JFrame de pruebas");
getContentPane().setLayout (new GridBagLayout());
JTextArea
areaTexto
=
new
JTextArea(Area
getContentPane().add (areaTexto);

texto);

Necesitamos el mtodo add() que admite un segundo

parmetro. Este segundo parmetro le indica al layout
dnde y cmo colocar el componente. Este segundo
parmetro es un Object, lo que quiere decir que
podramos meter cualquier cosa.
Evidentemente esto no es as, debemos meter algo que
el layout entienda.
El GridBagLayout admite como segundo parmetro un
GridBagConstraints.

GridBagConstraints (restricciones)

GridBagConstraints.gridx Indica la posicin x del componente, es

decir, el nmero de columna en la que est el componente, siendo la
columna 0 la primera columna de la izquierda.
Si el componente ocupa varias columnas (como nuestra rea de
texto), debemos indicar la columna en la que est la esquina
superior izquierda del componente.
GridBagConstraints.gridy nos dice la posicin y del componente,
es decir, el nmero de fila en la que est el componente, siendo la
fila 0 la primera fila de la parte de arriba.
Si el componente ocupa varias filas (como nuestra rea de texto),
debemos indicar la fila en la que est la esquina superior izquierda
del componente

Celdas que ocupa el componente

GridBagConstraints.gridwidth nos dice cuntas
celdas en horizontal debe ocupar el componente. El
ancho del componente.
GridBagConstraints.gridheight nos dice cuantas
celdas en vertical debe ocupar el componente.
El alto del componente.
A estos campos debemos darles el valor 0.0 (que es el valor por defecto) si no
queremos que la fila o columna se estire.
El componte es el
Referencia del
penltimo de la fila
GridBagContrains
o columna
constrains.gridwidth = GridBagConstraints.RELATIVE;
El componte es el
ltimo de la fila o
columna

constrains.gridwidth = GridBagConstraints.REMAINDER;

Si Slo utilizamos el mismo GridBagConstraints, todos componentes

los comparten la misma instancia de ese objeto.
Hay que tener en cuenta que si cambiamos uno de los atributos
gridwith y gridheight para un componente, debemos restaurarlo
luego para el siguiente.
Por ejemplo, para el rea de texto pusimos gridwidth a 2. Para el
siguiente componente debemos volver a poner esta valor a 1.
JTextArea areaTexto = new JTextArea ("Area texto");
GridBagConstraints constraints = new GridBagConstraints();
constraints.gridx = 0; // El rea de texto empieza en la columna cero.
constraints.gridy = 0; // El rea de texto empieza en la fila cero
constraints.gridwidth = 2; // El rea de texto ocupa dos columnas.
constraints.gridheight = 2; // El rea de texto ocupa 2 filas.
this.getContentPane().add (areaTexto, constraints);

JButton boton1 = new JButton ("Boton 1");

constraints.gridx = 2;
constraints.gridy = 0;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton1, constraints);

Estirar las filas y las columnas

Cunto crece el componente al
moverse o hacer crecer la ventana?

GridBagConstraints.weigthx nos dice como estirar las columnas

GridBagConstraints.weigthy nos dice como estirar las filas
A estos campos debemos darles el valor:
0.0 (que es el valor por defecto) si no queremos que la fila o columna se estire.
1.0 a las filas o columnas que queremos que se estiren hasta completar toda la
ventana.
Estos campos. afecta a una fila o a una columna completa, no solo a un componente

Columna 0. No
necesita estirarse, no
JTextArea cajaTexto = new JTextArea("Area texto"); ponemos weightx
constraints.gridx = 0;
constraints.gridy = 0;
constraints.gridwidth = 2;
La fila 0 debe estirarse, hay
constraints.gridheight = 2;
que poner un weighty con
1.0
constraints.weighty = 1.0;
this.getContentPane().add (cajaTexto, constraints);

constraints.weighty = 0.0;

Restauramos al valor por defecto,

para no afectar a los siguientes
componentes.

Sentido en que se estiran los componentes

En que sentido va a crecer el
componente al moverse o hacer
crecer la ventana?

Para
hacer
que
un
componente
se
estire,
tenemos
el
atributo fill del GridBagConstraints. Este puede tomar los siguientes valores:
GridBagConstraints.NONE para que no se estire en ningn sentido, es la
opcin por defecto.
GridBagConstraints.VERTICAL para que se estire slo en vertical
GridBagConstraints.HORIZONTAL para que se estire slo en horizontal.
GridBagConstraints.BOTH para que se estire en ambas dimensiones

gbc.fill=GridBagConstraints.HORIZONTAL;

Posicin que adopta el componente

Si el componente no se estira en alguna direccin y/o es menor que el rea
disponible , podemos decirle por medio de anchor en GridBagConstraints qu
posicin queremos que ocupe.
Las posibilidades son:
.
GridBagConstraints.CENTER para que el componente ocupe el centro de la
celda. Es la opcin por defecto.
GridBagConstraints.NORTH para que se pegue a la parte superior,
centrado en la misma.
GridBagConstraints.NORTHEAST para que se pegue a la esquina superior
derecha.
GridBagConstraints.WEST para que se pegue al lado izquierdo, centrado en
ese lado.
GridBagConstraints.NORTHWEST para que se pegue a la esquina superior
izquierda.
Referencia del
GridBagContrains
gbc.anchor=GridBagConstraints.WEST;

PruebasFrame(){
setTitle("JFrame de pruebas");
getContentPane().setLayout (new GridBagLayout());
JTextArea areaTexto = new JTextArea(Area texto);
GridBagConstraints constraints = new GridBagConstraints();
constraints.gridx = 0; // El rea de texto empieza en la columna
cero.
constraints.gridy = 0; // El rea de texto empieza en la fila cero
constraints.gridwidth = 2; // El rea de texto ocupa dos
columnas.
constraints.gridheight = 2; // El rea de texto ocupa 2 filas.
getContentPane().add (areaTexto, constraints);
JButton boton1 = new JButton (Boton 1);
constraints.gridx = 2;
constraints.gridy = 0;
constraints.gridwidth = 1;
constraints.gridheight = 1;
this.getContentPane().add (boton1, constraints);
}

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;

Asociar las restricciones

con el button

gridbag.setConstraints(button, c);

Diseo BoxLayout
Muestra los componentes en una nica fila o columna.
Su constructor necesita un argumento con el contenedor
a utilizar y la orientacin determinada por las constantes
BoxLayout.X_AXIS o BoxLayout.Y_AXIS.
BoxLayout(Container destino, int orientacin)

Precisa la creacin de un objeto de la clase Container

para su utilizacin como contenedor.
Normalmente ser un objeto de la clase JPanel (ver ms adelante).

Diseo BoxLayout

PruebasFrame(){
setTitle("JFrame de pruebas");
JPanel panel = new JPanel();
panel.setLayout(new BoxLayout(panel,BoxLayout.Y_AXIS));
panel.add(new JButton("Botn 1"));
panel.add(new JButton("Botn 2"));
panel.add(new JButton("Botn 3"));
panel.add(new JButton("Botn 4"));
panel.add(new JButton("Botn 5"));
panel.add(new JButton("Botn 6"));
setContentPane(panel);
setSize(300,200);
}

JPanel buttonPane = new JPanel();

buttonPane.setLayout(new BoxLayout(buttonPane,
BoxLayout.X_AXIS));
buttonPane.setBorder(BorderFactory.createEmptyBorder(0, 10, 10,
10));
buttonPane.add(Box.createHorizontalGlue()); // zona invisible
buttonPane.add(new JButton(Cancel));
buttonPane.add(Box.createRigidArea(new Dimension(10, 0))); // zona
rgida
buttonPane.add(new JButton(set));

Existe un contenedor que tiene como gestor de posicionamiento un

BoxLayout: la clase Box.
Box permite aadir separaciones entre los componentes
aadiendo puntales (Strut), zonas rgidas (RigidArea) y
pegamento (Glue).
Creacin de un objeto Box.
//Crea una caja horizontal
Box cajah = Box.createHorizontalBox();
//Crea una caja vertical
Box cajav = Box.createVerticalBox();

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

Podemos seleccionar un alineamiento X de un componente Swing,

llamando a su mtodo setAlignmentX.
Una alternativa es sobreescribir el mtodogetAlignmentX en una
subclase personalizada de la clase del componente.
De forma similar, se selecciona el alineamiento Y de un componente
llamando al mtodo setAlignmentY o sobreescribiendogetAlignmentY.

button1.setAlignmentY(Component.BOTTOM_ALIGNMENT);
button2.setAlignmentY(Component.BOTTOM_ALIGNMENT);

Como muestra la siguiente tabla, los botones, las etiquetas y los tems de men
Swing tienen un valor de alineamiento X por defecto distinto de todos los dems
componentes.
De forma similar, los botones, los tems de mens y las barras de herramientas
tienen distinto alineamiento Y que todos los dems componentes.

Componente Swing

Alineamiento X por
defecto

Alineamiento Y por
defecto

Buttons, menu items

LEFT_ALIGNMENT

TOP_ALIGNMENT

Labels

LEFT_ALIGNMENT

CENTER_ALIGNMENT

Tool bars

CENTER_ALIGNMENT

TOP_ALIGNMENT

Todos los dems componentes

Swing

CENTER_ALIGNMENT

CENTER_ALIGNMENT

Puntal (Strut): zona invisible de un alto o ancho fijo

para separar dos componentes.
Box.createHorizontalStrut(int ancho)
Box.createVerticalStrut(int alto)
Zona rgida (RigidArea): proporciona un rea
invisible de separacin horizontal y vertical.
En una caja horizontal, la separacin vertical
afectar a todos sus componentes y viceversa.
Box.createRigidArea(Dimension dim)
Precisa de la creacin de un objeto
Dimension (new Dimension(alto,ancho)).
Glue: zona invisible que alinea los siguientes
controles con el borde derecho o inferior.
Box.createGlue()

PruebasFrame(){
setTitle("JFrame de pruebas");
//Para un BoxLayout con un objeto Box
Box caja = Box.createVerticalBox();
caja.add(new JButton("Botn 1"));
caja.add(Box.createVerticalStrut(20));
caja.add(new JButton("Botn 2"));
caja.add(new JButton("Botn 3"));
caja.add(Box.createRigidArea(new Dimension(50,30)));
caja.add(new JButton("Botn 4"));
caja.add(Box.createGlue());
caja.add(new JButton("Botn 5"));
setContentPane(caja);
setSize(300,200);
}

Diseo de CardLayout
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.
Se puede mostrar una componente aadida (identificada con el
nombre) mediante un mtodo de Cardlayout:
public void show( Container p, String Name);

JPanel cards = new JPanel();

cards.setLayout(new CardLayout());
getContentPane().add(cards);
JPanel p1=new JPanel();
P1. add(new JButton(Boton 1);
cards.add(p1, Panel con Botones");
JPanel p2=new JPanel();
P2. add(new JTextField(20);
cards.add(p2, Panel con Campo de texto");

se puede utilizar el mtodo show() de CardLayout

para seleccionar el componente que se est
mostrando.
El primer argumento del mtodo show() es el
contenedor que controla CardLayout -- esto es, el
contenedor de los componentes que maneja
CardLayout.
El segundo argumento es la cadena que identifica
el componente a mostrar. Esta cadena es la misma
que fue utilizada para aadir el componente al
contenedor.
public void show(Container parent, String name)

Existen mtodos de CardLayout que permiten seleccionar un

componente.
Para cada mtodo, el primer argumento es el contenedor del que
CardLayout es el controlador de disposicin (el contenedor de las
cartas que controla CardLayout).

public void first(Container parent)

public void next(Container parent)
public void previous(Container parent)
public void last(Container parent)

Combinacin de Gestores de Diseo

Borde
null

Flujo vertical
GridBag

Cuadrcula