Iván Mendoza

He visto en Contrasentido un meme (idea de Sleevage) que me llamo mucho la atención, tanto así que decidí participar. El meme consiste en crear la portada de un album:

1. http://en.wikipedia.org/wiki/Special:Random
   El título del primer artículo será el nombre de la banda
2. http://www.quotationspage.com/random.php3
   Las últimas cuatro palabras de la última cita serán el nombre del disco
3. http://www.flickr.com/explore/interesting/7days/
   La tercera foto, sin importar qué es, será la portada del disco
4. Combinar las cuatro en tu software de edición de imágenes
5. Compartir

en mi caso:

1. Titulo: David Cross (Footballer)
2. Nombre del disco: loses interest in students
3. Imagen: What if I were smiling and running into your arms? Would you see then what I see now? por *Zara. Aclaro que elegí la tercera foto pero no de la primera página, intente varias veces hasta encontrar una con licencia CC.
4. Combine en Photoshop.
5. He aquí el resultado:

Anteriormente publique cómo crear una aplicación en Adobe Air, en esta ocasión voy a ampliar el artículo enfocandome en cómo crear una aplicación usando una ventana transparente además de utilizar algunas propiedades y métodos mas para manipularla.

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.

Durante casi año y medio me dedique a utilizar XHTML y CSS para desarrollar, pero hace unos días decidí que quería aprender algo nuevo, algo como Adobe Air.

Adobe Air, originalmente llamado Apollo, es un programa que nos permite ejecutar “pequeños” programas en nuestra PC ofreciendonos, a los desarrolladores, la opción de desarrollar programas de una forma relativamente fácil y utilizando código conocido como lo es Actionscript o HTML.

Había escuchado noticias y comentarios acerca de Adobe Air, la mayoría muy favorables a la aplicación pero ninguno de ellos acerca de como iniciar el desarrollo de aplicaciones. Obviamente que lo primero a hacer era buscar información, cómo iniciar y qué herramientas debía utilizar. Al iniciar mi idea acerca del desarrollo para Adobe Air era necesitaba algun tipo de extensión para Flash o Flex, sin embargo, Adobe intento cubrir todos los aspectos posibles incluyendo la posibilidad de desarrollar usando Flex, Flash CS3 e incluso la combinación HTML+CSS+JS.

Mi especialidad no es Flex así que descarte esa opción, también descarte Flash CS3 porque en mi PC aún no lo instalo, solo quedaba HTML como base para el desarrollo. Al desarrollar Adobe Air usando XHTML tenemos tres opciones más, una es utilizar la extensión de Dreamweaver CS3, usar Aptana y por último, la más generica de todas, utilizar el SDK(disponible para windows y mac) que nos permite utilizar cualquier aplicación de texto. Elegí el SDK de Adobe Air simplemente porque prefiero usar PSPad que Dreamweaver.

¡Hola Mundo con Adobe Air!
Para empezar lo primero que hice fue realizar el ejemplo, y qué mejor que ¡Hola mundo! para aprender, así que aquí los dejo con “mi versión” de ¡Hola mundo! basada en la documentación de Adobe Air (originalmente llamado Hello world!)

Debes iniciar descargando el SDK de Adobe Air que incluye los archivos básicos para trabajar, además una imagen para usar de fondo, y por último la referencia de Adobe Air para resolver dudas.
Las aplicaciones en Adobe Air funcionan con un archivo xml que es el que establece los valores básicos de la aplicación, un HTML que será nuestro contenido y el archivo AIRAliases.js (incluido en la carpeta AdobeAIRSDK/frameworks), además incluiré una imagen para utilizar de fondo y un archivo BAT (proceso por lotes para Windows) para simplicar las pruebas.

Nuestro “instalador” será HolaMundo-app.xml y se ve así:

<?xml version="1.0" encoding="UTF-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>ejemplo.html.HolaMundo</id>
  <version>0.1</version>
  <filename>HolaMundo</filename>
  <initialWindow>
    <content>HolaMundo.html</content>
    <visible>true</visible>
    <width>240</width>
    <height>320</height>
  </initialWindow>
</application>

La primera línea es para definir el XML y en la segunda esta la etiqueta applications con el namespace para las aplicaciones de air (Ctrl C + Ctrl V ). Luego continuamos con la información de la aplicación de esta forma:

• id: Es el nombre que identificara a nuestra app. del resto, la forma de crearlo es de derecha a izquierda, por ejemplo holamundo.ejemplos.ivanmendoza en donde ivanmendoza es “mi empresa” ejemplos la division y holamundo el nombre de la app.
• version: Indica la version de nuestra app.
• filename: Es el nombre visible de nuestra app.
• initialWindow: Define las propiedades de la ventana inicial de la aplicación.
  • content: indica el archivo que contiene la interfaz de la ventana, en el ejemplo el HTML HolaMundo.
  • visible: Para definir si la ventana estará visible(Boolean).
  • width: ancho de la ventana
  • height: alto de la ventana.

Existen más etiquetas para definir otras opciones, como el icono por ejemplo, pero de momento con esto es suficiente.

El HTML (HolaMundo.html) de la ventana principal es el siguiente:

<html>
<head>
  <title>Hola Mundo</title>
  <script type="text/javascript" src="AIRAliases.js"></script>
  <style type="text/css">
    body{overflow:hidden;margin:0;padding:0;}
    #visor{
      margin:0;
      padding:0;
      width: 240px;
      height: 320px;
      overflow:hidden;
      text-align:center;
      font-size:16pt;
      font-weight:bold;
      color:#fff;
      padding:130px 0 0;
      background:#ccf url(app:/imagenes/fondo.jpg) no-repeat;
    }
  </style>
  <script>
  function saluda(){
    var visor = document.getElementById("visor");
    visor.innerHTML = "Hola Mundo";
  }
  </script>
</head>
<body onload="saluda();">
    <div id="visor" />
</body>
</html>

Como ven es un HTML simple con unas cuantas caracteristicas especiales:

• Debemos incluir el javascript de Air (AIRAliases.js)
• La dirección app:/ es propia de Air y hace referencia al directorio en donde se instalo la aplicación. Funciona en todo el documento, incluso en los estilos CSS (como el ejemplo).
• El javascript funciona igual, solo tiene el plus de las funciones para Air que pueden consultar en la referencia del lenguaje.
• La función del saludo se carga en el evento onload de el body y solo agrega texto al div visor creado dentro.

Y listo, con esos dos archivos (cuatro si contamos la imagen y AIRAliases.js) tenemos listo nuestro ejemplo Hola Mundo, por supuesto aún falta probarlo y para ello usamos el ADL (AIR Debug Launcher) que es un programa incluido en el SDK que permite probar las apps. sin necesidad de compilar el archivo de Air. Su sintaxis por línea de comandos es:

adl.exe  HolaMundo-app.xml

en otras palabras la direccion del programa seguido de la dirección del xml “instalador”. Como es algo realmente tedioso escribir eso cada ves que se prueba, preferí utilizar un archivo de proceso por lotes (BAT, solo windows) que “automatice” el proceso, el código es:

start ..\AdobeAIRSDK\bin\adl.exe HolaMundo-app.xml

y esta ubicado en la misma carpeta que la aplicación de air, el SDK esta en un carpeta del mismo nivel. Les muestro la imagen para que se entienda mejor

Cuando tengamos hecho esto solo ejecutamos el bat y deberíamos de tener nuestra primera aplicación de Adobe Air funcionando y con un resultado como este:

Archivos de ejemplo para descargar: holamundo.zip (20.8kb)

En resumen, desarrollar aplicaciones para Adobe Air es bastante sencillo, básicamente porque se utiliza lenguajes que ya conocemos (o deberíamos) y lo “complicado” es saber como iniciar, sobretodo quitarnos la idea de que es aprender un nuevo lenguaje o el miedo a que sea muy complejo. Es una herramienta muy poderosa y sobretodo extensa, de allí que el nombre de este tema sea introducción a Adobe Air, porque esto es solo el inicio.

Más información sobre Adobe Air en:

• Developing Adobe AIR Applications with HTML y AJAX
• Adobe® AIR™ Language Reference for HTML Developers
• Adobe AIR SDK
• Adobe Air ahoradisponible para Linux

—————-
Escrito mientras escuchaba Astral Projection - Visions Of Nasca