14.08.08

Minimizar una aplicacion AIR al area de notificacion (systemtray) de windows

Posted in air at 13:54

Una de las funcionalidades que nos ofrece Adobe a la hora de desarrollar una aplicación AIR, que nos puede resultar muy útil, es la de poder añadir un icono al área de notificación de windows (o system tray) y añadirle un menú contextual. Esto se consigue añadiendo el siguiente código cuando inicializamos la aplicación:

Primero habrá que cargar la imagen que queremos que sea nuestro icono en el área de notificación. Para ello utilizaremos la clase Loader. Además monitorizaremos el evento que queremos que sea el que haga aparecer el icono en el área (En el ejemplo se captura el evento de minimizar la ventana). Para ello escribiremos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

[Bindable] 
private var iconoMinimizado:BitmapData; 
 
private function creationComplete():void{ 
    //Cargamos el icono de la bandeja de notificacion y monitorizamos el evento de minimizar 
    var loader:Loader = new Loader(); 
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, inicializarSystray); 
    loader.load(new URLRequest("assets/icon.png")); 
    this.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE, stateChanging); 
} 
 
private function stateChanging(event:NativeWindowDisplayStateEvent):void{ 
    event.preventDefault(); 
    if(event.afterDisplayState == NativeWindowDisplayState.MINIMIZED){ 
        //Ocultamos la aplicacion y mostramos el icono del systray 
        stage.nativeWindow.visible = false 
        NativeApplication.nativeApplication.icon.bitmaps = [iconoMinimizado]; 
    } 
}

En la función que hemos indicado que queremos que sea la que se ejecute cuando se cargue la imagen (inicializarSystray), inicializaremos el menú del icono, el evento click sobre él (en nuestro caso será para restaurar la aplicación) y el tooltip que se mostrará.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

private function inicializarSystray(event:Event):void { 
    iconoMinimizado = event.target.content.bitmapData; 
    if(NativeApplication.supportsSystemTrayIcon){ 
        SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "Ejemplo de Systray"; 
        SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, restaurarAplicacion); 
 
        //Creamos su menu y lo añadimos 
        var menu:NativeMenu = new NativeMenu(); 
        var restaurarNativeMenuItem:NativeMenuItem = new NativeMenuItem("Restaurar"); 
        var maximizarNativeMenuItem:NativeMenuItem = new NativeMenuItem("Maximizar"); 
        var salirNativeMenuItem:NativeMenuItem = new NativeMenuItem("Salir"); 
 
        //Manejador de cada uno de los items del menu 
        restaurarNativeMenuItem.addEventListener(Event.SELECT, restaurarAplicacion); 
        maximizarNativeMenuItem.addEventListener(Event.SELECT, maximizarAplicacion); 
        salirNativeMenuItem.addEventListener(Event.SELECT, cerrarAplicacion); 
 
        //Añadimos los menuitems al menu, y el menu al icono 
        menu.addItem(restaurarNativeMenuItem); 
        menu.addItem(maximizarNativeMenuItem); 
        menu.addItem(new NativeMenuItem("",true)); //Esto es un separador 
        menu.addItem(salirNativeMenuItem); 
        SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = menu; 
    } 
} 
 
private function restaurarAplicacion(event:Event):void { 
    //Ponemos la aplicacion visible y la maximizamos 
    stage.nativeWindow.visible = true; 
    stage.nativeWindow.restore(); 
 
    //Eliminamos el icono del systray 
    NativeApplication.nativeApplication.icon.bitmaps = []; 
} 
 
private function maximizarAplicacion(evt:Event):void { 
    //Ponemos la aplicacion visible y la maximizamos 
    stage.nativeWindow.visible = true; 
    stage.nativeWindow.maximize(); 
 
    //Eliminamos el icono del systray 
    NativeApplication.nativeApplication.icon.bitmaps = []; 
} 
 
private function cerrarAplicacion(event:Event):void{ 
    this.close(); 
}

Con este código, cada vez que minimicemos la aplicación, en lugar de estar en la parte inferior, nos aparecerá un icono en el área de notificación y dándole un click normal, restauraremos la aplicación, y dándole un click con el botón derecho, nos aparecerá un menú de restaurar, maximizar o cerrar.

Para más comodidad os podéis descargar el proyecto AIR con el código fuente para verlo con más calma :). Espero que sirva de ayuda. Saludos!!

04.04.08

Actualizar aplicaciones AIR automáticamente

Posted in air at 20:40

Hola a todos. Recientemente me he visto en la necesidad de realizar una aplicacion AIR que detectase si hay una nueva versión en el servidor y se actualice automáticamente (algo que por otro lado resulta muy útil). Como es algo que me ha llevado más tiempo de lo que me esperaba, he creído conveniente hablar de ello.

