Categories
Flex JSFL Paneles Tutoriales

Tutorial JSFL – Creación de Paneles con Flex 2ª parte

Bienvenidos a este nuevo tutorial de jsfl, en esta ocasión continuaremos viendo los Paneles y como desarrollarlos con Adobe Flex.

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

Tweet de solisargBueno 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ó:

Ahora si, ya veo de que se trataba ese tweet

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

Categories
Flash JSFL Paneles

Tutorial JSFL – MMExecute, creación de Panel con Flex

Bienvenidos, en esta ocasión retomaremos el tema de los Paneles pero enfocado a su creación mediante Adobe Flex.

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

Categories
Flash JSFL Tutoriales

Tutorial JSFL – Panel Auto Save

Memoria USB Lego

Bienvenido querido lector a la sección de tutoriales en nomeva, en esta ocasión vamos a crear con Flash mediante JSFL y ActionScript un Panel que realice la tarea de guardar automáticamente el documento Fla en edición.

NOTA
Puede ser interesante leer antes o después este otro post de Introducción a Paneles para saber qué son, dónde van y cómo funcionan.

Panel Autoguardado

Auto Save es un Panel (plugin) que en un principio(*) tiene una misión muy importante, guardar automáticamente el documento (fla) con el cual estamos trabajando.

(*)Digo en un principio porque al pensarlo bien, tal como funciona el IDE de Flash y sobre todo con la gran cantidad de fallos (bugs) que he encontrado en esta nueva versión de Adobe Flash CS4 Professional no estoy 100 % seguro si nos podrá ayudar o no. 😀 Con esto quiero decir que el uso de este Panel es bajo tu propio riesgo.

Ahora si, dicho todo lo anterior hablemos del Panel.

CONFIGURACIÓN Y USO

Es muy fácil de configurar el Panel, son únicamente tres valores:

  • Frecuencia: Como su nombre indica sirva para configurar la frecuencia el minutos del auto guardado.
  • Preguntar: Si está activado antes de guardar te preguntará si deseas guardar, pudiendo responder que no y seguir tranquilamente con tu trabajo.
  • Activo / Inactivo: Este es nuestro botón de encendido, con el cual indicamos que el auto guardado está activo o inactivo.

Y ya está, así de fácil es configurar el Panel de Auto guardado de documentos Fla. (Hola Gus!!!)

Uso

Para usar el Panel debemos abrirlo, desde el menú Ventana > Otros paneles > Auto save y configurarlo tal como indicamos arriba. Es importante mencionar que para que funcione debe estar visible, es decir, el Panel debe estar abierto. Tal como se muestra en la siguiente imagen.

Un poco de historia

Hablando con un amigo (Iván) me comentó una funcionalidad importantísima y es que recuerde la configuración porque sino sería un verdadero incordio tener que estar configurándolo cada vez que lo utilizas, así que SI, el Panel recuerda la configuración cada vez que lo cierras y lo abres e incluso si cierras el IDE de Flash.

Descarga

Para todo aquel que simplemente necesite el Panel Auto Save y no tenga interés en saber como funciona por dentro puede descargar aquí el instalador mxp.

A los que les interese saber como funciona sigan leyendo hasta el final que también hay otro enlace al instalador al final. ;D

Parte friki, tutorial, código y demás

Hasta ahora hemos hablado del Panel y sus beneficios (es verdad, también hemos hablado de las posibles no bondades :P), pero todavía no sabemos cómo funciona, qué engranes se mueven por dentro, dónde está la magia y demás historias que en realidad es lo que quiero contar de lo que trata este post.

Pues vamos allá, jejeje, es que realmente el funcionamiento interno de este Panel es realmente sencillo, únicamente utilizamos dos métodos de JSFL, uno para comprobar que exista un documento abierto y otro para guardar el documento, si, así de fácil.

Explicación

Para saber si existe un documento Fla abierto utilizamos el método fl.getDocumentDOM() que nos devolverá un Objeto de tipo Document en caso de existir, en caso contrario nos devolverá undefined, con lo cual podemos hacer las comprobaciones necesarias en nuestro código ActionScript.

Lo siguiente que tenemos que hacer en caso de que exista el documento y que las variables de configuración del Panel (Frecuencia, Preguntar y Activo) nos los permitan es guardarlo, haciendo uso del método fl.getDocumentDOM().save(true) y listo.

Resultado final

En esta ocasión es más código ActionScript que código JSFL, como en los anteriores post aquí también hacemos uso de la función MMExecute que nos permite ejecutar JSFL desde un fichero swf con ActionScript.

