Este tutorial continua la serie de tutoriales de JSFL que empecé a escribir en este post, no es el tercero sino la segunda parte del segundo tutorial de Comandos con interfaz gráfica.
En esta ocasión vamos a crear un comando que nos ayude a crear un XML con el listado de ficheros jpg que se encuentran en un directorio que indicaremos mediante un cuadro de diálogo Buscar carpeta.
En este tutorial veremos lo siguiente:
- Interfaz gráfica basada en una película swf.
- Uso de Función MMExecute.
- Uso de cuadro de diálogo Buscar carpeta.
- Introducción al objeto FLfile.
Interfaz gráfica basada en una película swf
Lo primero que debemos hacer es indicar en el fichero JSFL el uso de un xmlPanel mediante el siguiente código:
fl.getDocumentDOM().xmlPanel(fl.configURI + "panel.xml");
Lo siguiente que debemos hacer es indicar en el fichero xml de configuración de interfaz gráfica del comando el uso de una película Flash, mediante el siguiente código:
Listo, con esto ya tenemos un comando que utiliza un fichero xml para configurar su interfaz gráfica y esta interfaz muestra una película swf.
Uso de Función MMExecute
La función MMExecute sirve para ejecutar scripts JSFL desde una película swf, esto lo vamos a necesitar en este tutorial para ejecutar las siguientes acciones:
- Aceptar
MMExecute(‘fl.xmlui.accept();');
- Cancelar
MMExecute(‘fl.xmlui.cancel();');
- Asignar valor
MMExecute(‘fl.xmlui.set("variable", "valor");');
- Abrir cuadro de diálogo Buscar carpeta
MMExecute(‘fl.browseForFolderURL("Mensaje");‘);
Este código lo podemos ejecutar en eventos de botones como onClick, onRelease, etcétera desde nuestra interfaz de usuario.
La función MMExecute devuelve una cadena cuando la ejecución del script JSFL devuelve algo. NOTA importante, el resultado de MMExecute siempre será una cadena.
Uso de cuadro de diálogo Buscar Carpeta
Para abrir un cuadro de diálogo Buscar carpeta debemos ejecutar el siguiente código:
var ruta:String = fl.browseForFolderURL("Mensaje");
Este nos devolverá la ruta hasta la carpeta expresada como archivo:///URI que es el formato que utiliza JSFL para trabajar con el sistema de ficheros. Por ejemplo, en Windows para la carpeta D:\Fotos sería file:///D|/Fotos.
Introducción al objeto FLfile
El objeto FLfile nos proporciona una API de comunicación con el sistema de ficheros del sistema operativo poder crear, modificar o eliminar entre otras cosas ficheros o directorios. Este objeto lo vamos a utilizar en este tutorial para ejecutar las siguientes acciones:
- Listar el contenido de un directorio
FLfile.listFolder("path", "files");
- Crear un fichero
FLfile.write("fileURI", "contenido fichero");
El método FLfile.listFolder nos permite aplicar un filtro de búsqueda de tal forma que el resultado sólo incluya ficheros de cierto tipo, para nuestro ejemplo aplicamos el filtro de búsqueda para fichero de tipo jpg, esto lo conseguimos con el siguiente código:
FLfile.listFolder(path + "/*.jpg", "files");
Este método devuelve un array con los resultados de la búsqueda.
El método FLfile.write nos permite crear un fichero, este método devuelve un valor de tipo booleano que indica el éxito de la operación al crear el fichero. Para nuestro ejemplo utilizamos este método para crear el fichero XML con el listado de los ficheros jpg del directorio indicado mediante el cuadro de diálogo Buscar carpeta.
Listo, ahora si ya hemos hablado sobre los puntos importantes que trata este comando, sobre todo de las nuevas funciones y los nuevos métodos que utilizamos. A continuación pongo el código de de los distintas partes que componen este comando.
Fichero JSFL de nombre Crea XML de imágenes.jsfl
//Declaración de variables
var oDoc;
var oCfg;
var sDirPath;
var sNameFile;
//Llamadas al método de configuración
this.config();
/**
* @method config
* Método encargado de la configuración del comando
* @return Void
*/
function config()
{
//Limpiamos el panel de salida
fl.outputPanel.clear();
//Obtenemos las referencias al documento
this.oDoc = fl.getDocumentDOM();
if(this.oDoc)
{
//Obtenemos una referencia al objeto de configuración de la interfaz gráfica
this.oCfg = this.oDoc.xmlPanel(fl.configURI + "Commands/XML/Crea XML de imágenes.xml");
//Asignamos el valor de la variable del path para listar las imágenes y el nombre del fichero xml
this.sDirPath = this.oCfg.sDirPath;
this.sNameFile = this.oCfg.sNameFile;
}
else
{
alert("Debes tener un documento abierto.");
}
}
//Comprobación de la respuesta del usuario sobre la ventana de introducción de datos
if ((this.oCfg) && (this.oCfg.dismiss == "accept"))
{
this.init();
}
else
{
//El usuario ha cancelado la operación
}
/**
* @method init
* Método encargado de la inicialización del comando
* @return Void
*/
function init()
{
if(this.sDirPath != "")
{
//Obtenemos la ruta del fichero XML y el contenido del fichero XML.
var sXmlPath = this.getUrlXmlFile();
var sXmlContent = this.getContentXml();
//Creamos el fichero e informamos al usuario el resultado de la operación.
var bSuccess = FLfile.write(sXmlPath, sXmlContent);
if(bSuccess)
{
alert("Se ha creado correctamente el fichero:\n " + sXmlPath);
}
else
{
alert("No se ha podido crear el fichero:\n " + sXmlPath);
}
}
else
{
alert("Debes seleccionar un directorio.");
}
}
/**
* @method getUrlXmlFile
* Método encargado de obtener la ruta del fichero XML que se generará, lo hace a partir del path del documento y realiza las conversiones pertinentes.
* @return String Cadena con la ruta del fichero XML que se generará.
*/
function getUrlXmlFile()
{
var ret = "";
//A partir del path del documento abierto componemos la ruta del fichero XML que será hermano del documento abierto.
var aTmp = this.oDoc.path.split("\\");
aTmp.pop();
var sUnidad = aTmp.shift();
var aTmp2 = sUnidad.split(":");
sUnidad = aTmp2.shift();
ret = "file:///" + sUnidad + "|" + aTmp.join("/") + "/" + this.sNameFile;
return ret;
}
/**
* @method getContentXml
* Método encargado de obtener el contenido del XML, lo hace a través de listar el directorio configurado, filtrando por tipo de fichero jpg.
* @return String Cadena con el contenido del fichero XML que se generará.
*/
function getContentXml()
{
var ret = '';
var aListFiles = FLfile.listFolder(this.sDirPath + "/*.jpg", "files");
ret += '\n';
ret += '\n';
var nTotal = aListFiles.length;
for (var i = 0; i < nTotal; i++)
{
ret += '\t\n';
}
ret += '\n';
return ret;
}
Fichero XML para la interfaz gráfica de nombre Crea XML de imágenes.xml
Código de la película SWF de la interfaz gráfica de nombre Crea XML de imágenes.swf
import mx.utils.Delegate;
//Asignamos el Foco al botón Aceptar
Selection.setFocus(this.aceptarBTN);
//Asignamos el Tema de color Azul
_global.style.setStyle("themeColor", "haloBlue");
this.browsePathBTN.onRelease = Delegate.create(this, onClickBrowserPath);
this.aceptarBTN.addEventListener("click", this);
this.cancelarBTN.addEventListener("click", this);
/**
* @method onClickBrowserPath
* Método encargado de abrir el cuadro de diálogo de selección de directorio.
* @return Void
*/
function onClickBrowserPath():Void
{
var jsflCode:String = "fl.browseForFolderURL('Selecciona el directorio que deseas listar.');";
var sDirPath:String = MMExecute(jsflCode);
pathImagenesTI.text = (sDirPath == "null") ? pathImagenesTI.text : sDirPath;
jsflCode = "fl.xmlui.set('sDirPath', '" + sDirPath + "');";
MMExecute(jsflCode);
}
/**
* @method click
* Método encargado de ejecutar las acciones para aceptar el comando y asignar el valor a la variable sDirPath.
* @param _oEvent Object Objeto de configuración asociada al evento click del botón.
* @return Void
*/
function click(_oEvent:Object):Void
{
switch(_oEvent.target._name)
{
case "aceptarBTN":
onClickAceptar(_oEvent);
break;
case "cancelarBTN":
onClickCancelar(_oEvent);
break;
}
}
/**
* @method onClickAceptar
* Método encargado de ejecutar las acciones para aceptar el comando y asignar el valor a la variable sDirPath.
* @param _oEvent Object Objeto de configuración asociada al evento click del botón.
* @return Void
*/
function onClickAceptar(_oEvent:Object):Void
{
var jsflCode:String = "fl.xmlui.set('sDirPath', '" + _oEvent.target._parent.pathImagenesTI.text + "');";
MMExecute(jsflCode);
jsflCode = "fl.xmlui.set('sNameFile', '" + _oEvent.target._parent.nombreFicheroTI.text + "');";
MMExecute(jsflCode);
jsflCode = "fl.xmlui.accept();";
MMExecute(jsflCode);
}
/**
* @method onClickCancelar
* Método encargado de ejecutar las acciones para cerrar la ventana del comando.
* @param _oEvent Object Objeto de configuración asociada al evento click del botón.
* @return Void
*/
function onClickCancelar(_oEvent:Object):Void
{
var jsflCode:String = "fl.xmlui.cancel();";
MMExecute(jsflCode);
}
Los ficheros de este tutorial los pueden descargar de aquí.
Para cualquier duda, sugerencia o comentario aquí estaré atento a vuestros comentarios.
Saludos!!!
Entradas relacionadas:
