aplicación web como una aplicación desktop con air flex 3

En muchos entornos de desarrollo web “corporativo” (intranet, sistemas internos, etc.) es posible encontrarnos con una gran variedad de browser de antaño.
Tenemos tres alternativas, solicitar actualización de navegadores, re-escribir-adaptar nuestra vista y lógica javascript para muchas versiones o encapsular “nuestra aplicación web” en una aplicación de escritorio.

No es novedad, hace un par de años que existen alternativas como Prims (actualmente Mozilla Chromeless) que nos permiten encapsular el acceso de un sitio web en una aplicación de escritorio, solo es un render html o navegador “capado” para visitar una sola url.

¿Por qué no implementar nuestra solución con AIR Flex 3?
Hay un par de ventajas, como tener una aplicación multiplataforma (win, linux y osx), trabajar sobre un único motor de renderizado (Webkit), etc.

De hecho es sencillo, solo vamos a utilizar el elemento mx:HTML junto a un par de funciones para leer el fichero xml de configuración (url, tamaño de ventana, etc.), como dice el dicho, un código fuente vale más que mil palabras xD.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="callLater(init)">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			private var appIcon:BitmapData;

			private function init():void
			{
				loadConfig();
			}

			private function loadConfig():void
			{
				try {
					var configLoader:URLLoader = new URLLoader();
					var configRequest:URLRequest = new URLRequest('config.xml');
					configLoader.load(configRequest);
					configLoader.addEventListener(Event.COMPLETE, applyConfig);
				}
				catch (e:Error)
				{
					Alert.show('Error al cargar la configuración.','ERROR');
					this.close();
				}
			}

			private function applyConfig(e:Event):void
			{
				// Icono de la aplicación
				// Configuraciones externas (config.xml)
				var data:XML = new XML(e.target.data);
				try {
					this.title = data.title;
					this.width = data.width;
					this.height = data.height;
					navigator.location = data.url;
					loadIcon(data.icon);
				}
				catch (e:Error)
				{
					Alert.show('Error al aplicar configuración','ERROR');
					this.close();
				}
			}

			private function loadIcon(iconSrc:String):void
			{
				var iconLoader:Loader = new Loader();
				iconLoader.load(new URLRequest(iconSrc));
				iconLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void {
					appIcon = e.target.content.bitmapData;
					callLater(applyIcon);
				});
			}

			private function applyIcon():void
			{
				NativeApplication.nativeApplication.icon.bitmaps = [appIcon];
			}
		]]>
	</mx:Script>
	<mx:HTML id="navigator" width="100%" height="100%"/>
</mx:WindowedApplication>

Descarga el proyecto para Flex 3