Aplicaciones en AIR con interfaces sin bordes (Chromeless Windows)

Cuando creamos aplicaciones con Apollo podemos personalizar la interface a mostrar al usuario. Si bien es cierto con estilos CSS arreglamos algunos detalles de los componentes, su aspecto y demás, con Apollo podemos llegar aun más lejos. Esto es usando el chroma, que es definiendo la vista de la clásica ventana y aun llegando a hacer la aplicacion transparente.

Nota: Recomendamos leer el tutorial básico de Apollo y el tutorial de Flex Builder 2 antes de hacer este tutorial.

Para este tutorial usaremos Adobe Flex y crearemos nuestra aplicacion Apollo. Agregaremos para este ejemplo un boton en el centro quedando el mxml de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="200">

<mx:Button x="66.5" y="86" label="Button"/>
</mx:ApolloApplication>

Ahora abrimos nuestro archivo xml y vemos que en la línea 91 hay este código:

<rootContent systemChrome="standard" transparent="false" visible="true">[SWF reference is generated]</rootContent>

[SWF reference is generated] es el archivo que generará flex como swf y será quien arranque nuestra aplicación Apollo. Esto no nos debe llamar la atención.
systemChrome es quien definirá la apariencia de la ventana, sólo existe dos valores: "standard" o "none", por defecto veremos standard que es la clásica ventana que todos conocemos, pero en nuestro caso lo cambiaremos a none. Al ejecutar nuestra aplicación veremos esto:

De esta forma tenemos una presentación distinta a la ya conocidas, sin embargo podemos hacer que el fondo de nuestra aplicación sea transparente con:

transparent="true"

Sin embargo, al ejecutar no veremos cambios, pues las aplicaciones Apollo por defecto tienen un fondo definido, esto se puede arreglar modificando elegantemente la etiqueta <mx:ApolloApplication> por <mx:Application> donde nuestro mxml quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="200">

<mx:Button x="66.5" y="86" label="Button"/>
</mx:Application>

Si queremos podemos quitar ese color gris representativo de Flex aplicando estilos de color a la aplicacion:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="200">

<mx:Style>
Application{
background-color:"";
background-image:"";
}
</mx:Style>

<mx:Button x="66.5" y="86" label="Button"/>

</mx:Application>

Al ejecutar nuestra aplicacion veremos:

Definitivamente aqui no podría acabar el tutorial, pues esta aplicación no nos deja interactuar con la ventana. Para eso crearemos dos botones, que seran btnMinimizar y btnCerrar que llamaran a los métodos minimizar y cerrar respectivamente. Agregamos en una etiqueta Script el siguiente código:

<mx:Script>
<![CDATA[

private function minimizar(evt:MouseEvent):void{

  stage.window.minimize();
}
private function cerrar(evt:MouseEvent):void{
  stage.window.close()

}

]]>
</mx:Script>

Ahora nuestra aplicación puede ser minimizada y cerrada sin problemas por el usuario. Como verán es una forma simple de manipular la presentación pues podemos asímismo, agregar una imagen png con fondo transparente.

Por otro lado, si deseamos que nuestra aplicación pueda ser movida por el usuario debemos agregar un área que sea definida para que el usuario pueda arrastrar toda la ventana, en este caso usaremos un Canvas con el id miDrag. Colocamos además este código:

private function mover(evt:MouseEvent):void{
    stage.window.startMove();

}

private function init():void{
    this.miDrag.addEventListener(MouseEvent.MOUSE_DOWN, mover);

}

Muy bien, ahora en nuestra etiqueta Aplication agregaremos un initialize="init()" para que llame al método y nos permita mover la ventana, el código final quedaría así:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" initialize="init()"
width="200" height="200">
<mx:Style>
Application{

    background-color:"";
    background-image:"";
}
</mx:Style>
<mx:Script>
<![CDATA[
private function minimizar(evt:MouseEvent):void{

    stage.window.minimize();
}
private function cerrar(evt:MouseEvent):void{
    stage.window.close()

}
private function mover(evt:MouseEvent):void{
    stage.window.startMove();
}

private function init():void{
    this.miDrag.addEventListener(MouseEvent.MOUSE_DOWN, mover);

}
]]>
</mx:Script>

<mx:Button x="66.5" y="86" label="Button"/>

<mx:Canvas x="0" y="10" width="200" height="29" backgroundColor="#ff0000" id="miDrag">

<mx:Button x="141" y="3" label="_" width="25" click="minimizar(event)"/>

<mx:Button x="165" y="3" label="X" width="25" click="cerrar(event)"/>

</mx:Canvas>
</mx:Application>

Con un poco más de tiempo pueden agregar imágenes y otros componentes para crear realmente una aplicación, quizás algo asi como mi visor de videos youtube:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo