Tutorial 3 - GUIs Con NetBeans 5

Tutorial 3Aplicaciones con Interfaz Grfica de Usuario con NetBeans 5.0Creacin de un ProyectoPara crear un programa con una interfaz de usuario grfica en Java utilizando NetBeans 5.0 lo primero que hay que hacer es crear un proyecto. Un proyecto nos permite administrar los archivos con el cdigo fuente y compilado de una aplicacin. Para crear un proyecto se sigue el siguiente procedimiento: 1. Ejecute el programa NetBeans 5.0. Al hacerlo aparecer la ventana principal del programa como se ilustra en la figura 3.1.

Figura 3.1

ITSON

Manuel Domitsu Kono

40

Aplicaciones con Interfaz Grfica de Usuario con NetBeans 5.0

2. Del men principal de NetBeans 5.0, figura 3.1, seleccione la opcin File/New Project , presione las teclas Ctrl+Maysculas+N o haga clic en el icono New Project mostrado en la figura 3.2.

Figura 3.2 3. Aparecer la primera ventana del asistente para crear un nuevo proyecto, figura 3.3.

Figura 3.3 4. En esta ventana del asistente seleccionaremos el tipo de proyecto que deseamos crear. Como vamos a crear una aplicacin de consola, seleccionaremos la opcin General en el recuadro Categories: y la opcin Java Application en el recuadro Projets:, y luego presionaremos el botn Next>.

ITSON

Manuel Domitsu Kono

Tutorial 3

Programas de Consola con Netbeans 5.0

41

5. Aparecer la segunda ventana del asistente para crear proyectos, figura 3.4. En esta ventana seleccionaremos el nombre y la ubicacin del proyecto.

Figura 3.4 a) Establezca el nombre del proyecto (Project Name): Por ejemplo, amanteMusica. b) Establezca el directorio donde se almacenar el proyecto (Projet Location). Por ausencia en Windows 2000 y XP, el directorio es el directorio inicial del usuario: C:\Documents and Settings\usuario. En este ejemplo, el proyecto se ubic en: C:\Documents and Settings\mdomitsu\Mis documentos\nbproject. En la lnea siguiente puede verse la ubicacin del directorio en el que se almacenarn los archivos del proyecto: Project Location, que es el directorio con el nombre del proyecto dentro del directorio donde se ubica el proyecto. En este ejemplo es: C:\Documents and Settings\mdomitsu\Mis documentos\nbproject\amanteMusica. c) Asegrese que la casilla de verificacin: Set as Main Project (Haga que este proyecto sea el proyecto principal) est seleccionada. d) Asegrese que la casilla de verificacin: Create Main Class (Cree la clase principal, la clase con el mtodo main() est deseleccionada. No se quiere que se genere automticamente la clase principal. En lugar de ello, la clase con la primer ventana de la aplicacin contendr el mtodo main(). e) Presione el botn Finish.

ITSON

Manuel Domitsu Kono

42


6. Desaparecer el asistente para crear un nuevo proyecto y aparecer lo mostrado en la figura 3.5. Del lado izquierdo aparece el rbol de los proyectos, que en este momento slo tiene el proyecto amanteMusica.

Figura 3.5 7. Establezca la dependencia de este proyecto de otros proyectos. En este caso haga que este proyecto dependa de de los proyectos objetosServicio, amanteMusicaObjNeg, amanteMusicaInterfaces y amanteMusicaPersistenciaArreglos.

Creacin de la Clase con la Ventana Principal de la AplicacinPara crear la clase con la ventana principal de la aplicacin se sigue el siguiente procedimiento: 1. De la barra de men de NetBeans 5.0, seleccione la opcin Files/New File, presione las teclas Ctrl+ N o haga clic en el icono New File, como se muestra en la figura 3.6: 2. Aparecer la primera ventana del asistente para crear una clase, figura 3.7. 3. En el recuadro Categories: expandiremos el nodo Java GUI Forms para obtener los nodos mostrados en la figura 3.8.

ITSON

Manuel Domitsu Kono

Tutorial 3


43

Figura 3.6

Figura 3.7 4. Del recuadro Categories: seleccionaremos el nodo Sample Forms y del recuadro File Types seleccionaremos el tipo Application que nos crear el esqueleto de la ventana principal de la aplicacin, incluyendo una barra de men de muestra, que posteriormente modificaremos para ajustarlo a nuestra aplicacin. Presione el botn Next. 5. Aparecer la segunda ventana del asistente para crear clases, mostrada en la figura 3.9. En esta ventana seleccionaremos el nombre y la ubicacin de la clase de la ventana principal de una aplicacin. a) Establezca el nombre de la clase (Class Name): Por ejemplo, FrmAmanteMusica. b) Establezca el paquete donde estar la clase (Package). Por ejemplo, interfazUsuario c) Presione el botn Finish.

ITSON

Manuel Domitsu Kono

44


Figura 3.8

Figura 3.9

ITSON

Manuel Domitsu Kono

Tutorial 3


45

6. Desaparecer el asistente para crear una nueva clase y aparecer lo mostrado en la Figura 3.10.

Figura 3.10 En el lado superior izquierdo en la figura 3.10 podemos ver la Ventana de Proyectos de NetBeans con el rbol de proyectos y sus archivos. En la parte inferior izquierda est la Ventana de Inspeccin que nos muestra el rbol con los componentes de la clase desplegada en la Ventana del Editor de Cdigo, en el centro de la figura. En el lado superior derecho se muestra la Paleta de Componentes GUI con los diferentes componentes que podemos agregar a una ventana de una aplicacin. En el lado inferior derecho aparece el Editor de Propiedades de las Componentes en la que podemos editar los valores de la componente seleccionada en la Ventana del Editor de Cdigo o en la Ventana de Inspeccin. Cuando la clase desplegada en el editor de cdigo corresponde a una ventana o a un cuadro de dilogo, NetBeans nos presenta dos vistas de la clase: La Vista de Diseo que nos permite en forma grfica agregar componentes a la ventana o cuadro de dilogo y editar sus propiedades y la Vista de Cdigo Fuente que nos permite hacer lo mismo editando el cdigo fuente de la clase. Ambas vistas estn sincronizadas, los cambios hechas en una se ven relejadas en la otra. Podemos cambiar de una vista a otra mediante los selectores que se encuentran en la parte superior de la Ventana del Editor de Cdigo.

ITSON

Manuel Domitsu Kono

46


7. En la figura 3.11 se muestra un fragmento de la Vista de Cdigo Fuente para la clase FrmAmanteMusica.java. En esta imagen podemos ver en encabezado de la clase y un constructor que invoca al mtodo initComponents() que se encarga de inicializar los componentes de la interfaz grfica de la ventana.

Figura 3.11 8. Al final del cdigo de la clase se encuentran las declaraciones de los atributos de la clase, figura 3.12. Las declaraciones que aparecen en fondo azul fueron generadas por NetBeans para las componentes de la interfaz grfica y no pueden ser modificadas. Sin embargo podemos agregar declaraciones en el rengln en blanco al final de las declaraciones. 9. Otro de los fragmentos de cdigo generados por NetBeans es el mtodo initComponents() que se encarga de inicializar los componentes de la interfaz grfica de la ventana. Inicialmente el cdigo de este mtodo est oculto y slo se muestra un botn con el smbolo [+] en el margen izquierdo de la ventana de edicin para hacerlo visible, figura 3.13.

ITSON

Manuel Domitsu Kono

Tutorial 3


47

Figura 3.12

Figura 3.13 10. Al hacer clic en el botn [+] el cdigo se har visible y el botn cambiar a [-], figura 3.14. Podemos ocultar el cdigo de nuevo haciendo clic en el botn [-]. Note que ese aparece con fondo azul y por lo tanto no puede no puede ser modificado. 11. Por ltimo, la figura 3.15 muestra otro fragmento de cdigo de la clase en la que se muestra el mtodo oyente exitMenuItemActionPerformed() que contiene el cdigo que se ejecutar cuando se haga clic en la opcin Exit del men descendente File de la barra de men. Tambin contiene el cdigo del mtodo main(). 12. Guarde la clase seleccionando del men principal la opcin File/Save, presione las teclas Ctrl+S o haga clic en el icono Save All, mostrado en la figura 3.16.

ITSON

Manuel Domitsu Kono

48


Figura 3.14

Figura 3.15

Figura 3.16ITSON Manuel Domitsu Kono

Tutorial 3


49

