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.java2 // 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 JPanel7 {8 // dibuja una x desde las esquinas del panel9 public void paintComponent( Graphics g )10 {11 // llama a paintComponent para asegurar que el panel se muestre correctamente12 super.paintComponent( g );13 14 int anchura = getWidth(); // anchura total 15 int altura = getHeight(); // altura total16 17 // dibuja una lnea de la esquina superior izquierda a la esquina inferior derecha18 g.drawLine( 0, 0, anchura, altura );19 20 // dibuja una lnea de la esquina inferior izquierda a la esquina superior derecha21 g.drawLine( 0, altura, anchura, 0 );22 } // fin del mtodo paintComponent23 } // 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.java2 // Aplicacin que muestra un PanelDibujo.3 import javax.swing.JFrame;4 5 public class PruebaPanelDibujo6 {7 public static void main( String args[] )8 {9 // crea un panel que contiene nuestro dibujo10 PanelDibujo panel = new PanelDibujo();11 12 // crea un nuevo marco para contener el panel13 JFrame aplicacion = new JFrame();14 15 // establece el marco para salir cuando se cierre16 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 marco20 aplicacion.setVisible( true ); // hace que el marco sea visible 21 } // fin de main22 } // fin de la clase PruebaPanelDibujo

Ejercicios del ejemplo prctico de GUI y grficos4.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.java2 // Aplicacin que muestra un PanelDibujo.3import javax.swing.JFrame;45 public class PruebaPanelDibujo6 {7 public static void main( String args[] )8 {9 // crea un panel que contiene nuestro dibujo10 PanelDibujo panel = new PanelDibujo();1112 // crea un nuevo marco para contener el panel13 JFrame aplicacion = new JFrame();1415 // establece el marco para salir cuando se cierre16 aplicacion.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );1718 aplicacion.add( panel ); // agrega el panel al marco19 aplicacion.setSize( 250, 250 ); // establece el tamao del marco20 aplicacion.setVisible( true ); // hace que el marco sea visible21 } // fin de main22 } // 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 valosEsta 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.// 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.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.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

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

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 proporcionamuchas herramientas mas. Las siguientes dos herramientas que presentaremos son los colores y lasfi 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 seael valor de un componente especifi co, mas intensidad de color tendra esa fi gura. Java utiliza la clase Color en elpaquete java.awt para representar colores usando sus valores RGB. Por conveniencia, el objeto Color contiene13 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 individualesrojo, 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 drawOvalsin relleno: los primeros dos parmetros son las coordenadas para la esquina superior izquierda de la fi gura, mientrasque los otros dos parmetros determinan su anchura y su altura. El ejemplo de las fi guras 6.16 y 6.17 demuestralos 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.java2 // 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 JPanel8 {9 public void paintComponent( Graphics g )10 {11 super.paintComponent( g );12 13 // dibuja la cara14 g.setColor( Color.YELLOW );15 g.fillOval( 10, 10, 200, 200 );16 17 // dibuja los ojos18 g.setColor( Color.BLACK );19 g.fillOval( 55, 65, 30, 30 );20 g.fillOval( 135, 65, 30, 30 );21 22 // dibuja la boca23 g.fillOval( 50, 110, 120, 60 );24 25 // convierte la boca en una sonrisa26 g.setColor( Color.YELLOW );27 g.fillRect( 50, 110, 120, 30 );28 g.fillOval( 50, 120, 120, 40 );29 } // fin del mtodo paintComponent30 } // fin de la clase DibujarCaraSonriente

// 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

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 claseGraphics para dibujar. La clase JPanel proporciona de nuevo el rea en la que vamos a dibujar. La lnea 14 enel mtodo paintComponent utiliza el mtodo setColor de Graphics para establecer el color actual para dibujaren 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 dimetrode 200 para representar la cara; cuando los argumentos anchura y altura son idnticos, el mtodo fillOval dibujaun 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 quedibujemos se mezcle con la cara. La lnea 27 dibuja un rectngulo con la mitad de altura que la boca. Esto borrala mitad superior de la boca, dejando slo la mitad inferior. Para crear una mejor sonrisa, la lnea 28 dibuja otrovalo para cubrir ligeramente la porcin superior de la boca. La clase PruebaDibujarCaraSonriente (fi gura6.17) crea y muestra un objeto JFrame que contiene el dibujo. Cuando se muestra el objeto JFrame, el sistemallama al mtodo paintComponent para dibujar la cara sonriente.

Ejercicios del ejemplo prctico de GUI y grfi cos6.1 Usando el metodo fillOval, dibuje un tiro al blanco que alterne entre dos colores aleatorios, como en la fi gura6.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 gura6.19). El metodo paintComponent debe contener un ciclo que itere 10 veces. En cada iteracion, el ciclo debe determinarsi 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 limitarsea la mitad de la anchura o altura de la ventana.

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

Figura 6.19 | Figuras generadas al azar.