Interfaces grficas

de usuario
Presentacin basada en:
1.
Como Programar en Java. Deitel y Deitel. Ed. Prentice-Hall. 1988
Java, Curso de programacin. Fco. Javier Ceballos. Ed. Alfoomega&RA-MA, 2003.
Apuntes del Curso Programacin Orientado a Objetos. Pablo Castells. Escuela Politcnica Superior, Universidad
Autonoma de Madrid.
Apuntes del Curso de java. Luis Hernndez y Carlos Cervign. Facultad de Informtica. Universidad Catlica de
Madrid.
NOTA: Estas diapositivas fueron montadas por Esmeide Leal. Monitor del curso de Objetos- Semetre 01-2005.
2.

3.
4.

Las interfaces grficas de usuario

Las interfaces grficas de usuario (GUI) ofrecen al usuario
ventanas, cuadros de dilogo, barras de herramientas,
botones, listas desplegables y muchos otros elementos con los
que ya estamos muy acostumbrados a tratar.
Las aplicaciones son conducidas por eventos y se desarrollan
haciendo uso de las clases que para ello nos ofrece la API de
Java.

La API de Java para desarrollo de GUI

La interfaz de usuario es la parte del programa que permite al usuario interaccionar
con l.
La API de Java proporciona una biblioteca de clases para el desarrollo de Interfaces
grficas de usuario (en realidad son dos).
La biblioteca proporciona un conjunto de herramientas para la construccin de
interfaces grficas que tienen una apariencia y se comportan de forma semejante en
todas las plataformas en las que se ejecuten.
La estructura bsica de la biblioteca gira en torno a componentes y contenedores. Los
contenedores contienen componentes y son componentes a su vez, de forma que los
eventos pueden tratarse tanto en contenedores como en componentes.
La API est constituida por clases, interfaces y derivaciones.

Las bibliotecas disponibles

Cuando apareci Java, los componentes grficos disponibles
para el desarrollo de GUI se encontraban en una biblioteca
conocida como Abstract Window Toolkit (AWT).
AWT es adecuada para interfaces grficas sencillas, pero no
para proyectos ms complejos.
Al aparecer Java 2 la biblioteca AWT se reemplaz por otra
biblioteca ms robusta, verstil y flexible: Swing.
Aunque AWT an sigue estando disponible, e incluso es
usada por los componentes de Swing.

Algunos componentes de AWT

Swing
Paquete de Java para la generacin del GUI en aplicaciones
reales de gran tamao. Disponible como paquete externo en Java
1.1 e integrado desde Java 1.2.
Es una de las API de JFC (Java Foundation Classes): AWT, Java
2D, Accessibility, Drag and Drop, Swing, ...
Escrito totalmente en Java. No reemplaza a AWT.
Se apoya sobre AWT y aade JComponents.
Utiliza el modelo de eventos de Java 1.1.
Eleccin entre diferentes aspectos (look & feel).
Arquitectura Model-View-Controller (MVC).
Nuevos componentes (rboles, tablas, frames internos, iconos,
bordes, tooltips, beans, etctera).

Jerarqua de clases para las GUI

Jerarqua de clases para las GUI

Component: superclase de todas las clases de interfaz grfica.
Container: para agrupar componentes.
JComponent: superclase de todos los componentes de Swing
que se dibujan directamente en los lienzos (canvas).
Sus subclases son los elementos bsicos de la GUI.
JFrame: ventana que no est contenida en otras ventanas.
JDialog: cuadro de dilogo.
JApplet: subclase de Applet para crear applets tipo Swing.
JPanel: contenedor invisible que mantiene componentes
de interfaz y que se puede anidar, colocndose en otros paneles
o en ventanas. Tambin sirve de lienzo.
Graphics: clase abstracta que proporciona contextos grficos
donde dibujar cadenas de texto, lneas y otras formas sencillas.

Jerarqua de clases para las GUI

Color: color de los componentes grficos.
Font: aspecto de los caracteres.
FontMetrics: clase abstracta para propiedades de las fuentes.
Categoras de clases:

Contenedores:

JFrame, JApplet, JWindow, JDialog

Componentes intermedios:

Componentes:

Clases de soporte:

JPanel, JScrollPane
JLabel, JBbutton, JTextField, JTextArea, ...
Graphics, Color, Font, ...