Ubicacin de los Archivos de un ProyectoLa figura 3.17, muestra los directorios y archivos generados al crear el proyecto. Todos los archivos del proyecto se encuentran en una carpeta con el nombre del proyecto, amanteMusica en este caso. El cdigo fuente del proyecto se almacena en la carpeta scr dentro de la carpeta del proyecto. El cdigo fuente de una clase se guarda en un archivo que tiene el mismo nombre de la clase y con la extensin .java dentro de una carpeta con el mismo nombre del paquete establecido para la clase. En este caso, el cdigo fuente de la clase con la ventana principal de la aplicacin se almacena en el archivo FrmAmanteMusica.java dentro de la carpeta interfazUsuario.

Figura 3.17

Compilacin del ProyectoPara compilar todas las clases de un proyecto seleccione del men principal la opcin Build/Build Main Project, presione la tecla F11 o presione el icono Build Main Project, mostrado en la figura 3.18.

Figura 3.18 Durante la compilacin, NetBeans muestra los mensajes resultantes del proceso, como se muestra en la figura 3.19.

ITSON

Manuel Domitsu Kono

50


Figura 3.19

Ubicacin de los Archivos con el Cdigo byteCode del ProyectoLa figura 3.20, muestra los directorios y archivos generados al compilar el proyecto. Todos los archivos con el cdigo bytecode resultado de la compilacin del proyecto se se encuentran en la carpeta build/classes dentro de la carpeta del proyecto, amanteMusica en este caso. El cdigo bytecode de una clase se guarda en un archivo que tiene el mismo nombre de la clase y con la extensin .class dentro de una carpeta con el mismo nombre del paquete establecido para la clase. En este caso, el cdigo fuente de la clase con la ventana principal de la aplicacin se almacena en el archivo FrmAmanteMusica.class dentro de la carpeta interfazUsuario.

Figura 3.20 El archivo JAR con los archivos con el cdigo bytecode empacados se encuentran en un archivo con el nombre del proyecto y la extensin .jar dentro del directorio dist dentro del directorio del proyecto, figura 3.21.

ITSON

Manuel Domitsu Kono

Tutorial 3


51

Figura 3.21

Ejecucin de una Aplicacin1. Para ejecutar la aplicacin dentro de NetBeans, seleccione del men principal la opcin Run/Run Main Project, presione la tecla F6 o haga clic en el icono Run Main Project, mostrado en la figura 3.22.

Figura 3.22 2. NetBeans nos presenta el cuadro de dilogo mostrado en la figura 3.23 en el que nos indica que no hemos establecido el nombre de la clase principal (la que contiene el mtodo main()), y nos muestra una lista de las clases del proyecto para que seleccionemos la indicada. En este caso slo hay una, la seleccionamos y hacemos clic en el botn OK. 3. NetBeans ejecutar la aplicacin desplegando su ventana principal como se muestra en la figura 3.24. 4. Para terminar la ejecucin de la aplicacin seleccione la opcin File/Exit de la aplicacin o presione el botn Cerrar.

ITSON

Manuel Domitsu Kono

52


Figura 3.23

Figura 3.24

ITSON

Manuel Domitsu Kono

Tutorial 3


53

Establecer el Ttulo de la Aplicacin en la Barra de Ttulo de la Ventana de la AplicacinNote en la figura 3.24, que la barra de ttulo de la ventana de la aplicacin (la barra donde estn los iconos para minimizar, maximizar y cerrar la aplicacin) no contiene el ttulo de la aplicacin. Para establecer el ttulo de la aplicacin en la barra de ttulo en la ventana de la aplicacin seguimos el siguiente procedimiento. 1. En la Ventana del Editor de Cdigo seleccione la Vista de Diseo, figura 3.10. 2. En el Editor de Propiedades de las Componentes aparecen las propiedades de la clase que representa la ventana de la aplicacin, JFrame, figura 3.25. Establezca el valor de la propiedad title al valor de ttulo deseado, Amante Msica, en este caso. La propiedad title es el texto que aparecer en la barra de ttulo en la ventana de la aplicacin.

Figura 3.25 3. Vuelva a ejecutar la aplicacin. En la barra de ttulo en la ventana de la aplicacin aparecer el ttulo como se muestra en la figura 3.26.

Centrado de la Ventana de la Aplicacin en la PantallaNote en la figura 3.24, que la ventana de la aplicacin aparece en la esquina superior izquierda de la pantalla. Para centrar la ventana de la aplicacin en la pantalla seguimos el siguiente procedimiento. 1. En la Ventana del Editor de Cdigo seleccione la Vista de Cdigo Fuente, figura 3.11.

ITSON

Manuel Domitsu Kono

54


Figura 3.26 2. Localice el constructor de la clase: public FrmAmanteMusica() e inmediatamente despus de su cdigo agregue el siguiente mtodo para centrar la ventana de la aplicacin en la pantalla:/** * Este mtodo centra la ventana de la aplicacin sobre la pantalla */ private void centraVentana() { //Obtiene el tamao de la pantalla Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize(); // Obtiene el tamao de la ventana de la aplicacin Dimension frameSize = getSize(); // Se asegura que el tamao de la ventana de la aplicacin // no exceda el tamao de la pantalla if (frameSize.height > screenSize.height) { frameSize.height = screenSize.height; } if (frameSize.width > screenSize.width) { frameSize.width = screenSize.width; } // Centra la ventana de la aplicacin sobre la pantalla setLocation((screenSize.width - frameSize.width) / 2, (screenSize.height - frameSize.height) / 2);

} 3. El cdigo del mtodo requiere agregarle a la clase las siguientes directivas import:import java.awt.Dimension; import java.awt.Toolkit;

ITSON

Manuel Domitsu Kono

Tutorial 3


55

4. Agrguele al constructor de la clase: public void FrmAmanteMusica()la llamada al mtodo centraVentana(), como se muestra en el siguiente fragmento de cdigo:public FrmAmanteMusica() { initComponents(); centraVentana(); }

5. Vuelva a ejecutar la aplicacin. La ventana de la aplicacin aparecer centrada en la pantalla como se muestra en la figura 3.27

Figura 3.27

Edicin de la Barra de Men, Mens y Opciones de MenPara ajustar la ventana principal generada por NetBeans para la aplicacin amanteMusica, modificaremos la barra de men de muestra, sus mens y opciones de men.

ITSON

Manuel Domitsu Kono

56


Edicin de las Opciones de la Barra de MenPrimero se modificarn las opciones de la barra de mens. Para cambiar el ttulo de una opcin de la barra de men y el nombre de la variable del componente que lo representa, seguiremos el siguiente procedimiento: 1. La mayor parte de las componentes de la barra de men no pueden ser manipulados directamente en la Vista de Diseo. Para acceder a una componente de la barra de men debemos seleccionar el nodo que representa a esa componente en el rbol de componentes en la Ventana de Inspeccin, figura 3.28. En ese rbol de componentes, el nodo JFrame representa a la ventana de la aplicacin.

Figura 3.28 2. Si expandimos el nodo JFrame, haciendo clic sobre l, aparecern los nodos que representan las componentes que contiene la ventana. En este caso slo contiene la barra de men, el nodo menuBar del tipo JMenuBar, figura 3.29. 3. Si expandimos el nodo menuBar, tendremos los nodos que representan los elementos de la barra de men que pueden ser opciones de men (del tipo JMenuItem) o mens descendentes (del tipo JMenu). En este caso slo contiene mens descendentes, figura 3.30. 4. Para modificar un elemento de la barra de men, haga clic en el nodo que representa ese elemento, en este caso en el men descendente fileMenu, del tipo Jmenu. Al hacer esto, en el Editor de Propiedades de las Componentes aparecen las propiedades del elemento de la barra de men File, figura 3.31. Cambie el valor de la propiedad text de File a Catlogos. La propiedad text es el ttulo de un elemento de la barra de men, en este caso un men descendente.

ITSON

Manuel Domitsu Kono

Tutorial 3


57

Figura 3.29

Figura 3.30

Figura 3.31

ITSON

Manuel Domitsu Kono

58


5. Para cambiar el nombre de la variable del tipo JMenu que representa al elemento File hacemos clic en el selector Code del Editor de Propiedades de las Componentes, figura 3.32.

Figura 3.32 6. Cambie el nombre de la variable del tipo JMenu de fileMenu a menuCatalogos, como se muestra en la figura 3.33.

Figura 3.33 7. El cambio del nombre de la variable del componente se ve reflejada en el nodo que representa ese elemento, figura 3.34. 8. Repita los pasos 4 a 6 para cambiar el ttulo de la opcin Edit de la barra de mens a Consultas y el nombre de la variable del componente de editMenu a menuConsultas. 9. Repita los pasos 4 a 6 para cambiar el ttulo de la opcin Help de la barra de mens a Ayuda y el nombre de la variable del componente de helpMenu a menuAyuda.

