Una sencilla practica con algunos conceptos de programación para ser aplicados en el grupo de programación

1. Manejo de ventanas
Fecha: 28 de Febrero
Manejo de las ventanas. AGENDA DEV
¿Qué tal nuestra primera prueba con gráficos? Sí, sí, sí,
estoy hablando del teclado, sé que las personas que hayan
manejado otros lenguajes gráficos pensaran que Java no es
la gran cosa, y la verdad tienen razón, sí, para Java su fuerte
no el manejo de los componentes gráficos, pero sin
embargo, tiene todo lo necesario para explotar la tecnología,
recordemos que Java no solo es un lenguaje de
programación, si no es una total plataforma de
infraestructura de desarrollo.
Por su parte Swing, es un conjunto de clases desarrolladas
para java 1.2, para mejorar el aspecto gráfico de los componentes en Java. Swing tiene las
ventajas de construir una interfaz que consume pocos recursos a la vez permite generar
diseños muy limpios.
En pocas palabras Swing tiene botoncitos y cuadritos de texto que usamos en las interfaces, si
te fijas con mucha atención al principio de cada clase que contiene componente gráfico
aparecerá un “import javax.swing”, porque es quien proporciona estos componentes.
Ahora sí, hemos trabajado con una ventana, pero ¿qué pasa cuando tenemos que cambiar
entre varias ventanas que nos dan funcionalidad extra?, bien, vamos a trabajar un poco más
allá, empezaremos con un menú que llamara a dos ventanas, una para agregar y otra para
mostrar (la figura 1 ilustra el diagrama modular).
Nos ayudaremos de una pequeña base de datos, ¿base de datos?, sí, una base de datos es
un repositorio de datos, es decir, es una pequeña aplicación transparente para el usuario, que
permite controlar la información, imagina como si fuera una hoja de Excel gigante que pueda
interactuar con tu aplicación.
Figura 1
1

2. Manos a la obra
Se ve sencillo, y más cuando lo platicamos, pero espero poder sacar esta solución de la mejor
forma programando.
1. Empezaremos a trabajar con una nueva aplicación de Java, por lo que necesitaremos poner
un nombre para el proyecto, en este caso se llama “appDevTequila_2”. No es necesario
crear un “Main” se lo vamos a crear de forma manual (Figura 2).
Figura 2
Dentro de la programación y dentro del desarrollo de aplicaciones verás que hay que seguir
algunas reglas en cuanto al diseño. Uno de los estándares de desarrollo que se maneja mucho
es conocido como Modelo-vista-Controlador, este diseño me dice: “divide los datos de los
procedimientos y de la vista”. Se lee un poco difícil pero es sencillo aplicarlo a nuestros
proyectos. Lo que quiere decir que mi programa estará dividido en 3 partes, primero la vista
que corresponde a las ventanas que hagamos, segundo el controlador, que nos permitirá
preparar los datos y por último el modelo que me ayudara a trabajar con las base de datos.
2. Trabajaremos con tres paquetes, vamos a “source package” y agregamos tres paquetes
(Figura 3), cada uno de forma individual, con los nombres “vistas”, “controlador”, y “modelo”.
2

3. Figura 3
Nuestros paquetes quedaran como lo ilustra la figura 4.
Figura 4
3. Dentro del paquete “controlador” vamos a crear una clase que permita invocar a mi clase
“Principal” (Figura 5).
Una vez creada chequen que tiene un método “main” (Figura 6) para que pueda arrancar mi
programa, de ahí en más trabajaremos con instancias, ¿instancias?, si instancias que quiere
decir englobar tu clase, formulario u otro en el nombre de la variable para que lo mandes
llamar.
En este caso revisa muy bien la línea que dice “Menu menu = new Menu();” esta línea hace
hincapié a que se va a crear un “menu” nuevo para que pueda ser utilizado. En la siguiente
línea aparece “menu.setVisible(true);” esto es para que se muestre mi menú y pase a
tener el control de mi programa.
3

4. Figura 5
Figura 6
Pero ¡me marca errores!, clama no caigamos en pánico, recuerda que Netbeans no es mágico
y mucho menos Java. Nos marca error porque no existe “Menu();” está palabra (con
paréntesis y que va después de la palabra “new”), hace referencia a una clase “Menu”, pero
hasta ahora solo tenemos la clase Principal por lo que “Menu” no existe. Entonces vamos a
crearla.
4. Vamos al paquete de vistas y damos clic derecho, escogemos un JFrame Form (Figura 7)
para poder trabajar más cómodamente con los gráficos, lo llamaremos “Menu” (espera un
momento, ¿”Menu”?, sí “menú” el que nos marca error en el primer programa con esto
solucionaremos un solo problema).
4

5. Figura 7
NOTA: Tengan mucho cuidado, solo creen un JFrame por aplicación, pero si vamos a usar varias ventanas,
¿cómo lo haremos con solo un JFrame?, la respuesta es sencilla, utilizaremos un archivo diferente que se llama
JDialog que se puede decir que son los hijos del JFrame por lo que es más cómodo controlarlos.
5. Regresamos a la clase “Principal” y ¿porque si ya existe la clase “Menu”, sigue marcando
error?, ok, observa (Figura 8).
Figura 8
¿Dónde está “Menu”? y ¿dónde está “Principal”?, están en paquetes diferentes (si el
CLASSPATH lo configuramos con un “.”), pues nuestra clase “Menu” y “Principal” no están
donde mismo, por lo que tenemos que “importar” la clase, para esto en “Principal” ponemos
“import vistas.Menu;” (Figura 9). Con esto el error queda resuelto por lo que ya podemos
ejecutar nuestra aplicación.
Figura 9
5

6. 6. Volvemos con nuestro “Menu” y agregaremos una barra de menús, para esto revisamos en
la paleta (lado derecha del IDE), dentro de la categoría de “Swing Menus” para insertar el
componente “Menu Bar” (Figura 10).
Figura 10
El formulario lucirá como lo ilustra la figura 11.
Figura 11. Figura 12
Damos clic derecho en “Edit” y del menú emergente seleccionamos “Delete”, para eliminar esa
etiqueta ya que no la necesitaremos, solo trabajaremos con File.
Vamos nuevamente “Swing Menus” y seleccionamos “Menu Item” (figura 12), lo ponemos
dentro del menú de “File” (arrastrar y soltar), este componente nos ayudará a agregarle
opciones dentro del menú. Agregaremos un segundo componente.
Escogeremos cada uno de los “Menu Item” y modificaremos la opción text (clic derecho ->
Editar Texto) para asignar la etiqueta de la operación correspondiente (“Agregar” y “Consultar”),
quedando como ilustra la figura 13.
Figura 13
6

7. 7. OPCION AGREGAR. Vamos al explorador de la izquierda y agregaremos un componente
más al paquete “vistas” (clic derecho), será un JDialog Form el cual llamaremos “Agregar”,
si es la primera vez que trabajas con Netbeans puede ser que no lo encuentres entre el menú
emergente, si este es el caso seleccionamos “Other” en la nueva ventana buscaremos en la
categoría Swing GUI forms ->JDialog Form (Figura 14). Clic en “Siguiente”. Solo
especificamos el nombre “Agregar” y clic en Terminar (Figura 15).
Figura 14
Figura 15
7