Para hacer que nuestra aplicación compruebe si es la versión más reciente, no hay más que seguir los siguientes pasos:

1.- Comprobar que la aplicación en ejecución es la más reciente: Aquí los de Adobe nos han dejado esto un poco a nuestra elección. Es decir, no hay manera de comprobar la versión de un archivo .air (sí que podemos obtener la versión de la aplicación en ejecución), por lo que el sistema está dentro de la imaginación de cada uno. Yo en mi caso esto lo he hecho dejando un archivo muy simple xml en el servidor de la siguiente manera:

<version>X.X</version>

Desde la aplicación hago una llamada a la URL donde se encuentra este archivo, obtengo el valor de la etiqueta version, y la comparo con la versión de la aplicación en ejecución. Para obtener la versión de la aplicación no hay más que utilizar estas tres líneas:

1
2
3

var appXML:XML = NativeApplication.nativeApplication.applicationDescriptor; 
var air:Namespace = appXML.namespaceDeclarations()[0]; 
var version:String = appXML.air::version;

Para obtener la versión del servidor utilizaremos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12

var loader:URLLoader = new URLLoader; 
loader.load(new URLRequest("url archivo version.xml"));
 
private function resultEvent(event:Event):void{ 
var loader:URLLoader = event.currentTarget as URLLoader; 
versionServidor = new XML(loader.data).toString(); 
if(versionServidor != version){ 
    versionMasReciente = false; 
}else{ 
    versionMasReciente = true;
} 
}

Si las versiones de la aplicación y del servidor son diferentes, supondremos que en el servidor hay una versión más actual. Esto lo he hecho yo así, cada uno puede hacer el mecanismo que prefiera.

2.- Descargar la versión del servidor: El siguiente paso es descargar  la versión del instalable de la aplicación que hay en el servidor. Esto se hace de la siguiente manera:

1
2
3
4
5

var request:URLRequest = new URLRequest("url archivo instalable .air"); 
var urlStream:URLStream = new URLStream(); 
var instalableBinario:ByteArray = new ByteArray(); 
urlStream.addEventListener( Event.COMPLETE, manejadorEvento); 
urlStream.load(request);

3.- Una vez descargado el instalable hay que almacenarlo en un fichero local. Esto por ejemplo puede hacerse guardando dicho archivo en el escritorio. Una vez se haya actualizado la aplicación podremos borrarlo si queremos. Para escribir el instalable el disco, dentro de la función de manejador del evento COMPLETE del paso anterior realizaremos dicha acción:

1
2
3
4
5
6
7
8
9
10

//Guardamos el instalable en binario en el escritorio 
urlStream.readBytes(instalableBinario, 0, urlStream.bytesAvailable ); 
var instalable:File = File.desktopDirectory.resolvePath("AIRUpdate.air"); 
 
// Escritura del archivo 
var fileStream:FileStream = new FileStream(); 
fileStream.addEventListener(Event.CLOSE, actualizaAplicacion); 
fileStream.openAsync(instalable, FileMode.WRITE); 
fileStream.writeBytes(instalableBinario, 0, instalableBinario.length); 
fileStream.close();

4.- Una vez hayamos terminado de escribir el fichero, se cierra el fileStream. Como hemos añadido un manejador para el evento close de dicho fileStream, dentro de ese manejador llamaremos a la función que actualiza la aplicación, así tenemos todo correctamente encadenado:

1
2

var updater:Updater = new Updater(); 
updater.update(instalable, versionServidor);

Al llamar a esta función, la aplicación directamente se reinstalará y comenzará a ejecutarse ya con la nueva versión instalada.

Como un ejemplo vale más que mil explicaciones aquí dejo un ejemplo con todo el código anterior y el instalable de dicho ejemplo. Si bajáis directamente el instalable y lo ejecutáis, se descargará otra versión del mismo programa que tengo en el servidor y podréis ver como la versión es diferente.

Espero que sirva de ayuda. Si hay alguna duda me mandáis un e-mail a antonio.serrano.guerrero@gmail.com. Un saludo!!

08.03.08

Servicios web vía Rest en Flex y Air (Segunda parte)

Posted in air, flex at 13:18

En un post anterior comenté como hacer peticiones REST a un servicio web, más en concreto al servicio web que nos ofrecía MyStrands, desde aplicaciones Flex y AIR. En aquel post comenté la forma de hacer las llamadas y ponía una aplicación de ejemplo, la cual estaba a medio programar.

Recientemente he terminado de programar (en mis ratos libres) todas las funcionalidades de búsqueda, así que os dejo los proyectos en flex y air de la aplicación (utilizan el mismo código fuente), para el que le quiera echar un vistazo. Además he estado apurando para terminar de compilarlas con la versión final del Flex Builder 3:

      - Flex:

               - Demostración de la aplicación

               - Descarga del proyecto

               - Descarga del fichero php que utilizo a modo de proxy

       - AIR:

              - Descarga del proyecto

              - Descarga del instalable (archivo .air)

