Adobe Air II – Aplicaciones en la barra de tareas

Después de ver cómo crear los distintos tipos de ventana con los que se puede crear una aplicación AIR, veremos hoy como hacer una de esas cosas tan chulas que se minimizan en un icono al lado del reloj de Windows.

Es muy sencillo una vez, de nuevo, se entiende el concepto. No todos los sistemas operativos permiten lo que queremos hacer, Windows, Mac OSX y algunos Linux. Para saber si lo soporta AIR dispone de dos métodos, supportsSystemTrayIcon, para entornos tipo Windows, y supportsDockIcon, para entornos tipo Mac.

Antes de meternos en berenjenales necesitaremos, al menos, dos iconos para nuestra aplicación (gif o png si es transparente) a 16×16 píxeles y a 128×128.

En este código veremos cómo asignar un icono en la barra de tareas o en el Dock y crear un menú contextual en este icono con la opción “Salir”, puedes añadir tantas opciones como estimes oportuno.

private function appTray():void{
    var icon:Loader = new Loader();
    var iconMenu:NativeMenu = new NativeMenu();
    var exitMenu:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Salir"));
    exitMenu.addEventListener(Event.SELECT, function(event:Event):void {
        NativeApplication.nativeApplication.icon.bitmaps = [];
        NativeApplication.nativeApplication.exit();
    });

    if (NativeApplication.supportsSystemTrayIcon) {
        icon.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoadComplete);
        icon.load(new URLRequest("icons/icono16.png"));

        var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
        systray.tooltip = "Mi Aplicación";
        systray.menu = iconMenu;
        systray.addEventListener(ScreenMouseEvent.CLICK, restauraVentana);
    }

    if (NativeApplication.supportsDockIcon){
        icon.contentLoaderInfo.addEventListener(Event.COMPLETE,iconLoadComplete);
        icon.load(new URLRequest("icons/icono128.png"));
        var dock:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
        dock.menu = iconMenu;
    }
}

private function restauraVentana(e:ScreenMouseEvent):void{
	stage.nativeWindow.visible=true;
	stage.nativeWindow.orderToFront();
}

Como veis, creamos el menú que le vamos a asignar y cargamos el icono adecuado dependiendo del soporte del sistema operativo. Eso es todo.

Simplemente llamaríamos a esta función en el evento creationComplete de la aplicación y ya la tendríamos integrada en la barra de tareas o en el Dock.

Éste es el resultado.

Aplicacion AIR en la barra de tareas

Sencillo ¿no?. En el siguiente capítulo, aplicaciones que se actualizan automáticamente si hay una versión nueva.

8 comentarios en “Adobe Air II – Aplicaciones en la barra de tareas

  1. Hola, gracias por la respuesta, creo que formule mal la pregunta:
    Yo tengo AIR instalado en mi Dreamweaver, Yo trabajo con Javascript, no encuentro en ningun lado el “CreationComplete” , como puedo acceder hasta este archivo, o que necesito para poder verlo?

  2. Hola Sebastian,

    No puedo ayudarte, no sé cómo trabaja el dreamweaver en este aspecto, pero seguro que en la ayuda te indica cómo esperar a los eventos correspondientes.

  3. function doLoaderComplete( evt ){
    var isMac = null;

    // Get the bitmap data (pixels) of the icon for the system
    // The system will size and convert to the appropriate format
    imgDock = evt.target.content.bitmapData;

    if( air.NativeApplication.supportsSystemTrayIcon ){
    // Setup Windows specific system tray functionality
    air.NativeApplication.nativeApplication.icon.tooltip = SYSTRAY_TOOLTIP;
    air.NativeApplication.nativeApplication.icon.addEventListener( air.MouseEvent.CLICK, doTrayClick );
    isMac = false;
    }
    else {
    isMac = true;
    }

    // Override the default minimize behavior and use our own
    nativeWindow.addEventListener( air.NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, doStateChange );

    // Setup a menu on the docked icon to restore or close
    air.NativeApplication.nativeApplication.icon.menu = createMenu( isMac );
    }

    function doTrayClick( evt ){ alert(“test”);
    undock();
    }

    // Called when the window is minimized
    // Minimizes to systray/dock in place of traditional minimize
    function doStateChange( evt ){
    if( evt.afterDisplayState == air.NativeWindowDisplayState.MINIMIZED ){
    // Stop the default behavior
    // Call shared function to systray/dock
    evt.preventDefault();
    dock();
    }
    }

    function createMenu( isMac ){
    var menu = new air.NativeMenu();
    var openItem = new air.NativeMenuItem( OPEN_ITEM );
    var exitItem = null;

    // Both operating systems have an option to open the window
    openItem.addEventListener( air.Event.SELECT, doOpenSelect );
    menu.addItem( openItem );

    if( !isMac ){
    // Mac provides built-in “Quit” item
    // Create an “Exit” item for Windows
    exitItem = new air.NativeMenuItem( EXIT_ITEM );
    menu.addItem( exitItem );
    }

    return menu;
    }

    function dock(){
    nativeWindow.visible = false;
    air.NativeApplication.nativeApplication.icon.bitmaps = [imgDock];
    }

    function undock(){
    alert(“test”);
    // Show the window and bring it to the front
    nativeWindow.visible = true;
    nativeWindow.orderToFront();

    // Clear out the systray/dock icon (optional)
    air.NativeApplication.nativeApplication.icon.bitmaps = [];
    }

    function doClosing( evt ){
    var answer = null;
    // Stop the default of actually closing the window
    evt.preventDefault();
    // Ask the user what action to take
    answer = confirm( “Select “OK” to exit or “Cancel” to minimize.” );
    if( answer ){
    // If they actually want to close the application
    closeApplication();
    }
    else {
    // If they really just want to minimize the window
    dock();
    }
    }

    function closeApplication(){
    nativeWindow.close();
    }

    function newChromelessWindow(){
    var imgDock = null;
    //$(document).ready( function() {

    // Loader to load the icon image
    // Use Loader not HTML image to get at bitmap data (pixels)
    var loader = new air.Loader();

    // Handle when the icon image is loaded
    // Load the icon image (in this case local)
    loader.contentLoaderInfo.addEventListener( air.Event.COMPLETE, doLoaderComplete );
    loader.load( new air.URLRequest(“icon2.png” ) );

    // Custom event handler for window closing
    // Want to prompt the user to see if they want to close or minimize
    nativeWindow.addEventListener( air.Event.CLOSING, doClosing );
    //} );
    }

    function getDesktopFileList(){
    newChromelessWindow();
    var log = document.getElementById(“log”);
    var files = air.File.desktopDirectory.getDirectoryListing();
    for (i = 0; i < files.length; i++){
    log.innerHTML += files[i].name + "”;
    }
    }

  4. Muy interesante … Tengo un buen tiempo buscando una informacion al respecto de las aplicaciones de Adobe air con la barra de tareas, resulta que quiero generar una aplicacion que no aparesca en la barra de tareas que solamente aparesca un icono en la parte del reloj es posible hacer que la aplicacion este corriendo pero si aparecer en la barra de tareas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *