Tutoriales


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:

<flash src="panel.swf" width="370"   height="230"  id="settings" />

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 += '<?xml version="1.0" encoding="utf-8" ?>\n';
	ret += '<data>\n';
	var nTotal = aListFiles.length;
	for (var i = 0; i < nTotal; i++)
	{
		ret += '\t<imagen src="' + aListFiles[i] + '"/>\n';
	}
 
	ret += '</data>\n';
 
	return ret;
}

Fichero XML para la interfaz gráfica de nombre Crea XML de imágenes.xml

<dialog title="Crea XML de imágenes"  >
	<flash src="../SWF/Crea XML de imágenes.swf" width="370"   height="230"  id="settings" />
	<property id="sDirPath" value=""/>
	<property id="sNameFile" value=""/>
</dialog>

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:

Hace poco hablaba con mis amigos Álvaro y Joan sobre como cargar contenidos en php que se encuentran en la parte privada de nuestro servidor y les dije que en cuanto tuviera un rato libre escribiría un tutorial, así es que aquí lo tienen.

Introducción, por lo general nuestro servidor suele venir con alguna de las siguientes carpetas:

  • web
  • www
  • httpdocs

En estas carpetas es donde se almacena todo el contenido al que el usuario puede acceder mediante http (salvo restringirlo mediante un fichero .htaccess).

Supongamos que tenemos un proyecto en el que necesitamos guardar los contenidos en la parte privada, es decir, en una carpeta por ejemplo al mismo nivel que nuestra carpeta pública (web, www, httpdocs) para así evitar que se acceda a estos contenidos mediante una petición http, pero que la aplicación necesitará acceder a estos contenidos. Aquí es donde viene tiene sentido este post, jejeje :D.

Bueno, para poder acceder a estos contenidos necesitamos contar con tres piezas:

La primera la tenemos que conseguir de alguna forma a través de nuestra aplicación, la segunda partirá del tipo de fichero y la tercera la obtenemos a partir de la primera, jejeje.

Ahora si, sin más historias pongo el código de ejemplo que hice para este pequeño tutorial:

<?php
//Configuramos la tabla de tipo
$tipos = array();
$tipos['xml'] = array("text", "xml");
$tipos['swf'] = array("application", "x-shockwave-flash");
$tipos['pdf'] = array("application", "pdf");
$tipos['ppt'] = array("application", "vnd.ms-powerpoint");
$tipos['doc'] = array("application", "vnd.ms-word");
$tipos['xls'] = array("application", "vnd.ms-excel");
$tipos['zip'] = array("application", "x-zip-compressed");
$tipos['rar'] = array("application", "x-rar-compressed");
$tipos['gif'] = array("image", "gif");
$tipos['png'] = array("image", "png");
$tipos['jpg'] = array("image", "jpg");
$tipos['flv'] = array("video", "x-flv");
 
//Definimos la ruta base de los ficheros
$ruta_base_fichero = "../contenidos/fichero_";
 
//Recogemos el tipo de fichero que nos solicitan
$tipo_fichero = $_GET['fichero'];
 
//Obtenemos la ruta del fichero combinando la rutaBaseFichero y el tipo_fichero
$ruta_fichero = $ruta_base_fichero . $tipo_fichero . "." . $tipo_fichero;
 
//Verificamos que el fichero exista, en caso contrario interrumpimos la ejecucion del proceso.
if(!file_exists($ruta_fichero)) die("El fichero solicitado no existe.");
 
//Obtenemos el tamanyo del fichero
$tamano_fichero = @filesize($ruta_fichero);
 
//Indicamos en la cabecera el tipo de fichero, para esto utilizamos la tabla de tipos que creamos en la parte superior
header("Content-Type:" . $tipos[$tipo_fichero][0] . "/" . $tipos[$tipo_fichero][1]);
 
//Indicamos en la cabecera el nombre del fichero, para esto utilizamos la variable $ruta_fichero, esto es para que el navegador entienda que el fichero no es contenidos.php sino el fichero solicitado
header("Content-Disposition: inline; filename=\"" . rawurlencode(basename($ruta_fichero)) . "\"");
 
//Indicamos en la cabecera el tamanyo del fichero
header("Content-Length:" . $tamano_fichero);
header("Accept-Ranges:" . $tamano_fichero);
@readfile($ruta_fichero);
?>

El código está comentado, casi línea a línea, para que quede más claro. Puede optimizarse muchísimo el código, se pueden encapsular constantes, crear clases para reutilizarlo y muchísimas más cosas, pero el fin de este ejemplo es que sirva para iniciarse y entender como consumir contenidos en php de la parte privada de nuestro sevidor.

A continuación los ejemplos:

Todos los ficheros están en la parte privada de mi servidor, por tanto desde http no se puede acceder a ellos, de tal forma que para acceder a ellos se pasa por un router que es un fichero php que puede acceder a los ficheros y devolverlos.

Un beneficio muy importante que obtenemos al hacer uso de esta metodología es que podemos almacenar en un fichero de log o en base de datos todas las peticiones que se hagan y así tener más controlado el acceso a estos ficheros, pero bueno este tema da para otro post así que lo dejamos de momento aquí :P.

Espero haberme explicado claramente, si tienen cualquier duda para eso están los comentarios. Ojalá les sea de utilidad. Saludos!!!

Artículos relacionados:

Leer información de ficheros SWF

Ahora veremos la segunda parte de los tutoriales de introducción a JSFL. En esta ocasión vamos a introducirnos en el tema de los comandos asistidos con interfaz gráfica.

Los comandos como vimos en la primera parte del tutorial son ficheros de texto plano con extensión JSFL que alojamos en nuestro equipo y que podemos ejecutarlos desde la opción comandos en la botonera principal del IDE de Flash. Pues bien, en el primer ejemplo requeríamos de la intervención del usuario para indicarnos que nombre se le iba a dar a los elementos seleccionados en la biblioteca, esto lo solucionamos con la función prompt de JavaScript, pero si queremos dotar de mayor inteligencia al comando se nos queda corto con el prompt o podría ser muy complejo su uso, ahí es donde entran en juego las interfaces.

Añadir una interfaz a un comando

Para esta tarea debemos utilizar XML2UI que al fin y al cambo es un fichero XML que sigue el estándar XUL, para más información mirar este post, porque el tema da para escribir mas de un post.

En nuestro caso vamos a añadir más funcionalidad a nuestro comando, permitiendo añadir un prefijo y/o un sufijo al nombre de los elementos seleccionados. Para esto crearemos el siguiente XML que nos ayudará a crear la interfaz gráfica de usuario.

<dialog title="Renombra Items v2" buttons="accept, cancel">
<vbox>
	<label value="Introduzca los valores para modificar los elementos"/>
	<separator/>
	<hbox>
		<label value="Prefijo"/>
		<textbox id="sPrefijo" size="10" maxlength="10" />
		<separator/>
		<label value="Nuevo nombre"/>
		<textbox id="sNuevoNombre" size="10" maxlength="10" />
		<separator/>
		<label value="Sufijo"/>
		<textbox id="sSufijo" size="10" maxlength="10" />
	</hbox>
	<separator/>
</vbox>
</dialog>

Para obtener la siguiente interfaz gráfica:

Con esto podremos obtener en una sola ventana hasta 3 valores que nos servirán para renombrar los items seleccionados en la biblioteca.

En la definición de nuestro XML hemos declarado 3 cajas de texto, para poder acceder al valor de estas cajas de texto nos hace falta diferenciarlas de alguna forma, para esto les asignamos un identificador en el campo id tal como lo hariamos en JavaScript o en Flex en los ficheros MXML.

<textbox id="sPrefijo" size="10" maxlength="10" />
<textbox id="sNuevoNombre" size="10" maxlength="10" />
<textbox id="sSufijo" size="10" maxlength="10" />

Ahora debemos modificar un poco el fichero JSFL, pues tenemos que indicarle que utilice el fichero XML que hemos creado como interfaz gráfica, para esta tarea debemos añadir el siguiente código:

var oCfg = fl.getDocumentDOM().xmlPanel(fl.configURI + "Commands/XML/Renombra Items v2.xml");

Como vemos asignamos el resultado del método xmlPanel a una variable, esto es porque a través de esta variable tendremos acceso a los valores que haya introducido el usuario en la interfaz gráfica, por ejemplo para nuestro caso:

oCfg.sPrefijo;
oCfg.sNuevoNombre;
oCfg.sSufijo;

Lo siguiente que tenemos que hacer es una comprobación para verificar que el usuario ha introducido por lo menos un valor en la ventana y así proceder a realizar el cambio de nombres, la comprobación la realizamos de la siguiente manera:

if( oCfg.sPrefijo != "" || oCfg.sNuevoNombre != "" || oCfg.sSufijo != "" )
{
	//Bien, podemos seguir adelante
}
else
{
	alert("Es necesario rellenar por lo menos uno de los tres campos para renombrar los elementos.");
}

Perdonad, se me ha olvidado una parte súper importante, la respuesta de usuario, pues existe la posibilidad de cerrar la ventana y no querer renombrar los elementos, esto lo podemos verificar de la siguiente forma:

if (oCfg.dismiss == "accept")
{
	//Bien, podemos seguir adelante
}
else
{
	//El usuario ha cancelado la operación
}

Ahora si, una vez que hemos verificado que el usuario acepta la operación y que además ha introducido por lo menos uno de los tres valores, ya nos encontramos en condiciones de realizar el renombre de los items, así que realizamos la siguiente modificación dentro del bucle de los elementos seleccionados:

oItem = aItems[i];
sNombreActual = oItem.name.split("/").pop();
sNombre = (this.sNuevoNombre != "") ? this.sNuevoNombre + "_" + (i + 1) : sNombreActual ;
this.oLib.selectItem(oItem.name);
this.oLib.renameItem(this.sPrefijo + sNombre + this.sSufijo);

Con esto dejamos listo nuestro comando Renombra Items v2, aquí dejo los archivos de este tutorial, se deben copiar en la ruta de los comandos del sistema.

Saludos y espero que sea de utilidad.

Más información:

X-Flash: JSFL

Este es el primero de una serie de tres tutoriales que pienso escribir sobre JSFL, donde mi intención es mostrar de la manera más sencilla posible el uso de esta herramienta en sus distintas aplicaciones.

Para este primer tutorial haremos un comando muy sencillo que únicamente utilizará un fichero de tipo JSFL, su tarea es muy sencilla, renombrará items de la biblioteca. Pero antes quizá deberiamos saber que son y donde se almacenan estos ficheros JSFL.

Pues bien, los ficheros JSFL son ficheros de texto plano con la extensión jsfl que contienen código JSFL y que podemos editar con el block de notas o nuestro editor de código preferido, en mi caso utilizo Flash Develop.

Los ficheros JSFL se almacenan principalmente en la ruta de instalación de Flash y también en nuestro perfil, en mi caso estoy trabajando bajo un Windows XP y la ruta donde tengo mis comandos es la siguiente:

C:\Documents and Settings\Usuario\Configuración local\Datos de programa\Adobe\Flash CS3\es\Configuration\Commands

Bueno, ahora si nos podemos poner a escribir nuestras primeras líneas de código JSFL.

//Declaración de variables
var oDoc;
var oLib;

Hasta ahora todo es muy fácil, ¿no? ni si quiera perece que estemos programando en JSFL, jejeje, pues de eso se trata, vamos con la siguiente parte, la configuración y comprobación principal del documento.

//Obtenemos las referencias al documento y a la biblioteca
this.oDoc = fl.getDocumentDOM();
if(this.oDoc)
{
    this.oLib = this.oDoc.library;
}
else
{
    alert("Debes tener un documento abierto.");
}

Aquí empezamos a ver cosas nuevas, por ejemplo fl.getDocumentDOM(), esta expresión nos permite obtener una referencia al documento actual en Flash, en el caso que no se tenga abierto ningún documento no devolvería nada y en la comprobación que hacemos llegariamos a un amigo más conocido, el alert que nos indica que debemos tener un documento abierto. Continuemos, en el caso que si exista el documento obtendriamos la referencia a la biblioteca a través de la propiedad library del documento.

Veamos la siguiente parte:

//Obtenemos los elementos seleccionados y el total
var aItems = this.oLib.getSelectedItems();
var nTotalItems = aItems.length;
if(nTotalItems &gt; 0)
{
    //...
}
else
{
    alert("Debes seleccionar algún item de la biblioteca.");
}

Aquí volvemos a ver algo nuevo, la expresión this.oLib.getSelectedItems() es una llamada a un método del objeto library que nos devuelve un array con los items seleccionados en la biblioteca y aquí también hacemos una comprobación para continuar con la correcta ejecución del comando o mostrando una ventana de alerta informando al usuario que debe seleccionar algún item en la biblioteca.

En este momento ya nos encontramos en condiciones de preguntarle al usuario cual será el nuevo nombre que desea dar a los items, para esto no necesitamos realmente JSFL pues lo hacemos con JavaScript:

//Obtenemos el nuevo nombre
var sNuevoNombre = prompt("Nuevo nombre");

Y ahora si, ya con todo listo podemos proceder a la parte importante del comando, renombrar los items seleccionados:

var oItem;
for(var i = 0; i &lt; nTotalItems; i++)
{
    oItem = aItems[i];
    this.oLib.selectItem(oItem.name);
    this.oLib.renameItem(sNuevoNombre + "_" + (i + 1));
}

Lo que hacemos es crear una varible para almacenar la referencia al item actual, luego creamos un bucle para recorrer los elementos seleccionados, obtenemos la referencia al item actual, utilizamos el método selectItem del objeto library para seleccionar un nuevo item, esto es porque para que funcione el método renameItem del objeto library es necesario haber seleccionado antes el item que se dese renombrar.

Y listo, con esto tenemos nuestro primer comando funcionando y todo desde un fichero JSFL. Podéis descargar el fichero de ejemplo de aquí.

Para cualquier duda, sugerencia o comentario estaré encantado en recibirlas y responderlas.

Más información:

Mi presentación para los talleres Subflash 2008.

Lista de recursos sobre JSFL.

En menos de una semana estaré con mis amigos de subflash en los talleres de verano disfrutando de un fin de semana en Alicante, con playita y unas sesiones muy jugosas, una de ellas la impartiré yo y justamente estoy rematando lo últimos detalles de mi presentación, estoy con la parte de recursos y enlaces, así que he vaciado todos mis rss, notas,  TODO list y todo aquello que he ido guardando durante esta incursión que llevo en el mundo de JSFL para poder compartirlo con todo aquel bienaventurado que esté presente durante mi ponencia.

Pero como no quería dejarlo sólo ahí he decidido escribir este post para que así alguién más se beneficie. Así que allá vamos.

Libros

Tutoriales

Presentaciones

Paneles

Recursos

Extensiones

Espero que les sea de utilidad. Salu2…

Vía Serge Jespers me entero que adobe a  creado una serie de video tutoriales para aprender Flex en una semana, para todos los que tengan vacaciones y un hueco o ganas de aprender Flex es una oportunidad única. Los video vienen acompañados de ejercicios en PDF para practicar y no sólo ser un observador.

Me gustan mucho los pasos que está dando adobe para acercar la maravillosa herramienta que es Flex hasta nosotros, con las conferencias, los libros y ahora los video tutoriales.

Más información:

Serge Jespers

Flex in a week