4.

14 (Opcional) Ejemplo prctico de GUI y grficos: creacin de dibujos simples

Esta seccin presenta una de las capacidades grficas de Java: dibujar lneas. Tambin cubre los aspectos bsicos acerca de
cmo crear una ventana para mostrar un dibujo en la pantalla de la computadora.

Sistema de coordenadas (figura 4.18), un esquema para identificar cada uno de los puntos en la pantalla.


Figura 4.18 | Sistema de coordenadas de Java. Las unidades se miden en pxeles

Las coordenadas indican en dnde deben mostrarse los grficos en una pantalla. Las unidades de las coordenadas se
miden en pxeles. Un pxel es la unidad de resolucin ms pequea de una pantalla. (El trmino pxel significa elemento
de imagen).

Nuestra primera aplicacin de dibujo simplemente dibuja dos lneas. La clase PanelDibujo (figura 4.19) realiza el dibujo en
s, mientras que la clase PruebaPanelDibujo (figura 4.20) crea una ventana para mostrar el dibujo. En la clase PanelDibujo,
las instrucciones import de las lneas 3 y 4 nos permiten utilizar la clase Graphics (del paquete java.awt), que proporciona
varios mtodos para dibujar texto y fi guras en la pantalla, y la clase JPanel (del paquete javax.swing), que proporciona un
rea en la que podemos dibujar.

























1 // Fig. 4.19: PanelDibujo.java
2 // Uso de drawLine para conectar las esquinas de un panel.
3 import java.awt.Graphics;
4 import javax.swing.JPanel;
5
6 public class PanelDibujo extends JPanel
7 {
8 // dibuja una x desde las esquinas del panel
9 public void paintComponent( Graphics g )
10 {
11 // llama a paintComponent para asegurar que el panel se muestre correctamente
12 super.paintComponent( g );
13
14 int anchura = getWidth(); // anchura total
15 int altura = getHeight(); // altura total
16
17 // dibuja una lnea de la esquina superior izquierda a la esquina inferior derecha
18 g.drawLine( 0, 0, anchura, altura );
19
20 // dibuja una lnea de la esquina inferior izquierda a la esquina superior derecha
21 g.drawLine( 0, altura, anchura, 0 );
22 } // fin del mtodo paintComponent
23 } // fin de la clase PanelDibujo
La lnea 6 utiliza la palabra clave extends para indicar que la clase PanelDibujo es un tipo mejorado de JPanel
(herencia).

Todo JPanel, incluyendo nuestro PanelDibujo, tiene un mtodo paintComponent (lneas 9 a 22), que el sistema llama
automticamente cada vez que necesita mostrar el objeto JPanel. El mtodo paintComponent debe declararse como se
muestra en la lnea 9; de no ser as, el sistema no llamar al mtodo. Este mtodo se llama cuando se muestra un objeto
JPanel por primera vez en la pantalla, cuando una ventana en la pantalla lo cubre y despus lo descubre, y cuando la
ventana en la que aparece cambia su tamao. El mtodo paintComponent requiere un argumento, un objeto Graphics,
que el sistema proporciona por usted cuando llama a paintComponent.

La primera instruccin en cualquier mtodo paintComponent que cree debe ser siempre:
super.paintComponent( g );

