Manual Cliente-Servidor con Java-Swing-MySQL

Transcripción

1 UCT Manual Cliente-Servidor con Java-Swing-MySQL Basado en la herramienta NetBeans y Mysql Pablo A. Pérez Parraguez Prof: Gustavo Donoso M. 01/01/2010

2 Contenido I.-Introducción... 2 II.-Conexión por consola java Conexión Inserción (insert) Actualización (update) Eliminación (delete) Consulta (select) II.-Conexión por Swing Introducción a Swing Creación del proyecto Conexión Inserción (insert) Actualización (update) Eliminación (delete) Consulta (select) IV.-Finalmente V.-Webiografia

3 I.-Introducción En este manual se enseñara 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 enseñaremos al lector la forma en que se escribe el código para no cometer errores, además indicaremos los comentarios necesarios para que el lector pueda saber que tareas se realizan en cada línea. 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. 2

4 II.-Conexión por consola java La conexión por consola es la forma directa de conexión 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. 3

5 Ahora que nuestro proyecto se ha creado obtenemos como resultado la siguiente ventana. Atención!!!! Este paso es de suma importancia para continuar nuestro proyecto. Se debe agregar una librería especifica al proyecto, es decir, debemos señalar que esto se realiza para que el lenguaje que se utilizara en este proyecto sea reconocible pues de no agregar esta librería al momento de compilar el proyecto este no reconocerá la sintaxis del código escrito en mencionado proyecto. Cómo agregamos la librería a nuestro proyecto? A continuación indicaremos paso a paso las actividades que debe realizar el lector para agregar la librería de MySQL. Primero nos posicionamos en libraries y son el botón derecho clack seleccionamos la opción agregar librería. 4

6 Luego buscamos la librería 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 conexión con la base de datos. 1.-Conexión 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 librería local que posee nuestro proyecto. Para hacer uso de las APIs de MySQL debemos importar el paquete perteneciente a la librería que hemos agregado previamente. 5

7 Ahora que tenemos la librería apropiada procedemos a ingresar el código correspondiente para realizar la conexión con la base de datos MySQL. Para ello modificamos el main de nuestra función. Este driver se encuentra en la librería de MySQL Y si lo ejecutamos??? En caso de que funcione Si todo lo que se encuentra en la función try no genera errores se realiza todo normalmente. 6

8 En caso de no funcionar en caso de no funcionar se activa la función catch Esta función catch solo se ejecuta cuando que ocurrido un error en la función try 2.-Inserción (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 7

9 Ya sabemos hacer la conexión a la base de datos, por esa razón que no explicaremos el primer paso. Lo segundo que debemos hacer es crear un objeto de tipo Statement el cual permite enlazar la conexión a la base de datos con java, y requiere la utilización del objeto conexión 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 conexión 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 método execute el cual permite ejecutar código SQL. Ahora que sabemos como interactuar con la base de datos los demás pasos son mucho mas simples de realizar. 8

10 En ejecución 3.-Actualización (update) Para realizar la actualización de un registro de la base de datos solo basta indicarlo en la función execute la cual permite realizar esta operación. En ejecución Eliminación (delete) Para realizar la eliminación de un registro de la base de datos solo basta indicarlo en la función execute la cual permite realizar esta operación. En esta ocasión he eliminado un registro diferente al que hemos modificado en el punto anterior. En ejecución 9

11 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 métodos pertenecen al objeto ResultSet y retornan un parámetro en específico, 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 ejecución Como podemos ver nos entrega cada registro de la tabla persona y lo mostramos con el formato que nosotros indicamos. Para mejorar aún más tus habilidades practica más ejercitando las habilidades adquiridas con anterioridad. Genera varias pruebas antes de pasar a la siguiente unidad. 10

12 II.-Conexión por Swing Ahora que ya hemos practicado bastante procederemos a introducir vistas mas amigables para el usuario para ello utilizaremos la tecnología Swing. 1.-Introducción 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 gráficas con el usuario se realizaban a través 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 cómo una componente reacciona a eventos tales como, eventos de teclado, mouse, etc... Es por esto, que la mayoría 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

13 2.-Creación del proyecto Para comenzar el desarrollo con la tecnología Swing debemos crear un nuevo proyecto, es decir, crearemos una nueva interfaz de desarrollo pero esta interfaz utilizara métodos usados en la segunda unidad. Primero crear proyecto: Como podemos ver en este caso crearemos un proyecto java de tipo aplicación de escritorio. A continuación nombramos nuestro proyecto. 12

14 Como podemos ver tenemos una amplia área para trabajar en este tipo de herramienta Área de trabajo Sección donde encontramos herramientas de Swing Las herramientas de swing solo las arrastramos hacia el área de trabajo y son ingresadas en el código automáticamente. En esta sección podemos cambiar el modo de trabajo, es decir, podemos trabajar en modo diseño que es el que actualmente vemos en la imagen anterior. Si cambiamos de modo vemos lo el código fuente que genera todo lo que vemos en el área de diseño. Frame correspondiente a ventana de about. Main de configuración principal. Frame principal Ahora para motivar y enseñar al lector las diferentes posibilidades que se pueden crear con esta tecnología procederemos a ejecutar el proyecto que genera por defecto NetBeans, el resultado observable es una aplicación de ventana la cual puede ser ejecutada sin NetBeans facilitando su portabilidad en otras computadoras. 13

15 En ejecución Como podemos ver esta ventana posee características conocidas por cualquier usuario, tales como el menú superior y submenús que permiten acceder a otros lugares de la aplicación. Pero vamos a lo nuestro, ahora comenzaremos a editar nuestro proyecto, lo primero que haremos será agregar la conexión a nuestra aplicación. Ojo: en la parte inferior izquierda se encuentran todos los componentes que posee nuestra venta. Sección que nos indican los componentes del proyecto Sección que nos indican los componentes de la ventana que estamos trabajando. 14

16 3.-Conexión Ahora al trabajar en la ventana principal que tiene por nombre ConexionDBswingView.java procederemos a editar el contenido del código que esta ventana posee. No olvides agregar la librería de MySQL a nuestro proyecto. Ahora procedemos a editar el contenido del mainpanel para ello hacemos doble click sobre él y accederemos al diseño único del mainpanel que corresponde al centro de la ventana principal. mainpanel Ahora que nos encontramos en el panel principal, procedemos a editar el código fuente, para ello seleccionamos el modo correspondiente. Lo primero que debemos agregar a este código es la librería de mysql Las demás librerías corresponden a las de la tecnología Swing y son las que nos permiten agregar la parte visual de nuestra aplicación. (Ventanas, botones, menús, etc.) 15

17 Ahora procederemos a iniciar la conexión 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. También el lector debe darse cuenta que en el constructor de la aplicación se inicializan las variables, principalmente la variable conexión que es la que se debe inicializar al comienzo de la ejecución del programa. No olvidar que este código se agrega después del initcomponents(), no se elimina código posterior a esto. Ahora que tenemos conexión con el servidor procederemos a realizar las mismas actividades de la unidad anterior. Lo primero que debemos hacer es posicionarnos en el modo de diseño y agregar un menú más interactivo con el usuario. En la barra de herramientas que encontramos en la derecha del área de trabajo tenemos las diferentes posibilidades de menús disponibles para utilizar, para este caso utilizare el menú basado en paneles con pestañas, es decir, agregaremos de la sección swing container 16

18 La forma en que debemos agregar el Tabbed Pane es muy fácil, 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 continuación. 17

19 Al hacer esta operación 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 opción edit text. En mi aplicación he escogido los siguientes nombres: 18

20 4.-Inserción (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 botón 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

21 Esto debemos hacerlo con las variables nombres, apellidos, rut, fecha de nacimiento y dirección. Ahora configuraremos las variables sexo y ciudad, primero analizaremos la variable sexo. Con la configuración actual que poseen estos radiobutton pueden ser seleccionados ambos botones a la vez lo que por lógica 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 botón 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

22 Ahora para poder configurar que los botones M y F pertenezcan al grupo correspondiente de la variable sexo, debemos acceder al código fuente de la variable sexo, esta operación 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 configuración de dicha variable Una vez que nos encontramos en la ventana de configuración observaremos la siguiente línea de código: Esta línea no la midificaremos, lo único de que debemos realizar en esta ventana es agregar dos líneas de códigos generando lo siguiente: Como se puede observar lo que se ha realizado es añadir a la variable sexo los componentes del botón 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

23 Una buena práctica en programación 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 código del botón que queremos seleccionar y agregar lo siguiente. Si hacemos esto el aparecerá siempre seleccionado nuestro botón, 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 código fuente de este combobox y ver donde se genera la lista de contenidos. 22

24 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 código. Como se puede ver en l parte superior de la imagen hemos comentado la sección dende se generan los ítem por defecto de la lista desplegable (combobox). En ejecución!!! 23

25 Ahora procederemos a realizar el ingreso de los datos del formulario en nuestra base de datos, para ello utilizaremos el botón agregar al cual le asignaremos un evento el cual se ejecutara al momento de hacer click sobre el. Para agregar la acción al botón debemos hacer clack sobre el y presionar donde dice event action actionperformed. Esta acción no llevara hacia el código fuente del programa en la sección creada para realizar al momento de presionar el botón agregar. Dentro de esta función debemos agregar el siguiente código para ingresar los datos del formulario a nuestra base de datos. 24

26 A continuación explicaremos brevemente el código agregado en la función. El lector debe saber que el try{..}catch{..} es la función que siempre que realizamos consultas a la base de datos debe estar presente en nuestro código ya que nos permite controlar los errores que se produzcan durante el periodo de ejecución de nuestra aplicación. 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 después contar con el id correspondiente. Otro paso importante que hacemos en la generación 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

27 Dejamos al lector la opción de investigar cómo generar una ventana de alerta para avisar al usuario del ingreso de la persona al sistema de una forma mas práctica. Una ayuda para el lector: 5.-Actualización (update) Para realizar una actualización 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 modificación. Primero se debe generar el combo-box al igual que en la sección anterior pero en este caso con los datos de las personas. 26

28 Ahora que poseemos la lista con las personas debemos hacer el paso de la generación de los campos para la modificación 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 razón 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

29 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 acción actionperformed visto anteriormente en la utilización del botón en la unidad anterior. Ahora en la sección indicada por nuestro método debemos modificar cada contenido de nuestro formulario de actualización: 28

30 Pero no te alarmes si no comprendes nuestro código a continuación explicaremos las líneas que puedan significar dificultades para ti. La primera línea la modificamos para no editarla pues el usuario no podrá modificar el rut de una persona ya que esta acción no es una buena práctica, lo correctos es eliminar al usuario e ingresar nuevamente los datos con el rut correcto. En la segunda línea 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 línea 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 actualización la lista se numera desde el número cero. En estas líneas comparamos el valor existente en los datos de la persona y seleccionamos el que corresponda de nuestro formulario. 29

31 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 actualización de los datos, para ello utilizaremos la acción dada por el botón actualizar presente en nuestro formulario. La acción de actualizar se realiza de la misma forma en que ingresamos a la persona en la opción anterior solo que en este caso realizamos la actualización de los datos de la persona. 30

32 6.-Eliminación (delete) Ahora para eliminar un registro del sistema en la ventana de edición agregaremos el botón eliminar, el cual permitirá al usuario borrar a la persona ingresada en la base de datos. Ahora ingresamos el evento correspondiente al presionar el botón eliminar: Pero en este ejemplo hay unas líneas que no comprendo? Estas líneas hacen referencia a dos ventanas de dialogo las cuales realizan una interacción más didáctica con el usuario que controla nuestra aplicación: Una ventana de dialogo es aquella ventana de confirmación o de alerta que aparece por lo general en los Navegadores. 31

33 Para realizar una de estas ventanas basta seguir los siguientes pasos: Primero agregar un componente llamado JDialog a nuestra aplicación: A este componente le llamaremos Alerta el cual será una ventana de confirmación con dos opciones, esta ventana deberá poseer el siguiente formato: Como se puede observar posee dos botones y un texto, cada botón posee una acción en especial la que realizara una interacción distinta con el usuario. Primero el botón NO: El botón NO, posee una única acción la cual es cerrar la ventana de dialogo. Ahora el botón SI: 32

34 Se puede observar que realizamos dos procesos al presionar el botón, el primero es modificar una variable previamente generada transformándola 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 opción. Una vez que hemos utilizado la variable opción procedemos a cerrar nuestra ventana como se muestra a continuación: Como ingeniero debes aprender como ingresar más parámetros al momento de generar las ventanas de diálogos para poder agregar el texto que tú quieras a la ventana sin la necesidad de tener un texto único para cada aplicación. 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 visualización más 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 títulos de la tabla de datos 33

35 Ahora mostraremos el código final para poder mostrar los datos de la tabla persona a nuestro usuario: No te preocupes si no entiendes el código expuesto anteriormente, a continuación explicare las líneas para mejorar tu comprensión al respecto. 34

36 Creación de arreglo de datos: Sin duda existen más formas de realizar este proceso, pero he escogido esta forma para ilustrar al lector de mejor forma cómo podemos manipular nuestras consultas para generar los resultados esperados. En la primera línea realizamos una consulta básica 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 creación 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 función llamada r.getrow() la cual entrega la cantidad de filas de la consulta Ahora procedemos a la inserción de cada registro en nuestro arreglo: Como podemos ver a cada columna agregamos un dato en específico. 35

37 Finalmente la inserción 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

38 V.-Webiografia html 37