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

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

Comparte:
  • Digg
  • Reddit
  • StumbleUpon
  • del.icio.us
  • BlinkList
  • NewsVine
  • Technorati
  • Google Bookmarks
  • MySpace
  • Facebook
  • Twitter
  • Meneame