UCT

Manual Cliente-Servidor con Java-Swing-MySQL

Basado en la herramienta NetBeans y Mysql
Pablo A. Prez Parraguez Prof: Gustavo Donoso M. 01/01/2010

Contenido
I.-Introduccin ............................................................................................................................... 2 II.-Conexin por consola java ........................................................................................................ 3 1.-Conexin ............................................................................................................................... 5 2.-Insercin (insert) ................................................................................................................... 7 3.-Actualizacin (update) .......................................................................................................... 9 4.-Eliminacin (delete) .............................................................................................................. 9 5.-Consulta (select).................................................................................................................. 10 II.-Conexin por Swing ................................................................................................................ 11 1.-Introduccin a Swing........................................................................................................... 11 2.-Creacin del proyecto ......................................................................................................... 12 3.-Conexin ............................................................................................................................. 15 4.-Insercin (insert) ................................................................................................................. 19 5.-Actualizacin (update) ........................................................................................................ 26 6.-Eliminacin (delete) ............................................................................................................ 31 7.-Consulta (select).................................................................................................................. 33 IV.-Finalmente ............................................................................................................................. 36 V.-Webiografia ............................................................................................................................ 37

I.-Introduccin
En este manual se enseara al lector la forma en que se realizan las actividades de tal forma que cada paso realizado en este documento ser enfocado principalmente al uso directo del lenguaje, es decir, nos enfocaremos en la forma en que se deben realizar los procesos para poder realizar un correcto uso de esta herramienta. En este manual ensearemos al lector la forma en que se escribe el cdigo para no cometer errores, adems indicaremos los comentarios necesarios para que el lector pueda saber que tareas se realizan en cada lnea. Para este manual debemos considerar que en nuestra base de datos tenemos dos tablas las cuales son: persona y ciudad

En nuestra tabla tenemos los siguientes valores, los cuales en nuestro sistema no modificaremos utilizaremos.

II.-Conexin por consola java

La conexin por consola es la forma directa de conexin utilizando el leguaje java para acceder a los contenidos que se encuentran Primero debemos crear el proyecto utilizando NetBeans.

A nuestro proyecto lo nombraremos como ConexionDB.

Ahora que nuestro proyecto se ha creado obtenemos como resultado la siguiente ventana.

Atencin!!!!
Este paso es de suma importancia para continuar nuestro proyecto. Se debe agregar una librera especifica al proyecto, es decir, debemos sealar que esto se realiza para que el lenguaje que se utilizara en este proyecto sea reconocible pues de no agregar esta librera al momento de compilar el proyecto este no reconocer la sintaxis del cdigo escrito en mencionado proyecto. Cmo agregamos la librera a nuestro proyecto? A continuacin indicaremos paso a paso las actividades que debe realizar el lector para agregar la librera de MySQL. Primero nos posicionamos en libraries y son el botn derecho clack seleccionamos la opcin agregar librera.

Luego buscamos la librera que deseamos agregar, que para este caso es la de Mysql.

Una ves que tenemos nuestro proyecto con todos los componentes listo procedemos a iniciar el proceso de conexin con la base de datos.

1.-Conexin
Nuestro desarrollo se realizara en el archivo main.java que genera el proyecto al momento de crearlo, este archivo se encuentra de esta forma:

Nos indica la librera local que posee nuestro proyecto.

Para hacer uso de las APIs de MySQL debemos importar el paquete perteneciente a la librera que hemos agregado previamente.

Ahora que tenemos la librera apropiada procedemos a ingresar el cdigo correspondiente para realizar la conexin con la base de datos MySQL. Para ello modificamos el main de nuestra funcin. Este driver se encuentra en la librera de MySQL

Y si lo ejecutamos??? En caso de que funcione

Si todo lo que se encuentra en la funcin try no genera errores se realiza todo normalmente.

En caso de no funcionar

en caso de no funcionar se activa la funcin catch

Esta funcin catch solo se ejecuta cuando que ocurrido un error en la funcin try

2.-Insercin (insert)
Ahora que ya sabemos conectarnos con nuestra base de datos procederemos a lo que realmente importa. No te preocupes si no ves bien mas adelante explicaremos mas en detalle como hicimos esto

