Flex Module for Apache and IIS
En Adobe Labs han desarrollado un Módulo Flex para Apache e IIS. Este sirve para realizar una compilación en tiempo de ejecución de archivos MXML y Actionscript 3. Es decir que si colocamos, http://localhost/Main.mxml en nuestro browser veremos directamente el archivo SWF que se genera. Yo lo instalé, lo probé, realmente es muy rápido y funciona bien.
Está disponible para los siguiente servers:
- Apache 1.x/2.x (Windows, MacOS, o Linux)
- IIS version 5.1, 6, o 7 (Windows)
Además requiere:
- Flex SDK 2.0.1 o superior
- JRE 1.4.2 o superior
Flex: Cairngorm Framework
Estuve trabajando mucho con el Framework para desarrollo en Flex Cairngorm. Me parece muy útil para acelerar el desarrollo, pero principalmente para la organización, actualización y reutilización del código, también para la escalabilidad del proyecto.
Cairngorm está basado en el patrón de diseño Model View Controller y está compuesto por:
Model Locator:
Es donde se guardan todas las los datos de la aplicación (Value Object) estos VO son objetos Bindables, es decir, si cambian sus valores se actualiza en todos los lugares donde se utilicen.
View:
Las vistas de la aplicación, son componentes o grupos de componentes donde se encuentra la parte gráfica o visual.
Front Controller:
Recibe todos los eventos que luego son mapeados en los commands.
Command:Es donde está toda la logica, donde se procesan los eventos, se actualizan los VO.
Delegate:
Son llamados por los Commands y "selecciona" que service utilizar, que parámetros pasar, aqui están instanciados todos los services.
Service:
Están todas las llamadas a los servicios remotos, XML, WebServices, AMFPHP, etc.
Algunos recursos:
- Flex UI Design For Cairngorm
- Hello world cairngorm example
- http://www.cairngormdocs.org/
- Tutoriales de Made In Flex
Bueno, eso es todo por ahora, más adelante seguiré hablando de esto ya que me ha gustado mucho.
Mini-FAQ sobre Flex 2
Hace tiempo que vengo hablando sobre Flex 2, posteando ejemplos y otras cosas salteándome cualquier tipo de introducción. Ultimamente recibí varias consultas de desarrolladores que quieren conocer Flex, por eso armé algunas consultas comunes y armé este pequeño FAQ.
¿Para que sirve Flex?
Básicamente Flex está pensado para el desarrollo de RIAs (Rich Internet Applications), o sea aplicaciones Web con elementos de formulario, interacciones avanazadas, conexión a base de datos.
¿Como es la forma de trabajar en Flex?
En resumen, son archivos XML (MXML) donde se encuentran las llamadas a los componentes, estados, vistas, etc. Los componentes pueden ser desarrollados por Adobe, o componentes propios. La programacíón se realiza en Actionscript 3, y estos códigos se colocan en archivos .as.
¿Como se realiza la compilación de los proyectos?
Básicamente hay dos formas, en tiempo de ejecución en un Flex Server o con el SDK de Adobe. En el Flex Server se suben los archivos .mxml y desde el browser se visualizan archivos swf. Una analogía conocida sería, se suben PHP y se visualizan HTML, este servidor está basado en Java. La otra es compilando los mxml con el SDK y subir directamente los archivos SWF.
¿Donde puedo conseguir el SDK?
El SDK se puede bajar del sitio de Adobe y es gratis.
¿Hay alguna herramienta para desarrollar Flex 2?
Si, se puede utilizar el Flex Builder 2, este es un plug-in para Eclipse que tiene asistentes muy útiles para la codificación, y también tiene una interfáz para el desarrollo visual.
Para ejecutarse, del lado cliente, ¿se necesita lago más que el FLASH Player?
No, se necesita tener instalado el Flash Player 9. Y es compatible con cualquier navegador que tenga esa versión de Flash Player.
¿Que tecnología de servidor debo utlizar para trabajar con Flex y base de datos?
Cualquiera, PHP, ASP, .NET, JSP, cualquier tipo de tecnología de servidor, utilizando Flash Remoting, XML, WebServices, WebOrb, etc.
Bueno, eso es todo por ahora, es muy básico pero espero que sirva para aclarar algunas dudas 
Cualquier cosa que quieran agregar o corregir no tienen mas que ponerlo en los comentarios.
Error con los uploads en Flash 8 y Flex 2
Después de pubicar el componente para upload he recibido muchos mensajes que me comunicaban el mismo error:
Error #2044: IOErrorEvent no controlado: text=Error #2038: Error de E/S de archivo.
Tiempo después, en un proyecto personal, experimenté yo mismo en un proyecto personal con Flex, por suerte uno de los mensajes que recibí, de David, me dió una solución:
El problema se encuentra en la configuración de mod_security del Apache que bloquea el acceso del archivo temporal creado en el servidor al script 'upload.php'. Así que si tienen acceso a la configuración del Apache tienen que configurar este módulo para que permita este tipo de upload.
En mi caso, como no tengo acceso a la configuración del Apache, tuve que buscar una solución "alternativa":
Hay que modificar el .htaccess para deshabilitar el mod_security agregando las siguientes lineas:
SecFilterScanPOST Off
Probé con esto y anda bien, espero que no traiga muchos problemas de seguridad, pero los uploads andan 
Flex DirBrowser Component
Este componente es una mejora del componente File Upload que publiqué anteriormente.
Es simple, explora un directorio que se le pasa como parámetro, lista todos los archivos están en ese directorio, se pueden borrar y agregar nuevos archivos. Está pensado para imágenes.
Ejemplo
Flex Sources
Descargar todos los archivos
Apollo for Adobe Flex Developers Pocket Guide
Apollo sigue prometiendo, Adobe Labs ha sacado una guía de Apollo para desarrolladores Flex, y está disponible para su descarga gratuita.
Apollo for Adobe Flex Developers Pocket Guide
Flex file upload component
Hace un tiempo publiqué un ejemplo de upload con flex, este era bastante básico.
Aqui dejo otro ejemplo, pero este hecho componente, es más fácil de utilizar y de reutilizar.
Ejemplo
Sources
Adobe Apollo
Adobe Apollo es un producto pronto a salir, que por lo que pude ver promete mucho, como dice en Adobe Labs:
Apollo is a cross-OS runtime that allows developers to leverage their existing web development skills (Flash, Flex, HTML, Ajax) to build and deploy desktop RIA’s.
La verdad que estoy muy ansioso por poder probar este producto.
Upload de archivos con Flex 2
En estos días estoy haciendo un admin para un sitio web, estoy utilizando Flex con PHP y MySQL. Esta herramienta me está simplificando mucho las cosas, lo que antes eram varios xhtmls otros tantos php y si queremos que quede mas usable otros muchos js para hacer un ajax, hoy son solo unas 50 lineas en un mxml y otro poco de código en Actionscript. Trabajando, me topé con un problema, hacer un upload de archivos con Flex, mucha info no encontré en internet, así que me las arreglé bastante solo, aquí comparto el resultado, espero que sirva.
Archivo mxml:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
creationComplete = "init()">
<mx:Script source="subir.as"/>
<mx:Panel title="Subir Imagen"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:Form width="100%" height="100%">
<mx:FormItem label="Imagen">
<mx:Text id="file_path"/>
<mx:ProgressBar id="uploadProgress" label="" mode="manual" />
<mx:ControlBar horizontalAlign="right">
<mx:Button id="browseUpload" label="Buscar..." click="buscar()"/>
<mx:Button id="startUpload" label="Upload..." click="subir()" />
</mx:ControlBar>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>
Archivo Actionscript:
import flash.net.URLRequest;
import flash.net.URLRequestMethod
private const UPLOAD_URL:String = "upload.php";
private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
private var photoShop:FileFilter = new FileFilter("Archivos Photoshop", "*.psd");
private var fileref:FileReference = new FileReference();
private function buscar():void {
fileref.browse([imagesFilter,photoShop]);
}
/**
* cuando se ha seleccionado el archivo coloco el nombre en el text
* y habilito el botón subir
*/
private function seleccionar(event:Event):void {
startUpload.enabled = true;
file_path.text = fileref.name;
}
/**
* subo el archivo
*/
private function subir():void{
var request:URLRequest = new URLRequest();
request.method = URLRequestMethod.GET;
request.url = UPLOAD_URL;
fileref.upload(request);
}
/**
* chequeo el progreso
*/
private function progressHandler(event:ProgressEvent):void {
uploadProgress.setProgress(event.bytesLoaded, event.bytesTotal);
}
private function completeHandler(event:Event):void {
uploadProgress.label = "UPLOAD COMPLETE";
}
/**
* inicializo la applicación
*/
private function init():void{
startUpload.enabled = false;
fileref.addEventListener(Event.SELECT, seleccionar);
fileref.addEventListener(ProgressEvent.PROGRESS, progressHandler);
fileref.addEventListener(Event.COMPLETE, completeHandler);
}
Ejemplo del HTTPService de Flex 2: last.fm
En uno de mis posts anteriores publiqué un "RSS reader" utilizando Actionscript 3 y Flex 2.
Ahora realicé una prueba similar, pero con mi ranking de artistas más escuchados en last.fm:
(requiere Flash Player 9)
En este caso no utilicé la Class XML de Actionscript 3 para parsear el XML, lo cargué con la Class HTTPService de Flex 2. Es realmente simple, acá va el código:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
creationComplete="fmRequest.send()" >
<mx:Style>
Application {
background-color: #ffffff;
color: #000033;
theme-color: #1167B8;
}
Panel {
header-colors: #1167B8, #1167B8;
shadow-direction: right;
}
</mx:Style>
<mx:HTTPService
id="fmRequest"
url="http://ws.audioscrobbler.com/1.0/user/locopro/topartists.xml"
useProxy="false" />
<mx:Panel width="420" height="400" layout="horizontal"
title="Mi ranking en Last.fm">
<mx:DataGrid x="20" y="20" id="dgArtists" width="400" height="350" dataProvider="{fmRequest.lastResult.topartists.artist}">
<mx:columns>
<mx:DataGridColumn headerText="Rank" dataField="rank" width="50"/>
<mx:DataGridColumn headerText="Artist" dataField="name"/>
<mx:DataGridColumn headerText="Plays" dataField="playcount" width="50"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Para compilar esto solo hay que salvarlo con un archivo con extensión mxml y compilarlo con el SDK de Flex 2.
10 Razones para usar Flex
Que buenas 10 razones para usar Flex
Me quedo con esta:
Rich Media Support. The Flash platform has absolutely blind-sided the previously dominant media players on the Web (Real, Windows Media). It is light and works without installing this or that. Flex makes it simple to embed both audio and video content right into your applications.
Principalmente para detractores de Flash-Flex, la primer razón para no usarlo es "hay que descargarse un Player". Pero en ese player "sirve" para todo, video, sonido, interactividad. Y es mucho más amigable que el Windows Media, Quick Time, Real Player u otros.
Flex y Accesibilidad
Interesante informe esctito por Andrew Kirkpatrick y Bob Regan, dos desarrolladores expertos en accesibilidad de Adobe, sobre accesiblilidad de los componentes de Flex. Tema que me preocupa mucho en el momento de ponerme a trabajar con esta herramienta.
Link: Flex Component Accessibility
Via: onflex.org