A continuación os pongo el código. Hay un par de cosas feas por ahí, así que tener en cuenta que lo programé el viernes por la mañana mientras iba en el tren hacia el trabajo, así que si alguién lo quiere modificar para dejarlo más bonito o añadir funcionalidad es libre de hacerlo siempre y cuando mencione el origen (y si no lo menciona también, total, lo que quiero es compartir).

import fl.controls.Button;
import fl.controls.CheckBox;
import fl.controls.Label;
import fl.controls.NumericStepper;
import flash.events.Event;

var nIntervalID:uint;
var nMinutesToAutoSave:uint;
var bCheckBoxAsk:Boolean;
var bActive:Boolean;

var comButtonOnOff:Button;
var comCheckBoxAsk:CheckBox;
var oLabel:Label;
var comNumericStepperFrecuency:NumericStepper;

var oSharedObject:SharedObject;

this.config();
this.init();

function config():void
{

	this.oSharedObject = SharedObject.getLocal("DATA_AUTOSAVE_SO");

	this.nMinutesToAutoSave = (this.oSharedObject.data.nMinutesToAutoSave != undefined) ? this.oSharedObject.data.nMinutesToAutoSave: this.comNumericStepperFrecuency.value;
	this.bCheckBoxAsk = (this.oSharedObject.data.bCheckBoxAsk != undefined) ? this.oSharedObject.data.bCheckBoxAsk: this.comCheckBoxAsk.selected;
	this.bActive = (this.oSharedObject.data.bActive != undefined) ? this.oSharedObject.data.bActive: false;

	this.comNumericStepperFrecuency.value = this.nMinutesToAutoSave;
	this.comCheckBoxAsk.selected = this.bCheckBoxAsk;
	if (this.bActive)
		this.comButtonOnOff.label = "On";
	else
		this.comButtonOnOff.label = "Off";

	this.comButtonOnOff.addEventListener(MouseEvent.CLICK, onClickButtonOnOff);
	this.comCheckBoxAsk.addEventListener(Event.CHANGE, onCheckBoxAskChange);
	this.comNumericStepperFrecuency.addEventListener(Event.CHANGE, onNumericStepperFrecuencyChange);

	this.saveSharedObject();
}

function saveSharedObject():void
{
	this.oSharedObject.data.nMinutesToAutoSave = this.nMinutesToAutoSave;
	this.oSharedObject.data.bCheckBoxAsk = this.bCheckBoxAsk;
	this.oSharedObject.data.bActive = this.bActive;

	this.oSharedObject.flush();
}

function onClickButtonOnOff(_oMouseEvent:MouseEvent):void
{
	if (this.bActive)
	{
		this.bActive = false;
		this.comButtonOnOff.label = "On";
	}
	else
	{
		this.bActive = true;
		this.comButtonOnOff.label = "Off";

		this.init();
	}

	this.saveSharedObject();
}

function onCheckBoxAskChange(_oEvent:Event):void
{
	this.bCheckBoxAsk = this.comCheckBoxAsk.selected;

	this.saveSharedObject();
}

function onNumericStepperFrecuencyChange(_oEvent:Event):void
{
	this.nMinutesToAutoSave = this.comNumericStepperFrecuency.value;

	this.init();

	this.saveSharedObject();
}

function init():void
{
	clearInterval(this.nIntervalID);
	this.nIntervalID = setInterval(autoSave, this.nMinutesToAutoSave * 60 * 1000);
}

function autoSave():void
{
	if (this.bActive && this.isDocument())
	{
		if (this.comCheckBoxAsk.selected)
		{
			var sCodeJSFL:String = "";
			var sResult:String = "";

			sCodeJSFL = "confirm(\"Quieres guardar\");";
			sResult = MMExecute(sCodeJSFL);

			if (sResult == "true")
			{
				this.saveDocument();
			}
		}
		else
		{
			this.saveDocument();
		}
	}
}

function isDocument():Boolean
{
	var bRet:Boolean;

	var sCodeJSFL:String = "";
	var sResult:String = "";
	sCodeJSFL = "fl.getDocumentDOM();";
	sResult = MMExecute(sCodeJSFL);
	bRet = (sResult != "undefined") ? true: false;

	return bRet;
}

function saveDocument():void
{
	var sCodeJSFL:String = "";
	var sResult:String = "";
	sCodeJSFL = "fl.getDocumentDOM().save(true);";
	sResult = MMExecute(sCodeJSFL);
}

Aquí tenéis los archivos de descarga.

Sugerencias, dudas, ideas o comentarios?

Saludos!!!

Entradas relacionadas: