Código Metrópoli

Programación para Super Héroes

Sistema de Clientes (AIR y SQLite) Parte III (Modificar y Eliminar Registros)

Esta es la tercera parte del proyecto "Sistema de Clientes" desarrollado en AIR con SQLite como administrador de base de datos. En la entrada anterior vimos cómo insertar registros en la base de datos (clientesDB.sqlite) desde nuestra aplicación en AIR.
En esta ocasión veremos cómo editar y eliminar registros de la base de datos; para esto mostraremos dentro de un DataGrid todos los registros que tenemos en nuestra base de datos; en este DataGrid usaremos itemRenderer(s) para llenar con botones dos columnas, uno de los botones será para editar el registro seleccionado y el otro para eliminarlo.

Parte 3: Modificar y eliminar registros en SQLite con AIR

Recuerda que para mantener organizado el código de nuestro proyecto y para evitar que se pierdan con toda la información aquí mostrada, dividí el código del proyecto en archivos .as. Estos archivos estarán almacenados en la carpeta actionscript. La estructura de nuestro proyecto será la siguiente:

Todas las interfaces de este proyecto están incluidas en la carpeta componentes. La interfaz que en esta ocasión veremos es la del archivo EditarBorrarCliente.mxml. Esta interfaz funciona de la siguiente manera:

Al seleccionar la opción "Editar/Eliminar…" del menú, se mostrará un DataGrid con todos los registros que tenemos dados de alta en nuestra base. En este ejemplo solamente tengo dos registros. Si el usuario hace click al botón de Modificar del primer registro, se mostrará lo siguiente:

…Un Canvas con los datos de nuestro registro. Si el usuario lo desea, podrá modificar o actualizar los datos de este registro. Por el contrario, si el usuario le da click al botón de Eliminar del primer registro, se mostrará un mensaje de alerta pidiéndole que confirme si desea o no borrar el registro.

Explicado lo anterior, comenzaremos mostrando la estructura y el código del archivo EditarBorrarCliente.mxml:

• El ID del DataGrid donde mostraremos los registros es clientes_dg
• El ID de nuestro Canvas en donde mostraremos la información del registro que el usuario puede modificar es Modificar_Cliente
  • El botón de Cambiar que se encuentra dentro del Canvas tiene de ID guardarBtn
  • El botón con una X tiene de ID cerrarBtn
  • Los IDs de cada una de las áreas de texto son:
    • nombre_txt, direccion_txt (TextArea), telefono_txt, correo_txt
    • Además, tenemos tres etiquetas cuyo texto es (*) y con los cuales le indicaremos al usuario qué dato le faltó por llenar. Estas etiquetas tienen de ID: msj1, msj2, msj3 y msj4.

El código de este archivo es el siguiente:

Observa en el código anterior que el tag principal de este archivo es <mx:Canvas> y no <mx:WindowedApplication>, esto es porque todas las interfaces que están dentro del directorio componentes las desplegaremos dentro de la aplicación principal (Sistema_Clientes.mxml); a la propiedad show del Canvas le estamos especificando que llame a la función abreConexion() una vez que se haya terminado de mostrar el componente. También observa cómo estamos incluyendo el código de EditarBorrarCliente.as:

También presta atención en la forma en que estamos creando los renderers para las columnas.

Dentro de los tags <mx:itemRenderer> y </mx:itemRenderer> estamos usando como layout el HBox (HorizontalBox), aunque en realidad no afecta mucho ya que sólo estamos poniendo un componente por cada celda (en caso de que pongamos más elementos en esa celda, estos elementos se mostrarán uno tras otro de izquierda a derecha). El componente que estamos insertando en cada celda es un botón; este botón en el momento de hacer click sobre él llamará a la función editarCliente, el cual recibe como parámetros el ID, nombre, dirección, teléfono y correo del cliente en cuyo registro hicimos click. La palabra reservada outerDocument nos permite acceder a elementos que se encuentran fueran del alcance del item renderer. Además, al botón le estamos asignando el icono edit.png () que está dentro de nuestra carpeta images. Importante: Observa cómo a esta columna del DataGrid le estamos especificando que no se pueda ordenar (sortable = false). Esto es porque en realidad no le estamos asignando valor alguno a cada celda, por lo tanto si intentáramos ordenar los registros de acuerdo a esta columna, Flex nos desplegaría un error.

El código para la columna que llevará los botones de Eliminar es el siguiente:

El código es similar al mostrado más arriba, lo único que cambia es que en esta ocasión el botón mandará a llamar a la función borrarCliente, pasándole como parámetro el ID del cliente. Además, el icono para este botón es remove.png ().

Antes de ver el código de las funciones editarCliente y borrarCliente, veremos cómo mostrar los registros de nuestra base de datos en el DataGrid. Para eso, el código que pegaré a continuación forma parte del archivo EditarBorrarCliente.as.

