Este tema fue escrito en cristalab por eldervaz
y este es un ejemplo de una aplicacion que abre, edita y guarda archivos html, htm, doc.
les dejo el rar para que lo puedan ver.
el codigo va explicado, y cualquier consulta pueden hacerla a [email protected]
http://www.megaupload.com/?d=98OIMQ6L
pero tambien aca les dejo el codigo
Código Flex :
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" borderColor="#FF6C00" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FF7200, #FF9D46]" height="600"> <mx:Script source="metodos.as" /> <mx:HTML id="html" height="425" y="109" width="45%" right="35"/> <mx:TextArea id="campo" textInput="convierte()" height="425" y="109" width="45%" left="35" change="actualizar();"/> <mx:TextInput id="txt_file" text="MiPrimerGestordeArchivos.html" top="556" left="107.5" height="22" width="186.5"/> <mx:Button label="Abrir" click="open()" left="35" top="556" height="22" id="button3"/> <mx:Button x="96" y="10" label="N" width="38" id="btn_B" click="negrita()" themeColor="#FFB895" fontWeight="bold" color="#000000"/> <mx:Button label="U" width="38" id="btn_U" click="subrayado()" x="186" y="10" textDecoration="underline" themeColor="#FFBC97" fontWeight="normal"/> <mx:Button x="140" y="10" label="K" width="38" id="btn_I" click="cursiva()" themeColor="#FFB895" fontWeight="normal" fontStyle="italic"/> <mx:Button label="Guardar" click="save()" top="556" left="300" height="22" width="72" id="button4" creationComplete="init();"/> <mx:Button x="26" y="10" label="Nuevo" click="nuevo()" themeColor="#FFB895" id="button1"/> <mx:Button x="648" y="10" label="Actualizar" click="actualizar()" themeColor="#FFB895" id="button2"/> <mx:Button x="28" y="41" label="Table" width="62" id="btn_table" click="miTabla()" themeColor="#FFBC97"/> <mx:Button x="306.5" y="10" label="link" width="50" id="btn_link" click="link()" themeColor="#FFBC97"/> <mx:NumericStepper x="138" y="40" id="col" minimum="1" maximum="100" value="1" width="56" stepSize="1" themeColor="#FFBC97"/> <mx:NumericStepper x="138" y="66" id="row" minimum="1" maximum="1000" value="1" width="56" stepSize="1" themeColor="#FFBC97"/> <mx:Label x="63" y="68" text="Columnas:" width="67" fontWeight="bold" id="label1"/> <mx:Label x="306.5" y="72" text="Justificado:" width="77" fontWeight="bold" id="label0"/> <mx:Label x="94" y="42" text="Filas:" width="40" fontWeight="bold" id="label2"/> <mx:HRule y="96" height="5" left="26" right="24" id="hrule1"/> <mx:ColorPicker id="cp" x="202" y="40" selectedColor="#8DEBFF"/> <mx:ColorPicker x="232" y="10" id="cpFont" change="color()" themeColor="#FFB895" selectedColor="#FF0000"/> <mx:TextInput x="364.5" y="10" text="http://" id="txt_link" width="275.5" themeColor="#FFB895"/> <mx:Button x="306.5" y="40" label="img" width="50" id="btn_img" click="img()" themeColor="#FFB895"/> <mx:TextInput x="367.5" y="40" width="272.5" id="txt_img" themeColor="#FFB895"/> <mx:VRule y="109" horizontalCenter="0" width="14" height="416" id="vrule1"/> <mx:Button x="378" y="70" label="Izq" themeColor="#FFBC97" click="izquierda();" width="59" textAlign="left"/> <mx:Button x="648" y="40" label="Parrafo" click="parrafo();" id="btn_parrafo" width="84" themeColor="#FFBC97"/> <mx:Button x="512" y="70" label="Der" click="derecha();" textAlign="right" themeColor="#FFBC97" width="59"/> <mx:Button x="445" y="70" label="Cen" click="centar();" textAlign="center" themeColor="#FFBC97" width="59"/> </mx:WindowedApplication>
Codigo Flex!
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" borderColor="#FF6C00" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FF7200, #FF9D46]" height="600">
<mx:Script source="metodos.as" />
<mx:HTML id="html" height="425" y="109" width="45%" right="35"/>
<mx:TextArea
id="campo"
textInput="convierte()"
height="425" y="109" width="45%" left="35" change="actualizar();"/>
<mx:TextInput id="txt_file" text="MiPrimerGestordeArchivos.html" top="556" left="107.5" height="22" width="186.5"/>
<mx:Button label="Abrir" click="open()" left="35" top="556" height="22" id="button3"/>
<mx:Button x="96" y="10" label="N" width="38" id="btn_B" click="negrita()" themeColor="#FFB895" fontWeight="bold" color="#000000"/>
<mx:Button label="U" width="38" id="btn_U" click="subrayado()" x="186" y="10" textDecoration="underline" themeColor="#FFBC97" fontWeight="normal"/>
<mx:Button x="140" y="10" label="K" width="38" id="btn_I" click="cursiva()" themeColor="#FFB895" fontWeight="normal" fontStyle="italic"/>
<mx:Button label="Guardar" click="save()" top="556" left="300" height="22" width="72" id="button4" creationComplete="init();"/>
<mx:Button x="26" y="10" label="Nuevo" click="nuevo()" themeColor="#FFB895" id="button1"/>
<mx:Button x="648" y="10" label="Actualizar" click="actualizar()" themeColor="#FFB895" id="button2"/>
<mx:Button x="28" y="41" label="Table" width="62" id="btn_table" click="miTabla()" themeColor="#FFBC97"/>
<mx:Button x="306.5" y="10" label="link" width="50" id="btn_link" click="link()" themeColor="#FFBC97"/>
<mx:NumericStepper x="138" y="40" id="col" minimum="1" maximum="100" value="1" width="56" stepSize="1" themeColor="#FFBC97"/>
<mx:NumericStepper x="138" y="66" id="row" minimum="1" maximum="1000" value="1" width="56" stepSize="1" themeColor="#FFBC97"/>
<mx:Label x="63" y="68" text="Columnas:" width="67" fontWeight="bold" id="label1"/>
<mx:Label x="306.5" y="72" text="Justificado:" width="77" fontWeight="bold" id="label0"/>
<mx:Label x="94" y="42" text="Filas:" width="40" fontWeight="bold" id="label2"/>
<mx:HRule y="96" height="5" left="26" right="24" id="hrule1"/>
<mx:ColorPicker id="cp" x="202" y="40" selectedColor="#8DEBFF"/>
<mx:ColorPicker x="232" y="10" id="cpFont" change="color()" themeColor="#FFB895" selectedColor="#FF0000"/>
<mx:TextInput x="364.5" y="10" text="http://" id="txt_link" width="275.5" themeColor="#FFB895"/>
<mx:Button x="306.5" y="40" label="img" width="50" id="btn_img" click="img()" themeColor="#FFB895"/>
<mx:TextInput x="367.5" y="40" width="272.5" id="txt_img" themeColor="#FFB895"/>
<mx:VRule y="109" horizontalCenter="0" width="14" height="416" id="vrule1"/>
<mx:Button x="378" y="70" label="Izq" themeColor="#FFBC97" click="izquierda();" width="59" textAlign="left"/>
<mx:Button x="648" y="40" label="Parrafo" click="parrafo();" id="btn_parrafo" width="84" themeColor="#FFBC97"/>
<mx:Button x="512" y="70" label="Der" click="derecha();" textAlign="right" themeColor="#FFBC97" width="59"/>
<mx:Button x="445" y="70" label="Cen" click="centar();" textAlign="center" themeColor="#FFBC97" width="59"/>
</mx:WindowedApplication>
Codigo de metodo.as
//Importamos las librerías para controlar las acciones
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import mx.controls.*;
Alert.okLabel= "Aceptar";
Alert.yesLabel= "Si";
Alert.noLabel= "No";
Alert.cancelLabel= "Cancelar";
Alert.buttonWidth= 100;
private var desk:File;
private var file:File;
private var fs:FileStream;
/*
desk: Es la ruta donde se almacenado de los archivos
file: Es la referencia al archivo que se abrirá o se guardará
fs: Método que posee las propiedades de guardar y abrir archivos
*/
private function init():void{
desk = File.desktopDirectory;
fs = new FileStream();
campo.setFocus();
}
/* File.desktopDirectorio hace referencia al escritorio
FileStream es una instancia que se le realiza a los tipos de archivos
*/
private function convierte():void{
html.htmlText = campo.text;
}
/*
Transforma el campo de html (derecha) a texto
*/
private function save():void{
try{
file = desk.resolvePath(txt_file.text);
fs.open(file, FileMode.WRITE);
fs.writeUTFBytes(campo.text);
fs.close();
Alert.show("El archivo fue guardado con éxito!");
}
catch(err:Error){
Alert.show("Ocurrió un error inesperado y el archivo no fue almacenado");
}
finally{
}
}
/*
Guarda los archivos en la ubicación que se ha designado con desk
fs.open hace referenciaal archivo que se va a enlazar en modo escritura
*/
private function open():void{
try{
file = desk.resolvePath(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();
}
catch (err:Error){
Alert.show("El archivo que usted está intentando abrir no existe", "Ha ocurrido un error");
}
finally{
}
}
/*
La función open abre el archivo y lo crea en modo lecutra almacenandolo en srt y el campo html lo iguala
a str
*/
private function actualizar():void{
html.htmlText = campo.text;
}
/*
Después de cada acción que se ejecute se tiene que actualizar el campo de texto transformado (html)
*/
private function miSeleccion(texto:String, action:int):void{
var b :int = campo.selectionBeginIndex;
var e :int = campo.selectionEndIndex;
var tamanio:int;
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+"<"+texto+">"+part+"</"+texto+">"+parte;
break;
case 1:
campo.text = par+"<font color=' "+texto+" '>"+part+"</font>"+parte;
break;
case 2:
campo.text = par+"<a href=' "+texto+" '>"+part+"</a>"+parte;
tamanio= txt_link.length - 7;
txt_link.text="";
break;
case 3:
campo.text = par+"<img src='"+texto+"'>"+part+"</img>"+parte;
tamanio= this.txt_img.length + 1;
txt_img.text="";
break;
case 4:
campo.text = par+"<p align='"+texto+"'>"+part+"</p>"+parte;
break;
}
b= b + texto.length + 2 + tamanio;
e= e + texto.length + 2 + tamanio;
campo.setSelection(b,e);
tamanio=0;
campo.setFocus();
}
}
/*
miSelección es una funcion encargada de determinar la posición de inicio y finalización de la selección en el
código html.
La variable "b" se indexa al inicio de la selección, mientras la variable "e" se indexa al final de la selección
La variable "b" tiene que ser menor a "e" para lograr partir el código de las formas deseadas (algo bastante
genérico para este caso, aunque puede seccionarse de diferentes formas según la lógica del programador), para lo
que se crean 3 variables: "par", "part" y "parte"
par= es el inicio de la selección
part= es el rando de inicio y finalización
parte= es sección no seleccionada, es decir para que no se pierda el demás texto ya que lo que se pretende es
realizar un reemplazo de todo el campo
*/
private function negrita():void{
miSeleccion("b", 0);
actualizar();
}
private function cursiva():void{
miSeleccion("i",0);
actualizar();
}
private function subrayado():void{
miSeleccion("u",0);
actualizar();
}
private function centar():void{
miSeleccion("center",4);
actualizar();
}
private function derecha():void{
miSeleccion("right",4);
actualizar();
}
private function izquierda():void{
miSeleccion("left",4);
actualizar();
}
private function parrafo():void{
miSeleccion("p",0);
actualizar();
}
private function color():void{
miSeleccion(cpFont.selectedColor.toString(16),1);
}
private function link():void{
miSeleccion(txt_link.text,2);
actualizar();
}
private function img():void{
miSeleccion(txt_img.text,3);
actualizar();
}
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 = campo.text + " " + miT;
actualizar();
}
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";
}
Un gran agradecimiento a Este tema fue escrito en cristalab por eldervaz
por aportar este tema hace unas sesiones atras.
