Abrir, editar y guardar archivos con Adobe AIR

Ya sabemos que con Apollo podemos usar la tecnología y conocimientos que tengamos en Flash y Flex o Ajax, HTML y Javascript para poder desarrollar aplicaciones de escritorio. Un sueño para los que trabajamos en web. En este tutorial veremos cómo abrir y cerrar documentos y archivos en el disco duro en una aplicación de escritorio programada en Flex gracias a Apollo.

El código de este tutorial está basado en el Tutorial básico de Adobe Apollo creado por Zguillez. Completalo antes de este.

Declaramos las variables

private var desk:File;
private var file:File;
private var fs:FileStream;

• desk, almacenará la ruta donde vamos a trabajar, en este caso el escritorio.
• file, nos dirá el nombre del archivo a abrir o grabar.
• fs, nos dará los métodos necesarios para abrir o grabar el archivo.
  

Ahora crearemos los dos métodos básicos. Abrir y guardar. Veamos uno por uno:

private function save():void{
    file = desk.resolve(txt_file.text);
    fs.open(file, FileMode.WRITE);
    fs.writeUTFBytes(campo.text);
    fs.close();
}

La explicación del código:

file = desk.resolve(txt_file.text);
Le decimos que nombre tendrá nuestro archivo, en este caso lo colocaremos en un campo de texto de tipo TextInput.

fs.open(file, FileMode.WRITE);
Llamamos a nuestro método open y le decimos que queremos hacer. El primer parámetro es para decirle el nombre del archivo y el segundo es qué queremos hacer, en este caso, escribir.

fs.writeUTFBytes(campo.text);
Aquí le mandamos el texto o contenido a grabar. Más abajo hablaré de esto más a fondo.

fs.close();
Cerramos nuestro archivito.

El siguiente método, abrir:

private function open():void{
    file = desk.resolve(txt_file.text);
    fs.open(file, FileMode.READ);
    var str:String = fs.readMultiByte(file.size, File.systemCharset);
    html.htmlText=str;
    campo.text=str;
    fs.close();
}

Aquí lo único distinto y que interesa para explicar es:

var str:String = fs.readMultiByte(file.size, File.systemCharset);
Lee el contenido del archivo.

html.htmlText=str;
campo.text=str;
Muestra el contenido en nuestro diseño. En el primer caso, interpreta código HTML como se vería en un navegador y en el segundo muestra el código como se vería en un editor de texto.

Hasta aquí todo ha sido muy fácil. Para hacer las cosas más interesantes aplique nuestro pequeño tutorial en un editor HTML básico, es la versión inicial, así que sólo verán cosas básicas. Esta será la interfaz. Si no sabes bien como crear interfaces en Flex, puedes revisar el tutorial básico de Flex o los varios tips al respecto:

De cualquier manera, si quieres todo completo, este es el código entero de nuestra aplicación. Solo pegalo en un nuevo archivo MXML de Flex Builder 2.

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" width="520" height="362" initialize="init()">
 <mx:Script source="metodos.as" />
 
 <mx:HTML width="240" id="html" right="10" bottom="39" top="56"/>
 <mx:TextArea width="240" 
   id="campo"
   textInput="convierte()"
   left="10" bottom="39" top="56"/>

 <mx:TextInput width="178" id="txt_file" bottom="10" right="268" text="test.html"/>
 <mx:Button label="Open" click="open()" left="10" bottom="10"/>

 <mx:Button x="70" y="1" label="B" width="30" id="btn_B" click="negrita()"/>
 <mx:Button label="U" width="30" id="btn_U" click="subrayado()" x="99" y="1"/>
 <mx:Button x="128" y="1" label="I" width="30" id="btn_I" click="cursiva()"/>
 <mx:Button label="Save" bottom="10" right="196" click="save()"/>
 <mx:Button x="10" y="1" label="New" click="nuevo()"/>
 <mx:Button x="354.5" y="26" label="Refresh" click="actualizar()"/>
 <mx:Button x="10" y="26" label="Table" width="54" id="btn_table" click="miTabla()"/>
 <mx:Button x="194" y="1" label="link" width="33" id="btn_link" click="link()"/>
 
 <mx:NumericStepper x="85" y="26" id="col" minimum="1" maximum="5" value="1" width="40"/>
 <mx:NumericStepper x="148" y="26" id="row" minimum="1" maximum="5" value="1" width="38"/>
 <mx:Label x="132" y="28" text="C:" width="18"/>
 <mx:Label x="68" y="28" text="R:" width="18"/>
 <mx:HRule x="10" y="46" width="498" height="5"/>
 <mx:ColorPicker id="cp" x="194" y="26"/>
 <mx:ColorPicker x="158" y="2" id="cpFont" change="color()"/>
 
 <mx:TextInput x="227" y="1" text="http://" id="txt_link" width="120"/>
 <mx:Button x="357" y="1" label="img" width="33" id="btn_img" click="img()"/>
 <mx:TextInput x="391" y="1" width="117" id="txt_img"/>

</mx:ApolloApplication>

Como verán llamo aquí al archivo:
<mx:Script source="metodos.as" />
Donde están las funciones de abrir y cerrar que creé antes en Actionscript. Así ordenamos nuestro trabajo.

Ese archivo es este:

