Crea tu primera aplicación con Adobe AIR

Adobe lanzó ayer la versión alpha de Apollo, su nueva herramienta para crear aplicaciones de escritorio basadas en Flash y HTML.

Apollo muy probablemente traerá consigo una nueva ola de aplicaciones de todo tipo, ya que combina toda la potencia gráfica que siempre ha caracterizado a Flash con la posibilidad de acceder y modificar todo tipo de datos, tanto los que se encuentran en un servidor (pasando por un lenguaje de servidor como JAVA, PHP o ASP.Net) como los que se encuentran en el sistema del usuario.

La otra gran novedad que nos brinda es un componente que nos permite reproducir, de una manera bastante acertada (es decir, más o menos como lo haría un navegador) páginas html+css+javascript dentro de nuestra aplicación, haciendo que la integración entre las tecnologías sea muy alta.

Los archivos generados por Apollo se transmiten con archivos .air, que pueden funcionar en Windows o en Mac siempre que se tenga instalado el correspondiente programa runtime, que pueden descargar desde los Adobe Labs. Al ejecutar uno de esos archivos (que contiene la aplicación), nos preguntará si queremos instalarlo, si queremos crear accesos directos, ect y lo instalará en nuestra carpeta de Program Files de nuestro usuario. Luego podremos ejecutarlo de manera normal.


En cuanto a la forma de desarrollar con Apollo, la mejor manera de empezar es con la extensión para Flex Builder 2.0.1, que también pueden descargar desde los Adobe Labs. La extensión añade a Flex la posibilidad de crear Apollo Projects, en los que podemos añadir algunos componentes para mostrar los archivos de nuestro ordenador, además del componente html y también utilizar las nuevas funcionalidades de ActionScript 3 para Apollo. Todo ello, con las sugerencias de código y el modo diseño de Flex Builder.

Sabiendo todo esto, y con Apollo instalado podemos crear nuestra primera aplicación, que puede ser un programa que muestre un archivo html, de manera bastante cutre ya que no cargará los estilos ni las imágenes representado en un componente, y en forma de texto y permita guardarlo en el ordenador. Hacemos una interfaz en Flex que quede parecida a esto:


(lo de arriba es un componente html, lo de abajo a la izquierda es un TextArea y lo de las carpetitas es un FileSystemTree)

El código sería el siguiente:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication height="600" width="800" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="HTML Editor">
   <mx:Script>
      <![CDATA[
         import flash.filesystem.File;
         import flash.filesystem.FileMode;
         import flash.filesystem.FileStream;
         import flash.net.*
         private function onAbrir(url:String):void
         {
            var data:URLRequest = new URLRequest(url);
            var ldr:URLLoader = new URLLoader ();
            ldr.load(data);
            ldr.addEventListener(Event.COMPLETE,onLoad);
         }
         private function onLoad(event:Event):void
         {
            html.htmlText = event.target.data;
            txt.text=event.target.data;
         }
         private function save():void
         {
            var dir:File = fileTree.selectedItem as File;
            var file:File = dir.resolve(fileText.text);
            var fs:FileStream = new FileStream ();
            fs.open(file , FileMode.WRITE);
            fs.writeUTFBytes(txt.text);
            fs.close();
         }
      ]]>
   </mx:Script>
   <mx:VDividedBox x="0" width="100%" bottom="0" top="0">
      <mx:HTML width="100%" height="356" id="html"
           complete="{txt.text=html.htmlText;trace(html.htmlText+'sadsa');}"/>
      <mx:HDividedBox width="100%" height="100%">
         <mx:TextArea width="100%" height="100%" id="txt"
            change="{html.htmlText=txt.text}"/>
         <mx:Canvas height="100%" width="275">
         
            <mx:FileSystemTree y="0" id="fileTree" extensions="['.html', '.php', '.aspx']" height="120" left="6" right="107"               />
            
            <mx:Button y="181" label="Abrir URL" id="AbrirUrlBtn" left="10" width="55"
               click="{onAbrir(urlTxt.text)}" />
               
            <mx:Button y="43" label="Guardar" id="GuardarBtn" right="27"
               click="{save()}"
               />
            
            <mx:TextInput x="10" y="151" id="urlTxt" text="http://www.example.com/index.html" width="238"/>
            
            <mx:Button y="13" label="Abrir" id="abrirBtn" right="44"
               click="{onAbrir(fileTree.selectedItem.url)}" />
            <mx:TextInput id="fileText" y="73" width="89" right="10"/>
         
         </mx:Canvas>
      </mx:HDividedBox>
   </mx:VDividedBox>
</mx:ApolloApplication>

A grandes rasgos lo que hace es cargar un html usando un UrlRequest, tanto de una URL como de nuestro propio ordenador (donde usamos la propiedad "extensions" del FileSystemTree para ver sólo los html) y mostrarlo a la vez en el componente HTML y en el TextArea. Podríamos haber usado la propiedad location del html, que es la url en la que se encuentra el html. De esta manera, se cargarían todos los estilos e imágenes, pero no permite acceder a la propiedad htmlText, que es la que nos interesa.

El botón guardar ejecuta una función que muestra la forma típica de guardar archivos con Apollo. Sacamos un archivo del fileTree y de la caja de texto, creamos un FileStream, lo abrimos usando FileMode.WRITE, para modo escritura, escribimos el texto que sea, usando una de las varias funciones que hay para ello, y después lo cerramos.

Ahora vamos a exportar el archivo air. Primero deberíamos buscar un icono (png, preferiblemente) y ponerlo en la carpeta del proyecto.

Ahora vamos al archivo TuProyectoApp.xml que se ha creado junto con el xml de tu proyecto. Allí podemos poner el id de la aplicación, que debería ser algo así como com.tudominio.tuaplicacion, una descripción, el nombre del creador (el tuyo o de tu empresa) y el icono que acabamos de importar, entre las etiquetas que más se ajusten a su tamaño, de manera que quedaría algo así (sin los comentarios que ya te dicen como hacerlo):

Código :

<?xml version="1.0" encoding="UTF-8"?>
<application appId="com.zah.SampleApp" version=".4" xmlns="http://ns.adobe.com/apollo/application/1.0.M3">
      <properties>
            <name>ApolloTest</name>
            <description>A Sample HTML Editor</description>
            <publisher>Zah</publisher>
            <copyright/>
      </properties>
      <rootContent systemChrome="standard" transparent="false" visible="true">ApolloTest.swf</rootContent>
     <icon>
      <image128x128>logo.png</image128x128> 
     </icon>
</application>

Una vez hecho esto, vamos a File>Export> Deployable AIR File> y seleccionamos los recursos adicionales que necesitaremos para hacer funcionar la aplicación (y no estén en tags Embed y cosas de esas), como el icono.

Si todo salió bien, ya estás viendo tu primera aplicación (después de instalarla y demás ).

 

Tweet