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.

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.

Pues bien, la clase SharedObject se emplea para leer y almacenar cantidades limitadas de datos en el equipo de un usuario. Los objetos compartidos permiten que se compartan datos en tiempo real entre objetos persistentes en el equipo del usuario. Los objetos compartidos locales son similares a las cookies del navegador.

A continuación se muestran tres usos posibles de los objetos compartidos:

* Un juego que almacena la puntuación máxima de un usuario. El juego puede proporcionar datos personalizados a los usuarios, como el nombre de usuario y la máxima puntuación, sin dedicar espacio de almacenamiento del servidor.

* Una aplicación de listín telefónico que funcione en línea y sin conexión. El listín, como una aplicación de proyector, contendría una caché de datos locales con una lista de nombres y números de teléfono introducidos por el usuario. Cuando hubiera una conexión a Internet disponible, la aplicación recuperaría información actualizada de un servidor. En caso contrario, la aplicación utilizaría los últimos datos guardados en objetos compartidos.

* Preferencias de usuario o datos de control para un sitio Web complejo, como un registro de los artículos que ha leído un usuario en un sitio de noticias. El registro de esta información le permitiría mostrar de forma distinta los artículos que ya ha leído y los que no ha leído. Si se almacena esta información en el equipo del usuario, se reduce la carga del servidor.

Los objetos compartidos locales mantienen la persistencia local. Por ejemplo, puede llamar a SharedObject.getLocal() para crear un objeto compartido que contenga la máxima puntuación obtenida en un juego. Dado que el objeto compartido es persistente localmente, Flash guarda sus atributos de datos en el equipo del usuario cuando se cierra el juego. La próxima vez que se abra el juego, aparecerá la máxima puntuación de la sesión anterior. También se pueden definir las propiedades del objeto compartido como null antes de cerrar el juego. De esta forma, la próxima vez que se ejecute el archivo SWF, el juego se abrirá sin mostrar la puntuación anterior.

Para crear un objeto local compartido, utilice la siguiente sintaxis:

var so:SharedObject = SharedObject.getLocal(“userHighScore”);
so.data.highScore = new Number();
so.flush();

En este ejemplo, el objeto compartido está alineado o copiado en el disco de forma explícita. Cuando se cierra una aplicación, los objetos compartidos se alinean automáticamente; sin embargo, aquí se muestran para demostrar el paso de escribir los datos en un disco.

Consideraciones relativas al espacio del disco local: Los objetos compartidos locales pueden ser muy útiles, pero presentan algunas limitaciones que debe considerar al diseñar su aplicación. En ocasiones es posible que los archivos SWF no puedan escribir objetos compartidos locales y algunas veces los datos almacenados en objetos compartidos locales deben eliminarse sin que el usuario lo advierta. Los usuarios de Flash Player pueden gestionar el espacio de disco disponible para dominios individuales o para todos los dominios. Si los usuarios reducen el espacio en disco disponible, es posible que se eliminen algunos objetos compartidos locales. Los usuarios de Flash Player tienen también controles de confidencialidad para impedir a dominios de terceros (distintos de los de la barra de direcciones del navegador) que lean o escriban objetos compartidos locales.

Comentado y aclarado lo anteriormente mencionado, comienzo mostrando este pequeño Widget desarrollado en AIR. Su finalidad es bastante sencilla, está basado en la idea de recoger información de ciertas Web que ofrecen servicio de noticias mediante Feed´s RSS, y los cuales aprovecharemos para crearnos un pequeño entorno el cual recoja esta información, a veces pesada en su método de búsqueda. Con lo cual nos hará más facil la recopilación de cierta información de interes social, y le daremos un toque personal para ajustarlo a nuestro justo.

Pues bien, para empezar hay que decir que la aplicación ha sido desarrollada de una manera limpia y simple, basandome en dos clases MXML. La primera clase contiene las vistas principales de la aplicación y la segunda clase, es un componente Flex que extiende de un Canvas, el cual ha sido creado para el listado de las noticias que recojamos. No os preocupeis, a continuación se explica cada una de las dos clases anteriormente mencionadas.

