Programacin Orientada a Objetos Unidad: II Clases y Objetos Laboratorio: 2 Trabajando con Clases y Objetos e Interfaz de Usuario Grfica con

on Java y NetBeans IDE. Modalidad: Individual. Objetivo: Al finalizar la actividad, el alumno crear una aplicacin grfica utilizando el paradigma orientado a objetos. Para realizar la actividad desarrolle los siguientes puntos: Iniciar NetBeans 1) Ejecute NetBeans IDE: Inicio -> Todos los programas -> NetBeans -> NetBeans IDE 7.1. Abra el proyecto ProyectoContadorManual 2) En el panel Proyectos expanda el proyecto de nombre ProyectoContadorManual, haciendo clic en el smbolo +. Expanda tambin la seccin de nombre Paquetes de fuentes. Deber ver los paquetes de nombres contadormanual y proyectocontadormanual.

Crear un nuevo paquete de fuentes (source package) 3) Haz clic con el botn derecho del ratn en la rama Paquete de fuentes y elige del men de contexto que aparece la opcin Nuevo y del submen de contexto que se despliega selecciona la opcin Java Package Deber aparecer un dilogo con ttulo Nuevo Java Package. 4) En el dilogo desplegado escriba gui en la seccin Nombre de Paquete. D clic en el botn Terminar. 5) Aparecer un nuevo paquete de fuentes en el proyecto:

Crear una nueva clase de interfaz de usuario grfica 6) Haz clic con el botn derecho del ratn en el paquete de fuentes gui y elige del men de contexto que aparece la opcin Nuevo y del submen de contexto que se despliega selecciona la opcin Formulario JFrame Deber aparecer un dilogo con ttulo Nuevo Formulario JFrame. 7) En el dilogo desplegado escriba GUIContadorManual en la seccin Nombre de Clase. D clic en el botn Terminar. Aparecer una nueva ventana de edicin con un rectngulo gris, que servir como contenedor de la interfaz de usuario grfica. Agregando controles a la Interfaz de Usuario 8) Vaya al panel de nombre Paleta. Identifquelo con la siguiente figura:

9) Haga clic en el control de nombre Panel que aparece en la seccin Contenedores Swing de la Paleta. Mueva el cursor del ratn sobre el rectngulo gris en el panel de edicin y haga clic dentro del rectngulo. Esta accin ocasionar que se haya agregado un panel en la interfaz de usuario grfica. Haga clic en el control panel para marcarlo. 10) Vaya al panel que muestra las propiedades del panel recin agregado. Por lo general se encuentra debajo del panel de nombre Paleta. Guese por la siguiente figura:

11) Haga clic en el botn con tres puntos suspensivos que se encuentra a la derecha de la propiedad border. Guese por la siguiente figura: 12) Aparecer el dilogo que permite definir el borde que tendr el panel agregado. Haga clic en el borde de nombre Borde Sombreado.

13) Haga clic en el botn Aceptar. Se mostrar el control panel con un borde sombreado. 14) De la Paleta de Controles haga clic en el control de nombre Campo de Texto; despus haga clic dentro del panel al que recin hemos definido un borde para agregar un campo de texto. 15) Otra vez, haga clic en el control Botn, dentro de la Paleta de Controles. Despus haga clic dentro del panel, justo abajo del campo de texto recin agregado, para aadir a nuestra interfaz de usuario grfica un Botn. Repita la operacin para agregar un segundo botn justo a la derecha del primer botn aadido. 16) Haciendo uso de las mismas acciones del punto anterior agregue un tercer botn, pero este se colocar debajo del panel que contiene al campo de texto y a los dos botones anteriores. Modifique la interfaz de usuario para que se parezca a la siguiente figura:

Modificando las propiedades de los controles 17) Modifique el texto que muestran los cuatro controles agregados mediante el siguiente mecanismo. Seleccione el control haciendo clic en l con el botn derecho del ratn. En el men de contexto que aparece haga clic en la opcin Editar Texto. El control mostrar el texto marcndolo como seleccionado. Escriba el nuevo texto y presione la tecla Enter. De esta manera modifique los cuatro controles para que el texto mostrado sea como en la siguiente figura:

Cambie el nombre de las variables para cada control 18) Modifique el nombre de variable de cada control mediante el siguiente mecanismo. Seleccione el control haciendo clic en l con el botn derecho del ratn. En el men de contexto que aparece haga clic en la opcin Cambiar nombre de variable. Se mostrar el dilogo de nombre Cambiar Nombre. Escriba el nuevo nombre de variable para el control y haga clic en el botn Aceptar del dilogo Cambiar Nombre. De esta manera modifique los cuatro controles de acuerdo a lo siguiente: Control Nuevo nombre de variable Campo de texto textFieldConteo Botn con leyenda Aceptar buttonAceptar Botn con leyenda Reiniciar buttonReinicar Botn con leyenda Cerrar buttonCerrar Editar cdigo fuente del archivo GUIContadorManual.java 19) Haciendo clic en el icono Diseo Previo podemos tener una muestra de cmo se ver la interfaz de usuario grfica. Para ubicar el icono Diseo Previo guese por la siguiente figura:

