Download Conectar Flash con Access usando MDM Zinc

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