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:

• Recursos JSFL
• Tutorial JSFL – Introducción a comandos
• Tutorial JSFL – Comandos con interfaz gráfica