Per scrivere il codice per l'applicazione "Hello World", modificate il file MXML (AIRHelloWorld.mxml) aperto nell'editor. (Se il file non è aperto, apritelo mediante Project Navigator.)
Le applicazioni AIR Flex per il desktop sono contenute all'interno del tag MXML WindowedApplication. Il tag MXML WindowedApplication crea una finestra semplice che include controlli di base, ad esempio la barra del titolo e il pulsante Chiudi.
-
Aggiungete un attributo
title
al componente WindowedApplication e assegnategli il valore
"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>
-
Aggiungete un componente Label all'applicazione inserendolo all'interno del tag WindowedApplication, impostate la proprietà
text
del componente Label su
"Hello AIR"
e impostate i vincoli di layout per centrare il testo, come indicato di seguito:
<?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>
-
Aggiungete il blocco di stile seguente subito dopo il tag WindowedApplication di apertura e prima del tag del componente Label appena immesso:
<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>
Queste impostazioni di stile si applicano a tutta l'applicazione e assicurano il rendering dello sfondo della finestra in un grigio leggermente trasparente.
Il codice dell'applicazione ha ora l'aspetto seguente:
<?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 questo punto modificate alcune impostazioni nel descrittore dell'applicazione per assicurare la trasparenza all'applicazione:
-
Nel riquadro Flex Navigator individuate il file descrittore dell'applicazione nella directory di origine del progetto. Se il progetto è denominato AIRHelloWorld, il file è denominato AIRHelloWorld-app.xml.
-
Fate doppio clic sul file descrittore dell'applicazione per modificarlo in Flex Builder.
-
Nel codice XML individuate le righe commentate per le proprietà
systemChrome
e
transparent
(della proprietà
initialWindow
). Rimuovete i commenti (ovvero i delimitatori di commento
"<!--"
e
"-->"
).
-
Impostate il valore di testo della proprietà
systemChrome
su
none
, come nell'esempio seguente:
<systemChrome>none</systemChrome>
-
Impostate il valore di testo della proprietà
transparent
su
true
, come nell'esempio seguente:
<transparent>true</transparent>
-
Salvate il file.
nella barra degli strumenti principale.