la cual asegura que el panel se despliegue apropiadamente en la pantalla, antes de empezar a dibujar en l. A
continuacin, las lneas 14 y 15 llaman a dos mtodos que la clase PanelDibujo hereda de la clase JPanel. Como
PanelDibujo extiende a JPanel, PanelDibujo puede usar cualquier mtodo public que est declarado en JPanel. Los
mtodos getWidth y getHeight devuelven la anchura y la altura del objeto JPanel, respectivamente. Las lneas 14 y 15
almacenan estos valores en las variables locales anchura y altura. Por ltimo, las lneas 18 y 21 utilizan la referencia g de la
clase Graphics para llamar al mtodo drawLine, y que dibuje las dos lneas. Los primeros dos argumentos son las
coordenadas x y y para uno de los puntos fi nales de la lnea, y los ltimos dos argumentos son las coordenadas para el
otro punto fi nal. Si cambia de tamao la ventana, las lneas se escalaran de manera acorde, ya que los argumentos se
basan en la anchura y la altura del panel. Al cambiar el tamao de la ventana en esta aplicacin, el sistema llama a
paintComponent para volver a dibujar el contenido de PanelDibujo. Para mostrar el PanelDibujo en la pantalla, debemos
colocarlo en una ventana. Usted debe crear una ventana con un objeto de la clase JFrame. En PruebaPanelDibujo.java
(figura 4.20), la lnea 3 importa la clase JFrame del paquete javax.swing. La lnea 10 en el mtodo main de la clase
PruebaPanelDibujo crea una instancia de la clase PanelDibujo, la cual contiene nuestro dibujo, y la lnea 13 crea un nuevo
objeto JFrame que puede contener y mostrar nuestro panel. La lnea 16 llama al mtodo setDefaultCloseOperation con el
argumento JFrame.EXIT_ON_CLOSE, para indicar que la aplicacin debe terminar cuando el usuario cierre la ventana. La
lnea 18 utiliza el mtodo add de JFrame para adjuntar el objeto PanelDibujo, que contiene nuestro dibujo, al objeto
JFrame. La lnea 19 establece el tamao del objeto JFrame. El mtodo setSize recibe dos parmetros: la anchura del objeto
JFrame y la altura. Por ltimo, la lnea 20 muestra el objeto JFrame. Cuando se muestra este objeto, se hace la llamada al
mtodo paintComponent de PanelDibujo (lneas 9 a 22 de la fi gura 4.19) y se dibujan las dos lneas (vea los resultados de
ejemplo de la fi gura 4.20). Cambie el tamao de la ventana, para que vea que las lneas siempre se dibujan con base en la
anchura y altura actuales de la ventana.





















1 // Fig. 4.20: PruebaPanelDibujo.java
2 // Aplicacin que muestra un PanelDibujo.
3 import javax.swing.JFrame;
4
5 public class PruebaPanelDibujo
6 {
7 public static void main( String args[] )
8 {
9 // crea un panel que contiene nuestro dibujo
10 PanelDibujo panel = new PanelDibujo();
11
12 // crea un nuevo marco para contener el panel
13 JFrame aplicacion = new JFrame();
14
15 // establece el marco para salir cuando se cierre
16 aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
17
18 aplicacion.add( panel ); // agrega el panel al marco
19 aplicacion.setSize( 250, 250 ); // establece el tamao del marco
20 aplicacion.setVisible( true ); // hace que el marco sea visible
21 } // fin de main
22 } // fin de la clase PruebaPanelDibujo
Ejercicios del ejemplo prctico de GUI y grficos
4.1 Utilizar ciclos e instrucciones de control para dibujar lneas puede producir muchos diseos interesantes.
a) Cree el diseo que se muestra en la captura de pantalla izquierda de la fi gura 4.21. Este diseo dibuja lneas que parten
desde la esquina superior izquierda, y se despliegan hasta cubrir la mitad superior izquierda del panel. Un mtodo es
dividir la anchura y la altura en un nmero equivalente de pasos (nosotros descubrimos que 15 pasos es una buena
cantidad). El primer punto final de una lnea siempre estar en la esquina superior izquierda (0,0).
El segundo punto final puede encontrarse partiendo desde la esquina inferior izquierda, y avanzando un paso vertical
hacia arriba, y un paso horizontal hacia la derecha. Dibuje una lnea entre los dos puntos finales. Contine avanzando
hacia arriba y a la derecha, para encontrar cada punto final sucesivo. La fi gura deber escalarse apropiadamente, a
medida que se cambie el tamao de la ventana.

b) Modifique su respuesta en la parte (a) para hacer que las lneas se desplieguen a partir de las cuatro esquinas, como se
muestra en la captura de pantalla derecha de la fi gura 4.21. Las lneas de esquinas opuestas debern intersecarse a lo
largo de la parte media.

4.2 La fi gura 4.22 muestra dos diseos adicionales, creados mediante el uso de ciclos while y drawLine.
a) Cree el diseo de la captura de pantalla izquierda de la figura 4.22. Empiece por dividir cada flanco en un nmero
equivalente de incrementos (elegimos 15 de nuevo). La primera lnea empieza en la esquina superior izquierda y termina
un paso a la derecha, en el flanco inferior. Para cada lnea sucesiva, avance hacia abajo un incremento en el flanco
izquierdo, y un incremento a la derecha en el flanco inferior. Contine dibujando lneas hasta llegar a la esquina inferior
derecha. La fi gura deber escalarse a medida que se cambie el tamao de la ventana, de manera que los puntos finales
siempre toquen los flancos.


























