Programacin Modular Graphics

Instrucciones Paso 1:
Corre NetBeans y crea un nuevo proyecto al que llamaras Sesion7. Agrega un JFrame llamado MainFrame. Debers tener una estructura de proyecto similar a la que se ve en la siguiente fotografa:

Paso 2:
Crea la siguiente interfaz grfica:

El control de la parte de abajo se llama JTextArea y es un JTextField que puede tener ms de un rengln. Al agregar un JTextArea automaticamente se agrega un JScrollPane que son las barritas de los lados con las que podemos bajar el texto. En el Navigator podemos ver que el JTextArea est dentro de un JScrollPane. Una vez que tengamos todos los controles debemos ponerles los siguientes nombres (recuerda que puedes utilizar F2 para que sea ms fcil cambiarles el nombre):

Recuerda que para que el JFrame se muestre debes poner la lnea setVisible(true); dentro del constructor de la clase, despus de la llamada al mtodo initComponents(). Una vez que hayas creado la ventana recuerda agregar la lnea new MainFrame() dentro del mtodo main() de la clase Main.

Paso 4:
Nuestro programa va a calcular el rea de un anillo, que se calcula mediante restando el rea del circulo interno del rea del circulo externo. Para poder hacer esto nuestro programa debe calcular el rea del crculo interno y del crculo externo utilizando el radio. Como esa operacin es repetitiva vamos a ponerla en un mtodo por separado. El mtodo va a llamarse calculateArea(), va a recibir el radio (tipo double) y debe regresar un valor tipo double que representa el rea. En cdigo podramos verlo como el siguiente mtodo:

Paso 5:
Ahora s, vamos a crear el mtodo actionPerformed() de btnCalculate. En el modo de diseo haz click derecho sobre el botn y selecciona Events -> Action -> actionPerformed. Dentro del cdigo debemos obtener los valores de los radios, podemos utilizar el siguiente cdigo para lograrlo:

Paso 6:
Una vez que tengamos los datos debemos validar que el radio interior sea menor o igual que el radio exterior. Esto podemos lograrlo mediante un if, y slo si son vlidos debemos de calcular las reas y restarlas. El resultado final vamos a mostrarlo en el JTextArea de la parte inferior. En cdigo podramos verlo como lo siguiente:

Prueba que todo funcione correctamente en tu aplicacin compilando el programa y corrindolo. Hasta este momento debe poder calcular el rea de un anillo y mostrarla en el JTextArea que pusimos para mostrar resultados, tambin debe poder validar errores.

Paso 7:
Aunque nuestro programa ya cumple con su objetivo muchas veces eso no es suficiente para nuestros clientes que la mayora de las veces quieren algo un poco ms vistoso. En este momento es en el que podemos utilizar Graphics para dar un valor agregado a nuestros programas. Como vimos en el autoestudio podemos utilizar la clase Graphics para pintar sobre un componente, por lo que no podemos pintar sobre un JFrame (tcnicamente s se puede pero no se debe hacer por la implementacin de Java del JFrame). Este componente puede ser cualquier componente de Swing, aunque regularmente se utiliza un JLabel o un JComponent por ser muy sencillos y ligeros. Por lo tanto para poder pintar debemos crear un componente nuevo que se comporte como JComponent, pero que se

dibuje de manera diferente. Para poder hacer esto debemos hacer click derecho sobre el paquete sesion7 y seleccionar New -> BeanForm.

Si no se encuentra BeanForm en el men debemos seleccionar New -> File/Folder y dentro de ese men seleccionar BeanForm como se ve en la imagen:

Nuestro Bean va a llamarse RingBean y su superclase debe ser javax.swing.JComponent como se ve en las siguientes fotografas:

Paso 8:
Al terminar aparecer un error de que no puede pintar la forma porque no es un JavaBean. Esto es porque todava no hemos programado cmo debe de pintarse el JComponent y NetBeans todava no lo puede dibujar. Haz click en source y vete al cdigo. Pon el cursor en algn lugar en blanco fuera de un mtodo, pero dentro de la clase y presionar Ctrl+Space para que aparezca el dilogo de autocompletar. Ah debes escribir paintComponent y se seleccionar la entrada que se ve en la fotografa:

Es muy importante que sea paintComponent (sin la s) y que a la derecha diga override. Una vez que lo hayas encontrado presiona enter y se construir automticamente el mtodo paintComponent() que tiene un parmetro de tipo Graphics con el que podemos dibujar sobre el componente. Presiona Alt+Shift+F para resolver las dependencias (Graphics todava no estaba incluido en los imports) y dentro de ese mtodo pon el siguiente cdigo:

La palabra clave this se refiere a este componente. Una vez que creamos la instancia y lo ponemos en la ventana this.getWidth() debe devolvernos el ancho de ese componente

dentro de la ventana. Obtenemos el ancho y el alto del componente para garantizar que todava estamos dibujando dentro de l. De acuerdo a tu autoestudio para qu crees que funciona el cdigo anterior? Compila tu programa para revisar que no haya ningn error y para garantizar que el Bean ha sido construido. Ahora debemos agregar nuestro RingBean a la paleta de NetBeans para poder ponerlo en la ventana que hicimos anteriormente. Podemos lograr eso haciendo click derecho sobre el Bean en el explorador de proyectos, seleccionando Tools -> Add to Palette.

En la pantalla que aparece seleccionamos la carpeta de Beans y regresamos a MainFrame en modo de diseo. Podemos ver que en la paleta dentro de la seccin de Beans ha aparecido nuestro Bean, as que ahora podemos agregarlo a la ventana.

Agrega el componente a la ventana. Si en el tiempo de diseo parece que tu Bean todava no tiene forma no te preocupes, lo que pasa es que NetBeans no vuelve a leer los Beans sino hasta volver a empezar. Esto es un error en el que estn trabajando los programadores de NetBeans, pero no afecta tu proyecto. Despus de agregar el RingBean cambile el nombre a ring de la misma manera que lo haras con otros componentes. Compila y corre el programa y podrs ver una ventana similar a la siguiente (dependiendo del lugar en que pusiste tu control):

Nuestro control ya est dibujando un rectngulo, pero ahora lo que queremos hacer es que dibuje los anillos interior y exterior. Para poder hacer esto es necesario modificar RingBean. Primero vamos a crear un par de variables que guarden los valores de los radios, despus debemos crear un mtodo que reciba los radios que se deben dibujar y despus manden dibujar utilizando estos datos. Copia el siguiente cdigo dentro de RingBean:

En este cdigo vamos a ver varias cosas interesantes. Primero que nada fjate que las variables tienen el modificador private para que otros objetos no puedan acceder a sus variables ms ntimas. Esto es por algo llamado encapsulacin que vamos a ver mucho ms a profundiad al tocar el tema de programacin orientada a objetos. Adems es importante notar que las variables son de tipo int, porque Graphics no puede manejar los tipos de dato double. En el mtodo setRadius() podemos ver que utilizamos la palabra clave this para referirnos a la variable del objeto, a diferencia de la variable pasada como parmetro, esto tambin es un comportamiento que analizaremos ms detalladamente al ver programacin orientada a objetos. En pocas palabras:

this.innerRadius == innerRadius de la clase innerRadius == innerRadius el parmetro Por ltimo podemos ver el mtodo repaint() que le dice al componente que ha sucedido algo que amerita que vuelva a pintarse. Este mtodo se encarga de revisar qu fue lo que sucedi y llamar los mtodos adecuados para volver a dibujar el componente. Una vez que hemos echo esto debemos modificar el mtodo paintComponent() para que utilice estos valores y dibuje dos crculos en lugar del rectngulo que dibuja actualmente. Podemos lograr esto mediante el siguiente cdigo:

Este mtodo puede parecer un poco complicado. Podemos ver que primero calculamos el centro del componente (dividiendo el ancho entre dos y el largo entre dos). Una vez que hemos echo eso vamos a poner el punto inicial en el centro menos el radio (con esto estamos garantizando que el centro del crculo est a la mitad de la ventana porque el crculo mide dos veces el radio) y por ltimo estoy poniendo el ancho y alto como el doble del radio. Podemos verlo graficamente:

Por ltimo slo debemos mandar llamar el mtodo setRadius() dentro del actionPerformed del botn btnCalculate. Podemos hacerlo de la siguiente manera:

Adems de los mtodos drawX (como drawRect(), drawOval()), la clase Graphics tambin tiene mtodos fillX (como fillRect() y fillOval()). Estos mtodos dibujan una figura que est rellena de color. Para poder cambiar el color del pincel que utilizamos para pintar sobre el bean puedes utilizar el mtodo setColor() de la clase Graphics (es decir, lo utilizas g.setColor(Color.GREEN), revisa el men de autocompletar de NetBeans para saber algunos otros colores que puedes utilizar).

Comprime tu carpeta de trabajo y mndala por correo.