INTRODUCCIÓN

Si recordamos el anterior post dónde empezamos a hablar sobre el uso de Flex para desarrollar Paneles y teniendo en cuenta que a mi querido amigo Jorge no le acabó de convencer .

Bueno para ser sinceros hay que contar la historia completa, no le acabó de convencer al principio, luego al ver de que se trataba ya le gustó:

A continuación veremos como hacer mucho más, veremos como utilizar las bondades de Flex para crear fácilmente ricas interfaces y como comunicarlo con JSFL para ejecutar las tareas que nos interesen.

En esta ocasión espero que os guste a todos

DESARROLLO

PARTE FLEX

En el post anterior vimos como utilizar el método MMExecute para poder ejecutar código JSFL desde nuestras películas swf, pero para los que somos un poco especiales a la hora de programar y que nos gusta tener las cosas organizadas, separadas, modularizadas para poder escalarlas fácilmente y reutilizarlas … uyy ya me fuí por las ramas … bueno, el tema es que no es la mejor solución mezclar la lógica JSFL con el interfaz, porque hacer cambios y probar puedes ser mortal y generar muchos errores así como una enorme pérdida de tiempo.

Bueno, lo anterior sirve de introducción para presentarles el método runScript del objeto fl, este método nos permite desde código JSFL ejecutar un script externo al código. Este método recibe como parámetro obligatorio la ruta del script JSFL que deseamos ejectuar, como parámetros opcionales el nombre del método y los parámetros que enviamos al método.

fl.runScript("file:///C|/testScript.jsfl", "testFunct", 10, 1);

Además vamos a utilizar la propiedad configURI del objeto fl, esta propiedad nos devuelve el path del usuario del directorio Configuration expresado en formato file:/// , en el cual encontramos los directorios Commands y WindowSWF por ejemplo. Y esto lo queremos para hacer algo parecido a esto:

fl.runScript( fl.configURI + "Commands/Test.jsfl" );

Bueno, esto nos servirá al final para poder ejecutar desde nuestras aplicaciones Flex código JSFL que tengamos centralizado en la carpeta Commands por ejemplo, algo parecido a lo siguiente:

MMExecute('fl.runScript(fl.configURI + "Commands/Test.jsfl", "testFunct", 10, 1)');

Vale, hasta ahora vamos bien. Todo lo que hemos visto lo vamos a utilizar para crear una panel que particularmente me resulta muy útil. Crearemos el Panel Gallery.

PARTE JSFL

Ahora si vamos que se va a poner bueno el tema. Jejeje, es necesario un poco de relax porque sino resulta difícil leer y escribir también, porque aquí somos dos, tu querido lector y yo.

Lo que pasa es que está semana ha empezado bien, pero de pronto el lunes por la noche nos dimos cuenta que ya no quedaban más episodios de la 4ª temporada de Dexter por ver, así que nos pusimos a buscar algo más y encontramos la 5ª temporada de Héroes, así que estas noches me han tenido un poco entre la serie y escribir, preparar y desarrollar este tutorial. Bueno ya que nos relajamos y hablamos un poco, creo que podemos continuar.

Ya por último y para terminar con este pequeño lapso de relax, quiero recomendar una serie súper interesante que vi hace poco, me refiero a Defying gravity, este es otro de los tesoros que he descubierto gracias a Twitter.

Panel Gallery, este panel sirve para tener un pequeño visor de imágenes del directorio que configuremos en nuestro equipo dentro de Flash, desde ahí podemos ver, seleccionar e importar las imágenes que deseemos al documento que estemos editando.

Para desarrollar este panel necesitaremos obtener la ruta de la carpeta que deseamos visualizar, esto lo podemos hacer con el método browseForFolderURL del objeto fl, este método recibe como parámetro una cadena en la que especificamos el mensaje que mostrará al usuario y nos devolverá la ruta que especifique el usuario en formato file:///. Por ejemplo:

var folderURI = fl.browseForFolderURL("Select a folder.");