ITSON

Manuel Domitsu Kono

Tutorial 3


59

Figura 3.34 10. Podemos visualizar los cambios realizados a la barra de mens de la aplicacin, haciendo clic en el icono Preview Design que se encuentra encima de la Ventana de Edicin del Cdigo, figura 3.35.

Figura 3.35 11. Al hacerlo NetBeans desplegar una vista previa de la ventana de la aplicacin en la que podemos ver los cambios realizados a la barra de mens, figura 3.36.


60


Borrado de Opciones de MenAhora se borrarn algunas de las opciones de men de los mens descendentes de la barra de men. Para ello se sigue el siguiente procedimiento: 1. Para acceder a un elemento de un men debemos expandir el nodo que representa el men y poder visualizar sus elementos. Estos elementos pueden ser opciones de men (del tipo JMenuItem) o mens anidados (del tipo JMenu). En este caso si expandimos el nodo menuCatalogos, tendremos los nodos que representan los elementos de ese men descendente, que slo son opciones de men, figura 3.37.

Figura 3.37 2. Para eliminar una opcin de un men hacemos clic sobre el nodo que representa a esa opcin y luego presionamos la tecla Suprimir. Una alternativa a ese procedimiento es hacer clic con el botn derecho en el nodo y seleccionar la opcin Delete, como se muestra la figura 3.38. 3. Ejecute el paso 2 para eliminar las opciones de men del men menuCatalogos: openMenuItem, saveMenuItem, saveAsMenuItem, dejando la opcin exitMenuItem. 4. Ejecute los pasos 1 y 2 para eliminar las opciones de men del men menuConsultas: cutMenuItem, copyMenuItem, pasteAsMenuItem y deleteAsMenuItem.

ITSON

Manuel Domitsu Kono

Tutorial 3


61

Figura 3.38

Edicin de las Opciones de un Men DescendenteA continuacin se modificarn las opciones de men de los mens descendentes de la barra de mens. Para cambiar el ttulo de una opcin de un men y el nombre de la variable del componente que la representa, seguiremos el siguiente procedimiento: 1. En la ventana de inspeccin, haga clic en el nodo que representa la opcin del men que desee modificar, en este caso en la opcin exitMenuItem, como se muestra en la figura 3.39.

Figura 3.39

ITSON

Manuel Domitsu Kono

62


2. Usando el Editor de Propiedades de las componentes, cambie el ttulo de la opcin del men descendente exitMenuItem de Exit a Salir y el nombre de la variable del componente de exitMenuItem de exitMenuItem a opcionMenuSalir. 3. Repita los pasos 1 a 3 para cambiar el ttulo de la opcin contentsMenuItem del men menuAyuda de Contents a Contenido y el nombre de la variable del componente de contentsMenuItem a opcionMenuContenido. 4. Repita los pasos 1 a 3 para cambiar el ttulo de la opcin aboutMenuItem del men menuAyuda de About a Acerca de y el nombre de la variable del componente de aboutMenuItem a opcionMenuAcercaDe.

Creacin de Mens AnidadosAhora se le agregarn mens anidados a los mens descendentes de la barra de men. Estos mens anidados aparecen cuando pasamos el cursor sobre su ttulo. Para agregar un men anidado a un men descendente seguiremos el siguiente procedimiento: 1. En la ventana de inspeccin, haga clic con el botn derecho en el nodo que representa el men descendente al que se desee agregar el men anidado, en este caso el men menuCatalogos. Aparecer el men emergente mostrado en la figura 3.40.

Figura 3.40

ITSON

Manuel Domitsu Kono

Tutorial 3


63

2. Haga clic en la opcin Add del men emergente. Aparecer el men emergente mostrado en la figura 3.41.

Figura 3.41 3. Haga clic en la opcin JMenu del men emergente. Se agregar un men anidado al men descendente como se muestra en la figura 3.42.

Figura 3.42 4. El men anidado se cre debajo de la opcin de men opcionMenuSalir. Para subir el men anidado para que quede encima de la opcin de menITSON Manuel Domitsu Kono

64


opcionMenuSalir haremos clic con el botn derecho y en el men emergente haremos clic en la opcin Move Up, como se muestra en la figura 3.43.

Figura 3.33 5. NetBeans subir el men anidado una posicin como se muestra en la figura 3.44.

Figura 3.44 6. Usando el Editor de Propiedades de las componentes, cambie el ttulo del men descendente jMenu1 de Menu a Catlogo de Canciones y el nombre de la variable del componente de jMenu1 a menuCatalogoCanciones.

ITSON

Manuel Domitsu Kono

Tutorial 3


65

7. Repita los pasos 1 a 6 para agregar un men anidado a la opcin menuCatalogos de la barra de mens y colquelo debajo del men anidado menuCatalogoCanciones. El ttulo del men y el nombre de la variable del componente sern Catlogo de Pelculas y menuCatalogoPeliculas. 8. Repita los pasos 1 a 6 para agregar un men anidado a la opcin menuCatalogos de la barra de mens y colquelo debajo del men anidado menuCatalogoPeliculas. El ttulo del men y el nombre de la variable del componente sern Catlogo de Gneros y menuCatalogoGeneros. 9. Repita los pasos 1 a 6 para agregar un men anidado a la opcin menuConsultas de la barra de mens. El ttulo del men y el nombre de la variable del componente sern Consulta a Canciones y menuConsultasCanciones. 10. Repita los pasos 1 a 6 para agregar un men anidado a la opcin menuConsultas de la barra de mens y colquelo debajo del men anidado menuConsultasCanciones. El ttulo del men y el nombre de la variable del componente sern Consulta a Pelculas y menuConsultasPeliculas. 11. Repita los pasos 1 a 6 para agregar un men anidado a la opcin menuConsultas de la barra de mens y colquelo debajo del men anidado menuConsultasPeliculas. El ttulo del men y el nombre de la variable del componente sern Consulta a Gneros y menuConsultasGeneros.

Agregado de Opciones de MenAhora se le agregarn opciones de men a los mens anidados. Para agregar una opcin de men a un men anidado seguiremos el siguiente procedimiento: 1. En la ventana de inspeccin, haga clic con el botn derecho en el nodo que representa el men anidado al que se desee agregar la opcin de men, en este caso el men menuCatalogoCanciones. Aparecer el men emergente mostrado en la figura 3.45. 2. Haga clic en la opcin Add del men emergente. Aparecer el men emergente mostrado en la figura 3.46. 3. Haga clic en la opcin JMenuItem del men emergente. Se agregar un men anidado al men descendente como se muestra en la figura 3.47. 4. Usando el Editor de Propiedades de las componentes, cambie el ttulo de la opcin de men jMenuItem1 de Item a Agregar Cancin y el nombre de la variable del componente de jMenuItem1 a opcionMenuAgregarCancion.

ITSON

Manuel Domitsu Kono

66


Figura 3.45

Figura 3.46

ITSON

Manuel Domitsu Kono

Tutorial 3


67

Figura 3.47 5. Repita los pasos 1 a 4 para agregar dos opciones de men al men anidado menuCatalogoCanciones. Los ttulos de las opciones sern Actualizar Cancin y Eliminar Cancin y los nombres de las variables de las componentes sern opcionMenuActualizarCancion y opcionMenuEliminarCancion. 6. Repita los pasos 1 a 4 para agregar tres opciones de men al men anidado menuCatalogoPeliculas. Los ttulos de las opciones sern Agregar Pelcula, Actualizar Pelcula y Eliminar Pelcula. Los nombres de las variables de las componentes sern opcionMenuAgregarPelicula, opcionMenuActualizarPelicula y opcionMenuEliminarPelicula. 7. Repita los pasos 1 a 4 para agregar tres opciones de men al men anidado menuCatalogoGeneros. Los ttulos de las opciones sern Agregar Gnero, Actualizar Gnero y Eliminar Gnero. Los nombres de las variables de las componentes sern opcionMenuAgregarGenero, opcionMenuActualizarGenero y opcionMenuEliminarGenero. 8. Repita los pasos 1 a 4 para agregar ocho opciones de men al men anidado menuConsultasCanciones. Los ttulos de las opciones sern Todas, Por Ttulo, Por Intrprete, Por Autor de Letra, Por Autor de Msica, Por Gnero, Por lbum y Por Periodo. Los nombres de las variables de las componentes sern opcionMenuConsultasCancionesTodas, opcionMenuConsultasCancionesTitulo, opcionMenuConsultasCancionesInterprete, opcionMenuConsultasCancionesAutorLetra, opcionMenuConsultasCancionesAutorMusica, opcionMenuConsultasCancionesGenero, opcionMenuConsultasCancionesAlbum y opcionMenuConsultasCancionesPeriodo.