“ps_feed_rss.mxml”

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="250" height="334" 
	borderColor="#000000" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#191919, #C7B3B3]"
	showStatusBar="false" showTitleBar="true" showGripper="false" title="www.portalscreen.com || Lector RSS"
	creationComplete="init();" usePreloader="true">
 
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import flash.net.navigateToURL;
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
 
			[Bindable]
			private var ListaFeeds: ArrayCollection;
			private var obj: Object;
			private var stringFeed:URLRequest = new URLRequest('http://estaticos.marca.com/rss/portada.xml');
			private var _loader:URLLoader;
			[Bindable]
			private var listadoResultado:ArrayCollection ;
 
			private function init():void{
 
				ListaFeeds = new ArrayCollection();
 
				// Agregamos Feeds al ComboBox
				obj = new Object;
					obj.label = "Marca.com | Portada";
					obj.data = "http://estaticos.marca.com/rss/portada.xml";
					ListaFeeds.addItem(obj);
 
				obj = new Object;
					obj.label = "Elpais.com | Deportes";
					obj.data = "http://www.elpais.com/rss/feed.html?feedId=17048";
					ListaFeeds.addItem(obj);
 
				// Inicializamos la carga del primer feed 
				// y creamos listener de respuesta de datos
				_loader = new URLLoader;
				_loader.addEventListener(Event.COMPLETE, finishLoaded);	
				_loader.load(stringFeed);			
 
			}
 
			private function finishLoaded(ev:Event):void{
 
				listadoResultado = new ArrayCollection();
 
				for each ( var dato:* in XML(ev.target.data).channel.item){
					trace('----');
					listadoResultado.addItem(dato);
 
 
				}
 
				resultado.dataProvider = listadoResultado;
 
 
 
			}
 
			private function changeSelected():void{
				stringFeed = new URLRequest(cmbFeed.selectedItem.data);
				_loader.load(stringFeed);
 
			}
 
 
			private function gotoWeb():void{
 
				navigateToURL(new URLRequest('http://www.portalscreen.com'));				
			}
 
 
		]]>
	</mx:Script>
 
	<mx:ComboBox x="9" y="25" id="cmbFeed" width="198" dataProvider="{ListaFeeds}" change="changeSelected()" />
	<mx:Label x="10" y="10" text="Seleccione entrada RSS:" color="#FFFFFF"/>
	<mx:List x="6" y="77" width="237" id="resultado" height="211" itemRenderer="comboRenderer" dataProvider="{listadoResultado}" selectable="false" />
	<mx:Label x="9" y="59" text="Resultados" color="#FFFFFF"/>
	<mx:Label x="126" y="287" text="by Portalscreen.com" color="#FFFFFF" id="web" click="gotoWeb()" mouseChildren="false" buttonMode="true"/>
	<mx:HRule x="10" y="52" width="228" height="2" strokeColor="#1A1A1A"/>
 
</mx:WindowedApplication>

El código habla por sí mismo. El proceso es el siguiente, la función init() crea dos objetos, uno por cada feed que quremos añadir a la lista desplegable que posteriormente nos servirá para decidir que feed queremos visualizar, el siguiente paso es crear la variable que nos realizará la recuperación de los datos XML de noticias, que posteriormete una vez terminada, el Listener de esta variable nos realizará el pintado de las noticias en su correspondiente componente, en este caso se trata de un ComboBox.

El siguiente y último paso es el de crear el Componente ItemRenderer que nos servirá para darle un toque más artístico a la aplicación. En este caso se ha utilizado un componente basado en un Canvas y en él hemos implantado un TextArea para el título de la noticia y un Label que hará de enlace de la noticia hacia la web de su publicación.

“comboRenderer.mxml”

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="218" height="60" backgroundColor="#EBEBEB">
	<mx:Script>
		<![CDATA[
			import flash.net.navigateToURL;
		]]>
	</mx:Script>
	<mx:TextArea x="5" y="5" width="192" height="37" text="{data.title}" textAlign="left" selectable="false" editable="false" borderStyle="none" backgroundAlpha="0.0" fontWeight="bold" color="#2C2C2C"/>
	<mx:Label x="138" y="40" text="Leer +" width="75" textAlign="right" color="#061781" fontWeight="bold"
		mouseChildren="false" buttonMode="true" click="navigateToURL(new URLRequest(data.link));"/>
	<mx:HRule x="9" y="55" width="200"/>
</mx:Canvas>

Para concluir con esta entrada, os facilito una url de Descarga de este ejemplito sobre como crear un lector de Feed´s RSS y una imagen de muestra sobre la aplicación. Un saludo y como siempre, espero que sirva de ayuda para muchos y de referencia para otros.

Descargar Aplicación AIR

De ahí la iniciativa que comunidades de desarrolladores toman para crear nuevas e ingeniosas iniciativas basadas en este software. Basandonos en esta pequeña introducción, os hago llegar esta grandiosa guía, disponible en libro y para ebook, escrito por Jeff Winder and Paul Tondeur.