Una vez que tenemos la ruta lo siguiente es listar las imágenes que tenemos en ese directorio, esto lo hacemos con el método listFolder del objeto FLfile, este método recibe como parámetro obligatorio la ruta de la cual queremos listar directorio o imágenes (en nuestro caso es la ruta que obtuvimos en el paso anterior) y como parámetro opcional indicamos el tipo de lista que deseamos, los valores admitidos son: “files” o “directories“. En nuestro caso utilizaremos “files“, pero no sólo eso, el primer parámetro también nos permite añadir una máscara para que la búsqueda filtre por un tipo de fichero, está máscara funciona igual que en un terminal, por ejemplo la máscara que utilizaremos nosotros será: “*.jpg“. El ejemplo quedaría de la siguiente forma:

var fileMask = "*.jpg";
var list = FLfile.listFolder(folderURI + "/" + fileMask, "files");

Ahora si ya estamos muy cerca. Bueno, una vez que obtenemos la lista de imágenes vamos a almacenarlas en un componente Tree para mostrarlas al usuario y para facilitar el uso utilizaremos el evento change para cargar la imagen seleccionada y mostrarla en un componente Image, por último utilizaremos el evento click del componente Image para importar la imagen seleccionada al documento fla. Esto último lo hacemos con el método importFile del objeto Document, este método recibe como parámetro obligatorio la ruta del fichero que deseamos importar en formato file:///, y como parámetro opcional un valor booleano que indica si deseamos importar el fichero a la biblioteca o no, el valor por defecto es false y lo que hace es importarla a la biblioteca y además instanciarla en el escenario. Por ejemplo:

fl.getDocumentDOM.importFile(URI);

Y con esto lo hemos resuelto. YATA!!!

NOTAS

Para acompañar este tutorial y como premio por haberte leído todo he creado como es habitual un fichero de ejemplo, pero con unas perlitas extras de funcionalidad.

He dividido el panel en 4 partes:

• Document, encontraremos herramientas para modificar on the fly el color de fondo del documento y las dimensiones.
• Gallery, el resultado del tutorial que hemos explicado.
• Library, una herramienta para renombrar varios items de la biblioteca al mismo tiempo, pudiendo añadir prefijo, sufijo o modificar completamente el nombre.
• Utils, un botón para recargar las herramientas, muy útil cuando se desarrollan Tools (herramientas) con JSFL.

Disculpad el desorden del post, es lo que tiene escribir a ratos en el tren y por la noche mientras se ven series. En un principio tenía una idea de como quería escribir un post, pero eso fue hace tanto tiempo que al final tenía otra idea diferente, así que las cosas han salido como la pueden ver aquí. Espero que os sea de utilidad.

DESCARGAS

Bueno, las descargas son en este caso son:

• Extensión auto instalable mediante Adobe Extensión Manager. Panel nomeva MXP.
• Paquete ZIP con Panel swf y ficheros JSFL necesarios para instalar manualmente el Panel.
• Proyecto Flex con todo el código necesario para compilar y ver las tripas del Panel.

EJEMPLO

Ejemplo Panel nomeva – Flex + JSFL 2ª parte from Luis Adrián Rosas Wiedfeldt on Vimeo.

ALGO MÁS

Si, lo único que falta son vuestros comentarios, opiniones para tener un feedback y saber que os gusta y que os disgusta, jejeje.

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
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save
• Tutorial JSFL – MMExecute, creación de Panel con Flex
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)
• Tutorial JSFL – Introducción a herramientas (tools)
• Tutorial JSFL – Localización de contenidos (comando)

Antes o después de leer este tutorial sería interesante leer el este otro post sobre la introducción a la creación de Paneles.

INTRODUCCIÓN

La idea es crear un panel que nos ayude a modificar el fondo del documento FLA, pero más rápidamente, si, sé que cambiar el fondo del documento es muy fácil, pero soy un poco maniático y la verdad tener que abrir una ventana, seleccionar un color y luego dar click en aceptar son muchos pasos, me gustaría algo mucho más rápido, algo como hacer rollOver sobre un componente ColorPicker y listo.

