Creazione della prima applicazione AIR Flex desktop in Flash Builder

Per una rapida illustrazione pratica del funzionamento di Adobe® AIR®, attenetevi alle istruzioni seguenti per creare una semplice applicazione AIR “Hello World” basata su file SWF e generare il relativo pacchetto utilizzando Adobe® Flash® Builder.

Se ancora non l'avete fatto, scaricate e installate Flash Builder. Scaricate e installate la versione più recente di Adobe AIR dal percorso seguente: www.adobe.com/go/air_it.

Creare un progetto AIR

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

Scrivere il codice dell'applicazione AIR

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:

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

  2. Fate doppio clic sul file descrittore dell'applicazione per modificarlo in Flex Builder.

  3. 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 "-->").

  4. Impostate il valore di testo della proprietà systemChrome su none, come nell'esempio seguente:

    <systemChrome>none</systemChrome>
  5. Impostate il valore di testo della proprietà transparent su true, come nell'esempio seguente:

    <transparent>true</transparent>
  6. Salvate il file.

Eseguire il test dell'applicazione AIR

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:

  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.

Nota: se non riuscite a compilare l'applicazione, correggete gli eventuali errori di sintassi o di ortografia che avete inserito involontariamente nel codice. Gli errori e gli avvisi sono visualizzati nella visualizzazione Problems (Problemi) in Flash Builder.

Creare un pacchetto dell'applicazione AIR, firmarla ed eseguirla

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.