ITSON

Manuel Domitsu Kono

68


9. Repita los pasos 1 a 4 para agregar seis opciones de men al men anidado menuConsultas Peliculas. Los ttulos de las opciones sern Todas, Por Ttulo, Por Actor, Por Director, Por Gnero y Por Periodo. Los nombres de las variables de las componentes sern opcionMenuConsultasPeliculasTodas, opcionMenuConsultasPeliculasTitulo, opcionMenuConsultasPeliculasActor, opcionMenuConsultasPeliculasDirector, opcionMenuConsultasPeliculasGenero y opcionMenuConsultasPeliculasPeriodo. 10. Repita los pasos 1 a 4 para agregar dos opciones de men al men anidado menuConsultasGeneros. Los ttulos de los generos sern Todos y Por Medio. Los nombres de las variables de las componentes sern opcionMenuConsultasGenerosTodos, opcionMenuConsultasGenerosMedio,

Agregado de Separadores de Opciones de MenPor ltimo se insertar un separador (una lnea horizontal) entre el ttulo del men anidado menuCatalogoPeliculas y la opcin de men opcionMenuSalir del men descendente menuCatalogos. Para insertar un separador en un men se sigue el siguiente procedimiento: 1. Haga clic con el botn derecho en el nodo que representa el men en el que se desea insertar el separador, en este caso el men menuCatalogos. Aparecer lo mostrado en la figura 3.48.

Figura 3.48

ITSON

Manuel Domitsu Kono

Tutorial 3


69

2. Haga clic en la opcin Add del men emergente. Aparecer el men emergente mostrado en la figura 3.49

Figura 3.49 3. Haga clic en la opcin JSeparator del men emergente. Se agregar un separador al men descendente como se muestra en la figura 3.50.

Figura 3.50 4. El separador se cre debajo de la opcin de men opcionMenuSalir. Para subir el separador para que quede encima de la opcin de men opcionMenuSalir

ITSON

Manuel Domitsu Kono

70


haremos clic con el botn derecho y en el men emergente haremos clic en la opcin Move Up, como se muestra en la figura 3.51.

Figura 3.51 5. NetBeans subir el separador una posicin como se muestra en la figura 3.52.

Figura 3.52

ITSON

Manuel Domitsu Kono

Tutorial 3


71

Establecimiento de los Mtodos Oyentes de los Eventos Generados por las Opciones de Mens.Cuando hacemos clic sobre una opcin de men, sta genera un evento del tipo ActionEvent. Si queremos que nuestro programa reaccione a ese evento, debemos de establecer un mtodo oyente del tipo actionPerformed() en el contenedor de ese men, que normalmente es una ventana. Para establecer un mtodo oyente para una opcin de men de un men, seguiremos el siguiente procedimiento: 1. Haga clic en la opcin de men a la que se le desea agregar un mtodo oyente. En este caso a la opcin de men opcionMenuAgregarCancion del men anidado menuCatalogoCanciones del men descendente menuCatalogos, de la barra de mens de la clase FrmAmanteMusica, figura 3.53.

Figura 3.53 2. Haga clic en el selector Events del Editor de Propiedades de las Componentes. Aparecer la lista de eventos que puede generar el elemento de men, figura 3.54. 3. Haga clic en la celda a la derecha del evento actionPerformed y aparecer en esta celda el nombre opcionMenuAgregarCancionActionPerformed que ser el nombre sugerido por NetBeans para el mtodo oyente del tipo actionPerformed(), figura 3.55.

ITSON

Manuel Domitsu Kono

72


Figura 3.54

Figura 3.55 4. Puede editar ese nombre o aceptarlo, tecleando Entrar. NetBeans genera el esqueleto del mtodo y nos lo muestra en la Vista de Cdigo Fuente, como se muestra en la figura 3.56. En el cuerpo de ese mtodo colocaremos el cdigo que queramos que se ejecute cuando se haga clic en la opcin de men opcionMenuAgregarCancion del men anidado menuCatalogoCanciones del men descendente menuCatalogos.

Figura 3.56 5. Repita los pasos 1 a 4 para agregar un mtodo oyente para cada una de las dems opciones de men de la ventana FrmAmanteMusica: opcionMenuActualizarCancion, opcionMenuEliminarCancion,

ITSON

Manuel Domitsu Kono

Tutorial 3


73

opcionMenuAgregarPelicula, opcionMenuActualizarPelicula, opcionMenuEliminarPelicula, opcionMenuAgregarGenero, opcionMenuActualizarGenero, opcionMenuEliminarGenero, opcionMenuConsultasCancionesTodas, opcionMenuConsultasCancionesTitulo, opcionMenuConsultasCancionesInterprete, opcionMenuConsultasCancionesAutorLetra, opcionMenuConsultasCancionesAutorMusica, opcionMenuConsultasCancionesGenero, opcionMenuConsultasCancionesAlbum, opcionMenuConsultasCancionesPeriodo, opcionMenuConsultasPeliculasTodas, opcionMenuConsultasPeliculasTitulo, opcionMenuConsultasPeliculasActor, opcionMenuConsultasPeliculasDirector, opcionMenuConsultasPeliculasGenero, opcionMenuConsultasPeliculasPeriodo, opcionMenuConsultasGenerosTodos, opcionMenuConsultasGenerosMedio, opcionMenuAcercaDe y opcionMenuContenido.

Edicin de la Ventana Principal de la AplicacinA continuacin se modificar el tamao de la ventana principal de la aplicacin y se le agregarn una etiqueta y una tabla en la que se desplegarn los resultados de las consultas. Para modificar el tamao de la ventana principal de la aplicacin seguimos el siguiente procedimiento: 1. En la Vista de Diseo mueva el cursor a una de las orillas del cuadro que representa la ventana de la aplicacin y djelo ah unos segundos. Aparecer una etiqueta mostrando el tamao de la ventana de la aplicacin y un mensaje indicando que para cambiar el tamao de la ventana se arrastre el ratn o se haga doble clic en la orilla, figura 3.57. 2. Al hacer doble clic en la orilla aparecer un cuadro de dilogo con un campo de texto mostrando las dimensiones actuales de la ventana, 400 pixeles de ancho y 300 pixeles de alto, figura 3.58.

ITSON

Manuel Domitsu Kono

74


Figura 3.57

Figura 3.58 3. Teclearemos los nuevos valores: ancho y alto separados por una coma. En este caso 600, 450 y haremos clic en el botn OK. Al hacerlo, el cuadro que representa la ventana de la aplicacin cambiar de tamao, figura 3.59. A continuacin le agregaremos una etiqueta a la ventana de aplicacin que contendr el ttulo de la tabla en la que se desplegarn los resultados de las consultas. Para agregar una etiqueta seguiremos el siguiente procedimiento: 1. De la Paleta de Componentes seleccione el icono que representa una etiqueta, la componente JLabel, figura 3.60. 2. Arrastre con el ratn el icono de la etiqueta y sultelo, digamos a un centmetro por debajo y un centmetro a la derecha de la esquina superior izquierda de la ventana de la aplicacin, figura 3.61.

ITSON

Manuel Domitsu Kono

Tutorial 3


75

Figura 3.59

Figura 3.60

Figura 3.61

ITSON

Manuel Domitsu Kono

76


3. Usando el Editor de Propiedades de las componentes, cambie el nombre de la variable de la etiqueta de jLabel1 a tituloTabla. 4. En el Editor de Propiedades haremos clic en el botn que se encuentra del lado derecho de la propiedad font, figura 3.62, para abrir el cuadro de dialogo que nos permite establecer las propiedades de la fuente empleada en el texto de la etiqueta, figura 3.63.

Figura 3.62

Figura 3.63

ITSON

Manuel Domitsu Kono

Tutorial 3


77

5. Modificaremos la propiedad Size cambiando su valor a 18 y haciendo clic en el botn OK. Al hacerlo el tamao del texto de la etiqueta aumenta, reflejando el cambio, figura 3.64.

Figura 3.64 A continuacin se le agregar a la ventana de la aplicacin un panel con barras de deslizamiento, JScrollPanel, que servir como contenedor para la tabla en la que se desplegarn los resultados de las consultas. El propsito de este panel es el de utilizar las barras de deslizamiento para ir mostrando porciones de una tabla cuyo tamao exceda al tamao que ser visible. Para agregar un panel con barras de deslizamiento haremos lo siguiente: 1. En la paleta de componentes seleccione el icono que representa un panel con barras de deslizamiento, la componente JScrollPanel, figura 3.65.

