Aplicaciones en Java Con Interfaz Grafica de Usuario Con NetBeans
Aplicaciones en Java Con Interfaz Grafica de Usuario Con NetBeans
Creación de un Proyecto
Para crear un programa con una interfaz de usuario gráfica en Java utilizando
NetBeans lo primero que hay que hacer es crear un proyecto. Un proyecto nos permite
administrar los archivos con el código fuente y compilado de una aplicación. Para crear
un proyecto se sigue el siguiente procedimiento:
Figura 1
Figura 2
3. Aparecerá el primer cuadro de diálogo del asistente para crear un nuevo proyecto,
figura 3. Seleccionaremos el tipo de proyecto que deseamos crear. Del recuadro
Categories:, seleccione la opción Java y del recuadro Projets:, la opción Java
Application. Luego presione el botón Next>.
Figura 3
4. Aparecerá el segundo cuadro de diálogo del asistente para crear proyectos, figura
4. Aquí seleccionaremos el nombre y la ubicación del proyecto.
Figura 4
Figura 5
Figura 6
2. Aparecerá el primer cuadro de diálogo del asistente para crear una clase, figura
7. En el recuadro Categories: seleccione el nodo Swing GUI Forms y del
recuadro File Types seleccionaremos el tipo Application Sample Form que
nos creará el esqueleto de la ventana principal de la aplicación, incluyendo una
Figura 7
Figura 8
Figura 9
Figura 10
Al hacer clic en el botón [+] el código se hará visible y el botón cambiará a [-], figura 14.
Podemos ocultar el código de nuevo haciendo clic en el botón [-]. Note que ese
aparece con fondo azul y por lo tanto no puede no puede ser modificado.
Figura 11
Figura 12
Figura 13
Figura 14
Guarde la clase seleccionando del menú principal la opción File/Save, presione las
teclas Ctrl+S o haga clic en el icono Save All, mostrado en la figura 16.
Figura 15
Figura 16
Figura 17
Figura 18
Durante la compilación, NetBeans muestra los mensajes resultantes del proceso, como
se muestra en la figura 19.
Figura 19
Figura 20
El archivo JAR con los archivos con el código bytecode empacados se encuentran en
un archivo con el nombre del proyecto y la extensión .jar dentro del directorio dist
dentro del directorio del proyecto, figura 21.
Figura 21
Figura 22
Figura 23
Figura 24
Figura 25
Figura 26
/**
* Este método centra la ventana de la aplicación sobre la pantalla
*/
private void centraVentana() {
//Obtiene el tamaño de la pantalla
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
import java.awt.Dimension;
import java.awt.Toolkit;
public FrmAmanteMusica() {
initComponents();
centraVentana();
}
Figura 27
Figura 28
2. Si expandimos el nodo JFrame, haciendo clic sobre el icono con el signo + del
nodo, aparecerán los nodos que representan las componentes que contiene la
ventana. En este caso sólo contiene la barra de menú, el nodo menuBar del tipo
JMenuBar, figura 29.
Figura 29
Figura 30
Figura 31
Figura 32
Figura 33
Figura 34
Figura 35
Figura 36
2. Para eliminar una opción de un menú se hace clic sobre el nodo que representa
a esa opción y luego presionamos la tecla Suprimir. Una alternativa a ese
procedimiento es hacer clic con el botón derecho en el nodo y seleccionar la
opción Delete, como se muestra la figura 38.
Figura 37
Figura 38
4. Ejecute los pasos 1 y 2 para eliminar las opciones de menú del menú
menuConsultas: cutMenuItem, copyMenuItem, pasteAsMenuItem y
deleteAsMenuItem.
1. En el panel Navegador, haga clic en el nodo que representa la opción del menú
que desee modificar, en este caso en la opción exitMenuItem, como se muestra
en la figura 39.
Figura 39
2. Haga clic en la opción Add From Palette del menú emergente. Aparecerá el
menú emergente mostrado en la figura 41.
Figura 40
Figura 41
Figura 42
Figura 43
5. NetBeans subirá el menú anidado una posición como se muestra en la figura 44.
Figura 44
Figura 45
2. Haga clic en la opción Add del menú emergente. Aparecerá el menú emergente
mostrado en la figura 46.
5. Repita los pasos 1 a 4 para agregar dos opciones de menú al menú anidado
menuCatalogoCanciones. Los títulos de las opciones serán Actualizar
Canción y Eliminar Canción y los nombres de las variables de las
componentes serán opcionMenuActualizarCancion y
opcionMenuEliminarCancion.
Figura 46
Figura 47
6. Repita los pasos 1 a 4 para agregar tres opciones de menú al menú anidado
menuCatalogoPeliculas. Los títulos de las opciones serán Agregar Película,
Actualizar Película y Eliminar Película. Los nombres de las variables de las
componentes serán opcionMenuAgregarPelicula,
opcionMenuActualizarPelicula y opcionMenuEliminarPelicula.
7. Repita los pasos 1 a 4 para agregar tres opciones de menú al menú anidado
menuCatalogoGeneros. Los títulos de las opciones serán Agregar Género,
Actualizar Género y Eliminar Género. Los nombres de las variables de las
8. Repita los pasos 1 a 4 para agregar ocho opciones de menú al menú anidado
menuConsultasCanciones. Los títulos de las opciones serán Todas, Por
Título, Por Intérprete, Por Autor, Por Género, Por Álbum y Por Periodo. Los
nombres de las variables de las componentes serán
opcionMenuConsultasCancionesTodas,
opcionMenuConsultasCancionesTitulo,
opcionMenuConsultasCancionesInterprete,
opcionMenuConsultasCancionesAutor,
opcionMenuConsultasCancionesGenero,
opcionMenuConsultasCancionesAlbum y
opcionMenuConsultasCancionesPeriodo.
9. Repita los pasos 1 a 4 para agregar seis opciones de menú al menú anidado
menuConsultas Peliculas. Los títulos de las opciones serán Todas, Por Título,
Por Actor, Por Director, Por Género y Por Periodo. Los nombres de las
variables de las componentes serán 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 títulos de los generos serán Todos, De Canción
y De Película. Los nombres de las variables de las componentes serán
opcionMenuConsultasGenerosTodos,
opcionMenuConsultasGenerosCancion y
opcionMenuConsultasGenerosPelicula.
1. Haga clic con el botón 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 40.
2. Haga clic en la opción Add From Palette del menú emergente. Aparecerá el
menú emergente mostrado en la figura 48
Figura 48
Figura 49
Figura 50
Figura 51
Figura 52
Figura 53
Figura 54
Figura 55
5. Repita los pasos 1 a 4 para agregar un método oyente para cada una de las
demás opciones de menú de la ventana FrmAmanteMusica:
opcionMenuActualizarCancion, opcionMenuEliminarCancion,
opcionMenuAgregarPelicula, opcionMenuActualizarPelicula,
opcionMenuEliminarPelicula, opcionMenuAgregarGenero,
opcionMenuActualizarGenero, opcionMenuEliminarGenero,
opcionMenuConsultasCancionesTodas,
opcionMenuConsultasCancionesTitulo,
opcionMenuConsultasCancionesInterprete,
opcionMenuConsultasCancionesAutor
opcionMenuConsultasCancionesGenero,
opcionMenuConsultasCancionesAlbum,
opcionMenuConsultasCancionesPeriodo,
opcionMenuConsultasPeliculasTodas,
opcionMenuConsultasPeliculasTitulo,
opcionMenuConsultasPeliculasActor,
opcionMenuConsultasPeliculasDirector,
opcionMenuConsultasPeliculasGenero,
opcionMenuConsultasPeliculasPeriodo,
opcionMenuConsultasGenerosTodos,
opcionMenuConsultasGenerosMedio, opcionMenuAcercaDe y
opcionMenuContenido.
1. En la Vista de Diseño mueva el cursor a una de las orillas del cuadro que
representa la ventana de la aplicación y déjelo ahí unos segundos. Aparecerá
una etiqueta mostrando el tamaño de la ventana de la aplicación y un mensaje
indicando que para cambiar el tamaño de la ventana se arrastre el ratón o se
haga doble clic en la orilla, figura 56.
Figura 56
3. Teclearemos los nuevos valores: ancho y alto separados por una coma. En este
caso 600, 450 y haremos clic en el botón OK. Al hacerlo, el cuadro que
representa la ventana de la aplicación cambiará de tamaño, figura 58.
Figura 57
Figura 58
Figura 59
Figura 60
Figura 61
Figura 62
Figura 63
Figura 64
2. Arrastre con el ratón el icono del panel con las barras de deslizamiento por
debajo de la etiqueta hasta que la guía de alineación indique que el margen
izquierdo del panel está alineado con la etiqueta, figura 65, y suéltelo. Aparecerá
lo mostrado en la figura 66.
Figura 65
Figura 66
Figura 67
5. Para modificar el tipo de marco del panel con las barras de deslizamiento
haremos clic en el botón que se encuentra del lado derecho de su propiedad
border, en el Editor de Propiedades figura 68.
Figura 68
Figura 69
Figura 70
Por último agregaremos el código para agregarle una tabla al panel con las barras de
deslizamiento:
1. Seleccione la Vista de Código Fuente del Panel de Edición. Vaya al final del
código se encuentran las declaraciones de los atributos de la clase.
/**
* Este método crea un objeto del tipo JTable dentro de un panel con
* barras de deslizamiento y la despliega
*
/*
* ConstantesGUI.java
*
* @author mdomitsu
*/
package interfazUsuario;
/**
* Esta clase define constantes empleadas en los cuadros de dialogo
*/
public class ConstantesGUI {
// Tipos de operaciones en los que se van a usar los cuadros de dialogos
public static int AGREGAR = 0;
public static int ACTUALIZAR = 1;
public static int ELIMINAR = 2;
public static int DESPLEGAR = 3;
2. Aparecerá el primer cuadro de diálogo del asistente para crear una clase, figura
7.
3. Del recuadro Categories: seleccione el nodo Java GUI Forms y del recuadro
File Types seleccionaremos el tipo JDialog Form que nos creará el esqueleto
de un cuadro de diálogo, figura 71. Presione el botón Next.
Figura 71
Figura 72
import javax.swing.DefaultComboBoxModel;
import objetosServicio.Fecha;
import objetosNegocio.Cancion;
Figura 73
8. Agréguele a los atributos de la clase, al final del código de la clase, figura 74, los
siguientes atributos:
Figura 74
9. Modifique el constructor de la clase del cuadro de diálogo para que inicialice los
atributos agregados en el paso 9, de la siguiente manera:
/**
* Constructor que establece las características del cuadro de diálogo
* y la operación a realizar con él
* @param parent Ventana sobre la que aparecerá el cuadro de diálogo
* @param title Título del cuadro de diálogo
* @param modal true si permite acceder fuera de los límites del cuadro
* de diálogo, false en caso contrario
* @param cancion Canción a capturar, editar o desplegar
* @param listaGenerosCanciones Lista de los generos de una canción
* @param operacion Operación a realizar en el cuadro de diálogo:
* AGREGAR = 0, ACTUALIZAR = 1, ELIMINAR = 2, DESPLEGAR = 3;
* @param respuesta Boton presionado al salir de los cuadros de
* diálogos: ACEPTAR = "Aceptar", CANCELAR = "Cancelar".
*/
public DlgCancion(java.awt.Frame parent, String title, boolean modal,
Cancion cancion,
DefaultComboBoxModel listaGenerosCanciones,
int operacion, StringBuffer respuesta) {
super(parent, title, modal);
this.cancion = cancion;
this.listaGenerosCanciones = listaGenerosCanciones;
this.operacion = operacion;
this.respuesta = respuesta;
initComponents();
}
Figura 75
3. Agregue una etiqueta por debajo de la etiqueta Clave, arrastrando el icono hasta
que la guía de alineación vertical muestre que la etiqueta está alineada con la
etiqueta Clave y aparezca una guía horizontal en la etiqueta indicando que las
etiquetas se encuentran separados por la distancia vertical predeterminada y
suéltela, figura 76. Usando el Editor de Propiedades cambie el valor de la
propiedad text a Título.
Figura 76
4. Repita el paso 3 para agregar una etiqueta por debajo de la etiqueta Título y
modifique su propiedad text a Intérprete.
5. Repita el paso 3 para agregar una etiqueta por debajo de la etiqueta Intérprete y
modifique su propiedad text a Autor.
6. Repita el paso 3 para agregar una etiqueta por debajo de la etiqueta Autor de la
letra y modifique su propiedad text a Género.
7. Repita el paso 3 para agregar una etiqueta por debajo de la etiqueta Género y
modifique su propiedad text a Álbum.
8. Repita el paso 3 para agregar una etiqueta por debajo de la etiqueta Disquera y
modifique su propiedad text a Duración.
9. Repita el paso 3 para agregar una etiqueta por debajo de la etiqueta Duración y
modifique su propiedad text a Fecha (dd/mm/aaaa).
Figura 77
Figura 78
2. Arrastre con el ratón el icono del campo de texto hasta que la guía de alineación
horizontal muestre que el texto de la etiqueta Clave y la del campo de texto
están alineados y aparezca una guía vertical en el campo de texto indicando que
los elementos se encuentran separados por la distancia horizontal entre
elementos predeterminada y suéltelo, figura 79.
Figura 79
Figura 80
7. 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
el valor de la propiedad text y cambie el nombre de la variable del campo de
texto de jTextField1 a campoTextoInterprete.
Figura 81
8. 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 campoTextoAutor.
10. 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.
11. 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.
Figura 82
Figura 83
Figura 84
3. Si hacemos clic en el icono Preview Design para obtener una vista previa del
cuadro de diálogo y en éste hacemos clic en la caja combinada, veremos que la
lista de opciones es Item 1, Item 2, Item 3, Item 4, figura 85.
Figura 85
Figura 86
Figura 87
5. Podemos editar la lista que aparece en el área de texto. Hay otras alternativas
para establecer la lista de opciones: De un atributo o de la invocación de un
método, ambos del tipo DefaultComboBoxModel. En este caso usaremos un
atributo. Para ello, en el editor de las opciones para la caja combinada mostrado
en la figura 87, haremos clic en la caja combinada que aparece en la parte
superior, figura 88.
Figura 88
Figura 89
Figura 90
Figura 91
Figura 92
2. Coloque el cursor en la orilla inferior del cuadro y arrastre el ratón hacia abajo
para dejar un espacio de unos tres centímetros.
2. Arrastre con el ratón el icono del botón a una posición por debajo de la etiqueta
Fecha y hasta que la guía de alineación vertical muestre que el botón y la
etiqueta están alineados verticalmente y suéltelo, figura 94.
Figura 93
Figura 94
Figura 95
Figura 96
8. Agregue un tercer botón al cuadro de diálogo entre los dos botones anteriores
arrastrando su icono hasta que la guía de alineación horizontal indique que los
botones están alineados horizontalmente y el botón esté centrado
horizontalmente en el cuadro de diálogo.
Figura 97
11. Podemos visualizar el aspecto del cuadro de diálogo DlgCancion haciendo clic
en el icono Preview Design que se encuentra encima de la Ventana de Edición
del Código, figura 35.
Figura 98
Figura 99
Figura 100
Figura 100
5. Repita los pasos 1 a 4 para agregar un método oyente para cada uno de los
demás botones del cuadro de diálogo: botonRestaurar y botonCancelar.
/**
* Constructor que establece las características del cuadro de diálogo
* y la operación a realizar con él
* @param parent Ventana sobre la que aparecerá el cuadro de diálogo
* @param title Título del cuadro de diálogo
* @param modal true si permite acceder fuera de los límites del cuadro
* de diálogo, false en caso contrario
* @param cancion Canción a capturar, editar o desplegar
* @param listaGenerosCanciones Lista de los generos de una canción
* @param operacion Operación a realizar en el cuadro de diálogo:
* AGREGAR = 0, ACTUALIZAR = 1, ELIMINAR = 2, DESPLEGAR = 3;
* @param respuesta Boton presionado al salir de los cuadros de
initComponents();
campoTextoInterprete.setEditable(false);
campoTextoAutor.setEditable(false);
cajaCombinadaGenerosCanciones.setEnabled(false);
campoTextoAlbum.setEditable(false);
campoTextoDuracion.setEditable(false);
campoTextoFecha.setEditable(false);
}
/**
* Este método centra el cuadro de dialogo sobre la ventana de la
* aplicación.
* @param parent Ventana sobre la que aparecerá el cuadro de diálogo
*/
private void centraCuadroDialogo(java.awt.Frame parent) {
// Obtiene el tamaño y posición de la ventana de la aplicación
Dimension frameSize = parent.getSize();
Point loc = parent.getLocation();
/**
* Método oyente del botón botonAceptar
*
* @param evt Evento al que escucha
*/
private void botonAceptarActionPerformed(java.awt.event.ActionEvent evt) {
// Si la operación es Agregar o Actualizar
if((operacion == ConstantesGUI.AGREGAR) ||
(operacion == ConstantesGUI.ACTUALIZAR)) {
// Toma los valores capturados en los campos de texto y en la caja
// combinada y almacénalos en el parámetro cancion.
cancion.setTitulo(campoTextoTitulo.getText());
cancion.setInterprete(campoTextoInterprete.getText());
cancion.setAutor(campoTextoAutor.getText());
cancion.setGenero(
(Genero)cajaCombinadaGenerosCanciones.getSelectedItem());
cancion.setAlbum(campoTextoAlbum.getText());
cancion.setDuracion(Integer.parseInt(campoTextoDuracion.getText()));
cancion.setFecha(new Fecha(campoTextoFecha.getText()));
}
/**
* Método oyente del botón botonRestaurar
*
* @param evt Evento al que escucha
*/
// Si la operación es Actualizar
if(operacion == ConstantesGUI.ACTUALIZAR) {
campoTextoTitulo.setText(cancion.getTitulo());
campoTextoInterprete.setText(cancion.getInterprete());
campoTextoAutor.setText(cancion.getAutor());
cajaCombinadaGenerosCanciones.setSelectedItem(cancion.getGenero());
campoTextoAlbum.setText(cancion.getAlbum());
campoTextoDuracion.setText(new Integer(cancion.getDuracion())
.toString());
campoTextoFecha.setText(cancion.getFecha().toString());
}
}
/**
* Método oyente del botón botonCancelar
*
* @param evt Evento al que escucha
*/
private void botonCancelarActionPerformed(java.awt.event.ActionEvent evt) {
// Destruye el cuadro de díalogo
dispose();
}