1 // Fig. 4.20: PruebaPanelDibujo.java
2 // Aplicacin que muestra un PanelDibujo.
3 import javax.swing.JFrame;
4
5 public class PruebaPanelDibujo
6 {
7 public static void main( String args[] )
8 {
9 // crea un panel que contiene nuestro dibujo
10 PanelDibujo panel = new PanelDibujo();
11
12 // crea un nuevo marco para contener el panel
13 JFrame aplicacion = new JFrame();
14
15 // establece el marco para salir cuando se cierre
16 aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
17
18 aplicacion.add( panel ); // agrega el panel al marco
19 aplicacion.setSize( 250, 250 ); // establece el tamao del marco
20 aplicacion.setVisible( true ); // hace que el marco sea visible
21 } // fin de main
22 } // fin de la clase PruebaPanelDibujo




b) Modifique su respuesta en la parte (a) para reflejar el diseo en las cuatro esquinas, como se muestra en la captura de
pantalla derecha de la figura 4.22.

5.10 (Opcional) Ejemplo prctico de GUI y grfi cos: dibujo de rectngulos y valos
Esta seccin demuestra cmo dibujar rectngulos y valos, usando los mtodos drawRect y drawOval de Graphics,
respectivamente. Estos mtodos se demuestran en la figura 5.26.
La lnea 6 empieza la declaracin de la clase para Figuras, que extiende a JPanel. La variable de instancia opcin,
declarada en la lnea 8, determina si paintComponent debe dibujar rectngulos u valos. El constructor de Figuras en las
lneas 11 a 14 inicializa opcion con el valor que se pasa en el parmetro opcionUsuario.
El mtodo paintComponent (lneas 17 a 36) realiza el dibujo actual. Recuerde que la primera instruccin en todo
mtodo paintComponent debe ser una llamada a super.paintComponent, como en la lnea 19. Las lneas 21 a 35 iteran 10
veces para dibujar 10 figuras. La instruccin switch (lneas 24 a 34) elije entre dibujar rectngulos y dibujar valos.
Si opcin es 1, entonces el programa dibuja un rectngulo. Las lneas 27 y 28 llaman al mtodo drawRect de
Graphics. El mtodo drawRect requiere cuatro argumentos. Los primeros dos representan las coordenadas x y y de la
esquina superior izquierda del rectngulo; los siguientes dos representan la anchura y la altura del rectngulo. En este
ejemplo, empezamos en la posicin 10 pxeles hacia abajo y 10 pxeles a la derecha de la esquina superior izquierda, y
cada iteracin del ciclo avanza la esquina superior izquierda otros 10 pxeles hacia abajo y a la derecha. La anchura y la
altura del rectngulo empiezan en 50 pxeles, y se incrementan por 10 pxeles en cada iteracin.
Si opcin es 2, el programa dibuja un valo. Al dibujar un valo se crea un rectngulo imaginario llamado rectngulo
delimitador, y dentro de ste se crea un valo que toca los puntos medios de todos los cuatro lados del rectngulo
delimitador. El mtodo drawOval (lneas 31 y 32) requiere los mismos cuatro argumentos que el mtodo drawRect. Los
argumentos especifican la posicin y el tamao del rectngulo delimitador para el valo.







































Figura 5.26 | Cmo dibujar una cascada de fi guras, con base en la opcin elegida por el usuario.

Los valores que se pasan a drawOval en este ejemplo son exactamente los mismos valores que se pasan a drawRect en las
lneas 27 y 28. Como la anchura y la altura del rectngulo delimitador son idnticas en este ejemplo, las lneas 27 y 28
dibujan un crculo. Puede modificar el programa para dibujar rectngulos y valos, para ver cmo se relacionan drawOval
y drawRect.
La figura 5.27 es responsable de manejar la entrada del usuario y crear una ventana para mostrar el dibujo
apropiado, con base en la respuesta del usuario. La lnea 3 importa a JFrame para manejar la pantalla, y la lnea 4 importa
a JOptionPane para manejar la entrada.
Las lneas 11 a 13 muestran un cuadro de dilogo al usuario y almacenan la respuesta de ste en la variable
entrada. La lnea 15 utiliza el mtodo parseInt de Integer para convertir el objeto String introducido por el usuario en un
int, y almacena el resultado en la variable opcin. En la lnea 18 se crea una instancia de la clase Figuras, y se pasa la
opcin del usuario al constructor. Las lneas 20 a 25 realizan las operaciones estndar para crear y establecer una ventana:
crear un marco, configurarlo para que la aplicacin termine cuando se cierre, agregar el dibujo al marco, establecer su
tamao y hacerlo visible.


