 |
Objetivo |
Aprender a modular los programas |
|---|---|---|
 |
Producto a Entregar |
Un archivo comprimido con el programa generado en la actividad. |
 |
Forma de Trabajo |
Equipos |
 |
Tiempo estimado |
2 horas |
 |
Forma de Entrega |
Por Blackboard |
 |
Recomendaciones |
|
 |
Instrucciones |
|---|---|
Paso 1:Corre NetBeans y crea un nuevo proyecto al que llamaras Sesion7. Agrega un JFrame llamado MainFrame. Deberás tener una estructura de proyecto similar a la que se ve en la siguiente fotografía:
Paso 2:Crea la siguiente interfaz gráfica:
El control de la parte de abajo se llama JTextArea y es un JTextField que puede tener más de un renglón. 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 más fácil cambiarles el nombre):
Recuerda que para que el JFrame se muestre debes poner la línea setVisible(true); dentro del constructor de la clase, después de la llamada al método initComponents(). Una vez que hayas creado la ventana recuerda agregar la línea new MainFrame() dentro del método 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 círculo interno y del círculo externo utilizando el radio. Como esa operación es repetitiva vamos a ponerla en un método por separado. El método va a llamarse calculateArea(), va a recibir el radio (tipo double) y debe regresar un valor tipo double que representa el área. En código podríamos verlo como el siguiente método:
Paso 5:Ahora sí, vamos a crear el método actionPerformed() de btnCalculate. En el modo de diseño haz click derecho sobre el botón y selecciona Events -> Action -> actionPerformed. Dentro del código debemos obtener los valores de los radios, podemos utilizar el siguiente código 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 sólo si son válidos debemos de calcular las áreas y restarlas. El resultado final vamos a mostrarlo en el JTextArea de la parte inferior. En código podríamos verlo como lo siguiente:
Prueba que todo funcione correctamente en tu aplicación compilando el programa y corriéndolo. Hasta este momento debe poder calcular el área de un anillo y mostrarla en el JTextArea que pusimos para mostrar resultados, también 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 mayoría de las veces quieren algo un poco más 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 (técnicamente sí se puede pero no se debe hacer por la implementación 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 fotografías:
Paso 8:Al terminar aparecerá un error de que no puede pintar la forma porque no es un JavaBean. Esto es porque todavía no hemos programado cómo debe de pintarse el JComponent y NetBeans todavía no lo puede dibujar. Haz click en source y vete al código. Pon el cursor en algún lugar en blanco fuera de un método, pero dentro de la clase y presionar Ctrl+Space para que aparezca el diálogo de autocompletar. Ahí debes escribir paintComponent y se seleccionará la entrada que se ve en la fotografía:
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á automáticamente el método paintComponent() que tiene un parámetro de tipo Graphics con el que podemos dibujar sobre el componente. Presiona Alt+Shift+F para resolver las dependencias (Graphics todavía no estaba incluido en los imports) y dentro de ese método pon el siguiente código:
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 todavía estamos dibujando dentro de él.
Compila tu programa para revisar que no haya ningún 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 diseño. Podemos ver que en la paleta dentro de la sección 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 diseño parece que tu Bean todavía 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 están trabajando los programadores de NetBeans, pero no afecta tu proyecto. Después de agregar el RingBean cambiále el nombre a ring de la misma manera que lo harías con otros componentes. Compila y corre el programa y podrás ver una ventana similar a la siguiente (dependiendo del lugar en que pusiste tu control):
Nuestro control ya está dibujando un rectángulo, 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, después debemos crear un método que reciba los radios que se deben dibujar y después manden dibujar utilizando estos datos. Copia el siguiente código dentro de RingBean:
En este código vamos a ver varias cosas interesantes. Primero que nada fíjate que las variables tienen el modificador private para que otros objetos no puedan acceder a sus variables más íntimas. Esto es por algo llamado encapsulación que vamos a ver mucho más a profundiad al tocar el tema de programación orientada a objetos. Además es importante notar que las variables son de tipo int, porque Graphics no puede manejar los tipos de dato double. En el método setRadius() podemos ver que utilizamos la palabra clave this para referirnos a la variable del objeto, a diferencia de la variable pasada como parámetro, esto también es un comportamiento que analizaremos más detalladamente al ver programación orientada a objetos. En pocas palabras:
Por último podemos ver el método repaint() que le dice al componente que ha sucedido algo que amerita que vuelva a pintarse. Este método se encarga de revisar qué fue lo que sucedió y llamar los métodos adecuados para volver a dibujar el componente. Una vez que hemos echo esto debemos modificar el método paintComponent() para que utilice estos valores y dibuje dos círculos en lugar del rectángulo que dibuja actualmente. Podemos lograr esto mediante el siguiente código:
Este método 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 círculo esté a la mitad de la ventana porque el círculo mide dos veces el radio) y por último estoy poniendo el ancho y alto como el doble del radio. Podemos verlo graficamente:
Por último sólo debemos mandar llamar el método setRadius() dentro del actionPerformed del botón btnCalculate. Podemos hacerlo de la siguiente manera:
Además de los métodos drawX (como drawRect(), drawOval()), la clase Graphics también tiene métodos fillX (como fillRect() y fillOval()). Estos métodos 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 método 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 mándala por Blackboard. |
|