Se trata de Papervision 3D Essentials, está disponible en inglés y tras recorrer sus 13 capítulos, veremos grandes ejemplos y explicaciones que seguro nos ayudarán a entender la básica de este software. Aquí teneis los 13 capítulos en los que se compone el libro:

1. Setting Up
2. Building Your First Application
3. Primitives
4. Materials
5. Cameras
6. Moving Things Around
7. Shading
8. External Models
9. Z-Sorting
10. Particles
11. Filters and Effects
12. 3D Vector Drawing and Text
13. Optimizing Performance

Para concluir el Post, os animo a iniciaros a este entorno el cual ofrece multitud de opciones a la hora de crear nuevas ideas basades en nuestro grandioso Flex builder. Ánimo y espero que os sea de gran ayuda esta pequeña introducción. Saludos a todos.

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:

English | 427 pages | PDF | 5.1 MB Download Torrent: Papervision3d Esentials

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

http://rapidshare.com/files/124126461/AAC-M-R.rar

Password:full+free

En esta primera toma de contacto con las clases Papervision en Action Script 3, os ilustraré un ejemplo sobre una escena 3D básica. Dicho todo esto, aquí tenéis el código que posteriormente comentaremos paso a paso:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.BasicView;
 
	[SWF(frameRate="31", width="500", height="350", backgroundColor="0xffffff")]
 
	public class BasicViewSample extends Sprite
	{
        private var bView:BasicView;
 
		public function BasicViewSample()
		{
			Init3D();
		}
 
		private function Init3D():void
		{
			// Creamos el BasicView que contiene viewport, camera, renderer, etc
			bView = new BasicView(500, 350, false, false);
 
			// añadimos la vista al displayList
			addChild(bView);
 
			// Configuramos la cámara:
			bView.camera.focus = 25;
            bView.camera.zoom = 10;
            bView.camera.z = -500;
            bView.camera.y = 300;
            bView.camera.x = 0;
 
			CreateObjects();
			addEventListener(Event.ENTER_FRAME, Loop3D);
		}
 
		private function CreateObjects():void
		{
			var mat:WireframeMaterial = new WireframeMaterial;
			mat.doubleSided = true;
 
			var plane:Plane = new Plane(mat, 500, 500, 8, 8);
			plane.rotationX = -90;
 
			// lo añadimos a la escena del BasicView.
			bView.scene.addChild(plane);
 
			//camera.target = plane;
		}
 
		private function Loop3D(e:Event):void
		{
			var radio:uint = 500;
			var angulo:Number = mouseX + (stage.stageWidth / 2);
 
			Camera3D(bView.camera).x = radio * Math.cos(angulo / 100);
			Camera3D(bView.camera).z = radio * Math.sin(angulo / 100);
			Camera3D(bView.camera).y = - mouseY + (stage.stageHeight / 2) + 100;
 
			// llamamos al método de renderizado del BasicView:
			bView.singleRender();
		}
	}
}

Como detalle importante, hay que destacar que lo más importante a tener en cuenta es el añadir a la aplicación en sí la escena en la que se basa nuestro escenario 3D, en este caso será BasicView.

La clase BasicView nos proporciona esencialmente todos los objetos necesarios para sacar un render (escena 3D), ya sea, camara, scene entre otros.

Una vez añadido el objeto heredado de BasicView al stage, lo siguiente es configurar varias características de la camara 3D, tal y como muestra el ejemplo. A parte de dotar a la cámara de una posición en la escena o de adaptarle un zoom específico, también podemos dotarla de una rotación de sus ejes X, Y o Z, entre otros muchos métodos disponibles.

Centrándonos un poco en la implementación de objetos en la escena, en el ejemplo hemos utilizado un objeto que probablemente será uno de los más comunes, el Plano, mejor dicho clase Plane. Aparte de incluir el objeto, también hemos querido aplicarle un material muy simple, se trata del material WireframeMaterial, que simple mente nos muestra el objeto Plano y los polígonos que lo forman.

Por último dejad que os comente la función que hace posible este magnífico entorno 3D. Para el ejemplo hemos utilizado el método Enter_Frame de la clase Events. Lo único que hace realmente es llamar a la función Loop3D en cada momento, y ésta es la encargada de montar el escenario en cada momento, rotando los objetos añadidos a la escena a nuestro antojo. Por otro lado y como apoyo para los impetuosos, os recomiendo que echeis un vistazo al método onRenderTick de la clase BasicView, realiza el mismo efecto que Enter_Frame pero es propio de BasicView.

Dicho todo esto, solo me queda animaros a crear nuevos entornos web basados en este entorno y no menos desearos una feliz navidad y un prospero año nuevo.

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.