Figura 3.65 2. Arrastre con el ratn el icono del panel con las barras de deslizamiento por debajo de la etiqueta hasta que la gua de alineacin indique que el margen izquierdo del panel est alineado con la etiqueta, figura 3.66, y sultelo. Aparecer lo mostrado en la figura 3.67.

ITSON

Manuel Domitsu Kono

78


Figura 3.66

Figura 3.67 3. Utilice el Editor de Propiedades para cambiar el valor de la propiedad Horizontal Size de 100 a 525 y el valor de la propiedad Vertical Size de 100 a 300 para cambiar el tamao del panel con barras de deslizamiento. Al hacerlo obtendremos lo mostrado en la figura 3.68. 4. Utilice el Editor de Propiedades para cambiar el valor de las propiedades Horizontal Resizable y Vertical Resizable de false a true marcando las casillas de verificacin de esas propiedades. 5. En el Editor de Propiedades haremos clic en el botn que se encuentra del lado derecho de la propiedad border, figura 3.69, para abrir el cuadro de dialogo que nos permite seleccionar el tipo de marco del panel con las barras de deslizamiento, figura 3.70.

ITSON

Manuel Domitsu Kono

Tutorial 3


79

Figura 3.68

Figura 3.69 6. En este cuadro de dilogo seleccionaremos la primera opcin: (No Border) para eliminar el marco alrededor del panel.

ITSON

Manuel Domitsu Kono

80


Figura 3.70 A continuacin, en el Editor de Propiedades modificaremos la propiedad text de la etiqueta, jLabel1, borrando su valor por omisin. El texto que se desplegar en esta etiqueta depender de la tabla desplegada y se establecer en el programa. Al borrar el valor de la etiqueta se borrar en el Editor de Cdigo y slo se vern las guas que indican la alineacin de la etiqueta, figura 3.71. Por ltimo agregaremos el cdigo para agregarle una tabla al panel con las barras de deslizamiento: 1. Seleccione la Vista de Cdigo Fuente de la Ventana de Edicin del Cdigo. 2. Al final del cdigo se encuentran las declaraciones de los atributos de la clase, figura 3.12. Agregue la declaracin de la tabla:private javax.swing.JTable jtabla;

ITSON

Manuel Domitsu Kono

Tutorial 3


81