La diferencia entre ambas aplicaciones, es que para la versión flex utilizo una página php a modo de proxy para poder llamar al Servicio Web de MyStrands desde la URL www.antonioserrano.es (problemas de seguridad que sigo sin poder solucionar), mientras que en la aplicación AIR realizo las llamadas al Servicio Web directamente.

Espero que os guste. Un saludo!!

10.12.07

Ejemplo de Native Drag & Drop en AIR

Posted in air at 23:36

Una de las nuevas funcionalidades que nos encontramos dentro de la programación en Adobe Air, es la capacidad de poder arrastrar archivos y directorios desde nuestro escritorio, o desde una ventana de explorador del sistema, a nuestra aplicación, y tener así automáticamente una referencia a ellos. Esto se conoce como Native Drag & Drop.

Para utilizar este Drag & Drop, sólamente tenemos que monitorizar desde la aplicación principal dos eventos. El evento NativeDragEnter, que se dispara cuando entramos en nuestra aplicación arrastrando algún archivo, y el evento NativeDragDrop que se ejecuta cuando soltamos los archivos arrastrados dentro de la aplicación. Para ejecutar el NativeDragDrop previamente tenemos que “dar permiso” a la aplicación para aceptar los archivos que estan siendo arrastrados. Esto se realiza con la intrucción DragManager.acceptDragDrop(this), y se utiliza cuando comprobamos los archivos en el evento NativeDragEnter.

Ambos eventos reciben como parámetro un objeto de la clase NativeDragEvent, dentro del cual, tenemos una propiedad llamada clipboard, que es un objeto de la clase Clipboard, que contiene toda la información de los archivos que estamos arrastrando.

Desde este link podéis descargar el código fuenta de un ejemplo sencillo de utilización. Se trata de un programa que a través de Native Drag & Drop muestra la información de los archivos que le estamos pasando en un FileSystemDataGrid. Sólo admite archivos con extensión .mp3, si dentro de los archivos que arrastramos hay un archivo con otra extensión, o un directorio, rechaza el Drag & Drop.

Podéis descargar el archivo ejecutable y ver el código fuente pulsando con el botón derecho en la aplicación y dándole a view source (es necesario tener el runtime de AIR), o descargar el código fuente y compilarlo en vuestro flex builder.

Espero que sirva de ayuda. Un saludo!!

Editado: Se me olvido mencionar que este ejemplo está compilado con la beta 2 del runtime de AIR. Como muy bien dice ablesa, si solo tienes instalada la beta 3 del runtime, el ejemplo no funcionará. Habrá que tener instalada la beta2.

28.11.07

Ejemplo de uso del componente FileSystemList en AIR

Posted in air at 23:18

Dentro de la gama de componentes de Adobe AIR, disponemos de varios para poder ver el contenido de nuestro disco duro. De todos ellos, los más interesantes son:

  • FileSystemTree: Es como un componente tree normal, solo que las ramas del árbol son los subdirectorios del directorio padre, y las hojas los archivos finales.
  • FileSystemDataGrid: Es un datagrid, en el cual, cada una de las filas es un directorio o fichero. Si es un directorio, al hacer doble click sobre él, cambia los items del datagrid, mostrando la información que hay dentro de él, y así sucesivamente. Es un componente muy completo, ya que muestra información sobre tamaño, fecha de modificación, etc. de los ficheros
  • FileSystemList: Este componente es igual que el anterior, pero en lugar de visualizarse en un datagrid, se visualiza en un componente list, mostrando sólamente el nombre del subdirectorio o fichero

Estos dos últimos, además poseen dos propiedades, backHistory y fowardHistory, que almacenan el historial de directorios que hemos ido visitando. En función del valor de estas propiedades, automáticamente se actualizan otras cuatro propiedades booleanas: canNavigateBack, canNavigateFoward, canNavigateUp y canNavigateDown, las cuales nos indican si podemos navegar atrás, alante, subir un directorio o bajar un directorio.

Como ejemplo básico de manejo de estas propiedades, he realizado un ejemplo muy simple. Se trata de una aplicación que lanza una ventana tipo explorador de directorios de windows, y en función del historial, habilita o deshabilita los botones de volver atrás, alante, etc.

FileChooserWindow

Podéis descargar el archivo ejecutable, para ello deberéis tener el runtime de AIR instalado (supongo que si :D), o descargar el código fuente de la aplicación y compilarlo en vuestro flex builder 3. Espero que sirva de ayuda.

Saludos!!

Editado: Este ejemplo está compilado con la beta 2 del runtime de AIR, si te instalaste directamente la beta 3 sin tener la uno ni la dos, es posible que no funcione.