Ya sabemos hacer la conexin a la base de datos, por esa razn que no explicaremos el primer paso.

Lo segundo que debemos hacer es crear un objeto de tipo Statement el cual permite enlazar la conexin a la base de datos con java, y requiere la utilizacin del objeto conexin para realizar el puente entre los dos sistemas (java y MySQL).

Ahora creamos las variables correspondientes para ingresarlas a la base de datos.

Ahora que ya tenemos todo listo para hacer nuestra consulta procedemos a realizarla, mostrar por consola que el proceso se ha realizado satisfactoriamente y finalmente cerrar la conexin de la base de datos.

Ojo: cuando ingreses valores debes considerar las comillas simples si la variable de la tabla es de tipo varchar o text, de no ser as no es necesario las comillas simples.

Como podemos ver utilizamos el objeto Statement para realizar el ingreso con el mtodo execute el cual permite ejecutar cdigo SQL. Ahora que sabemos como interactuar con la base de datos los dems pasos son mucho mas simples de realizar.

En ejecucin

3.-Actualizacin (update)
Para realizar la actualizacin de un registro de la base de datos solo basta indicarlo en la funcin execute la cual permite realizar esta operacin.

En ejecucin...

4.-Eliminacin (delete)
Para realizar la eliminacin de un registro de la base de datos solo basta indicarlo en la funcin execute la cual permite realizar esta operacin.

En esta ocasin he eliminado un registro diferente al que hemos modificado en el punto anterior.

En ejecucin

5.-Consulta (select)
Al fin hemos llegado a lo importante de este manual, ahora procederemos a realizar consultas a la base de datos. Desde ahora debemos indicar al lector un nuevo objeto el cual permite almacenar el registro completo de la consulta que realizaremos. El objeto ResultSet permite almacenar el registro y se utiliza de la siguiente forma.

Estos mtodos pertenecen al objeto ResultSet y retornan un parmetro en especfico, por ejemplo el r.getString retorna un String mientras que el r.getInt retorna un entero. Estos valores pueden utilizarse en cualquier proceso que queramos

En ejecucin

Como podemos ver nos entrega cada registro de la tabla persona y lo mostramos con el formato que nosotros indicamos.

Para mejorar an ms tus habilidades practica ms ejercitando las habilidades adquiridas con anterioridad. Genera varias pruebas antes de pasar a la siguiente unidad.

10

II.-Conexin por Swing

Ahora que ya hemos practicado bastante procederemos a introducir vistas mas amigables para el usuario para ello utilizaremos la tecnologa Swing.

1.-Introduccin a Swing
El paquete Swing es parte de la JFC (Java Foundation Classes) en la plataforma Java. La JFC provee facilidades para ayudar a la gente a construir GUIs. Swing abarca componentes como botones, tablas, marcos, etc. Las componentes Swing se identifican porque pertenecen al paquete javax.swing. Swing existe desde la JDK 1.1 (como un agregado). Antes de la existencia de Swing, las interfaces grficas con el usuario se realizaban a travs de AWT (Abstract Window Toolkit), de quien Swing hereda todo el manejo de eventos. Usualmente, para toda componente AWT existe una componente Swing que la reemplaza, por ejemplo, la clase Button de AWT es reemplazada por la clase JButton de Swing (el nombre de todas las componentes Swing comienza con "J"). Las componentes de Swing utilizan la infraestructura de AWT, incluyendo el modelo de eventos AWT, el cual rige cmo una componente reacciona a eventos tales como, eventos de teclado, mouse, etc... Es por esto, que la mayora de los programas Swing necesitan importar dos paquetes AWT: java.awt.* y java.awt.event.*.

