Pues bien, aquí os dejo unas pequeñas notas de como realizar este sencillo ejemplo. Para ello lo primero será declarar una nueva instancia del componente Button de la clase Spark, tal que así:

<s:Button label="Button Invisible" skinClass="ButtonSkinInvisible"/>

Como se ha definido en las propiedades del botón, se hace referencia a la clase “ButtonSkinInvisible”, en la cual se define la transparencia que deberá tomar el botón:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
			 xmlns:s="library://ns.adobe.com/flex/spark" 
			 xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Script>
		import mx.utils.ColorUtil;
	</fx:Script>
 
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
	</s:states>
 
	<s:Rect width="100%" height="100%" alpha="0">
 
	</s:Rect>
 
	<s:Label id="labelDisplay" paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="6"/>
 
 
</s:SparkSkin>

Existes otra muchas formas de realizar este efecto, pero esta es una más de ellas.

Podéis descargar el ejemplos desde aquí

En el desarrollo se utilizado el componente ComboBox de Adobe Flex 4 y se le ha aplicado una clase SparkSkin personalizada, con la cual, se ha podido obtener el resultado de adaptar por cada fila de resultados una imagen y una descripción.

A continuación:

[ Ver el ejemplo ComboBox con imágenes]

[ Ver el código fuente del ejemplo]

Estais invitados a participar comentando sugerencias e ideas que querais debatir.

Un saludo.

Los 5 puntos son los siguientes:

1. Fácil de aprender y usar
Antes de conocer Flex, era desarrollador Php, antes de Php, fuí desarrollador C++ y Delphi. Así que sé exactamente lo costoso que es  aprender un nuevo lenguaje de programación. Así como el cambio de un lenguaje de una transmisión manual a uno automático por así decirlo,   se necesita tiempo para acostumbrarse a esos cambios.
Sorprendentemente, la primera vez que vi código de Flex, pensé que era Java. Teniendo en cuenta que la sintaxis era similar, la estructura y el estilo. Sin tiempo, construí mi primera aplicación totalmente funcional en Flex, en realidad me costó algo acostumbrarme y terminarla pues la exigencia del proyecto iba muy por delante de mis conocimientos en aquel entonces, pero me llevé una satisfacción personal.
Otra belleza de Flex es su herramienta de desarrollo – Flash Builder (Flex 4) Está construido sobre la plataforma – Eclipse IDE . Flash Builder ofrece muchas funciones útiles, tales como editor de diseño, herramientas de construcción, un depurador integrado. Hace que el trabajo sea mucho más fácil. Si lo deseas puedes conseguir una copia de Flash Builder pinchando aquí.

2. Lenguaje y Framework
A diferencia de JavaScript lenguaje el cual AJAX se apoya, Adobe Flex está constituido sobre un lenguaje de programación fuertemente orientado a Objetos. Creo que el equipo de desarrollo Flex se extiende  a una gran cantidad de estructurado  Java, por lo que es adecuado para el desarrollo de aplicaciones de nivel empresarial.
Además, hay algunos frameworks con experiencia para apoyar Flex a nivel de arquitectura. Al igual que Struts y Spring para Java, Cairngorm y Mate son dos frameworks basados en el lanzamiento de eventos para aplicar el MVC (Modelo-Vista-Control) patrón de diseño para Flex. Y los dos proyectos son de origen opensource.

3. Soporte para el navegador
¿Cuántas veces tienes que tratar con diferentes navegadores (IE 6, IE 7, Firefox, Google Chrome, Opera, Safari …) sólo para hacer que las páginas web se vean bien? errores de JavaScript, de imágenes PNG que faltan, la disposición falla, vas a agregar todo tipo de parches o “hacks” para tratar el problema. Como resultado, el código es confuso y difícil de mantener, te sientes frustrado y agotado, pero los problemas siguen apareciendo …
Haciendo uso de Adobe Flex en el tiempo de ejecución (Flash Player) , estás actuando frente a un 98%  de penetración en el mercado de trabajo constantemente a través de diferentes navegadores, que finalmente pueden centrarse en la construcción de un gran RIA  en lugar de preocuparse por su compatibilidad.

4. Desarrollo Rápido y Fácil integración
El tiempo es dinero! Esto es especialmente cierto en Internet. ¿Por qué .Net toma muchas cosas de Java? Una de las razones es que proporciona una gran cantidad de módulos para sujetar el proceso de desarrollo. Al igual que .Net, Adobe Flex nació con muchos componentes, por ejemplo, los DataGrid, ProgressBar, RichTextEditor, Slider, Acordeon, Charts …) todo ello para ayudar a crear apps RIA más rápido y fácil.
Por otra parte, Flex puede ser el mejor marco de trabajo para integrarse fácilmente con diferentes sistemas externos. Proporciona componentes tales como HTTPService, WebService y RemoteObject, además de servicio de datos opcionales como LCDs o BlazeDS. En uno de mis proyectos Flex, recogí datos desde servidor J2EE, SAP y otros 2 sistemas heredados para componer los informes finales. Sin Flex, el mismo trabajo hubiera sido mucho más complejo e incluso impensable en la compatibilidad y desarrollo entre sistemas.

5. Efecto visual más atractivo
Sí, RIA se supone que es cool! Los acuerdos de integración regional más sorprendentes pueden maximizar su sensación de sentirse cerca de los productos más novedosos y jugosos, como BMW X5 o HDTV de Sony. Es más, la mayoría de los acuerdos de integración regional se llevan a cabo por la empresa Adobe Flash. Adobe Flex está construida por encima de Flash, se puede acceder a todas las bibliotecas de desarrollo Flash y heredar sus bienes. De ahí la unión de plataformas que da como resultado Adobe  Flash builder. Por lo tanto, no cabe duda de que Adobe Flex te ofrece todo lo necesario para construir interesantes aplicaciones y soluciones RIA.

En Conclusión
RIA significa no sólo aplicar una cirugía estética a tu linea de negocio, sino también proporciona una separación de imagen, superior respecto a  tus competidores. Muchas personas pueden dar diferentes opciones a la hora de desarrollar aplicaciones RIA. Pero lo más importante es, vuestra evaluación sobre la base de recursos, sistemas y requisitos. Os propongo mi top 5 razones para elegir Adobe Flex:

1. Fácil de aprender y usar

2. lenguaje y frameworkd

3. Soporte para navegadores

4. Desarrollo Rápido y de fácil integración

5. Efecto visual más atractivo

Nota: 1 click para acercar la cámara, 2 click para alejarse.
Download: Galería papervision3D

