Importante: Es recomendable que antes leas el tema anterior: Introducción a Adobe Air.

Cómo usar ventana transparente en Adobe Air

La idea es la misma, una aplicación que muestre el famoso Hola Mundo, pero en esta ocasión usando una ventana transparente o en otras palabras sin borde ni fondo. Para lograrlo usamos la propiedad systemChrome y transparent en la seccion initialWIndow del XML de la aplicación, de esta forma:

<initialWindow>
<content>HolaMundo-transparente.html</content>
<visible>true</visible>
<width>240</width>
<height>220</height>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
</initialWindow>

La propiedad systemChrome hace referencia al “skin” del sistema operativo, que incluye la barra de titulo junto a los botones de maximizar, minimizar y cerrar, como en este caso no los deseamos usamos el valor none para desactivarlos. Además puede utilizar valores como . La propiedad transparent, como su nombre lo indica, define si deseamos fondo en nuestra aplicación o si preferimos fondo transparente, como en este caso es true.

Luego podemos trabajar normalmente en nuestra ventana transparente, obviamente evitando aplicar fondos con CSS para no perder el efecto, aunque con ayuda de imágenes semitransparentes (PNG) podemos lograr buenos efectos. Para continuar con el ejemplo del tema anterior, he usado el texto Hola Mundo junto a un genial icono de un mundo (tomado del paquete NX09 de MazeNL77):

Como se puede observar el efecto es muy bueno, icono sin bordes y el texto en un fondo semitransparente, solo utilizando imágenes PNG. Aunque debo aclarar que al usar ventanas transparente hay inconvenientes que resolver por el hecho de no usar el borde estandar, por ejemplo cómo mover la ventana o cerrarla.

Cerrar una aplicación de Adobe Air

Para cerrar la aplicación he incluido un icono dentro de un enlace (a) que ejecuta el código para cerrarla:

<a class="cerrar" href="#" onclick="window.close();NativeApplication.exit();" title="Click para cerrar">X</a>

La etiqueta tiene las siguientes propiedades: class para definir el estilo, href con valor # para obtener el efecto de enlace nada más, title para mostrar la descripción y el atributo onclick con el código que realmente importa. Este código hace referencia a dos metodos, el primero, window.close() cierra la ventana, y el segundo, NativeApplication.exit() finaliza la aplicación, es importante mencionar que cerrar la ventana no finaliza la aplicación ya que esta puede continuar ejecutándose sin necesidad de una ventana.

Mover una ventana sin bordes en Adobe Air

Como mencione anteriormente, al eliminar el borde estandar también perdemos funcionalidades sencillas como mover la ventana, la solución para ello es asignar un elemento encargado de “detectar” el movimiento y un que genere el evento adecuado para activar el movimiento de la ventana.

El elemento encargado de detectar el movimiento sera la imagen del mundo (ver imagen anterior):

<div id="imagenMundo"><img src="app:/imagenes/mundo.png" /></div>

notese el id de la imagen (imagenMundo) porque a traves de él llamaremos al evento onMove. Luego en un script en el header colocamos el siguiente código:

<script>
function inicio(){
var imagenMundo = document.getElementById("imagenMundo");
imagenMundo.addEventListener("mousedown",onMove,true);
}
var onMove = function(event){
nativeWindow.startMove();
}
</script>

La función inicio (llamada al cargar el body) asigna un detector (EventListener) a la imagen del mundo cuando este sea presionado con el mouse (mousedown) y lanza el evento onMove. Más adelante cuando el evento onMove sea ejecutado, este se encargará de iniciar el método nativeWindow.startMove que incorpora Air para el movimiento de la ventana.

Posicionar la ventana de Air dentro de la pantalla

Para finalizar este artículo solo hace falta mencionar cómo posicionar la ventana de la aplicación en Air dentro de la pantalla. En el caso de esta aplicación he decidido que inicie centrada en la pantalla, y para ello utilizo el siguiente código dentro de la funcion inicio (ver arriba):

function inicio(){
var imagenMundo = document.getElementById("imagenMundo");
imagenMundo.addEventListener("mousedown",onMove,true);
nativeWindow.x=(air.Capabilities.screenResolutionX/2)-(nativeWindow.width/2);
nativeWindow.y=(air.Capabilities.screenResolutionY/2)-(nativeWindow.height/2);
}

Con nativeWindow hacemos referencia a la ventana, x y y definen la posición de la ventana, a cada una le asigno el valor en el que deseo que aparezca la ventana en horizontal y vertical respectivamente. La “formula hablada” para centrar es la siguiente: La mitad de la resolución actual menos la mitad de las dimensiones de la ventana, de esa forma lograremos las coordenadas para centrarla.

Con air.Capabilities.screenResolutionX obtenemos el ancho de la resolución y con air.Capabilities.screenResolutionY el alto, mientras que con nativeWindow.width obtenemos el ancho de la ventana y con nativeWindow.height el alto de la misma. Asignemos estos valores a la formula y obtendremos las coordenadas para centrar la aplicación.

A continuación una imagen de la aplicación en el centro de mi escritorio

Descargar archivos de Adobe Air del ejemplo: holamundo-transparente.zip (33.4kb)

Más información acerca del tema

• AIR window basics: Información básica para trabajar con ventanas, tipos de ventana, systemChrome y combinaciones de ambos
• Capabilities: Referencia acerca de las funciones para conocer las capacidades del sistema (PC del usuario), como resolución, idioma, sistema operativo, etc.
• Customizing the look and feel of a window: Tutorial bastante completo acerca de como personalizar la apariencia de una ventana, incluye uso de boton minimizar, cerrar, redimensionar y mover, entre otros.
• Introducción a Adobe Air: Artículo anterior acerca de cómo iniciar el desarrollo de una aplicación en Adobe Air.

5 comentarios

ivanmendoza 2008 - Bajo licencia Creative Commons By-NC-SA.