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.

Esta aplicación consiste en adaptar un Grid de imágenes creadas desde código en las cuales el usuario pudeda hacer Clic. Se han utilizado los componentes Image() y HBox() para su elaboración, y un fichero ‘datos.xml’ para la carga dinámica de cada imágen.

[El link al ejemplo - Online]
[Descarga del código fuente]

Espero que te sirva amigo Juan, y a los demás os animo a participar con cualquier aporte que querais comentar.

Se trata de un Carousel de imágenes automáticas, la cual carga imágenes dinámicamente a partir de los datos de un fichero XML y seguidamente proporciona un efecto Fade entre transición y transición.

En este ejemplo podréis encontrar la forma de crear imágenes a partir de la clase Image() y conocer como asignar un efecto desde código as3.

Desde aquí podéis descargar el código fuente del ejemplo: ps_banner_auto.rar

[Galería de imágenes en Flex]

Espero que os haya sido de ayuda, que lo disfrutéis.

Son muchos los blogs de profesionales en la materia, pero pocos los que recopilan lo necesario para un iniciado. Este post se lo dedico a una persona recién afiliada al blog, el cual me pidió consejo sobre como empezar en este mundillo.

Dos de las páginas que encuentro más interesantes, en las cuales encontrareis gran cantidad de ejemplos prácticos son:

• Flex in a Week : Sitio web de ejemplos paso a paso a cargo de los desarrolladores de Adobe.
• First Steps in Flex : Creado por Bruce Eckel y James Ward.

Blogs que considero de notable experiencia en el mundo RIA:

• Made in Flex
• Inside RIA

Referencias bibliográficas de lectura obligatoria:

• ActionScript 3 : Design Patterns (Nivel Avanzado)
• Adobe AIR : Crear – Modificar – Reutilizar (Muy Aconsejable, nivel Medio)

Estoy seguro que estas referencias os servirá a muchos para esas primeras aplicaciones, y una vez más me despido no sin antes invitaros a comentar sobre cualquier tema que os resulte interesante en el entorno RIA.

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      minWidth="21" minHeight="21"
      alpha.disabled="0.5">
 
  <fx:Metadata>
    <![CDATA[ 
      [HostComponent("spark.components.Button")]
    ]]>
  </fx:Metadata>
  ...
  <s:states>
    <s:State name="up"/>
    <s:State name="over">
    <s:State name="down"/>
    <s:State name="disabled"/>
  </s:states>
 
  <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0x000000" 
                            color.down="0xFFFFFF"
                            alpha="0.01"
                            alpha.down="0"/>
        <s:GradientEntry color="0x000000" 
                            color.down="0xFFFFFF" 
                            alpha="0.07"
                            alpha.down="0.5"/>
      </s:LinearGradient>
    </s:fill>
  </s:Rect>
 
  ...
  <s:SimpleText id="labelElement"
                   textAlign="center"
                   verticalAlign="middle"
                   lineBreak="toFit"
                   truncation="1"
                   horizontalCenter="0" 
                   verticalCenter="1"
                   left="10" right="10" top="2" bottom="2">
  </s:SimpleText>
 
</s:SparkSkin>

Las etiquetas MXML en la definición de la piel utilizan los elementos FGX, a su vez, se compilan en las clases de ActionScript que utilizan directamente render FlashPlayer 10 y primitivas gráficas. Tenga en cuenta que las declaraciones visuales referenciadas en el estado del componente con la anotación: color.down, por ejemplo, especifica el color en el estado down del componente.

<?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>

El código del ejemplo sería este:

** Requires:
 *  - Slider control in Flash library.
 *  - Publish for Flash Player 10.
 */
 
[SWF(width="400", height="300")]
 
import fl.controls.Slider;
import fl.controls.SliderDirection;
import fl.events.SliderEvent;
 
var slider:Slider = new Slider();
slider.direction = SliderDirection.HORIZONTAL;
slider.minimum = 0;
slider.maximum = 360;
slider.value = 45;
slider.tickInterval = 45;
slider.snapInterval = 1;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE, slider_change);
slider.move(10, 10);
addChild(slider);
 
var spr:Sprite = new Sprite();
spr.graphics.lineStyle(2, 0xFF0000);
spr.graphics.drawRect(0, 0, 100, 80);
spr.x = Math.round((stage.stageWidth - spr.width)/2);
spr.y = Math.round((stage.stageHeight - spr.height)/2);
spr.rotationX = 45;
addChild(spr);
 
function slider_change(evt:SliderEvent):void {
    spr.rotationX = evt.value;
}

Espero que les sirva, un saludo a todos.

• Manejo de targets arbitrarios y los types
• Funcionalidad adicional útil
• Solucionar los problemas existentes ( funcionalidad y la API))
• Mantener la compatibilidad de los efectos anteriores

fuente: www.adobe.com

También se puede ver la explicación a cerca de los eventos TweenEffect de la clase mx.effects y la animación por parte de la clase spark.effects, determinante fusión de ambas. Uno de los puntos mas atractivos que se pueden ver en la ponencia, es el referente al componente Pararel, el cual se muestra con varios ejemplos y los efectos que intervienen en este.