// ActionScript file
import flash.filesystem.FileMode;
import flash.filesystem.File;
import flash.filesystem.FileStream;
import mx.controls.textClasses.TextRange;
//
private var desk:File;
private var file:File;
private var fs:FileStream;

private function init():void{
    desk = File.desktopDirectory;
    fs = new FileStream();
} 
private function convierte():void{
    html.htmlText = campo.text;
}
//---------------------------solo esto es APOLLO
private function save():void{
    file = desk.resolve(txt_file.text);
    fs.open(file, FileMode.WRITE);
    fs.writeUTFBytes(campo.text);
    fs.close();
}
private function open():void{
    file = desk.resolve(txt_file.text);
    fs.open(file, FileMode.READ);
    var str:String = fs.readMultiByte(file.size, File.systemCharset);
    html.htmlText=str;
    campo.text=str;
    fs.close();
}
//------------------------- fin de APOLLO

private function actualizar():void{
    html.htmlText = campo.text;
}
private function miSeleccion(que:String, action:int):void{
    var b :int = campo.selectionBeginIndex;
    var e :int = campo.selectionEndIndex;
    if ( b != e ){
        var str:String = campo.text;
        var par:String = str.substring(0, b);
        var part:String = str.substring(b, e);
        var parte:String = str.substring(e, campo.length);

        switch(action){
        case 0:
            campo.text = par+"<"+que+">"+part+"</"+que+">"+parte;
            break;
        case 1:
            campo.text = par+"<font color=' "+que+" '>"+part+"</font>"+parte;
            break;
        case 2:
            campo.text = par+"<a href=' "+que+" '>"+part+"</a>"+parte;
            break;
        case 3:
            campo.text = par+"<img src='"+que+"'>"+part+"</img>"+parte;
            break;
        }
    }
}
//FORMAT TEXT
private function negrita():void{
    miSeleccion("b",0);
}
private function cursiva():void{
    miSeleccion("i",0);
}
private function subrayado():void{
    miSeleccion("u",0);
}
private function color():void{
    miSeleccion(cpFont.selectedColor.toString(16),1);
}
private function link():void{
    miSeleccion(txt_link.text,2);
}
private function img():void{
    miSeleccion(txt_img.text,3);
}

private function miTabla():void{
    var Col:int= col.value;
    var Row:int= row.value;
    var miT:String="<table border='1' width='100%' bgcolor='#"+cp.selectedColor.toString(16)+"'> \n";
    var miC:String="";
    for(var i:int=0; i<Col; i++){
        miT += " <TR>\n"; 
        for(var j:int=0; j<Row; j++){
            miT += "  <TD>texto</TD>\n"; 
        }
        miT += " </TR>";
        miT += "\n";
    }
    miT += "</table>";
    campo.text = miT;
}

private function nuevo():void{
    campo.text = "<html>\n";
    campo.text += " <body>\n";
    campo.text += "   <p>\n\n\n\n\n\n   </p>\n";
    campo.text += " </body>\n";
    campo.text += "</html>\n";
}

Los demás métodos que ven no los explico porque es programación con Flex, y ese no es el tutorial, solo es un ejemplo básico.

Eso es todo, como nota importante, los archivos que van a grabar serán en el escritorio porque use:
desk = File.desktopDirectory;
Y obviamente para abrir un archivo HTML, tiene que existir primero en el escritorio, sino les saldrá un error.

En cuanto a la explicación del
fs.writeUTFBytes(campo.text);
var str:String = fs.readMultiByte(file.size, File.systemCharset);

En Apollo, tenemos métodos de la clase FileStream, que nos permiten grabar y leer, pero no solo texto, sino varios tipos de datos, como binarios. Aquí les detallo algunas de las posibilidades:

Empezamos con las posibilidades de leer datos:

readByte():int
readBytes(bytes:ByteArray, offset:uint = 0, length:uint = 0):void
readDouble():Number
readFloat():Number
readInt():int
readMultiByte(length:uint, charSet:String):String
readObject():*
readShort():int
readUnsignedByte():uint
readUnsignedInt():uint
readUnsignedShort():uint
readUTF():String
readUTFBytes(length:uint):String 

Creo que se entienden casi todos. Lee los distintos tipos de datos según los necesitemos. Como vieron deje el Object resaltado pues este para los amantes de Remoting y AMF. Puede leer un objeto creado desde Flash o con AMF. De modo que puedes escribir objetos a disco y leerlos después.

Estas son las funciones para escribir a disco datos:

writeBoolean(value:Boolean):void
writeByte(value:int):void
writeBytes(bytes:ByteArray, offset:uint = 0, length:uint = 0):void
writeDouble(value:Number):void
writeFloat(value:Number):void
writeInt(value:int):void
writeMultiByte(value:String, charSet:String):void
writeObject(object:):void
writeShort(value:int):void
writeUnsignedInt(value:uint):void
writeUTF(value:String):void
writeUTFBytes(value:String):void

La contraparte de la lectura. Podemos escribir todo tipo de datos a disco sin problemas. Para más información puedes buscar en la documentación integrada de Flex o de Flash CS3 oprimiendo la tecla F1.

El uso de Apollo en este tutorial es mínimo, pero de lo mas interesante. Con unas pocas horas hice este editor, espero que les sirva de guía para sus aplicaciones hibridas para web y escritorio.

Nota: Si quieres saber como convertir esta aplicación en un ejecutable para Windows, Linux o Mac, revisa la guía básica de Apolllo.

¿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