<?xml version="1.0" encoding="utf-8"?>
<!-- http://airexamples.com/2010/03/10/sorting-the-filesystemdatagrid-control-by-date-in-adobe-air/ -->
<mx:WindowedApplication name="FileSystemDataGrid_creationDateColumn_sortCompareFunction_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        width="600" minHeight="400">
 
    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
 
            private function init():void {
                fsdg.creationDateColumn.sortCompareFunction = createDateSortCompFunc("creationDate");
                fsdg.modificationDateColumn.sortCompareFunction = createDateSortCompFunc("modificationDate");
            }
 
            private function createDateSortCompFunc(sortCol:String):Function {
                return function (obj1:File, obj2:File):int { 
                    return ObjectUtil.dateCompare(obj1[sortCol], obj2[sortCol]);
                }
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
    </mx:ApplicationControlBar>
 
    <mx:FileSystemDataGrid id="fsdg"
            directory="{File.userDirectory}"
            horizontalScrollPolicy="off"
            width="100%" height="100%"
            creationComplete="init();" />
 
</mx:WindowedApplication>

He aquí una muestra de Flash Builder 4 y del proyecto que utilizo para iniciar el desarrollo de aplicaciones AIR para Android. El FXP contiene la actual biblioteca AIRGlobal.swc, AIRCore.swc y el archivo SWF exportado, el cual se ejecutará sobre AIR en Android sin modificación alguna.

El tamaño de pantalla de la aplicación se establece en 480×800 (Nexus one) y se mostrarán en 250dpi. La cifra de DPI es especialmente útil para crear prototipos de pantallas. Suelo comenzar con este archivo PNG de Fireworks y a continuación creo los elementos de interfaz, pasando los elementos UI en un nuevo proyecto ActionScript en Flash Builder.

Download files:

Espero que les sea de gran ayuda, y haber si pronto empezamos a ver diseños y aplicaciones para “otros” dispositivos basadas en Adobe AIR…
Reciban un cordial saludo.

Principales cosas que hace Flash que no puede hacer HTML5 o JS ni hay planes para que pueda:

• Streaming: UStream, Tinychat, Livestream, incluso Youtube live, inviables con “estándares”.

• Animación vectorial compleja: SVG? CSS3? Jajajaja. Si tu crees que hacer animaciones con esas tecnologías es más fácil, igual que Flash y gasta menos CPU, no has comparado a nivel técnico. La realidad es que actualmente, sólo Flash lo permite como debe ser. El resto de animaciones en SVG, CSS3 o JS gastan demasiada CPU y no hay un software del nivel de Flash para crearlas.

• Edición y manipulación de audio: AS3 es capaz de mezclar audio en tiempo real. Nadie más puede hacerlo al nivel de AS3.

• Edición bit por bit de mapas de bits: Aviary, Picnik y Photoshop Online hechos en Flash y Flex lo demuestran. ¿En HTML5 o JS? Ninguno realmente usable.

• 100% de compatibilidad a través de todas las plataformas: Si dices que es posible escribir un sólo código HTML5/CSS/JS que funcione en todos los navegadores ahora mismo, no has hecho nada profesional. En SWF es normal

Flash no es sólo el player. Flash CS5 es un entorno integrado con la capacidad de diseñar, dibujar, animar, incluir video, audio, editar todos estos componentes, agregar interactividad y programación de alta complejidad, compilar para desktops, móviles o iPhones. Ninguna herramienta del lado “estándar abierto” ofrece ese nivel de integración ahora mismo. No Dreamweaver, no Visual Studio 2010, no Aptana, ni siquiera una combinación de varias.

Según un comunicado oficial publicado en el blog del equipo de AIR el día 12 de Febrero de 2010, y resumiendo la información ofrecida en una frase clave, vemos acontinuación lo que muchos desarrolladores as3 Flex/AIR estaban esperando.

A continuación el comunicado oficial:

“Using Adobe AIR, developers and designers will be able to build standalone applications to target devices running the Android operating system. These very same applications can also be deployed as desktop AIR applications on Windows, Mac, Linux, and also as applications on the iPhone using the Packager for iPhone .“

¿Qué significa todo esto?, si compañeros, efectivamente, la idea es desarrollar una única aplicación AIR y distribuirla en todas las plataformas móviles compatibles anteriormente mencionadas, incluyendo iPhone. Si, habeis leido bien, y según el contenido de este comunicado está previsto para el segundo semestre del año. Gran noticia y buen trabajo Adobe.

No se pretende mostrar código sino qué hace el código, además con la premisa de que lo que se muestre sea innovador e inspirador. Esto hace que sea un evento válido, no solo para programadores sino para cualquiera persona que esté interesada en la tecnología Flash como herramienta creativa.

Entre algunas de las novedades que se podrán ver en el evento, se encuentran algunos ejemplos de lo que se puede hacer con las nuevas funcionalidades de generación dinámica de audio (a.k.a síntesis de audio) del Flash Player, un campo apasionante dentro del mundo de la programación del que desde hace bien poquito podemos sacar partido gracias a las nuevas APIs introducidas en el Flash Player 10. Así que ya sabes, si estas por Barcelona el día 4 de Marzo no dejes de reservarte 5 horitas (de de 14 a 19h) para asistir al evento.

powered by: www.joangarnet.com.

Para ir familiariazandonos con estas librerias, he desarrollado un ejemplo muy básico pero a la vez aclarativo de como se implementan dos de estos componentes estadísticos. Entrando en detalle, se tratan de los componentes ‘ColumnChart’ y ‘PieChart’ a mi parecer dos de los más importantes tipos de gráficas de las cuales nos pueden hacer falta en el desarrollo de aplicaciones RIA Flex y las cuales son muy significativas a la hora de explicar en pocas palabras los resultados obtenidos.

La aplicación consta de dos ficheros, el primero que encontramos es el fichero contenedor de los datos en formato XML, el cual será llamado desde la aplicación para ser dibujado gráficamente mediante los componentes de DataVisualization.

datos.xml

<?xml version="1.0" encoding="utf-8"?>
<chart>  
     <equipo>  
         <name>Equipo Azul</name>  
         <tiempo>17</tiempo>  
     </equipo>
     <equipo>  
         <name>Equipo Rojo</name>  
         <tiempo>24</tiempo>  
     </equipo>
     <equipo>  
         <name>Equipo Verde</name>  
         <tiempo>6</tiempo>  
     </equipo>
     <equipo>  
        <name>Equipo Negro</name>  
        <tiempo>10</tiempo>  
    </equipo>  
</chart>

Y por otro lado encontramos el fichero Chart_view.mxml, el cual define a nivel de componente la aplicación en sí, y en él podemos encontrar los dos componentes gráficos que han sido implementados.

Chart_view.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="435" height="348" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"
	creationComplete="datos.send()">
 
	<mx:HTTPService url="datos.xml" id="datos" result="handlerResult(event)" resultFormat="e4x" />
 
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
 
		 	[Bindable]private var info:XMLList;  
 
	        private function handlerResult(evt:ResultEvent):void{  
 
	             info = evt.result.equipo;  
 
	         }  
 
		]]>
	</mx:Script>
 
	 <mx:ColumnChart dataProvider="{info}" id="testChart" showDataTips="true" width="381" height="177" x="27" y="29">  
        <mx:horizontalAxis>  
             <mx:CategoryAxis dataProvider="{info}" categoryField="name"/>  
        </mx:horizontalAxis>  
        <mx:series>  
             <mx:ColumnSeries xField="name" yField="tiempo" displayName="Puntuacion"/>  
        </mx:series>  
      </mx:ColumnChart>  
	 <mx:Label x="128.5" y="8" text="Datos estadísticos automáticos" fontWeight="bold" color="#000000"/>
	 <mx:Canvas x="18.5" y="214" width="398" height="124" borderStyle="solid" borderColor="#757575">
	 	 <mx:PieChart x="20.35" y="0" id="piechart1" showDataTips="true" dataProvider="{info}" width="148.17627" height="122">
	 	 	 <mx:series>
	 	 	 	 <mx:PieSeries displayName="Series 1" field="tiempo" nameField="name" labelField="name"/>
	 	 	 </mx:series>
	 	 </mx:PieChart>
	 	 <mx:Legend dataProvider="{piechart1}" x="231" y="5"/>
	 </mx:Canvas>
 
</mx:Application>

A continuación se puede ver el resultado de la compilación, el cual muestra la información depositada en el fichero XML de una forma profesional y con un aspecto atractivo y amigable al usuario, como bien anotábamos en los primeros párrafos.

Hay que destacar que los componentes DataVisualization, ofrecen una magnitud enorme de posibilidades de configurar sus parámetros, de tal modo que, por ejemplo podemos determinar los vertices de la gráfica con imágenes personalizadas o valores propios de los datos obtenidos, es decir, ofrece un amplio abanico de posibilidades de personalización que espero poder ofreceros en los siguientes post.

Para terminar, agraceros el tiempo depositado en el blog y espero que os haya servido esta breve explicación. Un saludo.