Para escribir el código de la aplicación “Hello World”, se edita el archivo MXML de la aplicación (AIRHelloWorld.mxml), que se abre en el editor. (Si el archivo no se abre, utilice el navegador de proyectos para abrir el archivo.)
Las aplicaciones de AIR de Flex en el escritorio se incluyen en la etiqueta MXML WindowedApplication. La etiqueta MXML WindowedApplication crea una sencilla ventana que incluye controles básicos como, por ejemplo, una barra de título y un botón de cierre.
-
Añada un atributo
title
al componente WindowedApplication y asígnele el valor
"Hello World"
:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Hello World">
</s:WindowedApplication>
-
Añada un componente Label a la aplicación (sitúelo dentro de la etiqueta WindowedApplication), establezca la propiedad
text
del componente Label en
"Hello AIR"
y defina restricciones de diseño para mantenerlo centrado, tal y como se muestra a continuación:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Hello World">
<s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/>
</s:WindowedApplication>
-
Añada el siguiente bloque de estilo inmediatamente después de la etiqueta inicial WindowedApplication y antes de la etiqueta del componente label introduzca:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
background-color:#999999;
background-alpha:"0.7";
}
</fx:Style>
Esta configuración de estilo se aplica a toda la aplicación y se procesa el fondo de la ventana con un gris ligeramente transparente.
El código de la aplicación presenta en este momento el siguiente aspecto:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
title="Hello World">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|WindowedApplication
{
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin");
background-color:#999999;
background-alpha:"0.7";
}
</fx:Style>
<s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/>
</s:WindowedApplication>
A continuación, se modificará parte de la configuración del descriptor de la aplicación para permitir que la aplicación sea transparente:
-
En el panel Flex Navigator (Navegador de Flex), sitúe el archivo descriptor de la aplicación en el directorio de origen del proyecto. Si se ha asignado el nombre AIRHelloWorld al proyecto, este archivo se denomina AIRHelloWorld-app.xml.
-
Haga doble clic en el archivo descriptor de la aplicación para editarlo en Flash Builder.
-
En el código XML, sitúe las líneas de comentarios para las propiedades
systemChrome
y
transparent
(de la propiedad
initialWindow
). Elimine los comentarios. (Elimine los delimitadores de comentarios
"<!--"
y
"-->"
.)
-
Establezca el valor de texto de la propiedad
systemChrome
en
none
, tal y como se muestra a continuación:
<systemChrome>none</systemChrome>
-
Establezca el valor de texto de la propiedad
transparent
en
true
, tal y como se indica a continuación:
<transparent>true</transparent>
-
Guarde el archivo.
de la barra de herramientas principal.
