Conectar Flash con Access usando MDM Zinc

Transcripción

1 Conectar Flash con Access usando MDM Zinc Con este tutorial pretendo enseñar la conexión básica entre Flash / Actionscript y Microsoft Access mediante MDM Zinc, para poder empezar a crear aplicaciones de escritorio, sin usar lenguajes intermedios de servidor. En la web ya se habló sobre este programa. La base de datos en access será una agenda muy sencilla con 4 campos: Id, Nombre, Apellidos y Teléfono. A la tabla la llamaremos "ejemplo_agenda" y a la base de datos la llamaremos con el mismo nombre "ejemplo_agenda.mdb". Luego insertamos unos datos de ejemplo para que la tabla no esté vacía. Bien, comencemos con Flash. Nota: En este tutorial haremos uso de Flash 8. Pero debería funcionar sin muchos cambios de fondo en otras versiones. En el primer fotograma meteremos un DataGrid, 3 botones y 3 TextInput. Nos quedará una cosa como esta:

2 El DataGrid lo hemos llamado "thedatagrid", los botones "bot_editar","bot_borrar" y "bot_insertar". Y los campos dinámicos "nombre_txt","apellidos_txt" y "tlf_txt". En otra capa pondremos todo el codigo actionscript. Voy a ir explicando poco a poco cada trozo de código, pero va todo seguido. var databasefile:string = "ejemplo_agenda.mdb"; var databasepassword:string = ""; var path:string = mdm.application.path+databasefile; mdm.database.msaccess.connect(databasefile,databasepassword); var success = mdm.database.msaccess.success(); if (success == false) { var msg:string = "No se puede conectar a la bbdd"; Comenzamos declarando cual es la base de datos que queremos acceder y su contraseña, si tiene. A partir de aquí ya hay código de MDM así que lo explicaré linea a linea. var path:string = mdm.application.path+databasefile; Con esta línea indicamos que la ruta donde está la base de datos es la misma que donde está la aplicación.

3 mdm.database.msaccess.connect(databasefile,databasepassword); Conectamos con la base de datos access y le pasamos la contraseña. var success = mdm.database.msaccess.success(); if (success == false) { var msg:string = "No se puede conectar a la bbdd"; Comprobamos si ha tenido exito la conexión, si no lo ha habido nos aparecerá un mensaje por pantalla indicandonos que no nos hemos podido conectar a la bbdd. Sigamos con el siguiente bloque de instrucciones: //FUNCION PARA HACER LA CONSULTA A LA BBDD function consulta(){ thedatagrid.removeall(); var sqlstring:string = "SELECT id,nombre,apellidos,telefono FROM ejemplo_agenda order by id asc"; // Ejecutamos la consulta sql mdm.database.msaccess.select(sqlstring); // Comprobamos los errores var error:boolean = (mdm.database.msaccess.error() == "true"); if (error) { var msg:string = "Ha ocurrido un error en la consulta!"; //Obtenemos los datos de la consulta var dataset:array = mdm.database.msaccess.getdata(); var datos:object; var newitemsarray:array = new Array(); for (var i = 0; i<dataset.length; i++) { datos = {; datos.id = parseint(dataset[i][0]); datos.nombre = dataset[i][1];

4 datos.apellidos = dataset[i][2]; datos.telefono = dataset[i][3]; newitemsarray.push(datos); thedatagrid.dataprovider = newitemsarray; Explicaré trozo a trozo este bloque de instrucciones. thedatagrid.removeall(); var sqlstring:string = "SELECT id,nombre,apellidos,telefono FROM ejemplo_agenda order by id asc"; // Ejecutamos la consulta sql mdm.database.msaccess.select(sqlstring); Limpiamos el DataGrid y hacemos la consulta a la bbdd de los campos que queremos obtener. // Comprobamos los errores var error:boolean = (mdm.database.msaccess.error() == "true"); if (error) { var msg:string = "Ha ocurrido un error en la consulta!"; Comprobamos si ha habido algún error en la consulta, si lo hubiera nos lo mostraría por pantalla. //Obtenemos los datos de la consulta var dataset:array = mdm.database.msaccess.getdata(); var datos:object; var newitemsarray:array = new Array(); for (var i = 0; i<dataset.length; i++) { datos = {; datos.id = parseint(dataset[i][0]); datos.nombre = dataset[i][1]; datos.apellidos = dataset[i][2]; datos.telefono = dataset[i][3];

5 newitemsarray.push(datos); thedatagrid.dataprovider = newitemsarray; Los valores de la consulta nos lo devuelve en un array. Recorremos ese array y vamos insertando los valores en un object y asi luego lo insertaremos todo en el Datagrid. Con el siguiente bloque de cogido lo que hacemos es montar la estructura del datagrid, encabezado, ancho, etc. //FUNCION PARA MONTAR EL DATAGRID function layoutgui():void { // Montamos el encabezado del datagrid thedatagrid.setstyle("fontsize",10); thedatagrid.columnnames = ["ID", "Nombre", "Apellidos", "Telefono"]; thedatagrid.vscrollpolicy = "auto"; var gridwidth:number = thedatagrid.width; thedatagrid.getcolumnat(0).width = 0.05*gridWidth; thedatagrid.getcolumnat(0).headertext = "ID:"; thedatagrid.getcolumnat(1).width = 0.35*gridWidth; thedatagrid.getcolumnat(1).headertext = "Nombre:"; thedatagrid.getcolumnat(2).width = 0.45*gridWidth; thedatagrid.getcolumnat(2).headertext = "Apellidos:"; thedatagrid.getcolumnat(3).width = 0.15*gridWidth; thedatagrid.getcolumnat(3).headertext = "Telefono:"; thedatagrid.setstyle("alternatingrowcolors", [0xFFFFFF, 0xF9FCFD]); Con este trozo de código no vamos a entretenernos ya que en la sección de tutoriales hay uno específico sobre este componente Ahora ya nos queda asignarle las funciones a los botones: Botón de insertar

6 //Funcion para insertar un dato bot_insertar.onrelease=function(){ if(nombre_txt.text==""){ else{ nombre_txt.text="este campo no puede estar vacio"; mdm.database.msaccess.runquery("insert INTO ejemplo_agenda (nombre,apellidos,telefono) VALUES ('"+nombre_txt.text+"','"+apellidos_txt.text+"',"+telf_txt.text+")") ; consulta(); nombre_txt.text=""; apellidos_txt.text=""; telf_txt.text=""; Comprobamos que al menos el campo nombre no esté vacío, para poder insertar algún dato. Si es así, ejecutamos la consulta del Insert, llamamos a la función "consulta" para mostrar los cambios y dejamos vacios los campos. Botón de borrar: //Borrado de datos bot_borrar.onrelease=function(){ LineaGrid = thedatagrid.selectedindex; if(lineagrid!=undefined){ var sqlstring:string = "DELETE FROM ejemplo_agenda where id="+thedatagrid.getitemat(lineagrid).id; mdm.database.msaccess.runquery(sqlstring); consulta(); Para borrar algún dato debemos antes haber seleccionado el elemento en el DataGrid. Si es así, ejecutamos la consulta Delete y volvemos a llamar a la función "consulta" para mostrar los cambios. Botón de editar: //Edicion de datos thedatagrid.addeventlistener("change", editar); function editar(obj) {

7 bot_editar.enabled=true; //Obtiene los datos de la linea seleccionada DatosGrid = Obj.target.selectedItem; //Asigna valores de los campos de texto nombre_txt.text = DatosGrid.Nombre; apellidos_txt.text = DatosGrid.Apellidos; telf_txt.text = DatosGrid.Telefono; bot_editar.onrelease=function(){ LineaGrid = thedatagrid.selectedindex; var sqlstring:string = "UPDATE ejemplo_agenda set nombre='"+nombre_txt.text+"', apellidos='"+apellidos_txt.text+"', telefono="+telf_txt.text+" where id="+thedatagrid.getitemat(lineagrid).id; mdm.database.msaccess.runquery(sqlstring); consulta(); bot_editar.enabled=false; nombre_txt.text = ""; apellidos_txt.text = ""; telf_txt.text = ""; Para editar datos, crearemos un listener del datagrid, para que al seleccionar un elemento nos lo muestre en los campos correspondientes así como activar el botón de editar. El botón editar es prácticamente igual que el de borrar, solamente que cambiamos la sql ( en este caso es un UPDATE ). Una vez hecho el UPDATE desactivamos el botón de editar y dejamos en blanco los campos. Ahora ya sólo nos falta que al comenzar se monte el datagrid y hacer la consulta. bot_editar.enabled = false; layoutgui(); consulta(); //Obtenemos los datos de la bbdd Ahora que hemos visto tódo el código desglosado vemos como sería el resultado final: var databasefile:string = "ejemplo_agenda.mdb"; var databasepassword:string = ""; var path:string = mdm.application.path+databasefile; mdm.database.msaccess.connect(databasefile,databasepassword); var success = mdm.database.msaccess.success();

8 if (success == false) { var msg:string = "No se puede conectar a la bbdd"; //FUNCION PARA HACER LA CONSULTA A LA BBDD function consulta(){ thedatagrid.removeall(); var sqlstring:string = "SELECT id,nombre,apellidos,telefono FROM ejemplo_agenda order by id asc"; // Ejecutamos la consulta sql mdm.database.msaccess.select(sqlstring); // Comprobamos los errores var error:boolean = (mdm.database.msaccess.error() == "true"); if (error) { var msg:string = "Ha ocurrido un error en la consulta!"; //Obtenemos los datos de la consulta var dataset:array = mdm.database.msaccess.getdata(); var datos:object; var newitemsarray:array = new Array(); for (var i = 0; i<dataset.length; i++) { datos = {; datos.id = parseint(dataset[i][0]); datos.nombre = dataset[i][1]; datos.apellidos = dataset[i][2]; datos.telefono = dataset[i][3]; newitemsarray.push(datos); thedatagrid.dataprovider = newitemsarray; //FUNCION PARA MONTAR EL DATAGRID

9 function layoutgui():void { // Montamos el encabezado del datagrid thedatagrid.setstyle("fontsize",10); thedatagrid.columnnames = ["ID", "Nombre", "Apellidos", "Telefono"]; thedatagrid.vscrollpolicy = "auto"; var gridwidth:number = thedatagrid.width; thedatagrid.getcolumnat(0).width = 0.05*gridWidth; thedatagrid.getcolumnat(0).headertext = "ID:"; thedatagrid.getcolumnat(1).width = 0.35*gridWidth; thedatagrid.getcolumnat(1).headertext = "Nombre:"; thedatagrid.getcolumnat(2).width = 0.45*gridWidth; thedatagrid.getcolumnat(2).headertext = "Apellidos:"; thedatagrid.getcolumnat(3).width = 0.15*gridWidth; thedatagrid.getcolumnat(3).headertext = "Telefono:"; thedatagrid.setstyle("alternatingrowcolors", [0xFFFFFF, 0xF9FCFD]); //Funcion para insertar un dato bot_insertar.onrelease=function(){ if(nombre_txt.text==""){ else{ nombre_txt.text="este campo no puede estar vacio"; mdm.database.msaccess.runquery("insert INTO ejemplo_agenda (nombre,apellidos,telefono) VALUES ('"+nombre_txt.text+"','"+apellidos_txt.text+"',"+telf_txt.text+")") ; consulta(); nombre_txt.text="";

10 apellidos_txt.text=""; telf_txt.text=""; //Borrado de datos bot_borrar.onrelease=function(){ LineaGrid = thedatagrid.selectedindex; if(lineagrid!=undefined){ var sqlstring:string = "DELETE FROM ejemplo_agenda where id="+thedatagrid.getitemat(lineagrid).id; mdm.database.msaccess.runquery(sqlstring); thedatagrid.removeitemat(lineagrid); consulta(); var error:boolean = (mdm.database.msaccess.error() == "true"); if (error) { consulta"; var msg:string = "Ha ocurrido un error ejecutando la //Edicion de datos thedatagrid.addeventlistener("change", editar); function editar(obj) { bot_editar.enabled=true; //Obtiene los datos de la linea seleccionada DatosGrid = Obj.target.selectedItem; //Asigna valores de los campos de texto nombre_txt.text = DatosGrid.Nombre; apellidos_txt.text = DatosGrid.Apellidos; telf_txt.text = DatosGrid.Telefono;

11 bot_editar.onrelease=function(){ LineaGrid = thedatagrid.selectedindex; var sqlstring:string = "UPDATE ejemplo_agenda set nombre='"+nombre_txt.text+"', apellidos='"+apellidos_txt.text+"', telefono="+telf_txt.text+" where id="+thedatagrid.getitemat(lineagrid).id; mdm.database.msaccess.runquery(sqlstring); var error:boolean = (mdm.database.msaccess.error() == "true"); if (error) { var msg:string = "Error occured while executing sql query!"; consulta(); bot_editar.enabled=false; nombre_txt.text = ""; apellidos_txt.text = ""; telf_txt.text = ""; bot_editar.enabled=false; layoutgui(); consulta();//obtenemos los datos de la bbdd Ahora que tenemos el flash acabado lo guardamos ( en mi caso lo he llamado ejemplo_agenda.fla ) y lo publicamos, obteniendo ejemplo_agenda.swf. Veremos que todo funciona correctamente pero... No se muestran los datos!!. Claro, nos falta ahora compilarlo con el MDM Zinc. Abrimos el MDM Zinc y en la pestaña "Input File", en la sección "Input Source" seleccionamos nuestro swf. Al seleccionarlo, el campo "Output" nos mostrará por defecto el archivo.exe resultante. En este caso "ejemplo_agenda.exe".

12 Con esto hecho, ya sólo nos queda apretar el botón de abajo a la derecha "Build", con el cual compilaremos la aplicación y ya obtendremos nuestro archivo.exe. Al ejecutarlo ya obtendremos los resultados de nuestra base de datos.