Ojo: Como regla, los programas no deben usar componentes pesados de AWT junto a componentes Swing, ya que los componentes de AWT son siempre pintados sobre los de Swing. (Por componentes pesadas de AWT se entiende Menu, ScrollPane y todas las componentes que heredan de las clases Canvas y Panel

11

2.-Creacin del proyecto

Para comenzar el desarrollo con la tecnologa Swing debemos crear un nuevo proyecto, es decir, crearemos una nueva interfaz de desarrollo pero esta interfaz utilizara mtodos usados en la segunda unidad. Primero crear proyecto:

Como podemos ver en este caso crearemos un proyecto java de tipo aplicacin de escritorio.

A continuacin nombramos nuestro proyecto.

12

Como podemos ver tenemos una amplia rea para trabajar en este tipo de herramienta

rea de trabajo

Seccin donde encontramos herramientas de Swing

Las herramientas de swing solo las arrastramos hacia el rea de trabajo y son ingresadas en el cdigo automticamente.

En esta seccin podemos cambiar el modo de trabajo, es decir, podemos trabajar en modo diseo que es el que actualmente vemos en la imagen anterior. Si cambiamos de modo vemos lo el cdigo fuente que genera todo lo que vemos en el rea de diseo. Frame correspondiente a ventana de about.

Main de configuracin principal.

Frame principal

Ahora para motivar y ensear al lector las diferentes posibilidades que se pueden crear con esta tecnologa procederemos a ejecutar el proyecto que genera por defecto NetBeans, el resultado observable es una aplicacin de ventana la cual puede ser ejecutada sin NetBeans facilitando su portabilidad en otras computadoras.

13

En ejecucin
Como podemos ver esta ventana posee caractersticas conocidas por cualquier usuario, tales como el men superior y submens que permiten acceder a otros lugares de la aplicacin.

Pero vamos a lo nuestro, ahora comenzaremos a editar nuestro proyecto, lo primero que haremos ser agregar la conexin a nuestra aplicacin. Ojo: en la parte inferior izquierda se encuentran todos los componentes que posee nuestra venta.

Seccin que nos indican los componentes del proyecto

Seccin que nos indican los componentes de la ventana que estamos trabajando.

14

3.-Conexin
Ahora al trabajar en la ventana principal que tiene por nombre ConexionDBswingView.java procederemos a editar el contenido del cdigo que esta ventana posee. No olvides agregar la librera de MySQL a nuestro proyecto.

Ahora procedemos a editar el contenido del mainPanel para ello hacemos doble click sobre l y accederemos al diseo nico del mainPanel que corresponde al centro de la ventana principal.

mainPanel

Ahora que nos encontramos en el panel principal, procedemos a editar el cdigo fuente, para ello seleccionamos el modo correspondiente.

Lo primero que debemos agregar a este cdigo es la librera de mysql

Las dems libreras corresponden a las de la tecnologa Swing y son las que nos permiten agregar la parte visual de nuestra aplicacin. (Ventanas, botones, mens, etc.)

15

Ahora procederemos a iniciar la conexin con el servidor MySQL, para ello el lector puede apreciar que hemos creado variables globales en el proyecto para que puedan ser accedidas desde cualquier punto. Tambin el lector debe darse cuenta que en el constructor de la aplicacin se inicializan las variables, principalmente la variable conexin que es la que se debe inicializar al comienzo de la ejecucin del programa.

No olvidar que este cdigo se agrega despus del initComponents() , no se elimina cdigo posterior a esto. Ahora que tenemos conexin con el servidor procederemos a realizar las mismas actividades de la unidad anterior. Lo primero que debemos hacer es posicionarnos en el modo de diseo y agregar un men ms interactivo con el usuario.

En la barra de herramientas que encontramos en la derecha del rea de trabajo tenemos las diferentes posibilidades de mens disponibles para utilizar, para este caso utilizare el men basado en paneles con pestaas, es decir, agregaremos de la seccin swing container

16

La forma en que debemos agregar el Tabbed Pane es muy fcil, solo lo arrastramos hacia el mainPanel y posteriormente debemos extenderlo hasta cubrir todo el panel.

Ahora agregaremos 3 paneles para ello nos posicionamos en el rea inferior izquierda en el swing Tabbed Pane y al hacer clack seguimos la siguiente secuencia que indicaremos en la imagen presentada a continuacin.

17

Al hacer esta operacin tres veces se generara el siguiente espacio de trabajo.

Para editar los nombres de los diferentes paneles solo basta hacer clack en los paneles y seleccionar la opcin edit text.

En mi aplicacin he escogido los siguientes nombres:

18

4.-Insercin (insert)
Ahora procederemos a trabajar en el panel que lleva por nombre Agregar, en el cual lo modificaremos hasta que quede de la siguiente forma.

Para modificar este panel hemos utilizado componentes como Label, Text fiel, combo box, radio buton y button.

Ojo: Si utilizamos el botn Preview Dising podemos ver como quedara nuestro proyecto sin la necesidad de ejecutar el programa.

Ahora que ya tenemos los componentes agregado a nuestro panel debemos asignarle los nombres de variables correspondientes para agregar posteriormente su contenido a la consulta mysql. Para ello al hacer clack cambiamos el nombre del contenedor por uno que podamos identificar mas adelante.

Luego en la siguiente ventana agregamos el nuevo nombre a la variable.

19

Esto debemos hacerlo con las variables nombres, apellidos, rut, fecha de nacimiento y direccin. Ahora configuraremos las variables sexo y ciudad, primero analizaremos la variable sexo. Con la configuracin actual que poseen estos radiobutton pueden ser seleccionados ambos botones a la vez lo que por lgica no puede ser factible ya que el sexo de una persona es nico.

Primero debemos agregar un nombre a los dos botones, los cuales en nuestro proyecto llamaremos M y F, de esta forma podremos saber que botn hace referencia a que valor. Una vez que los botones cuentan con un nombre de variable comprensible por el lector, el lector debe agregar un nuevo objeto al proyecto el cual lleva como nombre button group, este elemento se encuentra en el lado derecho del rea de trabajo.

Para agregar este componente al proyecto debemos arrastrarlo hasta el panel, no te preocupes si no aparece nada en el panel pues este objeto no es visible para el usuario pero si para el programado, por esto que lo encontraras en inspector de componentes del proyecto.

A este componente debemos cambiar su nombre de variable por sexo de la misma forma en que lo realizamos anteriormente con las otras variables, solo que para cambiar el nombre debemos hacer clack en el objeto en el inspector de componentes.

20

Ahora para poder configurar que los botones M y F pertenezcan al grupo correspondiente de la variable sexo, debemos acceder al cdigo fuente de la variable sexo, esta operacin se realiza de la siguiente forma, al hacer clack sobre la variable sexo debemos ingresar donde dice customiza code y nos encontraremos con una ventana de configuracin de dicha variable

Una vez que nos encontramos en la ventana de configuracin observaremos la siguiente lnea de cdigo:

Esta lnea no la midificaremos, lo nico de que debemos realizar en esta ventana es agregar dos lneas de cdigos generando lo siguiente:

Como se puede observar lo que se ha realizado es aadir a la variable sexo los componentes del botn Masculino (M) y Femenino (F). Ahora si realizamos la vista previa de nuestra ventana podremos observar que solo podremos seleccionar una de las dos opciones en nuestro formulario.

21

Una buena prctica en programacin es dejar seleccionado uno de estos botones por defecto, es decir, dejar uno de los dos botones seleccionados para que en caso de que el usuario que ingrese a la persona a la base de datos no seleccione uno de las dos opciones no se genere un error. Para dejar uno de los dos botones seleccionado debemos ir al cdigo del botn que queremos seleccionar y agregar lo siguiente.

Si hacemos esto el aparecer siempre seleccionado nuestro botn, en este caso el sexo masculino.

Ahora configuraremos la variable ciudad la cual como se puede observar es un combobox, es decir, consta de una lista de posibilidades que el usuario puede seleccionar, por defecto muestra lo siguiente:

El lector puede acceder al cdigo fuente de este combobox y ver donde se genera la lista de contenidos.

22

Pero el contenido que debe tener esta lista debe corresponder a lo que tenemos en nuestra base de datos en nuestra tabla ciudad, para ello modificaremos su contenido con el siguiente cdigo.

Como se puede ver en l parte superior de la imagen hemos comentado la seccin dende se generan los tem por defecto de la lista desplegable (combobox).

En ejecucin!!!

23

Ahora procederemos a realizar el ingreso de los datos del formulario en nuestra base de datos, para ello utilizaremos el botn agregar al cual le asignaremos un evento el cual se ejecutara al momento de hacer click sobre el. Para agregar la accin al botn debemos hacer clack sobre el y presionar donde dice eventactionactionPerformed.

Esta accin no llevara hacia el cdigo fuente del programa en la seccin creada para realizar al momento de presionar el botn agregar.

Dentro de esta funcin debemos agregar el siguiente cdigo para ingresar los datos del formulario a nuestra base de datos.

24

A continuacin explicaremos brevemente el cdigo agregado en la funcin. El lector debe saber que el try{..}catch{..} es la funcin que siempre que realizamos consultas a la base de datos debe estar presente en nuestro cdigo ya que nos permite controlar los errores que se produzcan durante el periodo de ejecucin de nuestra aplicacin.

Lo primero que hacemos es buscar el id de la ciudad seleccionada por el usuario, para ello con el texto presente en el combobox hacemos una consulta a la base de datos para despus contar con el id correspondiente. Otro paso importante que hacemos en la generacin de l variable correspondiente al sexo de la persona.

Ahora que tenemos las variables listas procedemos a ingresar a la persona a nuestra base de datos:

Una vez que ingresamos el registro al sistema eliminamos todos los campos ingresados previamente para un nuevo ingreso:

25

Dejamos al lector la opcin de investigar cmo generar una ventana de alerta para avisar al usuario del ingreso de la persona al sistema de una forma mas prctica. Una ayuda para el lector:

5.-Actualizacin (update)
Para realizar una actualizacin debemos formar la siguiente ventana, la cual como podemos apreciar posee un combobox que contendr la lista de todas las personas de nuestra base de datos para su posterior modificacin.

Primero se debe generar el combo-box al igual que en la seccin anterior pero en este caso con los datos de las personas.

26

Ahora que poseemos la lista con las personas debemos hacer el paso de la generacin de los campos para la modificacin de los datos de la persona seleccionada.

OJO: En esta ventana los campos no pueden llevar el mismo nombre que en la ventana de ingresar, es por esta razn que los nombraremos de esta forma: Por ejemplo para el rut lo llamaremos rut_2 Para el campo nombres la variable se llamara nombres_2 Espero hayas entendido.

27

Ahora debemos hacer que al momento de seleccionar a una persona se actualicen los datos de nuestra ventana para ser modificados por el lector. Esto se hace con la accin actionPerformed visto anteriormente en la utilizacin del botn en la unidad anterior.

Ahora en la seccin indicada por nuestro mtodo debemos modificar cada contenido de nuestro formulario de actualizacin:

28

Pero no te alarmes si no comprendes nuestro cdigo a continuacin explicaremos las lneas que puedan significar dificultades para ti.

La primera lnea la modificamos para no editarla pues el usuario no podr modificar el rut de una persona ya que esta accin no es una buena prctica, lo correctos es eliminar al usuario e ingresar nuevamente los datos con el rut correcto.

En la segunda lnea agregamos el rut capturado del objeto combo-box, y posteriormente con el mismo objeto capturado hacemos una consulta a la base de datos.

En las cuatro primeras no hacemos nada mas que agregar los datos correspondientes a la consulta realizada con anterioridad en los campos correspondientes a nuestro formulario.

Esta lnea es importante ya que lo que realizamos es almacenar el valor correspondiente a ciudad a la que pertenece nuestra persona, se puede observar que le sustraemos una unidad ya que en el JCombo-Box del formulario de actualizacin la lista se numera desde el nmero cero.

En estas lneas comparamos el valor existente en los datos de la persona y seleccionamos el que corresponda de nuestro formulario.

29

Como podemos apreciar realizamos una nueva consulta la que se centra en los datos de la tabla ciudad y cuando son agregados al JCombo-Box correspondiente a ciudad_2 seleccionamos el valor correspondiente a nuestra persona y que se almaceno en la variable ciu anteriormente.

Ahora procederemos a realizar la actualizacin de los datos, para ello utilizaremos la accin dada por el botn actualizar presente en nuestro formulario. La accin de actualizar se realiza de la misma forma en que ingresamos a la persona en la opcin anterior solo que en este caso realizamos la actualizacin de los datos de la persona.

30

6.-Eliminacin (delete)
Ahora para eliminar un registro del sistema en la ventana de edicin agregaremos el botn eliminar, el cual permitir al usuario borrar a la persona ingresada en la base de datos.

Ahora ingresamos el evento correspondiente al presionar el botn eliminar:

Pero en este ejemplo hay unas lneas que no comprendo?

Estas lneas hacen referencia a dos ventanas de dialogo las cuales realizan una interaccin ms didctica con el usuario que controla nuestra aplicacin: Una ventana de dialogo es aquella ventana de confirmacin o de alerta que aparece por lo general en los Navegadores. 31

Para realizar una de estas ventanas basta seguir los siguientes pasos: Primero agregar un componente llamado JDialog a nuestra aplicacin:

A este componente le llamaremos Alerta el cual ser una ventana de confirmacin con dos opciones, esta ventana deber poseer el siguiente formato:

Como se puede observar posee dos botones y un texto, cada botn posee una accin en especial la que realizara una interaccin distinta con el usuario. Primero el botn NO:

El botn NO, posee una nica accin la cual es cerrar la ventana de dialogo. Ahora el botn SI:

32

Se puede observar que realizamos dos procesos al presionar el botn, el primero es modificar una variable previamente generada transformndola en true, mientras que el segundo proceso es ocultar la ventana de dialogo al usuario, esto lo hacemos para no cerrar la ventana y as no perder nuestra variable opcin. Una vez que hemos utilizado la variable opcin procedemos a cerrar nuestra ventana como se muestra a continuacin:

Como ingeniero debes aprender como ingresar ms parmetros al momento de generar las ventanas de dilogos para poder agregar el texto que t quieras a la ventana sin la necesidad de tener un texto nico para cada aplicacin.

7.-Consulta (select)
En esta unidad utilizaremos un componente llamado JTABLE el cual nos permitir agregar los registros a una tabla tipo Excel lo que nos permitir una visualizacin ms amigable para el usuario.

Ahora debemos modificar el contenido que posee nuestra tabla.

Sector donde se genera el arreglo correspondiente a los datos de la tabla

Sector donde indicamos los ttulos de la tabla de datos

33

Ahora mostraremos el cdigo final para poder mostrar los datos de la tabla persona a nuestro usuario:

No te preocupes si no entiendes el cdigo expuesto anteriormente, a continuacin explicare las lneas para mejorar tu comprensin al respecto.

34

Creacin de arreglo de datos:

Sin duda existen ms formas de realizar este proceso, pero he escogido esta forma para ilustrar al lector de mejor forma cmo podemos manipular nuestras consultas para generar los resultados esperados. En la primera lnea realizamos una consulta bsica a nuestra base de datos y generamos una variable fila la cual nos indicara cuantas filas posee nuestra consulta. Una vez que tenemos la cantidad de filas procedemos a la creacin de un objeto de tipo Object al cual asignamos la cantidad de filas seguido por las columnas que nosotros utilizaremos mas adelante. El proceso de averiguar cuantas filas posee una determinada consulta se puede realizar con una funcin llamada r.getRow() la cual entrega la cantidad de filas de la consulta

Ahora procedemos a la insercin de cada registro en nuestro arreglo:

Como podemos ver a cada columna agregamos un dato en especfico.

35

Finalmente la insercin del objeto lista en nuestra tabla:

Se puede observar que hemos agregado a cada columna de nuestra tabla en nombre correspondiente a cada datos agregado en nuestro Object lista.

Ahora que posees las habilidades necesarias para interactuar con JAVA, SWING y BASE DE DATOS. Estas listo para pasar al siguiente nivel en este manual.

IV.-Finalmente

36

V.-Webiografia
http://www.chuidiang.com/java/mysql/mysql-java-basico.php http://paraisolinux.com/conectar-java-con-mysql/ http://pedrorojas.over-blog.es/pages/Conexion_Java_Mysql_Ponencia_Flisol1353448.html http://www.k4ch0.org/blog/2009/07/21/conectar-mysql-con-java-usando-jdbc/

37