Jerarqua de clases para las GUI: JComponent

Jerarqua de clases para las GUI: AWT

Esquema de aplicacin en Swing

Esquema de applet con Swing

La Clase String - Cadena de Caracteres

JFrame
Para mostrar una ventana en una posicin concreta disponemos
del mtodo setLocation(x, y) de la clase JFrame.
Cuando se crea un objeto JFrame, se crea un objeto Container
(AWT). El objeto JFrame usa el panel de contenido (Container)
para albergar los componentes del frame.
1. Obtenemos el panel de contenido del frame:
Container panel = this.getContentPane();
2. Aadimos componentes a dicho panel:
panel.add(unComponente);

Componentes en el JFrame

Administradores de disposicin
Los componentes se agregan al contenedor con el mtodo add().
JButton unBoton = new JButton("Texto del botn");
panel.add(unBoton);
El efecto de add() depende del esquema de colocacin o
disposicin (layout) del contenedor que se use.
Existen diversos esquemas de disposicin: FlowLayout,
BorderLayout, GridLayout, ...
Los objetos contenedores se apoyan en objetos LayoutManager
(administradores de disposicin).
Clases ms usadas que implementa la interfaz LayoutManager:
FlowLayout: un componente tras otro de izquierda a derecha.
BorderLayout: 5 regiones en el contenedor (North, South, ...).
GridLayout: contenedor en filas y columnas.

Administradores de disposicin

Organizacin de contenedores

FlowLayout

10

BorderLayout

GridLayout
setLayout(new GridLayout(filas, columnas))
Crea una zona de filas x columnas componentes y stos
se van acomodando de izquierda a derecha y de arriba a abajo.
GridLayout tiene otro constructor que permite establecer
la separacin (en pixels) ente los componentes,
que es cero con el primer constructor.
As, por ejemplo:
new GridLayout(3, 4, 2, 2)
crea una organizacin de 3 filas y 4 columnas donde los
componentes quedan a dos pixels de separacin.
Ejemplo:
setLayout(new GridLayout(3, 4, 2, 2);
for(int i = 0; i < 3 * 4; i++) {
add(new JButton(Integer.toString(i + 1)));
}

11

GridLayout

Paneles como contenedores

12

Paneles como contenedores

Paneles como contenedores

13

Dibujo de grficos en paneles

JPanel se puede usar para dibujar.
Para dibujar en un panel se crea una clase derivada de JPanel
y se redefine el mtodo paintComponent() que le indica al
panel como dibujar.
La clase Graphics es una clase abstracta para todos
los contextos grficos.
Una vez obtenido el contexto grfico podemos llamar desde este
objeto a las funciones grficas definidas en la clase Graphics.
Graphics contiene informacin acerca de la zona que necesita
ser redibujada: el objeto donde dibujar, un origen de traslacin,
el color actual, la fuente actual, etctera.

Ejemplo de dibujo

14

Dibujo de grficos en paneles

Cuando utilizamos el mtodo paintComponent() para dibujar
en un contexto grfico g, ese contexto es un ejemplar de
una subclase concreta de la clase Graphics para la plataforma
especfica.
El mtodo paintComponent() es llamado la primera vez y
cada vez que es necesario redibujar el componente.
Al hacer super.paintComponent(g) nos aseguramos de que
el rea visualizada se limpia antes de volver a dibujar.
class MiPanel extends JPanel {
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawString("Interfaz grfica", 40, 40);
}
}

Ejemplo de dibujo

15

Algunos mtodos de Graphics

Graphics g;
...
g.setColor(Color.blue);
g.setBackground(Color.red);
g.drawLine(int x1, int y1, int x2, int y2);
g.drawRect(int x, int y, int ancho, int alto);
g.drawRoundedRect(int x, int y, int ancho, int alto,
int arcWidth, int arcHeight);
g.fillRect(int x, int y, int ancho, int alto);
g.fillRoundedRect(int x, int y, int ancho, int alto,
int arcWidth, int arcHeight);
g.drawOval(int x, int y, int ancho, int alto);
g.fillOval(int x, int y, int ancho, int alto);
g.drawArc(int x, int y, int ancho, int alto, int ang1,
int ang2);
g.drwaString(String cadena, int x, int y);
g.setFont(Font f);
...

Fuentes

16

Ejemplo

17