Crear archivo en AIR con Flex Builder 3

Publicado por Carla Macías
2 Junio, 2008

Adobe AIRAdobe AIR permite a los desarrolladores web, crear aplicaciones de escritorio con todo lo que una aplicación web puede proveer. Estas aplicaciones pueden ser ejecutadas en cualquier sistema operativo. Para instalar AIR necesitas tener instalado el Flex Builder 3 (o bien bajarte el SDK de Adobe AIR). En esta entrada aprenderemos a crear un archivo HTML con Adobe AIR.Puedes bajarte una versión de prueba del Flex Builder 3 aquí. Además, deberás bajar Adobe AIR de aquí. Una vez instalado estas dos aplicaciones inicia Flex Builder y haz click en el menú File -> New -> Flex Project. Te aparecerá una ventana en la cual deberás establecer el nombre del proyecto y el tipo de aplicación. En este caso deberás seleccionar la opción de Desktop application (runs in Adobe AIR). Como nombre de proyecto le pondremos AIRCreateFile.

Figura 1: Nuevo proyecto de Adobe AIR en Flex

Después de poner los datos anteriores y de hacer click en el botón de Finish, observarás del lado derecho (Flex Navigator) la lista de archivos y proyectos que tenemos dentro de Flex Builder. El icono rojo al lado del nombre del proyecto inidica que se trata de un proyecto de Adobe AIR. Dentro de la carpeta src (source) se almacenarán los archivos de nuestro proyecto, si observas, el programa Flex ya nos creó nuestro primer archivo (el cual será el punto de arranque de la aplicación) el cual se llama igual que nuestro proyecto.

Adobe AIR no sólo nos creo el archivo AIRCreateFile.mxml sino que también nos lo abrió (en la ventana grande de la derecha) y está listo para que empecemos a programar.

Figura 2: Nuestro proyecto de AIR en Flex Builder 3

Como puedes observar en el código, el componente WindowedApplication es el componente padre de nuestra aplicación en AIR. Dentro de estos tags <WindowedApplication> y </WindowedApplication> debemos escribir todo nuestro código. Comenzaremos haciendo unos cambios al diseño de la aplicación, posteriormente veremos el código necesario para crear el archivo y cargarlo con el componente HTML de Adobe AIR.

Si observas la imagen anterior, arriba del editor de código está el botón de Source (Fuente) y el botón de Design (diseño). Ahorita estamos en la vista del código fuente, por lo tanto el botón de Source está activado. Para realizar los cambios en el diseño de la aplicación lo haremos directamente desde la vista Design, por lo tanto da click en ese botón. Al darle click al botón de diseño, los paneles laterales cambian (En esta vista podemos ver del lado derecho el panel Flex Properties (Propiedades de Flex), el panel States (Estados), Components (Componentes), entre otros. En el panel Style, dentro de la sección Fill, al hacer click en el primer botón (el de una cubeta de pintura) podemos cambiar el color de fondo de la aplicación. Para este ejercicio cambia el botón de fondo a blanco (#FFFFFF).

En el panel Components dentro de la sección de Controls, arrastra al área de diseño el item que dice Label. Da click sobre él y escribe "Crear archivo HTML en AIR"; dale el formato que quieras y dentro de la sección Layout del panel de propiedades da click en el botón de enmedio horizontal que está debajo de Constraints. Este botón permite que la etiqueta (Label) que acabamos de poner siempre está centrada horizontalmente cuando se ejecuta la aplicación.

Figura 3: Panel Flex Properties

En el mismo panel de componentes, se encuentra como penéltima categoría los componentes de Adobe AIR, busca el componente HTML y arrástralo al área de diseño. Selecciona el componente que acabas de arrastrar y pon los siguientes valores en la sección de Layout del panel de propiedades:

Figura 4: Definiendo las propiedades de nuestro componente HTML

Da click en el botón de Source y observa cómo Flex Builder fue creando el código referente a los cambios de layout y diseño del archivo mxml.  Como esta va a ser una pequeña aplicación de ejemplo, vamos a poner todo el código en este archivo; sin embargo, es recomendable para aplicaciones más grandes tener nuestro código organizado en clases y archivos .AS para poder reutilizarlos y para poder actualizarlos fácilmente cuando se requieran cambios. Agrega estos elementos a los siguientes tags:

Texto Plano
Actionscript:
  1. /* Una vez que se haya creado la ventana de la aplicación, se mandará a llamar la función init(); */
  2. <mx:WindowedApplication creationComplete="init();"
  3. /* Le estamos asignando el id de HTMLLoader al componente HTML */
  4. <mx:HTML id="HTMLLoader"

Dentro de los tags <WindowedApplication> introduce esta línea de código y presiona la tecla Enter:

Texto Plano
Actionscript:
  1. <mx:Script>

Verás que Flex Builder te completará el código cerrando el tag:

Figura 6: Estableciendo los tags de Script para poner nuestro código ActionScript

Dentro del CDATA de nuestro tag Script deberá ir todo nuestro código ActionScript que necesitemos. Para poder crear un archivo desde AIR necesitamos importar la librería File:

Texto Plano
Actionscript:
  1. // Importar las siguientes librerías:
  2. import flash.filesystem.File;
  3. import flash.html.HTMLLoader; // Esta librería la usaremos más adelante para mostrar en nuestra aplicación el archivo HTML que generamos

Además, crearemos estas variables que usaremos más adelante:

Texto Plano
Actionscript:
  1. private var _encodeType:String = "iso-8859-1"; /* Tipo de codificación para que nos permita acentos en el archivo */
  2. private var stream:FileStream = new FileStream(); /* Estamos declarando una variable de tipo FileStream para poder crear y escribir en el archivo */

Debajo del código anterior escribe las siguientes funciones:

Texto Plano
Actionscript:
  1. /* Esta es la primera función que mandamos a llamar en creationComplete */
  2. public function init() {
  3.      this.maximize(); /* Cuando ejecutamos la aplicación la ventana estará maximizada */
  4.      var htmlFile:File = new File(File.applicationStorageDirectory.nativePath + "/miArchivo.html"); /* Una referencia al archivo HTML que vamos a crear, en ese caso nuestro archivo se llamará miArchivo.html */
  5.      if(stream != null) { /* Si ya existe un stream abierto hay que cerrarlo */
  6.           stream.close();
  7.      }
  8.      stream = new FileStream();
  9.      stream.open(htmlFile, FileMode.WRITE); /* Abrimos el archivo en modo de escritura */
  10.      stream.addEventListener(IOErrorEvent.IO_ERROR, writeIOErrorHandler); /* Asignamos un listener al stream para ver si hubo error de lectura o escritura de archivo */
  11.                          
  12.      stream.writeMultiByte(getFirstTags(), _encodeType); /* Escribimos en nuestro archivo el texto (que en nuestro caso es el código HTML de nuestro ejemplo) que nos regresa la función getFirstTags() declarada más adelante, con codificación ISO para los acentos */
  13.      stream.writeMultiByte(getDataTable(), _encodeType); /* Escribimos en nuestro archivo el texto que nos regresa la función getDataTable */
  14.      stream.writeMultiByte(getEndTags(), _encodeType);  /* Escribimos en nuestro archivo el texto que nos regresa la función getEndTags*/
  15.                          
  16.      stream.close(); /* Cerramos nuestro stream */
  17.                              
  18.      HTMLLoader.location = File.applicationStorageDirectory.nativePath + "/miArchivo.html"; /* Mostramos en el componente HTML el archivo que acabamos de crear */
  19. }
  20. public function getFirstTags():String {
  21.      var _texto:String = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' +
  22.                 '<html xmlns="http://www.w3.org/1999/xhtml">\n' +
  23.                 '<head>\n' +
  24.                 '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />\n' +
  25.                 '<title>Crear archivo HTML en Adobe AIR</title>\n' +
  26.                 '<style>\n' +
  27.                 'body {\n' +
  28.                 '   font:Arial, Helvetica, sans-serif;\n' +
  29.                 '   font-family:Arial, Helvetica, sans-serif;\n' +
  30.                 '   font-size:12px;\n' +
  31.                 '   margin-left:30px;\n' +
  32.                 '}\n' +
  33.                 'hr.Ruler {\n' +
  34.                 '   margin-left:-20px !important;\n' +
  35.                 '   color:#003366;\n' +
  36.                 '   border:1px solid #003366;\n' +
  37.                 '   background-color:#003366;\n' +
  38.                 '   width:800px;\n' +
  39.                 '}\n' +
  40.                 '.Estilo3 {\n' +
  41.                 '   color: #993300;\n' +
  42.                 '   font-weight: bold;\n' +
  43.                 '   font-size: 14px;\n' +
  44.                 '}\n' +
  45.                 '.Estilo4 {font-size: 12px; color: #666666;}\n' +
  46.                 'a:hover, a:link, a:visited, a:active {font-size: 12px; color: #666666; text-decoration:none; }\n' +
  47.                 '.Tabla_Datos td {\n' +
  48.                 '   height:25px;\n' +
  49.                 '}\n' +
  50.                 '</style>\n' +
  51.                 '</head>\n' +      
  52.                 '<body>\n';
  53.                 return _texto;
  54. }
  55.                    
  56. private function getEndTags():String {
  57.      var _texto:String = '</body></html>';
  58.      return _texto;                               
  59. }
  60.                        
  61. private function writeIOErrorHandler(event:Event):void {
  62.      trace("Error al abrir o escribir el archivo");
  63. }

¿Te perdiste? No te preocupes, aquí va el código completo:

Texto Plano
Actionscript:
  1. <![CDATA[
  2.     import flash.filesystem.File;
  3.     import flash.html.HTMLLoader;
  4.  
  5.     private var _encodeType:String = "iso-8859-1";
  6.     private var stream:FileStream = new FileStream();
  7.  
  8.     public function init() {
  9.         this.maximize();
  10.  
  11.         var htmlFile:File = new File(File.applicationStorageDirectory.nativePath + "/miArchivo.html");
  12.         if(stream != null) {
  13.             stream.close();
  14.         }
  15.         stream = new FileStream();
  16.         stream.open(htmlFile, FileMode.WRITE);
  17.         stream.addEventListener(IOErrorEvent.IO_ERROR, writeIOErrorHandler);
  18.  
  19.         stream.writeMultiByte(getFirstTags(), _encodeType);
  20.         stream.writeMultiByte(getDataTable(), _encodeType); 
  21.         stream.writeMultiByte(getEndTags(), _encodeType);   
  22.  
  23.         stream.close();
  24.  
  25.         HTMLLoader.location = File.applicationStorageDirectory.nativePath + "/miArchivo.html";   
  26.     }
  27.  
  28.     public function getFirstTags():String {
  29.         var _texto:String = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' +
  30.         '<html xmlns="http://www.w3.org/1999/xhtml">\n' +
  31.         '<head>\n' +
  32.         '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />\n' +
  33.         '<title>Crear archivo HTML en Adobe AIR</title>\n' +
  34.         '<style>\n' +
  35.         'body {\n' +
  36.         '   font:Arial, Helvetica, sans-serif;\n' +
  37.         '   font-family:Arial, Helvetica, sans-serif;\n' +
  38.         '   font-size:12px;\n' +
  39.         '   margin-left:30px;\n' +
  40.         '}\n' +
  41.         'hr.Ruler {\n' +
  42.         '   margin-left:-20px !important;\n' +
  43.         '   color:#003366;\n' +
  44.         '   border:1px solid #003366;\n' +
  45.         '   background-color:#003366;\n' +
  46.         '   width:800px;\n' +
  47.         '}\n' +
  48.         '.Estilo3 {\n' +
  49.         '   color: #993300;\n' +
  50.         '   font-weight: bold;\n' +
  51.         '   font-size: 14px;\n' +
  52.         '}\n' +
  53.         '.Estilo4 {font-size: 12px; color: #666666;}\n' +
  54.         'a:hover, a:link, a:visited, a:active {font-size: 12px; color: #666666; text-decoration:none; }\n' +
  55.         '.Tabla_Datos td {\n' +
  56.         '   height:25px;\n' +
  57.         '}\n' +
  58.         '</style>\n' +
  59.         '</head>\n' +      
  60.         '<body>\n';
  61.         return _texto;
  62.     }
  63.  
  64.     private function getDataTable():String {
  65.         var _texto:String = '<br />\n' +
  66.         '<span class="Estilo3">Archivo HTML en Adober AIR</span>&nbsp;&nbsp;<span class="Estilo4"><a href="http://codigometropoli.com">(http://codigometropoli.com)</a></span><br />\n' +
  67.         '<br />\n' +
  68.         '<table class="Tabla_Datos" width="700" border="0" cellspacing="0" cellpadding="0">\n' +
  69.         '  <tr>\n' +
  70.         '    <td width="138"><strong>Nombre:</strong></td>\n' +
  71.         '    <td width="237">Juan Carlos</td>\n' +
  72.         '    <td width="169"><strong>Fecha de Nacimiento:</strong></td>\n' +
  73.         '    <td width="156">20/03/1981</td>\n' +
  74.         '  </tr>\n' +
  75.         '  <tr>\n' +
  76.         '    <td><strong>Pa&iacute;s:</strong></td>\n' +
  77.         '    <td>M&eacute;xico</td>\n' +
  78.         '    <td><strong>Ciudad:</strong></td>\n' +
  79.         '    <td>Distrito Federal</td>\n' +
  80.         '  </tr>\n' +
  81.         '  <tr>\n' +
  82.         '    <td><strong>N&uacute;mero de Cliente: </strong></td>\n' +
  83.         '    <td>541232</td>\n' +
  84.         '    <td>&nbsp;</td>\n' +
  85.         '    <td>&nbsp;</td>\n' +
  86.         '  </tr>\n' +
  87.         '</table>\n' +
  88.         '<hr class="Ruler" />';
  89.         return _texto;
  90.     }
  91.  
  92.     private function getEndTags():String {
  93.         var _texto:String = '</body></html>';
  94.         return _texto;       
  95.     }
  96.  
  97.     private function writeIOErrorHandler(event:Event):void
  98.     {
  99.         trace("Error al abrir o escribir el archivo");
  100.     }
  101. ]]>

El resultado final se muestra en la siguiente imagen:

Figura 7: Nuestra aplicación de Adobe AIR en acción

Descargar Archivo

Enlaces recomendados:

» Building a text-file editor
» Adobe® Flex® 3 Language Reference

Tags: , ,
AIR

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Pingback por Sistema de Clientes (AIR y SQLite) Parte IV (Consulta a la base de datos) | Código Metrópoli el Septiembre 10, 2008 @ 9:42 am

[...] los escribiremos en un archivo HTML y lo mostraremos dentro del componente HTML (aprovechando el post que publiqué hace ya tiempo sobre cómo crear un archivo en [...]

  Comentario por bubu el Enero 10, 2009 @ 7:34 pm

me surge este error y no se porque ni a que se debe:

Process terminated without establishing connection to debugger.

Command:

"C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\bin\adl.exe" "C:\Users\bubu\Documents\Flex Builder 3\AIRCreateFile\bin-debug\AIRCreateFile-app.xml" "C:\Users\bubu\Documents\Flex Builder 3\AIRCreateFile\bin-debug"

Output from command:

error while loading initial content

si me puede ayudar te lo agradeceria.
saludos.
muy buena la web

  Comentario por Carla Macías el Enero 11, 2009 @ 2:08 am

Hola bubu,

Te aparece ese error porque tu versión del Flex Builder 3 es más reciente que la que usé para hacer el ejercicio.
Ahora que formateé mi computadora, instalé la nueva versión del FB3 y me pasó lo mismo; afortunadamente la solución es muy sencilla: abre el archivo descriptor de la aplicación (AIRCreateFile-app.xml) y cambia en la segunda línea la versión de 1.0 por 1.5.

Texto Plano
XML:
  1. <application xmlns="http://ns.adobe.com/air/application/1.5">

Saludos.

  Comentario por bubu el Enero 12, 2009 @ 5:02 pm

buenisisismo.
muchas gracias.
entonces, en los siguientes tutoriales que le siguen a este tengo q hacer lo mismo, o sea, en el XML cambiar la version de 1.0 a 1.5?

  Comentario por Carla Macías el Enero 13, 2009 @ 10:58 am

Así es, bubu. Los que tengan versión 1.0 tendrás que cambiarla por 1.5

Saludos.

  Comentario por William Leonardo el Junio 19, 2009 @ 12:34 am

Tengo un problema descargue el flex SDK4 para flex 3 todo bien pero resulta que en el tutorial donde me dicen como instalar el sdk4 me dicen que me vaya a menu project y luego a propiedades, mi pregunta es como diablos hago para activar la opcion propiedades porque me sale deshabilitada, al igual que en el menu inicio no puedo entrar a propiedades porque me sale deshabilitada que hago talves me puedan ayudar.....

  Comentario por William Leonardo el Junio 19, 2009 @ 1:32 am

ya resolvi lo del problema, gracias de todos modos, pero ahora tengo otro, que es este:
Severity and Description Path Resource Location Creation Time Id
Design mode: Cannot load applicationupdater_ui.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode. Check the Eclipse error log for more details. AIRCreateFile/src AIRCreateFile.mxml Unknown 1245392530644 17

me puedes decir qe significa porfavor,tengo instalado adobe flex builder profesional 3.2.0 + SDK4 para flex 3

  Comentario por JOSE TORRES el Febrero 14, 2010 @ 11:47 pm

Hola Carla, recien estoy comenzando a programar en Flex y Air, y necesito saber si es posible conectar AIR a una base de datos MySQL que se encuentra en un servidor remoto, y si es segura esta forma de conectarse o es necesario conectarse a traves de flex? en caso afirmativo, donde puedo conseguir ejemplos para realizarlo. Agradezco de antemano tu atencion y continua con tus tutoriales que estan grandiosos.

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)