// Fig. 5.26: Figuras.java
// Demuestra cmo dibujar distintas figuras.
import java.awt.Graphics;
import javax.swing.JPanel;

public class Figuras extends JPanel
{
private int opcion; // opcin del usuario acerca de cul figura dibujar

// el constructor establece la opcin del usuario
public Figuras( int opcionUsuario )
{
opcion = opcionUsuario;
} // fin del constructor de Figuras

// dibuja una cascada de figuras, empezando desde la esquina superior izquierda
public void paintComponent( Graphics g )
{
super.paintComponent( g );

for ( int i = 0; i < 10; i++ )
{
// elije la figura con base en la opcin del usuario
switch ( opcion )
{
case 1: // dibuja rectngulos
g.drawRect( 10 + i * 10, 10 + i * 10,
50 + i * 10, 50 + i * 10 );
break;
case 2: // dibuja valos
g.drawOval( 10 + i * 10, 10 + i * 10,
50 + i * 10, 50 + i * 10 );
break;
} // fin del switch
} // fin del for
} // fin del mtodo paintComponent
} // fin de la clase Figuras































Figura 5.27 | Cmo obtener datos de entrada del usuario y crear un objeto JFrame para mostrar figuras.

// Fig. 5.27: PruebaFiguras.java
// Aplicacin de prueba que muestra la clase Figuras.
import javax.swing.JFrame;
import javax.swing.JOptionPane;

public class PruebaFiguras
{
public static void main( String args[] )
{
// obtiene la opcin del usuario
String entrada = JOptionPane.showInputDialog(
"Escriba 1 para dibujar rectangulos\n" +
"Escriba 2 para dibujar ovalos" );

int opcion = Integer.parseInt( entrada ); // convierte entrada en int

// crea el panel con la entrada del usuario
Figuras panel = new Figuras( opcion );

JFrame aplicacion = new JFrame(); // crea un nuevo objeto JFrame

aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
aplicacion.add( panel ); // agrega el panel al marco
aplicacion.setSize( 300, 300 ); // establece el tamao deseado
aplicacion.setVisible( true ); // muestra el marco
} // fin de main
} // fin de la clase PruebaFiguras
6.13 (Opcional) Ejemplo prctico de GUI y grficos: colores y fi guras rellenas

Aunque podemos crear muchos disenos interesantes solo con lineas y fi guras basicas, la clase Graphics proporciona
muchas herramientas mas. Las siguientes dos herramientas que presentaremos son los colores y las
fi guras rellenas. El color agrega otra dimension a los dibujos que ve un usuario en la pantalla de la computadora.
Las fi guras rellenas cubren regiones completas con colores solidos, en vez de dibujar solo contornos.
Los colores que se muestran en las pantallas de las computadoras se defi nen en base a sus componentes rojo,
verde y azul. Estos componentes, llamados valores RGB, tienen valores enteros de 0 a 255. Entre mas alto sea
el valor de un componente especifi co, mas intensidad de color tendra esa fi gura. Java utiliza la clase Color en el
paquete java.awt para representar colores usando sus valores RGB. Por conveniencia, el objeto Color contiene
13 objetos static Color predefi nidos: Color.BLACK, Color.BLUE, Color.CYAN, Color.DARK_GRAY, Color.
GRAY, Color.GREEN, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.RED,
Color.WHITE y Color.YELLOW. La clase Color tambien contiene un constructor de la forma:

public Color( int r, int g, int b )

de manera que podemos crear colores especfi cos, con slo especifi car valores para los componentes individuales
rojo, verde y azul de un color.
Los rectngulos y los valos rellenos se dibujan usando los mtodos fillRect y fillOval de Graphics, respectivamente. Estos
dos mtodos tienen los mismos parmetros que sus contrapartes drawRect y drawOval
sin relleno: los primeros dos parmetros son las coordenadas para la esquina superior izquierda de la fi gura, mientras
que los otros dos parmetros determinan su anchura y su altura. El ejemplo de las fi guras 6.16 y 6.17 demuestra
los colores y las fi guras rellenas, al dibujar y mostrar una cara sonriente amarilla (esto lo ver en su pantalla).
































1 // Fig. 6.16: DibujarCaraSonriente.java
2 // Demuestra las figuras rellenas.
3 import java.awt.Color;
4 import java.awt.Graphics;
5 import javax.swing.JPanel;
6
7 public class DibujarCaraSonriente extends JPanel
8 {
9 public void paintComponent( Graphics g )
10 {
11 super.paintComponent( g );
12
13 // dibuja la cara
14 g.setColor( Color.YELLOW );
15 g.fillOval( 10, 10, 200, 200 );
16
17 // dibuja los ojos
18 g.setColor( Color.BLACK );
19 g.fillOval( 55, 65, 30, 30 );
20 g.fillOval( 135, 65, 30, 30 );
21
22 // dibuja la boca
23 g.fillOval( 50, 110, 120, 60 );
24
25 // convierte la boca en una sonrisa
26 g.setColor( Color.YELLOW );
27 g.fillRect( 50, 110, 120, 30 );
28 g.fillOval( 50, 120, 120, 40 );
29 } // fin del mtodo paintComponent
30 } // fin de la clase DibujarCaraSonriente




















Las instrucciones import en las lneas 3 a 5 de la fi gura 6.16 importan las clases Color, Graphics y JPanel.
La clase DibujarCaraSonriente (lneas 7 a 30) utiliza la clase Color para especifi car los colores, y utiliza la clase
Graphics para dibujar. La clase JPanel proporciona de nuevo el rea en la que vamos a dibujar. La lnea 14 en
el mtodo paintComponent utiliza el mtodo setColor de Graphics para establecer el color actual para dibujar
en Color.YELLOW. El mtodo setColor requiere un argumento, el Color a establecer como el color para dibujar.
En este caso, utilizamos el objeto predefi nido Color.YELLOW. La lnea 15 dibuja un crculo con un dimetro
de 200 para representar la cara; cuando los argumentos anchura y altura son idnticos, el mtodo fillOval dibuja
un crculo. A continuacin, la lnea 18 establece el color en Color.BLACK, y las lneas 19 y 20 dibujan los ojos.
La lnea 23 dibuja la boca como un valo, pero esto no es exactamente lo que queremos. Para crear una cara feliz,
vamos a retocar la boca. La lnea 26 establece el color en Color.YELLOW, de manera que cualquier fi gura que
dibujemos se mezcle con la cara. La lnea 27 dibuja un rectngulo con la mitad de altura que la boca. Esto borra
la mitad superior de la boca, dejando slo la mitad inferior. Para crear una mejor sonrisa, la lnea 28 dibuja otro
valo para cubrir ligeramente la porcin superior de la boca. La clase PruebaDibujarCaraSonriente (fi gura
6.17) crea y muestra un objeto JFrame que contiene el dibujo. Cuando se muestra el objeto JFrame, el sistema
llama al mtodo paintComponent para dibujar la cara sonriente.

Ejercicios del ejemplo prctico de GUI y grfi cos
6.1 Usando el metodo fillOval, dibuje un tiro al blanco que alterne entre dos colores aleatorios, como en la fi gura
6.18. Use el constructor Color( int r, int g, int b ) con argumentos aleatorios para generar colores aleatorios.
6.2 Cree un programa para dibujar 10 fi guras rellenas al azar en colores, posiciones y tamanos aleatorios (fi gura
6.19). El metodo paintComponent debe contener un ciclo que itere 10 veces. En cada iteracion, el ciclo debe determinar
si se dibujara un rectangulo o un ovalo relleno, crear un color aleatorio y elegir las coordenadas y las medidas al azar.
Las coordenadas deben elegirse con base en la anchura y la altura del panel. Las longitudes de los lados deben limitarse
a la mitad de la anchura o altura de la ventana.
// Fig. 6.17: PruebaDibujarCaraSonriente.java
// Aplicacin de prueba que muestra una cara sonriente.
import javax.swing.JFrame;

public class PruebaDibujarCaraSonriente
{
public static void main( String args[] )
{
DibujarCaraSonriente panel = new DibujarCaraSonriente();
JFrame aplicacion = new JFrame();

aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
aplicacion.add( panel );
aplicacion.setSize( 230, 250 );
aplicacion.setVisible( true );
} // fin de main
} // fin de la clase PruebaDibujarCaraSonriente

Figura 6.18 | Un tiro al blanco con dos colores alternantes al azar.


Figura 6.19 | Figuras generadas al azar.