Blog de Daniel Zegarra Rotating Header Image

Flex

Usando Flex 4 SDK sobre Flex Builder 3

jun 21st, 2010
by Daniel Zegarra.
No comments yet

Me descargue el trial de Flash Builder y llevo algunos dias trabajando con el, aprovechando las mejoras. Pero cuando el tiempo de prueba se acabe tendre que volver a Flex Builder y necesito poder continuar con los proyectos que ya tenia creados.

La gran versatilidad es un punto a favor de Eclipse, el IDE elegido por Adobe para Flex Builder y Flash Builder. Eclipse te permite tener varios compiladores y elegir con cual compilar cada proyecto.

Instrucciones para instalar Flex SDK4 en Flex Builder 3

  1. Descargar el .zip con el SDK 4 de Flex desde Adobe Open Source.

    Contenido del SDK de Flex 4

    Contenido del SDK de Flex 4

  2. Crea una carpeta con el nombre 4.0 en el directorio sdks ubicado en la raiz de tu instalacion de Adobe Flex Builder (usualmente C:\[Program Files]\Adobe\Flex Builder 3). Asi como la siguiente imagen:

    Los SDKs de Flex

    Los SDKs de Flex

  3. Extraer todo el contenido del .zip en el directorio que acabas de crear.
  4. Abres Flex Builder y te diriges al menu Window > Preferences > Flex > Installed Flex SDKs.

    SDKs instalados

    SDKs instalados

  5. Le das un clic al boton Add, para registrar un nuevo SDK, y completas el formulario.

    Registrando el nuevo SDK

    Registrando el nuevo SDK

Con esto ya puedes compilar con el nuevo SDK.

La nueva version de Flex trae algunos cambios en la plantilla mxml y si nos vamos a poner a compilar un proyecto ya existente tendremos errores. Entonces tenemos dos opciones: actualizar nuestro codigo para compilar sin problemas o activar la compatibilidad con Flex 3 y dejar nuestro codigo tal como esta. Si ya tienes un proyecto iniciado con Flex 3 te recomiento tan solo activar el modo de compatibilidad y aprovechar los nuevos metodos y clases que incluye este nuevo SDK sin tener que actualizar codigo.

Habilitando compatibilidad con Flex 3

  1. Abre un proyecto y ve a las propiedades del mismo (clic secundario > Properties) y elige la ficha Flex Compiler (ve el screenshot).

    Configurando el compilador en cada proyecto

    Configurando el compilador en cada proyecto

  2. Elije como SDK el que ultimo que has registrado y pega la siguiente linea como argumentos adicionales para el compilador:-compatibility-version=3.5 -theme=${flexlib}/themes/Halo/halo.swc

Veamos que hace cada argumento:

-compatibility-version=3.5

Activa la compatibilidad con la version 3.5 del SDK de Flex. Si quieres puedes reemplaza el 3.5 por 3.3 o simplemente 3. La diferencia (si es que hay alguna) sera insignificante.

-theme=${flexlib}/themes/Halo/halo.swc

Define a Halo como tema por defecto. Flex 4 usa Spark como tema predeterminado que en su forma silvestre es mas feo que el carajo. Me recuerda a las aplicaciones java de JCreator. Si deseas mantener el aspecto de tus componentes tal y como eran antes de usar este nuevo SDK entonces manten este argumento en tu proyecto.

Listo, eso es todo. Ya tienes el nuevo Flex 4.

Instalar Blueprint desde Adobe Labs

jun 18th, 2010
by Daniel Zegarra.
No comments yet
Blueprint example

Blueprint es un plugin para Flex Builder 3 y Flash Builder 4 que te muestra ejemplos de la web relacionados al fragmento de codigo con el que trabajas.

Blueprint example

Blueprint example

Usualmente cuando tienes dudas de como conseguir el resultado esperado (o te da flojera hacerlo tu mismo)  buscas en la web por ejemplos. Esto simplemente te ahorra el trabajo. Tan solo marca el nombre de la clase y presiona Alt+B (Ctrl+B en Mac) para buscar ejemplos relacionados. Puedes mejorar el resultado agregando palabras clave al campo de busqueda. La verdad, es mas comodo que usar el browser.

Para instalarlo dirigete a labs.adobe.com/wiki/index.php/Blueprint:Installation_Instructions y sigue los pasos. Las instrucciones usan screenshots de Flex Builder 3 pero la manera de hacerlo en Flash Builder 4 no es muy distinta (ambos son eclipse).

Visitar la pagina de Blueprint en Adobe Labs

Flex: Clase datagridColumnSelector

jun 11th, 2010
by Daniel Zegarra.
No comments yet

Esta es una clase que hice para Flex para mostrar y ocultar las columnas de cualquier instancia de DataGrid sin ensuciarse con mucho codigo.

Menu contextual del DataGrid

Menu contextual del DataGrid

Se puede implementar en solo una linea de codigo:

new datagridColumnSelector(datagridInstance, [campoignorado1]);

El primer argumento es obligatorio y debe ser una instancia de DataGrid. El segundo argumento es opcional y debe recibir un Array con los nombres de las columnas a ignorar.

Cambiando algunas propiedades por defecto:

datagridColumnSelector.label_hide = "Ocultar";
datagridColumnSelector.label_show = "Mostrar";
var selector:datagridColumnSelector = new datagridColumnSelector(data_dg);
selector.hidden = ["col3"];

En el siguiente ejemplo la columna 4 y 5 estan ocultas por defecto. Tambien se decide ignorar la columna 3 para que el usuario no pueda ocultar todas las columnas.
Nota que el valor del atributo headerText en cada DataGridColumn es usado en el menu contextual para que el usuario pueda identificar la columna. 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" creationComplete="init()"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #E7E7E7]"
	paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" horizontalAlign="left" viewSourceURL="srcview/index.html">

	<mx:Script>
		<![CDATA[
			import net.danielzegarra.utils.datagridColumnSelector;

			protected function init():void{
				new datagridColumnSelector(data_dg, ["col3"]);
			}
		]]>
	</mx:Script>

	<mx:Label text="Haga un clic secundario sobre el DataGrid para mostrar u ocultar columnas."/>
	<mx:DataGrid id="data_dg" width="100%" height="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="Columna 1" dataField="col1"/>
			<mx:DataGridColumn headerText="Columna 2" dataField="col2"/>
			<mx:DataGridColumn headerText="Columna 3" dataField="col3"/>
			<mx:DataGridColumn headerText="Columna 4" dataField="col4" visible="false"/>
			<mx:DataGridColumn headerText="Columna 5" dataField="col5" visible="false"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

Y el resultado:

Ver la fuente | Descargar datagridColumnSelector Class

Nota: Funciona tambien con Air aunque es preferible usar las clases nativas de Adobe Air.

Flex: Convertir una Imagen en ByteArray y un ByteArray en Imagen

feb 16th, 2010
by Daniel Zegarra.
No comments yet

Convertir una imagen en ByteArray es algo simple, lo difícil es revertir el proceso.

Yo uso Loader para cargar la data y luego lo agrego a una instancia del componente Image usando addChild(). De esta forma evito el tener que detectar cuando Loader termina de cargar los datos para recien poder usar la imagen.

En el siguiente ejemplo la imagen de la derecha es copiada y puesta en un ByteArray. Luego, los datos son comprimidos a JPEG, cargados usando Loader y por ultimo asignados a el componente Image de la derecha. El resultado: una copia de la imagen original. Incluso me parece que la copia tiene colores mas brillantes :P
No, mentira. Es una copia identica.

Descargar Ejemplo de como convertir un ByteArray a Imagen