8. El panel de “Proyecto” debe lucir como la figura 16
Figura 16
8. Agrega los componentes como indica la figura 17 y modifica el aspecto grafico del formulario,
déjalo bonito para que sea una buena opción para que el usuario se sienta cómodo. Vamos
tenemos solo 10 minutos.
Figura 17 Figura 18
El primer componente es un “JText Field”, el de Teléfono se llama “Formmated Field” (Figura
18), por lo que necesitamos configurarlo para que nos acepte solo teléfonos válidos.
Seleccionamos la propiedad “Formmatted Factory”, aparecerá una ventana como la de la
figura 19, seleccionamos la categoría “Mascara” y ponemos como formato “(###)-##-#####”
(sin las comillas). Ver figura 19.
8

9. Figura 19
El tercer componente “Ciudad” utilizaremos el clásico “ComboBox” llamado en JAVA
“JComboBox”, y en la propiedad de “model” llenamos con ciudades un poco llamativas. Figura
20.
Figura 20 Figura 21
Ya solo faltan los botones “Cancelar” y “Aceptar”. Tenemos nuestro formulario terminado. No
quedo tan bien pero lo puedes hacer mejor (Figura 21).
9. Opción Mostrar. Agregar un nuevo “JDialog Form” en la parte de vistas y nómbralo
“Mostrar” y vamos a utilizarlo para ver los registros de amigos de Dev, por lo que será una vista
muy sencilla, algo como lo de la figura 22.
9

10. Figura 22
No te preocupes por los “Title” la programación lo resolverá, ahora es cuestión de que tu
formulario este bonito y que te guste para trabajar.
Los componentes utilizados son etiquetas, cuadro de texto, botón y “JTable”, cuidado con este
último ponlo primero para que no te mueva tu diseño, si lo sé es un poco difícil, pero poco a
poco nos vamos acostumbrando, si tantos botones acomodaste, esto será muy sencillo.
Vamos!!!!
10. Menu. Regresamos a “Menu.java” Le daremos un poco de funcionalidad a “Menu” de tal
manera que empezaremos por generar los eventos para que nuestras ventanas puedan
ejecutarse, lo primero que haremos será abrir el menú de “File” (Figura 23) y en donde dice
“Agregar” le damos clic derecho - > Event - Action - > ActionPerformed
Figura 23
10

11. NOTA: A esto le llamaremos Agregar un evento, no lo olvides lo ocuparemos siempre en nuestras
sesiones siguientes.
Aquí solo insertaremos el código que indica la figura 24, esto es algo sencillo que nos servirá
para abrir los formularios.
Figura 24
A diferencia del que utilizamos en principal, aquí “new Agregar(this, true);” tiene dos
parámetros, pero que significan, el primero “this” sirve para decirle que se pegue al formulario
“menu” (la instancia creada de la clase “Menu”) y a partir de ahí, lo mostrará. El “true” es para
que mientras esté abierta la ventana no puedas regresar al “menu” (la instancia). Puedes
ponerlo como false y experimenta las diferencias.
Haz lo mismo para la opción de “Consultar”, para que nuestro “menu” tenga manera de abrir las
ventanas hijo. Inténtalo funcionará.
11. Vamos a trabajar con los datos. Para esto trabajaremos con un pequeño motor de base
de datos que ya tenemos instalado por lo que trataremos de iniciarlo para esto nos vamos a la
pestaña de servicios (lado izquierdo, junto a la pestaña de “Proyecto”) y damos inicio a nuestro
servidor. Escogemos iniciar servidor. Figura 25.
Figura 25
Una vez iniciado creamos nuestra primera base de datos, que como les comentaba podemos
imaginarla como una hoja de Excel, por lo que se componen de tablas con celdas, sin
embargo, nuestra intención por ahora no es hablar mucho de base de datos y sus partes
teóricas sino simplemente trabajar con datos.
Ya que iniciamos nuestro servidor daremos un clic derecho nuevamente en JavaDB, y daremos
la opción de “Crear base de datos” (Create Database) dejando los datos como en la Figura 26,
11

12. en contraseña le ponemos java, sí, sí, sí, sí ya se, me quebro la mente para buscar una
contraseña, pero busquen una que sea fácil.
Figura 26
Una vez creada vamos al árbol de JAVADB y buscamos nuestra base de datos, le damos clic
derecho “Conectar” y listo. Figura 27.
Figura 27
Buscaremos nuestro “schema” de “APP”, vamos a “Tables”, clic derecho y “Crear Tabla”. Figura
28.
Figura 28
Nuestra tabla llevará por nombre “contacto”, agregaremos 4 columnas como sigue una llave
primaria “id”(Figura 29), “nombre”(Figura 30), “telefono”(Figura 31) y “ciudad” (Figura 32)
espero nos funcione todo correctamente.
12

13. Figura 29 Figura 30
Figura 31 Figura 32
La tabla debe quedar como la figura 33 y en el árbol debe verse como en la Figura 34.
Figura 33
¡Esto que si es divertido!
13

14. Figura 34
Vamos a crear nuestro modelo, esto servirá para trabajar con la base de datos para que
podamos tener una persistencia, un concepto que entenderemos más en la programación más
avanzada.
12. ENTITY CLASSES. Regresamos al panel “Proyecto” y dentro del paquete “modelo”
vamos a crear una nueva clase llamada “Entity Class from Database” (clic derecho sobre
modelo). Figura 35.
Figura 35
Escogemos la conexión que nos marca como “contactos” (Figura 36), esto puede tardar un
poco, esto permitirá crear una clase un poco rara pero nos servirá para trabajar con los datos.
Figura 36
14

15. Seleccionamos la tabla “contacto” y le damos en “Añadir” (se pasará a la lista derecha) para
que la considere como la tabla que transformará a objeto. Nos aparecerá una ventana como la
figura 37, a lo que solo restará dar clic en “Siguiente”. La siguiente ventana no movemos nada y
damos clic en “Terminar”.
Figura 37
Si lo hicimos correctamente tendremos una clase más en nuestro paquete, quedara algo como
la figura 38
Figura 38
Podemos abrirla y veremos que tiene mucho código en posteriores sesiones platicaremos un
poco más de los “Entity” y su funcionamiento con las base de datos.
Felicidades a hasta este momento ya tienes el modelo y la vista, ahora hay que darle
funcionalidad
13. CONTROLADOR. Es ahora momento de hacer la clase “Control” para eso hay que darle
clic derecho en el paquete de “controlador” y crear una nueva clase llamada “Control”. Figura
39.
15

16. Figura 39
Crearemos dos métodos uno para mostrar y otro para agregar, empezaremos por “Agregar”
escribiendo el siguiente código:
En este código simplemente llenamos la clase contacto, y ponemos sus datos con el “persist”
podemos guardar la información.
Nos falta agregar la librería para la base de datos, por lo que en la carpeta “Libraries” del
proyecto agregaremos un nueva librería con clic derecho (Figura 40) y escogemos donde dice
“JAVA DB Driver“(Figura 41) de tal manera que agregue las librerías de la Figura 42.
Figura 40 Figura 41
16

17. Figura 42
Regresamos a “Agregar.java” y agregamos el “ActionPerformed” del botón guardar y
agregamos el siguiente código.
Listo tenemos correctamente configurado, podemos probar que realmente funcione, podemos
ejecutar el programa, después darle en la opción de agregar (recuerda ejecutar tu principal), y
en el formulario llena los datos y da aceptar.
A primera vista no ha pasado nada, porque no le pusimos un mensaje o borramos los campos,
pero revisa la base de datos, para confirmar que se guardaron los valores, para eso dirígete a
la pestaña de “servicios”, busca tu tabla de tu base de datos y por último da clic derecho en
“View data” (ver datos) y revisa que tus datos se hayan guardado correctamente. Figura 43.
Figura 43
14. Vamos a “Control” y codificamos el segundo método “leer” recuerda que los métodos
deben escribirse dentro de la clase, puedes hacerlo antes o después del método “agregar”.
“Leer” se llamara nuestro método volveremos a usar la persistencia para ayudarnos a obtener
los datos. Para esto escribimos este pequeño código.
17

18. Esto permitirá que los datos que existan en la lista pasen a un arreglo y de ahí poder mandarlo
a la tabla.
NOTA: revisar que los paquetes que se importan sean como siguen:
Abriremos la clase “Mostrar” y tendrás que buscar el método “initComponents” y de ahí
mandar llamar tu controlador para que invoque los datos a utilizar
Con esto nuestra aplicación debe funcionar, mucha suerte con nuestra agenda!!!
18

19. RETO: Revisa detalladamente el archivo de Contacto es un “bean” que prácticamente nosotros
no programamos, revisa que hay varios métodos como “Contactos.findAll”, busca un método
que se acople al nombre, revisa lo que ya hicimos con “findAll” y dale funcionalidad al cuadro
de texto de tal manera que si en el cuadro de texto de “Mostrar” se escribe un nombre tenga la
posibilidad de buscar las personas con ese nombre.
¡Vamos inténtalo!, un tip que te puede servir es:
consulta.setParameter("nombre", "Jose Luis Cobian");
Esta es una creación del club de programación, a veces programar puede ser divertido.
19