Drus’ blog, my stuff.

Este es un demonio de dos cabezas que llevo dentro desde que empecé a trastear con el flex.

Por un lado la sensación de que estoy haciendo las cosas “reguleras”, porque parece que nadie las hace como yo, y por otro la dependencia de montar toda la parafernalia de flex para editar cualquier trabajo hecho en él.

Comentando con Fede un problema con un tooltip que extendía un símbolo y yo pretendía que fuera un singleton, y la lección de Fede sobre separar la vista (el símbolo) del controlador (el singleton) me di cuenta que eso es precisamente lo que hago en flex.

Lo que pasa no es que haga las cosas de una forma extraña en flex, sino que estoy haciendo algo que no había hecho antes, o al menos no por sistema como exige flex: en flex lo que hago es componer, separando la vista del controlador, mientras que en flash suelo extender directamente el símbolo de la librería.

Mira mamá, ya compongo!!!

XD

A ver si lo puedo explicar más claramente, presentando los dos escenarios: pongamos que tenemos un símbolo linkado como ToolTip en la librería.

En flash solía hacer una clase ToolTip.as que extendía el símbolo, asociándola al símbolo directamente desde el linkage de la librería. Para crear una instancia de un tooltip funcional hacía un new ToolTip() y un addChild() y listo.

En flex, como estamos tirando de símbolos “precompilados” empaquetados como un archivo swc, no se puede hacer esto limpiamente porque implica que la clase se compile con el símbolo desde flash a cada cambio. La solución es usar una clase con la funcionalidad (ToolTip.as es nuestro controlador) que a su vez usa la clase identificadora del símbolo (ToolTipSWC es la vista).

La vista es el símbolo de la librería, que tiene un id o linkage (por ejemplo ‘VistaSWC‘) que se corresponde con el nombre de la clase símbolo que instanciaremos con el controlador.

El controlador es una clase que usa una instancia de la vista (’VistaSWC‘) y que implementa sobre ella toda la funcionalidad.

package
{
	import flash.display.MovieClip;
	public class Controlador extends MovieClip
	{
 
		private var vista:VistaSWC;
 
		public function Controlador():void{
			vista=new VistaSWC();
			addChild(vista);
			Funcionalidad();
		}
		public function Funcionalidad(texto:String):void{
			vista.campo_txt.text=texto;
			vista.fondo_mc.width=vista.campo_txt.TextWidth;
		}
	}
}

De esta forma cuando hacemos:

	var controlador:Controlador=new Controlador();
	this.addChild(controlador);

Estamos creando un controlador que a su vez va a crear la vista que usa. El resultado que tenemos es el mismo pero además tenemos la ventaja de que al separar la vista del controlador, podríamos tener múltiples vistas.

Espera, ¿esto entonces es composición? pero… si eso sencillamente es una forma de programar, se hace exactamente igual en flash…

Esto me hizo ver que si organizas el fla para componer, separando la vista del controlador, ese fla con un poco de cuidado compilaría en flex. Y efectivamente, solo hay que tener en cuenta algunas cosas.

Como generar un proyecto publicable en flash y flex indistintamente

• La clase principal de la aplicación debe ser el document class de flash.
• Las librerías necesarias deben estar en la carpeta del proyecto, haciendo imports como lo haríamos en flash.

  Hay que evitar usar librerías que hayamos creado como tales en flex, ya que no he encontrado la forma de referenciarlas en flash. Lo mismo me pasa con los classpath propios que definamos en flash, que no se como tenerlos disponibles en flex. De cualquier manera, si lo que perseguimos es la portabilidad del proyecto, me parece más interesante que las librerías acompañen al proyecto para asegurarnos.

• Los simbolos de la librería deben ser solo “vista”

  Hay que separar la vista del controlador con composición para editar y compilar correctamente en flex.

• Exportar el swc en flash

  Para importarlo desde flex. En flex el nombre de clase definido en las opciones de vinculación de la librería de flash lo usaremos para acceder al asset (’VistaSWC’) del swc importado y sus propiedades.

• Otros factores a tener en cuenta

  Es necesario definir el background color y el framerate de la película en ambos editores, en flex con código y en flash desde el panel de propiedades.

• Exportar/importar el proyecto

  La forma más eficaz es un zip de toda la carpeta de proyecto. En flash encontraríamos el fla en la carpeta source como assets.fla. En flex importamos el proyecto, seleccionando la carpeta entera.

Descarga un ejemplo de proyecto compilable en flash y flex cualquier sugerencia para mejorar el sistema es bienvenida, y cualquier inconveniente que me comuniquéis lo añado a la lista para tenerlo en cuenta.

Inconvenientes

No se pueden hacer muchos “hacks” de flex del tipo de la precarga que publiqué, que flash no comprende.