DESARROLLO

Para ejecutar código JSFL en una película swf generada con Flex utilizaremos el método MMExecute que encontramos en el paquete adobe.utils por ejemplo:

import adobe.utils.MMExecute;
MMExecute("jsfl code");

El método MMExecute recibe un parámetro de tipo String en el cual indicaremos el código JSFL que deseamos ejecutar. Además devuelve un valor también de tipo String que es la representación en cadena del resultado de la ejecución del código.

Parte JSFL

Vale, ahora que sabemos como ejecutar código JSFL necesitamos saber que código ejecutar. Lo que queremos modificar es una propiedad del documento FLA, así es que antes que otra cosa debemos obtener una referencia al documento, esto lo hacemos con el siguiente código:

var oDoc = fl.getDocumentDOM();

Y para acceder y modificar el color de fondo utilizamos la propiedad backgroundColor que es de lectura y escritura:

oDoc.backgroundColor

Listo, por lo menos la parte de JSFL, ahora tenemos que integrar este código en una aplicación Flex.

Parte FLEX

Utilizaremos un componente ColorPicker este componente entre otras cosas emite los eventos:

• change
• close
• itemRollOver
• itemRollOut
• open

Los que en nuestro caso nos interesan son los eventos change e itemRollOver así que como en cualquier otra aplicación utilizamos el siguiente código:

<mx:ColorPicker id="cpBackgroundColor" x="89" y="10" change="onChange(event);" itemRollOver="onItemRollOver(event);" />

Ahora simplemente en los métodos onChange y onItemRollOver es donde tendremos que utilizar el método MMExecute de la siguiente manera:

import mx.events.ColorPickerEvent;
import adobe.utils.MMExecute;

private function onChange(_oEvent:ColorPickerEvent):void
{
    if (this.isDocumentExists())
        MMExecute("fl.getDocumentDOM().backgroundColor = Number(" + _oEvent.color + ");");
}

private function onItemRollOver(_oEvent:ColorPickerEvent):void
{
    if (this.isDocumentExists())
        MMExecute("fl.getDocumentDOM().backgroundColor = Number(" + _oEvent.color + ");");
}

private function isDocumentExists():Boolean
{
    var ret:Boolean = false;
    if (MMExecute("fl.getDocumentDOM();") != "null")
        ret = true;

    return ret;
}

INSTALACIÓN

Listo, el resultado no lo podremos ver en ejecución a menos que llevemos el swf resultante a la carpeta de Paneles de Flash, es decir al directorio WindowSWF dentro del directorio Configuration de la instalación.

Según el sistema operativo:

Windows® VistaTM:

• unidad de arranque\Users\nombre de usuario\Local Settings\Application Data\Adobe\Flash

CS4\idioma\Configuration\

Windows XP:

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

Mac OS® X:

• Macintosh HD/Usuarios/nombre de usuario/Librería/Application Support/Adobe/Flash

CS4/idioma/Configuration/

EJECUCIÓN

Para ejecutar el Panel debemos acceder al menú Ventana -> Otros paneles -> Change Background Color a continuación un ejemplo de como ejecutar y su funcionamiento:

Ver ejemplo

DESCARGAS

Como es habitual a continuación podéis descargar los fuentes y el instalador del Panel:

• Fichero MXML de Flex por si te interesa ver el código.
• Fichero SWF del Panel para instalar manualmente el Panel.
• Instalador MXP del Panel para instalar automáticamente la extensión.

Saludos, cualquier duda o comentario será bienvenido.

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
• Tutorial JSFL – Introducción a Paneles
• Tutorial JSFL – Panel Auto Save
• Tutorial JSFL – Guardar copia FLA 1/2 (comando)
• Tutorial JSFL – Introducción a herramientas (tools)
• Tutorial JSFL – Localización de contenidos (comando)

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