Bajo mi punto de vista es muy buena referencia para aquellos que quieran dar un poco más de juego a las aplicaciones RIA basadas en Flex.

Que disfruten de la conferencia, y espero vuestras opiniones al finalizar la conferencia.

Reciban un saludo.

Porqué digo esto, es muy sencillo, ¿nunca os ha pasado, que al intentar implementar una clase en flex/flash/air por obra del destino y tras dolores de cabeza no habéis podido utilizarla o simplemente habéis desistido?, pues bien eso mismo me pasó a mí en uno de mis primeros proyectos, cuando tuve que utilizar la clase LocalConnection por primera vez.

El caso práctico en el cual utilicé la clase LocalConnection, fue para crear una conexión a un Stream dinámico de Vídeo. En las pruebas, las cuales las efectuaba directamente desde el compilador, nunca aparecieron errores de conexión y todo iva sobre ruedas. Hasta que concluí con la aplicación y llegó el momento de su publicación, momento en el cual se vieron truncados algunos aspectos de la Aplicación RIA. Tras probar el módulo as3 resultante alojado en un dominio, no pude realizar dicha conexión, y tampoco me aparecian errores al respecto. Lo probé infinidad de veces, incluso llegué a implementarlo en un widget air, para comprobar otras posibles causas. Pero no hubo resultados favorables.

Poco después, comprobando varios aspectos técnicos con un amigo pudimos determinar la causa del problema. El fallo estaba, en que en los momentos de las comprobaciones de dicho módulo con la clase LocalConnection se estaba utilizando la aplicación FlashGet (Acelerador de descargas) en segundo plano, la cual utiliza esa misma clase LocalConnection y a su vez inhabilita las demás conexiones entrantes que se puedan llegar a abrir.

A nivel de uso sobre la clase LocalConnection este post no puede ofrecer mucha información en detalle, pero puede ayudaros si alguna vez os encontráis con este tipo de situación. Por lo menos a mí, me podría haber ahorrado algunas horas de investigación.

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.

Con este libro aprenderá a aplicar patrones de diseño para solucionar problemas, optimizar código y aumentar la productividad. Encontrará pequeñas aplicaciones de ejemplo ilustrando cada patrón de diseño para comprender a la perfección cómo funcionan. Verá cómo programar proyectos de éxito de principio a fin y se convertirá en un auténtico experto en ActionScript.

Editorial: ANAYA MULTIMEDIA.

Colección: PROGRAMACIÓN.

Autor / Autores: Lott, Joey; Patterson, Danny.

Número de páginas: 352

Encuadernación: Rústica Hilo

Formato: 17,50 x 22,50.

Bajo mi punto de vista, es una referencia bastante importante en el mundo del desarrollo de aplicaciones Ria. Principalmente se basa en la estructuración de código y en la unificación de lenguaje entre programadores basandonos en un patrón aplicado. Lo recomiendo para todo tipo de perfil de programador, muy útil.

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.

Se trata de “Adobe AIR : crear-modificar-reutilizar”, título que Anaya Multimedia pone a nuestro servicio por el módico precio de unos 42 euros. En él podreis encontrar jugosos ejemplos que seguro os servirán como base o apoyo para desarrollar aquellas ideas sobre aplicaciones que se os ocurran. Desde un simple lector RSS, hasta un complejo manejador de mapas o reproductores multimedia y video. Personalmente recomiendo el libro, pues nunca se sabe si en él podemos encontrar aquél método que nos solucione la papeleta en alguna complegidad de nuestra aplicación, o simplemente ignoramos algunas funciones bastante útiles, y las cuales pueden dar un toque profesional a nuestra obra.

Os facilito una imagen para que tengais de referencia y una url para aquellos que useis ebook! o simplemente no contais con medios económicos.

Adobe AIR Create – Modify – Reuse
Wrox | Mark Leuchner, Todd Anderson, Matt Wright | Apr2008 | 483 pages | PDF | 5.30MB

Descarga
www.mediafire.com/?4bzbkvfidgk

Pues bien, encabezando lo anteriormente mencionado, os ilustro la base del ejemplo y la cual tomaremos de base:

 var datos:XML;
 datos = new XML();
 datos = 
                 <libros>
                    <libro isbn='2345'>
                               <titulo> La leyenda negra </titulo>
                               <precio>22€</precio> 
                    </libro>
                    <libro isbn='2346'> 
                               <titulo> A tiro limpio </titulo>
                               <precio>12€</precio> 
                    </libro>
                 </libros>;
 
 Alert.show(datos.libro.(@isbn == '2345').titulo); // La leyenda negra
 Alert.show(datos.libro.titulo[1]); // A tiro limpio
 Alert.show(datos.libro.(titulo.charAt(0) == 'A').precio);  // 12€

Espero que os sea de ayuda, o como mínimo de apoyo en el desarrollo de vuestras propias aplicaciones RIA.

Un saludo, y si tenéis alguna pregunta sobre este u otro tema referente al desarrollo de aplicaciones en Flex & Air, no dudéis en preguntar, de algún modo u otro al final se acaban solventando las dudas.