Primero, importamos las clases y declaramos las variables que necesitamos. En el arreglo data_provider almacenaremos los datos obtenidos de nuestra consulta y lo asignaremos como dataProvider de nuestro DataGrid (clientes_dg). La variable id_selected nos servirá para almacenar el ID del registro seleccionado y posteriormente eliminarlo de la base de datos.

La primera función que es llamada en esta sección es abrirConexion:

Dentro de abreConexion llamamos a la función reseteaForma, la cual se encarga de borrar los datos de la forma para la modificación de los datos.

Después de llamar a la función reseteaForma, ocultamos el canvas Modificar_Cliente y llamamos a la función reiniciaVariables, la cual se encargará de resetear los arreglos para eliminar su contenido previo.

Posteriormente le asignamos al datagrid clientes_dg el listener del evento CHANGE. Este evento es lanzado cuando el usuario hace click en alguno de los registros del DataGrid. Cuando se genere este evento, el programa se encargará de esconder el cambas Modificar_Cliente (es posible que previamente el usuario le haya dado click al botón de Editar en alguno de los registros, es por eso que nos aseguramos de esconder el Canvas). Además, almacenamos en la vaiable id_selected el ID del registro seleccionado; y, por último, escondemos los posibles mensajes que se le mostraron al usuario para que, cuando vuelva a darle click al botón Editar, no se le muestren.

El resto del código de la función abreConexion ya lo conoces de las entradas anteriores.
Si no hubo ningún problema en la conexión a la base de datos, llamamos a la función getClientes para llenar el DataGrid con nuestros registros:

Dentro del código de getClientes haremos la consulta a la tabla cliente para obtener todos los registros de nuestra base. Nuestro query es muy sencillo, en él estamos seleccionando (SELECT) todas las columnas (*) de la tabla cliente y le estamos diciendo que lo ordene (ORDER BY) de forma ascendente (asc) de acuerdo a la columna nombre.

Una vez que ejecutamos la consulta (queryStatement.execute()) obtenemos el resultado con la función getResult. Comprobamos que el resultado no sea vacío (result.data!= null) y obtenemos el total de registros obtenidos por medio de la propiedad length. Como ya sabemos cuántos registros nos regresó la consulta, haremos un ciclo for para almacenar los registros en nuestro arreglo data_provider. Finalmente estamos asignando el arreglo data_provider a la propiedad dataProvider del DataGrid. Importante: Si no comprendes esta parte donde llenamos el arreglo y se lo asignamos al DataGrid te recomiendo visitar la entrada sobre el Componente DataGrid que publiqué anteriormente.

Hemos terminado la explicación de cómo realizar la consulta a la base de datos y mostrar los resultados en el DataGrid. Ahora veremos las funciones que habíamos dejado pendientes: editarCliente y borrarCliente.
Como lo mencioné anteriormente, cuando el usuario hace click en el botón de Editar de alguno de los registros, la función editarCliente es llamada:

Esta función recibe como parámetros el ID del cliente, su nombre, dirección, teléfono y correo, para posteriormente mostrarlo en el formulario del canvas Modificar_Cliente. Si el usuario hace click en el botón de Cambiar, la función es validaForma es ejecutada:

Esta función es similar a la que usamos en la entrada anterior, simplemente estamos verificando que todos los datos fueron llenados y, en caso positivo, llamamos a la función updateCliente.

Esta función recibe como parámetro el ID del registro seleccionado, crea el query para actualizar los datos del registro y los nuevos valores son pasados como parámetros a la sentencia SQL. Una vez que se ejecuta la sentencia llamamos nuevamente a la función abreConexion para que muestre todos los registros (incluyendo los nuevos) en el DataGrid.

La función borrarCliente es llamada cuando el usuario hace click en el botón de Eliminar:

Esta función recibe como parámetro el ID del registro seleccionado por el usuario. Además, muestra un mensaje de alerta pidiéndole al usuario que confirme si desea eliminar el registro. Observa que al método show le pasamos como parámetro el manejador de eventos que debe considerar (alertClickHandler). Este manejador de eventos revisa si la respuesta del usuario fue positiva o negativa. En caso de que el usuario haya hecho click en el botón de Sí, llamamos a la función delCliente pasándole como parámetro el ID del registro seleccionado.

La función delCliente se encarga de ejecutar el query para borrar el registro de la base de datos. A este query le estamos pasando el ID del registro que hay que eliminar. Después de ejecutar la sentencia llamamos nuevamente a la función abreConexion para mostrar todos los registros restantes de la base de datos en el DataGrid.

Hemos llegado al final de esta tercera parte; ya nada más nos queda pendiente la cuarta y última entrega.

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Creado con Wordpress | Tema WP Remix traducido por Fernando.
Copyright © 2010. Código Metrópoli. México, D.F.

 Esta obra está bajo una licencia de Creative Commons