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

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”.

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.

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).

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

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

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

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.

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.

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

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,

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.

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!

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

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.

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

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.

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!!!

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.