Gua de programacin para dibujar objetos

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