Figura 3.71 3. Despus del mtodo centraVentana() empleado para centrar la ventana de la aplicacin en la pantalla agregue el siguiente mtodo que crea una tabla y la despliega dentro de un panel con barras de deslizamiento./** * Este mtodo crea tabla dentro de un panel con barras de * deslizamiento y la despliega * @param tabla Objeto de tipo Tabla. Contiene el ttulo, ttulos de * las columnas y los valores de las celdas. */ public void despliegaTabla(Tabla tabla) { // Crea la tabla a partir de los vectores con los ttulos de las // columnas y los valores de las celdas jtabla = new javax.swing.JTable(tabla.getCeldas(), tabla.getNombresColumnas()); // Establece el ttulo de la tabla tituloTabla.setText(tabla.getTitulo()); // Hace que el control del tamao de la tabla y la porcin visible lo // tenga la barra de deslizamiento y no la tabla jtabla.setAutoResizeMode(javax.swing.JTable.AUTO_RESIZE_OFF); jtabla.setAutoscrolls(false);

ITSON

Manuel Domitsu Kono

82


// Hace visible la tabla dentro del panel con barras de deslizamiento jScrollPane1.setViewportView(jtabla); }

4. El cdigo del mtodo requiere agregarle a la clase las siguientes directivas import:import java.util.Vector;

Creacin de un Cuadro de DilogoLos cuadros de dilogo se utilizan principalmente para capturar, editar o desplegar datos. Los cuadros de dilogo normalmente tienen varios botones: para aceptar y cancelar la operacin o para restaurar los valores de los campos del cuadro de dilogo a su valor original. Los botones para aceptar o cancelar la operacin normalmente cierran el cuadro de dilogo. La operacin a realizar por el cuadro de dilogo y el botn presionado para cerrar el cuadro de dilogo se establecern como parmetros del constructor de la clase que representa al cuadro de dilogo. Los diferentes valores que pueden tomar esos parmetros se definen en la clase UtileriasGUI. Una fraccin del cdigo de la clase UtileriasGUI se muestra a continuacin:/* * UtileriasGUI.java * * @author mdomitsu * * Created on 7 de julio de 2008, 11:10 AM */ package interfazUsuario; /** * Esta clase define constantes empleadas en los cuadros de dilogo * y mtodos de utilera empleados en las componentes de la * interfaz de usuario grfica */ public class UtileriasGUI { // Tipos de operaciones en los que se van a usar los cuadros de dilogos public static int AGREGAR = 0; public static int ACTUALIZAR = 1; public static int ELIMINAR = 2; public static int DESPLEGAR = 3; // Tipo de boton presionado para cerrar los cuadros de dilogos public static String ACEPTAR = "Aceptar"; public static String CANCELAR = "Cancelar"; ... }

ITSON

Manuel Domitsu Kono

Tutorial 3


83

Edite la clase en el paquete interfazUsuario. El procedimiento para crear un cuadro de dilogo es el siguiente: 1. De la barra de men de NetBeans 5.0, seleccione la opcin Files/New File, presione las teclas Ctrl+ N o haga clic en el icono New File, como se muestra en la figura 3.6: 2. Aparecer la primera ventana del asistente para crear una clase, figura 3.7. 3. Del recuadro Categories: seleccionaremos el nodo Java GUI Forms y del recuadro File Types seleccionaremos el tipo JDialog Form que nos crear el esqueleto de un cuadro de dilogo, figura 3.72. Presione el botn Next.

Figura 3.72 4. Aparecer la segunda ventana del asistente para crear clases, mostrada en la figura 3.73. En esta ventana seleccionaremos el nombre y la ubicacin de la clase del cuadro de dilogo.

ITSON

Manuel Domitsu Kono

84


Figura 3.73 a. Establezca el nombre de la clase (Class Name): Por ejemplo, DlgCancion ya que este cuadro de dilogo se emplear para capturar, editar o mostrar los datos de la clase Cancion. b. Establezca el paquete donde estar la clase (Package). Por ejemplo, interfazUsuario c. Presione el botn Finish. 5. Desaparecer el asistente para crear una nueva clase y aparecer lo mostrado en la Figura 3.74. 6. Cmbiese a la Vista de Cdigo. 6. Agrguele a la clase las siguientes directivas import:import java.util.Vector; import objetosServicio.Fecha; import objetosNegocio.Cancion;

7. Al crear un cuadro de dilogo, Netbeans le agrega un mtodo main(). Como nuestro cuadro de dilogo va a formar parte de la aplicacin AmanteMusica cuya ventana principal ya tiene un mtodo main(), el del cuadro de dilogo no

ITSON

Manuel Domitsu Kono

Tutorial 3


85

se requiere y por lo tanto podemos eliminarlo. Busque el mtodo main()del cuadro de dilogo y elimnelo.

Figura 3.74 8. Agrguele a los atributos de la clase, al final del cdigo de la clase, figura 3.75, los siguientes atributos:private private private private Cancion cancion; Vector listaGenerosCanciones; int operacion; StringBuffer respuesta;

Figura 3.75 El atributo cancion contendr los datos de la cancin a agregar, actualizar o borrar. El atributo listaGenerosCanciones es un vector con la lista de los posibles gneros que puede tener una cancin. El atributo operacion representa la operacin que se desea realizar: agregar, actualizar o borrar. El

ITSON

Manuel Domitsu Kono

86


atributo respuesta contiene un cdigo establecido para el botn presionado al cerrar el cuadro de dilogo. 9. Modifique el constructor de la clase del cuadro de dilogo para que inicialice los atributos agregados en el paso 9, de la siguiente manera:/** * Constructor que establece las caractersticas del cuadro de dilogo * y la operacin a realizar con l * @param parent Ventana sobre la que aparecer el cuadro de dilogo * @param title Ttulo del cuadro de dilogo * @param modal true si permite acceder fuera de los lmites del cuadro * de dilogo, false en caso contrario * @param cancion Cancin a capturar, editar o desplegar * @param listaGenerosCanciones Lista de los generos de una cancin * @param operacion Operacin a realizar en el cuadro de dilogo: * AGREGAR = 0, ACTUALIZAR = 1, ELIMINAR = 2, DESPLEGAR = 3; * @param respuesta Boton presionado al salir de los cuadros de * dilogos: ACEPTAR = "Aceptar", CANCELAR = "Cancelar". */ public DlgCancion(java.awt.Frame parent, String title, boolean modal, Cancion cancion, int operacion, StringBuffer respuesta) { super(parent, title, modal); this.cancion = cancion; this.operacion = operacion; this.respuesta = respuesta; initComponents(); }

Agregado de Etiquetas al Cuadro de DilogoA continuacin le agregaremos al cuadro de dilogo los componentes grficos. Primero le agregaremos al cuadro de dilogo una serie de etiquetas que identificarn los campos de texto y la caja combinada empleados para capturar los datos de una cancin. El procedimiento es el siguiente: 1. Agregue una etiqueta, digamos a un centmetro por debajo y un centmetro a la derecha de la esquina superior izquierda del cuadro de dilogo, figura 3.76. 2. Usando el editor de propiedades de los componentes cambie el valor de la propiedad text de jLabel1 a Clave. Esto establece el texto desplegado en la etiqueta. 3. Al hacerlo tendremos lo mostrado en la figura 3.77. 4. Agregue una etiqueta por debajo de la etiqueta Clave, arrastrando el icono hasta que la gua de alineacin vertical muestre que la etiqueta est alineada con la etiqueta Clave y aparezca una gua horizontal en la etiqueta indicando que las

ITSON

Manuel Domitsu Kono

Tutorial 3


87

etiquetas se encuentran separados por la distancia vertical predeterminada y sultela, figura 3.78.

Figura 3.76

Figura 3.77

ITSON

Manuel Domitsu Kono

88


Figura 3.78 5. Usando el Editor de Propiedades de los componentes cambie el valor de la propiedad text a Ttulo. 6. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta Ttulo y modifique su propiedad text a Intrprete. 7. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta Intrprete y modifique su propiedad text a Autor de la letra. 8. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta Autor de la letra y modifique su propiedad text a Autor de la msica. 9. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta Autor de la msica y modifique su propiedad text a Gnero. 10. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta Gnero y modifique su propiedad text a lbum. 11. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta lbum y modifique su propiedad text a Disquera. 12. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta Disquera y modifique su propiedad text a Duracin. 13. Repita los pasos 6 y 7 para agregar una etiqueta por debajo de la etiqueta Duracin y modifique su propiedad text a Fecha (dd/mm/aaaa).

ITSON

Manuel Domitsu Kono

Tutorial 3


89

14. Al hacerlo tendremos lo mostrado en la figura 3.79.

Figura 3.79

Agregado de Campos de Texto al Cuadro de DilogoEnseguida le agregaremos al cuadro de dilogo los campos de texto para capturar los datos, menos el gnero, de una cancin. El procedimiento es el siguiente: 1. De la Paleta de Componentes seleccione el icono que representa un campo de texto, la componente JTextField, figura 3.80.

Figura 3.80

ITSON

Manuel Domitsu Kono

90


2. Arrastre con el ratn el icono del campo de texto hasta que la gua de alineacin horizontal muestre que el texto de la etiqueta Clave y la del campo de texto estn alineados y aparezca una gua vertical en el campo de texto indicando que los elementos se encuentran separados por la distancia horizontal entre elementos predeterminada y sultelo, figura 3.81.

Figura 3.81 3. Usando el Editor de Propiedades de las componentes, cambie el valor de la propiedad columns de 0 a 10. Esto establece el ancho del campo de texto en caracteres. 4. Usando el Editor de Propiedades de las componentes, cambie el valor de la propiedad editable de true a false desmarcando la casilla de verificacin. Esto hace que el campo de de texto sea de solo lectura. 5. Usando el Editor de Propiedades de las componentes, modifique la propiedad text, borrando su valor por omisin. 6. Usando el Editor de Propiedades de las componentes, cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoClave. 7. Al hacerlo tendremos lo mostrado en la figura 3.82. 8. Agregue un campo de texto por debajo del campo de texto campoTextoClave, arrastrando el icono hasta que la gua de alineacin horizontal muestre que la etiqueta est alineada con la etiqueta Ttulo y aparezca una gua horizontal en la etiqueta indicando que el campo de texto se encuentra separado de la etiqueta por la distancia horizontal predeterminada y sultela, figura 3.83.

ITSON

Manuel Domitsu Kono

Tutorial 3


91

Figura 3.82

Figura 3.83 9. Usando el Editor de Propiedades de las componentes, cambie el valor de la propiedad columns a 35, borre el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoTitulo. 10. Repita los pasos 6 y 7 para agregar un campo de texto por debajo del campo de texto campoTextoTitulo y cambie el valor de la propiedad columns a 35, borre

ITSON

Manuel Domitsu Kono

92


el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoInterprete. 11. Repita los pasos 6 y 7 para agregar un campo de texto por debajo del campo de texto campoTextoInterprete y cambie el valor de la propiedad columns a 35, borre el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoAutorLetra. 12. Repita los pasos 6 y 7 para agregar un campo de texto por debajo del campo de texto campoTextoAutorLetra y cambie el valor de la propiedad columns a 35, borre el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoAutorMusica. 13. Repita los pasos 6 y 7 para agregar un campo de texto a un lado de la etiqueta lbum (Note que al lado de la etiqueta Gnero no se agrega un campo de texto, ya que ah le agregaremos una caja combinada). Cambie el valor de la propiedad columns a 35, borre el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoAlbum. 14. Repita los pasos 6 y 7 para agregar un campo de texto por debajo del campo de texto campoTextoAlbum y cambie el valor de la propiedad columns a 35, borre el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoDisquera. 15. Repita los pasos 6 y 7 para agregar un campo de texto por debajo del campo de texto campoTextoDisquera y cambie el valor de la propiedad columns a 5, borre el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoDuracion. 16. Repita los pasos 6 y 7 para agregar un campo de texto por debajo del campo de texto campoTextoDuracion y cambie el valor de la propiedad columns a 10, borre el valor de la propiedad text y cambie el nombre de la variable del campo de texto de jTextField1 a campoTextoFecha. 17. Al hacerlo tendremos lo mostrado en la figura 3.84.

Agregado de una Caja Combinada al Cuadro de DilogoA continuacin le agregaremos al cuadro de dilogo una caja combinada al lado de la etiqueta Gnero, para seleccionar el gnero de la cancin. El procedimiento es el siguiente:

ITSON

Manuel Domitsu Kono

Tutorial 3


93

Figura 3.84 1. Una caja combinada despliega una lista de objetos y permite que seleccionemos uno de ellos. Una de las formas de establecer la lista de objetos es mediante una instancia de la clase DefaultComboBoxModel. Para crear esa instancia a partir de un vector emplearemos el mtodo getDefaultComboBoxModel( Vector lista) definido en la clase UtileriasGUI. El fragmento de cdigo con el mtodo se muestra a continuacin./* * UtileriasGUI.java * * @author mdomitsu * * Created on 7 de julio de 2008, 11:10 AM */ package interfazUsuario; import java.util.Vector; import javax.swing.DefaultComboBoxModel; /** * Esta clase define constantes empleadas en los cuadros de dilogo * y mtodos de utilera empleados en las componentes de la * interfaz de usuario grfica */ public class UtileriasGUI { ... /** * Este mtodo crea una instancia de la clase DefaultComboBoxModel a partir * de un vector

ITSON

Manuel Domitsu Kono

94


* @param lista Vector con la lista de objetos con el que se crear una * instancia de la clase DefaultComboBoxModel * @return Una instancia de la clase DefaultComboBoxModel */ public static DefaultComboBoxModel getDefaultComboBoxModel(Vector lista) { DefaultComboBoxModel defaultComboBoxModel = new DefaultComboBoxModel(); // Para cada elemento del vector for(int i = 0; i < lista.size(); i++) // Agrgalo a la instancia de la clase DefaultComboBoxModel defaultComboBoxModel.addElement(lista.elementAt(i)); return defaultComboBoxModel; } }

2. En el cuadro de dilogo DlgCancion definiremos un mtodo llamado getGenerosCancionesComboBoxModel() que crear una instancia de la clase DefaultComboBoxModel a partir del vector con la lista de los gneros de las canciones dada por el vector listaGenerosCanciones. El cdigo de este mtodo se muestra a continuacin. Agrgueselo al cuadro de dilogo inmediatamente despus del constructor de la clase./** * Este mtodo regresa una instancia de la clase DefaultComboMoxModel * formada a partir de los gneros de las canciones. */ private DefaultComboBoxModel getGenerosCancionesComboBoxModel() { return UtileriasGUI.getDefaultComboBoxModel(listaGenerosCanciones); }

3. El cdigo del mtodo requiere agregarle a la clase la siguiente directivas import:import javax.swing.DefaultComboBoxModel;

4. De la Paleta de Componentes seleccione el icono que representa una caja combinada, la componente JComboBox, figura 3.85. 5. Arrastre con el ratn el icono de la caja combinada hasta que la gua de alineacin horizontal muestre que el texto de la etiqueta Gnero y la de la caja combinada estn alineados y aparezca una gua vertical en la caja combinada indicando que los elementos se encuentran separados por la distancia horizontal entre elementos predeterminada y sultelo, figura 3.86.

ITSON

Manuel Domitsu Kono

Tutorial 3


95

Figura 3.85

Figura 3.86 6. En el Editor de Propiedades de las componentes podemos ver que el valor de la propiedad model es Item 1, Item 2, Item 3, Item 4, figura 87. Estos son los valores que se desplegarn en la caja combinada. Vamos a cambiar este valor por el valor obtenido del mtodo getGenerosCancionesComboBoxModel(). Para ello haga clic en el botn con los tres puntos que se encuentra enseguida del valor para la propiedad model. Al hacerlo aparecer lo mostrado en la figura 88.

ITSON

Manuel Domitsu Kono

96


Figura 3.87

Figura 3.88 7. De la caja combinada Select Mode: seleccione la opcin Form Connection, figura 3.89. 8. El contenido del cuadro de dilogo cambiar al mostrado en la figura 3.90.

ITSON

Manuel Domitsu Kono

Tutorial 3


97

Figura 3.89

Figura 3.90 9. Haga clic en el botn de radio Method Call:. Se habilitar el botn con los tres puntos a la derecha del botn de radio, figura 3.91. Esto permitir establecer que el modelo empleado por la caja combinada provenga de una invocacin a un mtodo.

ITSON

Manuel Domitsu Kono

98


Figura 3.91 10. Haga clic en el botn con los tres puntos a la derecha del botn de radio Method Call:. Aparecer el cuadro de dilogo de la figura 3.92.

Figura 3.92 11. En el rea de texto Methods aparece la lista de mtodos que hay en la clase del cuadro de dilogo para que seleccionemos el empleado para obtener el modelo usado por la caja de texto. En este caso slo hay un mtodo, el mtodo que nos regresa el modelo deseado. Lo seleccionaremos haciendo clic sobre l y presionando el botn OK que se activar al seleccionar un mtodo. Al hacerlo reaparece el cuadro de dilogo de la figura 3.91 pero con el botn de radio User Code: seleccionado y con el nombre del mtodo seleccionado en el rea de texto a la derecha del botn, figura 3.93.ITSON Manuel Domitsu Kono

Tutorial 3


99

Figura 3.93 12. Haga clic en el botn OK para aceptarlo. El cuadro de dilogo desaparecer. 13. Usando el Editor de Propiedades de las componentes, cambie el nombre de la variable de la caja combinada de jComboBox1 a cajaCombinadaGenerosCanciones. Al hacerlo tendremos lo mostrado en la figura 3.94.


100


Ajuste del Tamao del Cuadro de DilogoEn la figura 3.94 podemos ver que el cuadro de dilogo se ha llenado por completo y no hay lugar para agregar los botones que permitan aceptar, restablecer los datos y cancelar la operacin dada por el cuadro de dilogo. Tambin note que el espacio entre la orilla izquierda y la etiqueta inferior es mayor que la distancia entre la orilla derecha y los campos de texto de mayor longitud. Para hacer espacio para los botones y corregir la diferencia entre los mrgenes modificaremos el tamao del cuadro de dilogo. Para ello haremos lo siguiente: 1. Coloque el cursor en la orilla derecha del cuadro y arrastre el ratn a la derecha hasta igualar los mrgenes izquierdo y derecho. 2. Coloque el cursor en la orilla inferior del cuadro y arrastre el ratn hacia abajo para dejar un espacio de unos tres centmetros.

Agregado de Botones al Cuadro de DilogoEnseguida agregaremos botones que permitan aceptar, restablecer los datos y cancelar la operacin dada por el cuadro de dilogo. El procedimiento es el siguiente: 1. De la Paleta de Componentes seleccione el icono que representa un botn, la componente JButton, figura 3.95.

Figura 3.95 2. Arrastre con el ratn el icono del botn a una posicin por debajo de la etiqueta Fecha y hasta que la gua de alineacin vertical muestre que el botn y la etiqueta estn alineados verticalmente y sultelo, figura 3.96.

ITSON

Manuel Domitsu Kono

Tutorial 3


101

Figura 3.96 3. Usando el Editor de Propiedades de las componentes, cambie el valor de la propiedad text de jButton1 a Aceptar. Esto establece el texto desplegado en el botn. 4. Usando el Editor de Propiedades de las componentes, cambie el nombre de la variable del botn de jButton1 a botonAceptar. 5. Al hacerlo tendremos lo mostrado en la figura 3.97. 6. Agregue un segundo botn al cuadro de dilogo a la derecha del primer botn y por debajo del campo de texto campoTextoFecha arrastrando su icono hasta que la gua de alineacin horizontal indique que los botones estn alineados horizontalmente y la gua de alineacin vertical indique que el botn est alineado con el campo de texto, figura 3.98. 7. Usando el Editor de Propiedades de las componentes, cambie el valor de la propiedad text de jButton1 a Cancelar y el nombre de la variable del botn de jButton1 a botonCancelar. 8. Agregue un tercer botn al cuadro de dilogo entre los dos botones anteriores arrastrando su icono hasta que la gua de alineacin horizontal indique que los botones estn alineados horizontalmente y el botn est centrado horizontalmente en el cuadro de dilogo.

ITSON

Manuel Domitsu Kono

102


Figura 3.97

Figura 3.98

ITSON

Manuel Domitsu Kono

Tutorial 3


103

9. Usando el Editor de Propiedades de las componentes, cambie el valor de la propiedad text de jButton1 a Restaurar y el nombre de la variable del botn de jButton1 a botonRestaurar. 10. Al hacerlo aparecer lo mostrado en la figura 3.99.

Figura 3.99 11. Podemos visualizar el aspecto del cuadro de dilogo DlgCancion haciendo clic en el icono Preview Design que se encuentra encima de la Ventana de Edicin del Cdigo, figura 3.35. 12. Obtendremos lo mostrado en la figura 3.100.

Establecimiento de los Mtodos Oyentes de los Eventos Generados por los Botones.Al igual que con los elementos de men, si hacemos clic sobre botn, ste genera un evento del tipo ActionEvent. Si queremos que nuestro programa reaccione a ese evento, debemos de establecer un mtodo oyente del tipo actionPerformed() en el contenedor de ese botn, que normalmente es una ventana o un cuadro de dilogo. Para establecer un mtodo oyente del botn botonAceptar del cuadro de dilogo DlgCancion, seguiremos el siguiente procedimiento:

ITSON

Manuel Domitsu Kono

104


Figura 3.100 1. En la Vista de Diseo de la Ventana de Edicin de Cdigo haga clic sobre el botn Continuar. Tambin puede hacer clic sobre el nodo que representa a ese botn en la Ventana de Inspeccin. 2. Haga clic en el selector Events del Editor de Propiedades de las Componentes. Aparecer la lista de eventos que puede generar el botn. 3. Haga clic en la celda a la derecha del evento actionPerformed y aparecer en esta celda el nombre botonAceptarActionPerformed que ser el nombre sugerido por NetBeans para el mtodo oyente del tipo actionPerformed(), figura 3.101.

Figura 3.101

ITSON

Manuel Domitsu Kono

Tutorial 3


105

4. Puede editar ese nombre o aceptarlo, tecleando Entrar. NetBeans genera el esqueleto del mtodo y nos lo muestra en la Vista de Cdigo Fuente, como se muestra en la figura 3.102. En el cuerpo de ese mtodo colocaremos el cdigo que queramos que se ejecute cuando se haga clic en el botn botonAceptar del cuadro de dilogo.

Figura 3.102 5. Repita los pasos 1 a 4 para agregar un mtodo oyente para cada uno de los dems botones del cuadro de dilogo: botonRestaurar y botonCancelar.

Edicin del constructor del Cuadro de DilogoEl cuadro de dilogo que estamos creando se va a utilizar para capturar, editar o desplegar los datos de cancin. Modifique el constructor del cuadro de dilogo para que reciba o regrese los datos de una cancin y para que modifique su apariencia dependiendo de la operacin deseada, de la siguiente manera./** * Constructor que establece las caractersticas del cuadro de dilogo * y la operacin a realizar con l * @param parent Ventana sobre la que aparecer el cuadro de dilogo * @param title Ttulo del cuadro de dilogo * @param modal true si permite acceder fuera de los lmites del cuadro * de dilogo, false en caso contrario * @param cancion Cancin a capturar o desplegar * @param listaGenerosCanciones Lista de los generos de una cancin * @param operacion Operacin a realizar en el cuadro de dilogo: * AGREGAR = 0, ACTUALIZAR = 1, ELIMINAR = 2, * DESPLEGAR = 3; * @param respuesta Boton presionado al salir de los cuadros de dilogos * ACEPTAR = "Aceptar", CANCELAR = "Cancelar". */ public DlgCancion(java.awt.Frame parent, String title, boolean modal, Cancion cancion, Vector listaGenerosCanciones, int operacion, StringBuffer respuesta) { super(parent, title, modal); this.cancion = cancion; this.listaGenerosCanciones = listaGenerosCanciones; this.operacion = operacion; this.respuesta = respuesta; initComponents(); // Modifica el ttulo del botn botonAceptar y establece si los // botones botonRestaurar y botonCancelar estarn habilitados. // Si la operacin es agregar if(operacion == UtileriasGUI.AGREGAR) botonAceptar.setText("Guardar");

ITSON

Manuel Domitsu Kono

106


// Si la operacin es actualizar else if(operacion == UtileriasGUI.ACTUALIZAR) botonAceptar.setText("Actualizar"); // Si la operacin es eliminar else if(operacion == UtileriasGUI.ELIMINAR) { botonAceptar.setText("Eliminar"); botonRestaurar.setEnabled(false); } // Si la operacin es desplegar else if(operacion == UtileriasGUI.DESPLEGAR) { botonAceptar.setText("Continuar"); botonRestaurar.setEnabled(false); botonCancelar.setEnabled(false); } // Despliega la clave de la cancin campoTextoClave.setText(cancion.getClave()); // Si la operacin es de actualizar, eliminar o desplegar, if((operacion == UtileriasGUI.ELIMINAR) || (operacion == UtileriasGUI.ACTUALIZAR) || (operacion == UtileriasGUI.DESPLEGAR)) { // despliega el resto de los datos de la cancin campoTextoTitulo.setText(cancion.getTitulo()); campoTextoInterprete.setText(cancion.getInterprete()); campoTextoAutorLetra.setText(cancion.getAutorLetra()); campoTextoAutorMusica.setText(cancion.getAutorMusica()); cajaCombinadaGenerosCanciones.setSelectedItem(cancion.getGenero()); campoTextoAlbum.setText(cancion.getAlbum()); campoTextoDisquera.setText(cancion.getDisquera()); campoTextoDuracion.setText(newInteger(cancion.getDuracion()) .toString()); campoTextoFecha.setText(cancion.getFecha().toString()); } // Si la operacin es de eliminar o desplegar if((operacion == UtileriasGUI.ELIMINAR) || (operacion == UtileriasGUI.DESPLEGAR)) { // hace los campos de texto de slo lectura campoTextoTitulo.setEditable(false); campoTextoInterprete.setEditable(false); campoTextoAutorLetra.setEditable(false); campoTextoAutorMusica.setEditable(false); cajaCombinadaGenerosCanciones.setEnabled(false); campoTextoAlbum.setEditable(false); campoTextoDisquera.setEditable(false); campoTextoDuracion.setEditable(false); campoTextoFecha.setEditable(false); } // Establece el valor por omisin para respuesta, por si se cierra el // cuadro de dilogo presionando el botn cerrar o el botn cancelar respuesta.append(UtileriasGUI.CANCELAR); // centra el cuadro de dialogo sobre la ventana de la aplicacin centraCuadroDialogo(parent);

ITSON

Manuel Domitsu Kono

Tutorial 3


107

// Muestra el cuadro de dilogo setVisible(true); }

Centrado del Cuadro de Dilogo sobre la Ventana de la AplicacinNote que al final del constructor del cuadro de dilogo, se invoca al mtodo centraCuadroDialogo()para centrar el cuadro de dilogo sobre la ventana de la aplicacin. Coloque el cdigo de su mtodo despus del mtodo getGenerosCancionesComboBoxModel()./** * Este mtodo centra el cuadro de dialogo sobre la ventana de la * aplicacin. * @param parent Ventana sobre la que aparecer el cuadro de dilogo */ private void centraCuadroDialogo(java.awt.Frame parent) { // Obtiene el tamao y posicin de la ventana de la aplicacin Dimension frameSize = parent.getSize(); Point loc = parent.getLocation(); // Obtiene el tamao del cuadro de dilogo Dimension dlgSize = getPreferredSize(); // Centra el cuadro de dilogo sobre la ventana padre setLocation( (frameSize.width - dlgSize.width) / 2 + loc.x, (frameSize.height - dlgSize.height) / 2 + loc.y); }

Edicin de los Mtodos Oyentes de los botones del Cuadro de DilogoEste cuadro de dilogo tiene tres botones: botonAceptar, botonRestaurar y botonCancelar. El mtodo oyente del botn botonAceptar hace lo siguiente: 1. Si la operacin es Agregar o Actualizar, toma los valores capturados en los campos de texto y almacnalos en el parmetro cancion. 2. Establece que se presion el botn botonAceptar para cerrar el cuadro de dilogo. 3. Cierra el cuadro de dilogo. El cdigo del mtodo oyente del botn botonAceptar es el siguiente:

ITSON

Manuel Domitsu Kono

108


/** * Mtodo oyente del botn botonAceptar * @param evt Evento al que escucha */ private void botonAceptarActionPerformed(java.awt.event.ActionEvent evt) { // Si la operacin es Agregar o Actualizar if((operacion == UtileriasGUI.AGREGAR) || (operacion == UtileriasGUI.ACTUALIZAR)) { // Toma los valores capturados en los campos de texto y en la caja // combinada y almacnalos en el parmetro cancion. cancion.setTitulo(campoTextoTitulo.getText()); cancion.setInterprete(campoTextoInterprete.getText()); cancion.setAutorLetra(campoTextoAutorLetra.getText()); cancion.setAutorMusica(campoTextoAutorMusica.getText()); cancion.setGenero(((String)cajaCombinadaGeneros.getSelectedItem()); cancion.setAlbum(campoTextoAlbum.getText()); cancion.setDisquera(campoTextoDisquera.getText()); cancion.setDuracion(Integer.parseInt(campoTextoDuracion.getText())); cancion.setFecha(new Fecha(campoTextoFecha.getText())); } // Borra el contenido de respuesta respuesta.delete(0, respuesta.length()); // Establece que se presion el botn botonAceptar respuesta.append(UtileriasGUI.ACEPTAR); // Destruye el cuadro de dalogo dispose(); }

El mtodo oyente del botn botonRestaurar restaura el contenido de los campos de texto a su valor original. Si la operacin es que en este caso son cadenas vacas. El cdigo del mtodo oyente del botn botonRestaurar es el siguiente:/** * Mtodo oyente del botn botonRestaurar * @param evt Evento al que escucha */ private void botonRestaurarActionPerformed(java.awt.event.ActionEvent evt){ // Restaura el contenido de los campos de texto a su valor original // Si la operacin es Agregar if(operacion == UtileriasGUI.AGREGAR) { campoTextoTitulo.setText(""); campoTextoInterprete.setText(""); campoTextoAutorLetra.setText(""); campoTextoAutorMusica.setText(""); cajaCombinadaGeneros.setSelectedIndex(0); campoTextoAlbum.setText(""); campoTextoDisquera.setText(""); campoTextoDuracion.setText(""); campoTextoFecha.setText(""); }

ITSON

Manuel Domitsu Kono

Tutorial 3


109

// Si la operacin es Actualizar if(operacion == UtileriasGUI.ACTUALIZAR) { campoTextoTitulo.setText(cancion.getTitulo()); campoTextoInterprete.setText(cancion.getInterprete()); campoTextoAutorLetra.setText(cancion.getAutorLetra()); campoTextoAutorMusica.setText(cancion.getAutorMusica()); cajaCombinadaGeneros.setSelectedItem(cancion.getGenero()); campoTextoAlbum.setText(cancion.getAlbum()); campoTextoDisquera.setText(cancion.getDisquera()); campoTextoDuracion.setText(new Integer(cancion.getDuracion()) .toString()); campoTextoFecha.setText(cancion.getFecha().toString()); } }

El mtodo oyente del botn botonCancelar cierra el cuadro de dilogo. El cdigo del mtodo oyente del botn botonCancelar es el siguiente:/** * Mtodo oyente del botn botonCancelar * @param evt Evento al que escucha */ private void botonCancelarActionPerformed(java.awt.event.ActionEvent evt) { // Destruye el cuadro de dalogo dispose(); }

ITSON

Manuel Domitsu Kono

Tutorial 3 - GUIs Con NetBeans 5

Documents

Transcript of Tutorial 3 - GUIs Con NetBeans 5