Conectar Flash con Access usando MDM Zinc

Con este tutorial pretendo ensear la conexin bsica 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 Telfono.

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 vaca. Bien, comencemos con Flash. Nota: En este tutorial haremos uso de Flash 8. Pero debera 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:

El DataGrid lo hemos llamado "theDataGrid", los botones "bot_editar","bot_borrar" y "bot_insertar". Y los campos dinmicos "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 cdigo, 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"; mdm.Dialogs.prompt(msg); return; }
Comenzamos declarando cual es la base de datos que queremos acceder y su contrasea, si tiene. A partir de aqu ya hay cdigo de MDM as que lo explicar linea a linea.

var path:String = mdm.Application.path+databaseFile;

Con esta lnea indicamos que la ruta donde est la base de datos es la misma que donde est la aplicacin.

mdm.Database.MSAccess.connect(databaseFile,databasePassword);
Conectamos con la base de datos access y le pasamos la contrasea.

var success = mdm.Database.MSAccess.success(); if (success == false) { var msg:String = "No se puede conectar a la bbdd"; mdm.Dialogs.prompt(msg); return; }
Comprobamos si ha tenido exito la conexin, 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!"; mdm.Dialogs.prompt(msg); return; } //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; }

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!"; mdm.Dialogs.prompt(msg); return; }
Comprobamos si ha habido algn error en la consulta, si lo hubiera nos lo mostrara 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];

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 cdigo no vamos a entretenernos ya que en la seccin de tutoriales hay uno especfico sobre este componente Ahora ya nos queda asignarle las funciones a los botones: Botn de insertar

//Funcion para insertar un dato bot_insertar.onRelease=function(){ if(nombre_txt.text==""){ nombre_txt.text="Este campo no puede estar vacio"; }else{ 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 vaco, para poder insertar algn dato. Si es as, ejecutamos la consulta del Insert, llamamos a la funcin "consulta" para mostrar los cambios y dejamos vacios los campos. Botn 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 algn dato debemos antes haber seleccionado el elemento en el DataGrid. Si es as, ejecutamos la consulta Delete y volvemos a llamar a la funcin "consulta" para mostrar los cambios. Botn de editar:

//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; }

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 botn de editar. El botn editar es prcticamente igual que el de borrar, solamente que cambiamos la sql ( en este caso es un UPDATE ). Una vez hecho el UPDATE desactivamos el botn de editar y dejamos en blanco los campos. Ahora ya slo 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 tdo el cdigo desglosado vemos como sera 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();

if (success == false) { var msg:String = "No se puede conectar a la bbdd"; mdm.Dialogs.prompt(msg); return; }

//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!"; mdm.Dialogs.prompt(msg); return; } //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

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==""){ nombre_txt.text="Este campo no puede estar vacio"; }else{ 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=""; } } //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) { var msg:String = "Ha ocurrido un error ejecutando la consulta"; mdm.Dialogs.prompt(msg); return; } }

//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;

} 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!"; mdm.Dialogs.prompt(msg); return; } 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 pestaa "Input File", en la seccin "Input Source" seleccionamos nuestro swf. Al seleccionarlo, el campo "Output" nos mostrar por defecto el archivo .exe resultante. En este caso "ejemplo_agenda.exe".

Con esto hecho, ya slo nos queda apretar el botn de abajo a la derecha "Build", con el cual compilaremos la aplicacin y ya obtendremos nuestro archivo .exe. Al ejecutarlo ya obtendremos los resultados de nuestra base de datos.