20) La interfaz de usuario an no tiene funcionalidad. Al hacer clic en Diseo Previo NetBeans IDE nos muestra el formulario que estamos diseando, pero sin funcionalidad. Para salir haga clic en el icono Cerrar en la parte superior derecha de la ventana del formulario. Agregue a la interfaz de usuario un objeto ContadorManual 21) Haga clic en el botn Source en el panel de diseo de la interfaz de usuario grfica. NetBeans IDE nos mostrar el cdigo fuente del formulario GUIContadorManual. Dele un vistazo al cdigo fuente. 22) Agregue a la clase GUIContadorManual una variable de instancia llamada cm, asociada con el tipo ContadorManual.; no olvide aadir el enunciado import que permite acceso a la clase ContadorManual. 23) En la definicin del constructor GUIContadorManual() agregue la instanciacin del objeto de la clase ContadorManual. El cdigo de la clase GUIContadorManual deber verse similar al siguiente fragmento de cdigo. Los enunciados en color rojo son los que debern aadirse al cdigo de la clase GUIContadorManual. package gui; import contadormanual.ContadorManual; /** * * @author Jorge */ public class GUIContadorManual extends javax.swing.JPanel { private ContadorManual cm; /**

* Creates new form GUIContadorManual */ public GUIContadorManual() { initComponents(); cm = new ContadorManual(); } Haciendo que el formulario GUIContadorManual invoque el comportamiento de la instancia ContadorManual. 24) Haga clic en el botn Design en el panel de diseo de la interfaz de usuario grfica. NetBeans IDE nos mostrar el panel de diseo de interfaz de usuario. 25) Haga clic con el botn derecho del ratn en el botn buttonContar. En el men de contexto que se muestra haga clic primero en la opcin Eventos, despus en la opcin Action del segundo submen y finalmente en la opcin actionPerformed del tercer submen de contexto que aparece. Aparecer la ventana de edicin del cdigo fuente de la clase GUIContadorManual. Se habr agregado un nuevo mtodo, como se muestra a continuacin: private void buttonContarActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: } 26) Modifique el mtodo anterior para que sea similar al siguiente fragmento de cdigo: private void buttonContarActionPerformed(java.awt.event.ActionEvent evt) { cm.contar(); textFieldConteo.setText(Integer.toString(cm.getConteo())); } 27) Regrese a la ventana de diseo de la interfaz de usuario haciendo clic en el botn Design. Despus haga clic con el botn derecho del ratn en el botn buttonReiniciar. En el men de contexto que se muestra haga clic primero en la opcin Eventos, despus en la opcin Action del segundo submen y finalmente en la opcin actionPerformed del tercer submen de contexto que aparece. Aparecer la ventana de edicin del cdigo fuente de la clase GUIContadorManual. Se habr agregado un nuevo mtodo, como se muestra a continuacin: private void buttonReiniciarActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: } 28) Modifique el mtodo anterior para que sea similar al siguiente fragmento de cdigo: private void buttonReiniciarActionPerformed(java.awt.event.ActionEvent evt) { cm.reiniciarConteo(); textFieldConteo.setText(Integer.toString(cm.getConteo())); } 29) Regrese a la ventana de diseo de la interfaz de usuario haciendo clic en el botn Design. Despus haga clic con el botn derecho del ratn en el botn buttonCerrar. En el men de contexto que se muestra haga clic primero en la opcin Eventos, despus en la opcin Action del segundo submen y finalmente en la opcin actionPerformed del tercer submen de contexto que aparece. Aparecer la ventana de edicin del cdigo fuente de la clase GUIContadorManual. Se habr agregado un nuevo mtodo, como se muestra a continuacin: private void buttonCerrarActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: } 30) Modifique el mtodo anterior para que sea similar al siguiente fragmento de cdigo: private void buttonCerrarActionPerformed(java.awt.event.ActionEvent evt) { System.exit(0); } 31) Editar cdigo fuente del archivo Main.java 32) En la ventana de edicin,

haga clic en la pestaa con ttulo Main.java para visualizar el cdigo fuente del archivo Main.java. Modifquelo para que sea idntico al siguiente fragmento de cdigo: /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package proyectocontadormanual; import gui.GUIContadorManual; /** * * @author Jorge */ public class Main { /** * @param args the command line arguments */ public static void main(String[] args) { // Crea y despliega el formulario java.awt.EventQueue.invokeLater(new Runnable() { @Override public void run() { new GUIContadorManual().setVisible(true); } }); }

//

} 33) Haga clic en Archivo -> Guardar todo. Ejecutar proyecto ProyectoContadorManual 34) Nuevamente en la ventana Proyecto haga clic en el nombre de proyecto ProyectoContadorManual con el botn derecho del ratn y en el men de contexto que aparece seleccione la opcin Ejecutar. 35) Responda las siguientes preguntas: a) Qu sucedi?