Comunidad de diseño web y desarrollo en internet online

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.

Espero que os sirva.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate