Blog de Daniel Zegarra Rotating Header Image

junio, 2010:

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.

Seguir los partidos del mundial

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

Si no puedes darte el lujo de un televisor en la oficina ni ver el los partidos por internet, al menos puedes seguirlos pasivamente.

Aqui puedes obtener un widget de escritorio (Adobe Air) para seguir los partidos del mundial en directo, ver el calendario de partidos y sus resultados conforme se vayan completando.

Calendario de partidos

Calendario de partidos

No sera tan entretenido como ver el partido en vivo y en directo pero al menos te enteraras de sus eventos importantes y… te distraes mucho menos.

Tips sobre Class mapping con Zend AMF

jun 7th, 2010
by Daniel Zegarra.
3 comments

En resumen Class mapping consiste en relacionar dos clases de lenguajes distintos de tal forma que en cada lenguaje se traten del mismo elemento. Esta relacion (comunmente llamada mapeo en español) permite intercambiar instancias de estas clases entre lenguajes de manera transparente.

Zend AMF mapea por defecto las clases mas comunes como son String, Number, Array, Object, ArrayCollection, etc y tambien permite mapear clases creadas por el usuario. Para lograr el mapeo bidireccional te recomiendo cumplir dos puntos.

  • Define la variable $_explicitType con el alias en cada clase deseas mapear o usa el metodo getASClassName() en lugar de registrar cada mapeo con $serveramf->setClassMap(). Dara mas flexibilidad a tu aplicacion.
  • Intenta relacionar el alias de la clase con la ruta donde la clase PHP a mapear se encuentra. Esto te ayudara a mapear clases de AS3 a Zend AMF.
    Cuando Zend AMF recibe una solicitud lee los alias de las clases AS3 en el mensaje y busca sus clases PHP homologas en el directorio dado por $serveramf->addDirectory(). Si el alias elegido para las clases es, por dar un ejemplo, VO.Usuario Zend AMF buscara la clase VO_Usuario en la ruta VO/Usuario.php.
    Ten en cuenta esto solo si usas addDirectory() para definir la ubicacion de tus servicios y no deseas usar setClassMap() para registrar cada alias.

Las siguientes dos clases se mapearan correctamente entre PHP y AS3 de forma bidireccional.

Ruta: [ServicesPath]/VO/Usuario.php

<?php
class VO_Usuario{

	/**
	 * Usado por Zend AMF. Devuelve el alias de
	 * esta clase para actionscript.
	 * Devuelve una cadena con el nombre de la
	 * clase actual reemplazando _ por puntos.
	 */
	public function getASClassName(){
		return str_replace("_",".",get_class($this));
	}

	public $id;
	public $username;
	public $firstname;
	public $lastname;
	public $enabled;
}
?>

Nota: En este ejemplo uso getASClassName() para obtener dinamicamente el alias de la clase. Seria muy util que este metodo se encontrara en una clase base y que cada clase a mapear herede de esta. De esta forma no tendras que preocuparte por verificar el alias elegido.

Y por otro lado tenemos su clase homologa en AS3:

Ruta: /net/danielzegarra/VO/UsuarioVO.as

package net.danielzegarra.VO{
	//Recuerde que no es necesario que el alias tenga relacion
	//con el nombre de la clase
	[RemoteClass(alias="VO.Usuario")]
	public class UsuarioVO{
		public var id:uint;
		public var username:String;
		public var firstname:String;
		public var lastname:String;
		public var enabled:Boolean;
	}
}

La version de Zend Framework al escribirse este documento es la 1.10.
Puedes encontrar la documentacion de Zend AMF en http://framework.zend.com/manual/en/zend.amf.server.html

← Earlier Posts