Ya vimos hace un tiempo como conectar Flash con Mysql a través de Zinc, pero esto nos obliga a tener conexión de internet para conectarnos al servidor o montarnos nuestro servidor en local.

A lo mejor, a la hora de hacer nuestra aplicación nos basta con tener una base de datos en access y en local, con lo que nos serviría que el cliente no tuviera conexión a internet para utilizarla.

Para este ejemplo vamos a realizar la gestión de una agenda.

Primero de todo crearemos en access una estructura como esta con id, Nombre, Apellidos y Teléfono:

Estructura de la base de datos de access

A esta tabla la llameremos "ejemplo_agenda" y a la base de datos le pondremos el mismo nombre "ejemplo_agenda.mdb". Antes de guardar todo, insertaremos unos datos en la tabla para el ejemplo.

En nuestra aplicación en flash insertaremos un DataGrid, 3 botones y 3 textinput. Al DataGrid le llamaremos "theDataGrid". Los botones "bot_editar","bot_borrar" y "bot_insertar". Y finalmente los textinput "nombre_txt","apellidos_txt" y "tlf_txt".En el escenario nos quedará una cosa como esta:

Estructura del escenario de flash

Ahora ya insertaremos una nueva capa y ahí pondremos nuestro código actionscript. Iré poniendo bloque a bloque de código para ir explicandolo.

PLAIN TEXT
Actionscript:
  1. var databaseFile:String = "ejemplo_agenda.mdb";
  2. var databasePassword:String = "";
  3. var path:String = mdm.Application.path+databaseFile;
  4. mdm.Database.MSAccess.connect(databaseFile,databasePassword);
  5. var success = mdm.Database.MSAccess.success();
  6. if (success == false) {
  7. var msg:String = "No se puede conectar a la bbdd";
  8. mdm.Dialogs.prompt(msg);
  9. return;
  10. }

Con ese trozo de código lo que hemos hecho es hacer la conexión con nuestra base de datos y comprobar que la conexión se ha hecho correctamente.

PLAIN TEXT
Actionscript:
  1. //FUNCION PARA HACER LA CONSULTA A LA BBDD
  2. function consulta(){
  3. theDataGrid.removeAll();
  4. var sqlString:String = "SELECT id,nombre,apellidos,telefono FROM ejemplo_agenda order by id asc";
  5. // Ejecutamos la consulta sql
  6. mdm.Database.MSAccess.select(sqlString);
  7. // Comprobamos los errores
  8. var error:Boolean = (mdm.Database.MSAccess.error() == "true");
  9. if (error) {
  10. var msg:String = "Ha ocurrido un error en la consulta!";
  11. mdm.Dialogs.prompt(msg);
  12. return;
  13. }
  14. //Obtenemos los datos de la consulta
  15. var dataSet:Array = mdm.Database.MSAccess.getData();
  16.  
  17. var datos:Object;
  18. var newItemsArray:Array = new Array();
  19. for (var i = 0; i<dataset.length;>
  20. datos = {};
  21. datos.ID = parseInt(dataSet[i][0]);
  22. datos.Nombre = dataSet[i][1];
  23. datos.Apellidos = dataSet[i][2];
  24. datos.Telefono = dataSet[i][3];
  25. newItemsArray.push(datos);
  26. }
  27. theDataGrid.dataProvider = newItemsArray;
  28. }

La función consulta lo que hace es una consulta a la tabla de access y vuelca su contenido en el datagrid.

PLAIN TEXT
Actionscript:
  1. //FUNCION PARA MONTAR EL DATAGRID
  2. function layoutGUI():Void {
  3. // Montamos el encabezado del datagrid
  4. theDataGrid.setStyle("fontSize",10);
  5. theDataGrid.columnNames = ["ID", "Nombre", "Apellidos", "Telefono"];
  6. theDataGrid.vScrollPolicy = "auto";
  7.  
  8. var gridWidth:Number = theDataGrid.width;
  9.  
  10. theDataGrid.getColumnAt(0).width = 0.05*gridWidth;
  11. theDataGrid.getColumnAt(0).headerText = "ID:";
  12.  
  13. theDataGrid.getColumnAt(1).width = 0.35*gridWidth;
  14. theDataGrid.getColumnAt(1).headerText = "Nombre:";
  15.  
  16. theDataGrid.getColumnAt(2).width = 0.45*gridWidth;
  17. theDataGrid.getColumnAt(2).headerText = "Apellidos:";
  18.  
  19. theDataGrid.getColumnAt(3).width = 0.15*gridWidth;
  20. theDataGrid.getColumnAt(3).headerText = "Telefono:";
  21.  
  22. theDataGrid.setStyle("alternatingRowColors", [0xFFFFFF, 0xF9FCFD]);
  23. }

La función layoutGUI monta la estructura del datagrid ( encabezado, ancho, alto, color de fondo, etc ).

Ahora ya simplemente nos quedan las funciones de los respectivos botones:

PLAIN TEXT
Actionscript:
  1. //Funcion para insertar un dato
  2. bot_insertar.onRelease=function(){
  3. if(nombre_txt.text==""){
  4. nombre_txt.text="Este campo no puede estar vacio";
  5. }else{
  6. mdm.Database.MSAccess.runQuery("INSERT INTO ejemplo_agenda (nombre,apellidos,telefono) VALUES ('"+nombre_txt.text+"','"+apellidos_txt.text+"',"+telf_txt.text+")");
  7. consulta();
  8. nombre_txt.text="";
  9. apellidos_txt.text="";
  10. telf_txt.text="";
  11. }
  12. }

Antes de insertar un dato, comprobamos que el campo nombre no esté vacio. Después de insertar los datos, llamaremos a la funcion consulta para actualizar el datagrid y limpiaremos los textinput.

PLAIN TEXT
Actionscript:
  1. //Borrado de datos
  2. bot_borrar.onRelease=function(){
  3. LineaGrid = theDataGrid.selectedIndex;
  4. if(LineaGrid!=undefined){
  5. var sqlString:String = "DELETE FROM ejemplo_agenda where id="+theDataGrid.getItemAt(LineaGrid).ID;
  6. mdm.Database.MSAccess.runQuery(sqlString);
  7. consulta();
  8. }
  9. }

En este trozo de código no hay mucho que explicar, simplemente hacemos el borrado si se ha elegido un dato en el datagrid.

PLAIN TEXT
Actionscript:
  1. //Edicion de datos
  2. theDataGrid.addEventListener("change", editar);
  3.  
  4. function editar(Obj) {
  5. bot_editar.enabled=true;
  6. //Obtiene los datos de la linea seleccionada
  7. DatosGrid = Obj.target.selectedItem;
  8. //Asigna valores de los campos de texto
  9. nombre_txt.text = DatosGrid.Nombre;
  10. apellidos_txt.text = DatosGrid.Apellidos;
  11. telf_txt.text = DatosGrid.Telefono;
  12. }
  13.  
  14. bot_editar.onRelease=function(){
  15. LineaGrid = theDataGrid.selectedIndex;
  16. 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;
  17. mdm.Database.MSAccess.runQuery(sqlString);
  18. consulta();
  19. bot_editar.enabled=false;
  20. nombre_txt.text = "";
  21. apellidos_txt.text = "";
  22. telf_txt.text = "";
  23. }

Para editar los datos lo que hemos hecho es ponerle un listener al datagrid para que cuando se seleccione un elemento, nos lo muestre en los textinput.

El último trozo de código que nos quedaría por poner es el siguiente:

PLAIN TEXT
Actionscript:
  1. bot_editar.enabled = false;
  2. layoutGUI();
  3. consulta(); //Obtenemos los datos de la bbdd

Esto son las llamadas a la funcion de montar el datagrid y obtener los datos del access.

Al haberlo explicado por trozos puede haber quedado algo lioso, ahora os pondré todo el código seguido que hemos utilizado.

PLAIN TEXT
Actionscript:
  1. var databaseFile:String = "ejemplo_agenda.mdb";
  2. var databasePassword:String = "";
  3. var path:String = mdm.Application.path+databaseFile;
  4. mdm.Database.MSAccess.connect(databaseFile,databasePassword);
  5. var success = mdm.Database.MSAccess.success();
  6. if (success == false) {
  7. var msg:String = "No se puede conectar a la bbdd";
  8. mdm.Dialogs.prompt(msg);
  9. return;
  10. }
  11.  
  12. //FUNCION PARA HACER LA CONSULTA A LA BBDD
  13. function consulta(){
  14. theDataGrid.removeAll();
  15. var sqlString:String = "SELECT id,nombre,apellidos,telefono FROM ejemplo_agenda order by id asc";
  16. // Ejecutamos la consulta sql
  17. mdm.Database.MSAccess.select(sqlString);
  18. // Comprobamos los errores
  19. var error:Boolean = (mdm.Database.MSAccess.error() == "true");
  20. if (error) {
  21. var msg:String = "Ha ocurrido un error en la consulta!";
  22. mdm.Dialogs.prompt(msg);
  23. return;
  24. }
  25. //Obtenemos los datos de la consulta
  26. var dataSet:Array = mdm.Database.MSAccess.getData();
  27.  
  28. var datos:Object;
  29. var newItemsArray:Array = new Array();
  30. for (var i = 0; i<dataset.length;>
  31. datos = {};
  32. datos.ID = parseInt(dataSet[i][0]);
  33. datos.Nombre = dataSet[i][1];
  34. datos.Apellidos = dataSet[i][2];
  35. datos.Telefono = dataSet[i][3];
  36. newItemsArray.push(datos);
  37. }
  38. theDataGrid.dataProvider = newItemsArray;
  39. }</dataset.length;>
  40.  
  41. //FUNCION PARA MONTAR EL DATAGRID
  42. function layoutGUI():Void {
  43. // Montamos el encabezado del datagrid
  44. theDataGrid.setStyle("fontSize",10);
  45. theDataGrid.columnNames = ["ID", "Nombre", "Apellidos", "Telefono"];
  46. theDataGrid.vScrollPolicy = "auto";
  47.  
  48. var gridWidth:Number = theDataGrid.width;
  49.  
  50. theDataGrid.getColumnAt(0).width = 0.05*gridWidth;
  51. theDataGrid.getColumnAt(0).headerText = "ID:";
  52.  
  53. theDataGrid.getColumnAt(1).width = 0.35*gridWidth;
  54. theDataGrid.getColumnAt(1).headerText = "Nombre:";
  55.  
  56. theDataGrid.getColumnAt(2).width = 0.45*gridWidth;
  57. theDataGrid.getColumnAt(2).headerText = "Apellidos:";
  58.  
  59. theDataGrid.getColumnAt(3).width = 0.15*gridWidth;
  60. theDataGrid.getColumnAt(3).headerText = "Telefono:";
  61.  
  62. theDataGrid.setStyle("alternatingRowColors", [0xFFFFFF, 0xF9FCFD]);
  63. }
  64.  
  65. //Funcion para insertar un dato
  66. bot_insertar.onRelease=function(){
  67. if(nombre_txt.text==""){
  68. nombre_txt.text="Este campo no puede estar vacio";
  69. }else{
  70. mdm.Database.MSAccess.runQuery("INSERT INTO ejemplo_agenda (nombre,apellidos,telefono) VALUES ('"+nombre_txt.text+"','"+apellidos_txt.text+"',"+telf_txt.text+")");
  71. consulta();
  72. nombre_txt.text="";
  73. apellidos_txt.text="";
  74. telf_txt.text="";
  75. }
  76. }
  77. //Borrado de datos
  78. bot_borrar.onRelease=function(){
  79. LineaGrid = theDataGrid.selectedIndex;
  80. if(LineaGrid!=undefined){
  81. var sqlString:String = "DELETE FROM ejemplo_agenda where id="+theDataGrid.getItemAt(LineaGrid).ID;
  82. mdm.Database.MSAccess.runQuery(sqlString);
  83. theDataGrid.removeItemAt(LineaGrid);
  84. consulta();
  85.  
  86. var error:Boolean = (mdm.Database.MSAccess.error() == "true");
  87. if (error) {
  88. var msg:String = "Ha ocurrido un error ejecutando la consulta";
  89. mdm.Dialogs.prompt(msg);
  90. return;
  91. }
  92. }
  93.  
  94. }
  95.  
  96. //Edicion de datos
  97. theDataGrid.addEventListener("change", editar);
  98.  
  99. function editar(Obj) {
  100. bot_editar.enabled=true;
  101. //Obtiene los datos de la linea seleccionada
  102. DatosGrid = Obj.target.selectedItem;
  103. //Asigna valores de los campos de texto
  104. nombre_txt.text = DatosGrid.Nombre;
  105. apellidos_txt.text = DatosGrid.Apellidos;
  106. telf_txt.text = DatosGrid.Telefono;
  107.  
  108. }
  109. bot_editar.onRelease=function(){
  110. LineaGrid = theDataGrid.selectedIndex;
  111. 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;
  112. mdm.Database.MSAccess.runQuery(sqlString);
  113. var error:Boolean = (mdm.Database.MSAccess.error() == "true");
  114. if (error) {
  115. var msg:String = "Error occured while executing sql query!";
  116. mdm.Dialogs.prompt(msg);
  117. return;
  118. }
  119. consulta();
  120. bot_editar.enabled=false;
  121. nombre_txt.text = "";
  122. apellidos_txt.text = "";
  123. telf_txt.text = "";
  124. }
  125.  
  126. bot_editar.enabled=false;
  127. layoutGUI();
  128. consulta();//Obtenemos los datos de la bbdd

Una vez hecho nuestro swf, solamente deberemos compilarlo con el mdm zinc y obtendremos nuestro ejecutable. Como nota tengo que decir que si hacemos una consulta que nos devuelve muchos registros (sobre los 150-200) puede que no funcione correctamente. En ese caso tendríamos que paginar nuestros resultados.

Este mismo tutorial lo publiqué hace ya algún tiempo en cristalab.

Compártelo!

12 Comentarios
Flash, MDM Zinc