Esta es la tercera entrega de los tutoriales sobre JSFL que en su momento me propuse escribir, con ésta cerraré el paquete de introducción, pero no todo termina aquí, pues han cambiado mucho las cosas desde que empecé a escribir, he aprendido nuevas cosas, me he tenido que enfrentar a nuevos retos y tengo nuevas ideas sobre que escribir y como aplicar estos conocimientos a situaciones reales para ayudarnos en nuestro día a día. Bueno, sin más preámbulos vamos a lo que nos compete.

En esta ocasión veremos los Paneles, los paneles son películas SWF que almacenamos en las siguientes rutas respectivamente en función del sistema operativo:

• Windows® VistaTM:

unidad de arranque\Users\nombre de usuario\Local Settings\Application Data\Adobe\Flash CS4\idioma\Configuration\WindowSWF

• Windows XP:

unidad de arranque\Documents and Settings\nombre de usuario\Local Settings\Application Data\Adobe\Flash CS4\idioma\Configuration\WindowSWF

• Mac OS® X:

Macintosh HD/Usuarios/nombre de usuario/Librería/Application Support/Adobe/Flash CS4/idioma/Configuration/WindowSWF

El acceso a estos paneles lo hacemos a través del menú Ventana -> Otros paneles, aquí encontraremos todos los Paneles que creemos dentro del directorio WindowSWF.

Bueno, básicamente podemos hacer todo lo que hacen los comandos, pero con la ventaja de tenerlo siempre abierto.

Pues que por ejemplo para ejecutar un comando tenemos que hacerlo a través del menú Comandos, con lo cual perdemos el área de trabajo, esto si utilizamos un comando basado en interfaz gráfica, pero si lo hacemos con un comando sencillo no tenemos forma de configurar parámetros con lo que perdemos más valor. Sin embargo con un Panel tenemos siempre visible el área de trabajo, tenemos acceso a toda la configuración que deseemos implementar en el panel y además podemos crear previews del resultado puesto que el panel es una película swf en la que podemos hacer tanto como deseemos.

Así es, esta es la parte más poderosa de los Paneles, que son películas SWF, con lo cual las podemos crear con lo que más cómodos nos sintamos, por ejemplo con Flex, con Flash, con mtasc, todos estos los he probado y funcionan perfectamente, seguro que también se puede con HAXE aunque no lo he probado.

Bueno, realmente no es truco, pero bueno la magia que nos permite hacer esto es una función muy sencilla que lleva mucho tiempo ahí y que es más potente de lo que ha simple vista parece, la función que nos permite utilizar a nuestros queridos SWF’s como interfaz de los Paneles es la función MMExecute, a ésta función le tenemos que pasar como parámetro código JSFL y listo.

NOTA del escritor, osea yo, jejejeje
Una buena práctica es el encapsulamiento y además conseguir que nuestro Panel tenga poco acoplamiento. Esto es más sencillo de lo que suena, simplemente quiere decir que separemos el código AS y el código JSFL.

PARTE ActionScript, lógica de la vista del Panel

Bueno y ahora si por fin después de esta introducción ya podemos hablar sobre la forma en la que vamos a poner en práctica lo aprendido (pero que dice este tío, si lo único que hemos visto es la función MMExecute y una ruta rara) . Vamos a crear un Panel que nos ayude a crear tableros de ajedrez, si esos bellos tableros que se componen de 64 casillas, 8 filas y 8 columnas, alternando dos tipos de casillas.

Recuerdo que hace tiempo tomé un taller sobre ActionScript avanzado en el Flash For México 2004 que impartió Fernando Flores, ahí antes de empezar a picar código nos dijo una cosa que siempre recordaré y que sigo aplicando a diario en mis proyectos, la lista de la compra, o sea lo que queremos, lo que necesitamos de nuestra aplicación. En este caso que es lo que queremos que tenga este Panel, bueno, pues mi lista de la compra para este Panel es la siguiente:

• Definir el tamaño de las casillas.
• Definir el color de las casillas.
• Tener un preview antes de crearlo.

Esta lista de la compra nos ayuda a saber que necesitaremos 2 instancias del Componente ColorPicker, una instancia del Componente NumericStepper y para ejecutar acciones el buen amigo Button. Con ellos tendremos la lógica de AS que nos ayudará a conseguir los valores necesarios para crear nuestro tablero.

Una vez que conseguimos los valores necesario hacemos la llamada al fichero JSFL encargado de crear el tablero, la llamada a este fichero es realmente la clave de éste Panel. El código es el siguiente:

MMExecute('fl.runScript( fl.configURI + "WindowSWF/JavaScript/Tablero.jsfl", "createBoard", ' + this.comColor1.selectedColor + ', ' + this.comColor2.selectedColor + ', ' + this.comNumericStepperSize.value + ' );');

La explicación de ese trozo de código es la siguiente:

MMExecute, esta función recibe como parámetro el código JSFL que deseamos ejecutar.

fl.runScript, esté método de sirve para ejecutar scripts con código JSFL. Recibe un parámetro obligatorio y dos opcionales, que en nuestro caso utilizamos.

• El primero es la ruta del fichero JSFL que se desea ejecutar.
• El segundo es el nombre de la función que se desea ejecutar dentro del fichero JSFL.
• El tercero son los parámetros que enviamos a la función.

fl.configURI, esta propiedad nos devuelve la ruta de la carpeta configuration de Flash del equipo.

Hasta ahora lo único que hemos hecha ha sido simplemente llamar a un fichero JSFL alojado en la carpeta configuration/WindowSWF/JavaScript/Tablero.jsfl, hemos indicado que deseamos ejecutar la función createBoard dentro de este fichero y le hemos pasado los parámetros necesarios (Color1, Color2 y Tamaño).

Y ya está, nuestro Panel es así de simple, podemos hacer todo lo que nos venga en gana para hacerlo más bonito, con animaciones, diseños y demás, pero lo mínimo necesario para funcionar es lo que hemos hecho hasta ahora. Bueno, ahora si empieza la parte interesante que es la que desde el principio quiero explicar, lo que es realmente código JSFL y es el encargado de crear el tablero de Ajedrez. ¿Preparados? … Pues vamos allá.

Pero antes una imagen que como queda nuestra interfaz:

PARTE JSFL, lógica de … algo que no es la vista del Panel

Llegamos a este punto con una parte muy importante ya definida y es la función a la que se llama desde ActionScript con la función MMExecute, si, así es, me refiero a la función createBoard, pero no sólo sabemos que tenemos que crear esa función, también sabemos que recibe tres parámetros, con lo cual ya nos hacemos a la idea de algunas tareas que tendremos que hacer. Pero bueno, vamos a pensarlo un poco más para ver que elementos necesitaremos, teniendo en cuenta que el tablero sea fácil de usar y modificar.
Bueno, pues partiendo de estas premisas y pensando lo más fácil posible, planteo la creación de tres MovieClip’s.

1. Caja 1, que será un cuadrado de las dimensiones y el color indicados por parámetro.
2. Caja 2, que es lo mismo que la caja 1 pero con el otro color.
3. Tablero, éste tendrá 32 instancias de cada Caja para formar el tablero.

Bueno, ahora si con las cosas claras es más fácil programar, entonces vamos por partes, hemos dicho que necesitamos crear MovieClip’s, esto es muy sencillo, para hacerlo necesitamos utilizar el método addNewItem del Objeto library, éste método recibe dos parámetros, el tipo de Item y el nombre del mismo. A continuación un ejemplo:

fl.getDocumentDOM().library.addNewItem("movie clip", "nombre del MovieClip");

Luego necesitamos editar el MovieClip creado en el paso anterior, esto lo hacemos con el método editItem del Objeto library, éste método recibe como parámetro el nombre del Item que deseamos editar. A continuación un ejemplo:

fl.getDocumentDOM().library.editItem("nombre del MovieClip");

Ahora dentro del MovieClip antes de dibujar el cuadro debemos definir el color, esto lo hacemos con el método setCustomFill del Objeto Document, éste método recibe un objeto como parámetro, donde indicamos el color y el estilo de relleno. A continuación un ejemplo:

fl.getDocumentDOM().setCustomFill( {color:_nColor, style:"solid"} );

Una vez que hemos definido el color del cuadro ya podemos dibujarlo, esto lo hacemos con el método addNewRectangle del Objeto Document, éste método recibe dos parámetros, un objeto con la posición y las dimensiones del rectángulo que crearemos y el factor de redondeo de las esquinas del mismo. A continuación un ejemplo:

fl.getDocumentDOM().addNewRectangle( { left:0, top:0, right:Tamaño, bottom:Tamaño }, 0);

Listo, con estos pasos hemos conseguido crear un MovieClip, editarlo, definir un color de relleno y dibujar un cuadro, ahora simplemente tenemos que salir del modo edición de éste MovieClip, esto lo hacemos con el método exitEditMode del Objeto Document. A continuación un ejemplo:

fl.getDocumentDOM().exitEditMode();

Repetimos estos pasos y conseguiremos crear el segundo cuadro.

NOTA
Una buena práctica es encapsular estos pasos en una función para reutilizarla en más ocasiones.

Bueno, con esto ya tenemos dos MovieClip’s en la biblioteca, del tamaño y color deseados, ahora nos queda montar el tablero. Para esto necesitaremos crear otro MovieClip e instanciar 64 Items de la biblioteca, 32 de un color y 32 de otro. Esto lo conseguiremos con el siguiente código,:

fl.getDocumentDOM().library.addNewItem("movie clip", "tablero");
fl.getDocumentDOM().library.editItem("tablero");
var n = 0;
for (var i = 1; i <= 8; i++)
{
    for (var j = 1; j <= 8; j++)
    {
        var sItemName = (n % 2 == 0) ? "casilla1" : "casilla2";
        fl.getDocumentDOM().library.addItemToDocument({x:(j - 1) * _nSize, y:(i - 1) * _nSize}, sItemName);
        n++;
    }
    n++;
}
fl.getDocumentDOM().exitEditMode();

De ese código la parte nueva que vemos de JSFL es el método addItemToDocument, del Objeto library, éste método nos permite instanciar elementos de la biblioteca en el escenario, recibe dos parámetros, el primero es un objeto con las coordenadas X e Y en las que deseamos instanciar el Item y el segundo es una cadena con el nombre del Item que deseamos instanciar.

Y listo, eso ha sido todo, quizá contado trozo a trozo no tenga mucho sentido, pero mi intención era explicar cada uno de los método utilizados. A continuación pongo el código JSFL completo://Declaración de variables

var oDoc;
var oLib;
var sBoxName1 = "box_1";
var sBoxName2 = "box_2";
var sBoardName = "board";

/**
* @method	createBoard
* Método encargado de crear un tablero.
* @param	_nColor1	Number		Número que indica el color primario del tablero
* @param	_nColor2	Number		Número que indica el color secundario del tablero
* @param	_nSize		Number		Número que indica el tamaño de las casillas
* @return	Void
*/
function createBoard(_nColor1, _nColor2, _nSize)
{
    if (this.config())
    {
        //Lamada al método createBox para crear MovieClp's
        this.createBox(this.sBoxName1, _nSize, _nColor1);
        this.createBox(this.sBoxName2, _nSize, _nColor2);

        //Hacemos una comprobación, si existen el item en la biblioteca lo eliminamos.
        if (this.oLib.itemExists(this.sBoardName))	this.oLib.deleteItem(this.sBoardName);

        //Creamos y editamos el MovieClip tablero
        this.oLib.addNewItem("movie clip", this.sBoardName);
        this.oLib.editItem(this.sBoardName);
        var n = 0;
        for (var i = 1; i <= 8; i++)
        {
            for (var j = 1; j <= 8; j++)
            {
                var sItemName = (n % 2 == 0) ? this.sBoxName1 : this.sBoxName2;
                //Añadimos al MovieClip una instancia de la casilla en su posición correspondiente
                this.oLib.addItemToDocument({x:(j - 1) * _nSize, y:(i - 1) * _nSize}, sItemName);
                n++;
            }
            n++;
        }

        //Salimos del modo de edición y volvemos al escenario
        this.oDoc.exitEditMode();
    }
}

/**
* @method	createBox
* Método encargado de crear un Item de tipo MovieClip en la biblioteca, editarlo y dentro crear un cuadro de tamaño y color indicados por parámetro.
* @param	_sName		String		Cadena que indica el nombre del Item que se creará en la biblioteca.
* @param	_nSize		Number		Número que indica el tamaño del cuadro que se creará.
* @param	_nColor		Number		Número que indica el color del cuadro que se creará.
* @return	Void
*/
function createBox(_sName, _nSize, _nColor)
{
    //Hacemos una comprobación, si existen el item en la biblioteca lo eliminamos.
    if (this.oLib.itemExists(_sName))	this.oLib.deleteItem(_sName);

    //Añadimos y editamos el MovieClip
    this.oLib.addNewItem("movie clip", _sName);
    this.oLib.editItem(_sName);
    //Definimos el color y estilo del trazo
    this.oDoc.setCustomStroke( {color:"#000000", thickness:1} );
    //Definimos el color y estilo de relleno del cuadro
    this.oDoc.setCustomFill( {color:_nColor, style:"solid"} );
    //Dibujamos el cuadro
    this.oDoc.addNewRectangle( { left:0, top:0, right:_nSize, bottom:_nSize }, 0);
    //Salimos del modo de edición y volvemos al escenario
    this.oDoc.exitEditMode();
}

/**
* @method	config
* Método encargado de la configuración del JSFL
* @return	Void
*/
function config()
{
    fl.showIdleMessage(false);
    fl.outputPanel.clear();

    var ret = false;

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

    return ret;
}

Aquí se pueden descargar los ficheros de este tutorial. Cualquier, duda, sugerencia o comentario, aquí estaré.

Entradas relacionadas:

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

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

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 .

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

• La ruta del fichero y el nombre del fichero
• Conocer el content type (MIME)
• Tamaño del fichero

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:

• Fichero xml.
• Fichero swf.
• Fichero pdf.
• Fichero ppt.
• Fichero doc.
• Fichero xls.
• Fichero zip.
• Fichero rar.
• Fichero gif.
• Fichero png.
• Fichero jpg.
• Fichero flv, jejeje, este no lo subí .

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í .

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.

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.

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 > 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 < 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.

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

• Extending Flash CS 3: Documentación Oficial
• Extending Flash MX 2004: Complete Guide and Reference to JavaScript Flash

Tutoriales

• Tutorial introductorio a jsfl con ejemplos (en español)
• Introducing the JSFL File API (en inglés)
  
• Tutorial introductorio para la creación de paneles (en inglés)
• Organizing Library using JSFL (en inglés)
• Tutorial introductorio a jsfl (en inglés)
• Extending Flash MX 2004: Using History Panel (en inglés)
  
• Flash Panels – Inspiration, Creation and Implementation (en inglés)

Presentaciones

• Extending Macromedia Flash MX 2004 with Flash JavaScript (JSFL)

Paneles

• Panel para ejecutar, editar y crear scripts JSFL
• gProject (Panel de Proyectos mucho más potente que el de Flash)

Recursos

• flashguru
• 5etdemi
• joangarnet
• after-hours
• dynamicflash

Extensiones

• FileSystem API
• Muchas extensiones en 5etdemi

Espero que les sea de utilidad. Salu2…

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

Los más populares o (jejeje) con los que he trabajado son CVS y SVN, es precisamente este último del que trata este post, porque nuestro incansable y siempre dispuesto a compartir Zárate ha escrito otro nuevo eBook de la familia de loqueyosede.

El libro está bastante completo y como viene siendo costumbre de Juan, nos cuenta su peculiar punto de vista  dando la chapa donde hace falta. Abarca temas desde la instalación, las acciones básicas de crear repositorios, añadir, actualizar, etcétera.

Enlaces de interés:

loqueyosede

LoqueyosédeSVN