Creazione della prima applicazione AIR Flex desktop in Flash Builder

Flash Builder include gli strumenti che consentono di sviluppare applicazioni AIR e creare i relativi pacchetti.

Per creare applicazioni AIR in Flash Builder o Flex Builder, dovete eseguire le stesse operazioni richieste per la creazione di progetti di applicazioni basati su Flex, ovvero dovete definire un nuovo progetto.

1. Aprite Flex Builder.

2. Selezionate File > New (Nuovo) > Flex Project (Progetto Flex).

3. Immettete AIRHelloWorld come nome del progetto.

4. In Flex le applicazioni AIR sono considerate un tipo di applicazione. Potete scegliere tra due opzioni:

   • Un'applicazione web che viene eseguita in Adobe® Flash® Player

   • Un'applicazione desktop che viene eseguita in Adobe AIR

   Selezionate Desktop (Applicazione desktop) come tipo di applicazione.

5. Fate clic su Fine per creare il progetto.

Inizialmente i progetti AIR sono composti da due file: il file MXML principale e un file XML dell'applicazione (detto file descrittore dell'applicazione). Quest'ultimo specifica le proprietà dell'applicazione.

Per ulteriori informazioni, vedete Developing AIR applications with Flash Builder (Sviluppo di applicazioni AIR con Flash Builder).

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.

1. 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>

2. 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>

3. 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:

Per eseguire il test del codice dell'applicazione che avete scritto, eseguitelo in modalità di debug.

1. Fate clic sul pulsante Debug nella barra degli strumenti principale.

   Potete inoltre selezionare il comando Run (Esegui) > Debug > AIRHelloWorld.

   L'applicazione AIR risultante dovrebbe avere un aspetto analogo all'esempio seguente:

   Visualizzazione dell’elemento grafico a dimensioni intere

2. Mediante le proprietà horizontalCenter e verticalCenter del controllo Label, il testo viene posizionato al centro della finestra. Spostate o ridimensionate la finestra come fareste con qualsiasi altra applicazione desktop.

A questo punto potete creare un pacchetto dell'applicazione "Hello World" in un file AIR da distribuire. Un file AIR è un file di archivio che contiene i file dell'applicazione, ovvero tutti i file presenti nella cartella bin del progetto. In questo esempio semplice questi file sono il file SWF e il file XML dell'applicazione. Il pacchetto AIR viene distribuito agli utenti che lo utilizzano per installare l'applicazione. Un passaggio obbligatorio di questo processo è la firma digitale.

1. Verificate che l'applicazione non generi errori di compilazione e venga eseguita come previsto.

2. Selezionate Project > Export Release Build.

3. Controllate che il progetto AIRHelloWorld e l'applicazione AIRHelloWorld.mxml siano indicati come progetto e applicazione.

4. Selezionate l'opzione Export as signed AIR package, quindi fare clic su Avanti.

5. Se già disponete di un certificato digitale, fate clic su Sfoglia per cercarlo e selezionatelo.

6. Se dovete creare un certificato digitale autofirmato, selezionate Create.

7. Immettete le informazioni obbligatorie e fate clic su OK.

8. Fate clic su Fine per generare il pacchetto AIR denominato AIRHelloWorld.air.

A questo punto potete installare ed eseguire l'applicazione da Project Navigator in Flash Builder o dal file system facendo doppio clic sul file AIR.