Creazione della prima applicazione AIR desktop con Flex SDK

Per una rapida illustrazione pratica del funzionamento di Adobe® AIR®, attenetevi alle istruzioni seguenti per creare un semplice applicazione "Hello World" basata su SWF utilizzando Flex SDK. Questa esercitazione mostra come compilare, provare e impacchettare un'applicazione AIR con i tool della riga di comando disponibili in Flex SDK (Flex SDK include AIR SDK).

Per iniziare, dovete avere installato il runtime e configurato Adobe® Flex™. In questa esercitazione utilizzerete il compilatore AMXMLC, AIR Debug Launcher (ADL) e AIR Developer Tool (ADT). Questi programmi sono presenti nella directory bin di Flex SDK. Vedete Configurazione di Flex SDK.

Creare il file descrittore dell'applicazione AIR

Questa sezione descrive come creare il descrittore dell'applicazione, ovvero un file XML con la seguente struttura:

<application xmlns="..."> 
    <id>...</id> 
    <versionNumber>...</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>
  1. Create un file XML denominato HelloWorld-app.xml e salvatelo nella directory del progetto.

  2. Aggiungete l'elemento <application> con l'attributo namespace AIR:

    <application xmlns="http://ns.adobe.com/air/application/2.7"> L'ultimo segmento dello spazio dei nomi, “2.7”, specifica la versione del runtime richiesta dall'applicazione.

  3. Aggiungete l'elemento <id>:

    <id>samples.flex.HelloWorld</id> L'ID applicazione identifica in modo univoco l'applicazione insieme all'ID editore (che viene ricavato dal certificato utilizzato per firmare il pacchetto dell'applicazione). La forma consigliata è una stringa in stile DNS inverso delimitata da punti, ad esempio "com.company.AppName". L'ID applicazione viene utilizzato per l'installazione, l'accesso alla directory privata di memorizzazione del file system per l'applicazione, l'accesso allo spazio di memorizzazione crittografato privato e la comunicazione tra applicazioni.

  4. Aggiungete l'elemento <versionNumber>:

    <versionNumber>1.0</versionNumber> Semplifica l'identificazione della versione dell'applicazione installata dagli utenti.

    Nota: se usate AIR 2 o una versione precedente, dovete utilizzare l'elemento <version> anziché <versionNumber>.
  5. Aggiungete l'elemento <filename>:

    <filename>HelloWorld</filename> Nome utilizzato per l'eseguibile dell'applicazione, la directory di installazione e analoghi riferimenti nel sistema operativo.

  6. Aggiungete l'elemento <initialWindow> contenente gli elementi secondari seguenti per specificare le proprietà della finestra iniziale dell'applicazione:

    <content>HelloWorld.swf</content> Identifica il file SWF principale da caricare in AIR.

    <visible>true</visible> Rende visibile la finestra immediatamente.

    <width>400</width> Imposta la larghezza della finestra in pixel.

    <height>200</height> Imposta l'altezza della finestra.

  7. Salvate il file. Il file descrittore dell'applicazione completo dovrebbe avere l'aspetto seguente:

    <?xml version="1.0" encoding="UTF-8"?> 
    <application xmlns="http://ns.adobe.com/air/application/2.7"> 
        <id>samples.flex.HelloWorld</id> 
        <versionNumber>0.1</versionNumber> 
        <filename>HelloWorld</filename> 
        <initialWindow> 
            <content>HelloWorld.swf</content> 
            <visible>true</visible> 
            <width>400</width> 
            <height>200</height> 
        </initialWindow> 
    </application>

In questo esempio vengono impostate solo alcune delle proprietà possibili per l'applicazione. Per il set completo delle proprietà dell'applicazione che consente di specificare ad esempio il chrome della finestra, la dimensione della finestra, la trasparenza, la directory di installazione predefinita, i tipi di file associati e le icone dell'applicazione, vedete File descrittori delle applicazioni AIR.

Scrivere il codice dell'applicazione

Nota: le applicazioni AIR basate su SWF possono usare una classe principale definita con MXML oppure con Adobe® ActionScript® 3.0. Nell'esempio seguente viene usato un file MXML per definire la classe principale. Il processo di creazione di un'applicazione AIR con una classe principale ActionScript è analogo. Anziché compilare un file MXML ottenendo il file SWF, si compila il file di classe ActionScript. Quando si usa ActionScript, il file di classe principale deve estendere flash.display.Sprite.

Come tutte le applicazioni basate su Flex, le applicazioni AIR realizzate con il framework Flex contengono un file MXML principale. Le applicazioni AIR desktop usano il componente WindowedApplication come elemento principale anziché il componente Application. Il componente WindowedApplication dispone di proprietà, metodi ed eventi che permettono di controllare l'applicazione la sua finestra iniziale. Nelle piattaforme e nei profili per i quali AIR non supporta le finestre multiple, continuate a usare il componente Application. Nelle applicazioni Flex per dispositivi mobili, potete anche utilizzare i componenti View o TabbedViewNavigatorApplication.

La procedura seguente crea l'applicazione Hello World:

  1. Usando un editor di testo, create un file denominato HelloWorld.mxml e aggiungete il codice MXML 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"> 
    </s:WindowedApplication>
  2. Quindi, aggiungete un componente Label all'applicazione (inseritelo fuori del tag WindowedApplication).

  3. Impostate la proprietà text del componente Label su "Hello AIR".

  4. Impostate i vincoli del layout in modo da mantenerlo sempre centrato.

    L'esempio seguente mostra il codice scritto fino a questo punto:

    <?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>

Compilare l'applicazione

Per poter avviare l'applicazione ed eseguirne il debug, è prima necessario compilare il codice MXML con il compilatore amxmlc, per ottenere il file SWF dell'applicazione. Il compilatore amxmlc si trova nella directory bin di Flex SDK. Se volete, potete impostare l'ambiente di percorso del vostro computer in modo che includa la directory bin di Flex SDK. L'impostazione del percorso facilita l'esecuzione delle utilità dalla riga di comando.

  1. Aprite una shell di comando o una finestra di terminale e andate alla cartella del progetto dell'applicazione AIR.

  2. Immettete il comando seguente:

    amxmlc HelloWorld.mxml 

L'esecuzione di amxmlc produce HelloWorld.swf, che contiene il codice compilato dell'applicazione.

Nota: se non riuscite a compilare l'applicazione, correggete gli eventuali errori di sintassi o di ortografia. Gli errori e gli avvisi vengono visualizzati nella finestra di console utilizzata per eseguire il compilatore amxmlc.

Per ulteriori informazioni, vedete Compilazione di file di origine MXML e ActionScript per AIR.

Provare l'applicazione

Per eseguire e testare l'applicazione dalla riga di comando, utilizzate l'utilità ADL (AIR Debug Launcher) per lanciare l'applicazione utilizzando il relativo file descrittore. (Il programma ADL si trova nella directory bin di Flex SDK.)

 Dal prompt dei comandi, immettete il comando seguente:
adl HelloWorld-app.xml 

L'aspetto dell'applicazione AIR risultante è simile a quello della figura seguente:

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.

Per ulteriori informazioni, vedete ADL (AIR Debug Launcher).

Creare il file di installazione AIR

Se l'applicazione viene eseguita correttamente, potete utilizzare l'utilità ADT per creare un pacchetto dell'applicazione e inserirlo in un file di installazione AIR. Un file di installazione AIR è un file di archivio che contiene tutti i file dell'applicazione che possono così essere distribuiti agli utenti. Dovete installare Adobe AIR prima di installare il pacchetto di un file AIR.

Per garantire la sicurezza dell'applicazione tutti i file di installazione di AIR devono essere firmati digitalmente. A scopo di sviluppo potete generare un certificato autofirmato di base con ADT o un altro strumento di generazione di certificati. Potete inoltre acquistare un certificato commerciale di firma del codice da un'autorità di certificazione commerciale. Quando gli utenti installano un file AIR autofirmato, l'editore viene visualizzato come "sconosciuto" durante il processo di installazione perché un certificato autofirmato garantisce solo che il file AIR non sia stato modificato in seguito alla creazione. Chiunque potrebbe autofirmare un file AIR mascherato e presentarlo come se fosse la vostra applicazione. Per i file AIR da rilasciare al pubblico è fortemente consigliato l'uso di un certificato commerciale verificabile. Per una panoramica dei problemi di sicurezza relativi ad AIR, vedete Sicurezza in AIR (sviluppatori ActionScript) o AIR Security (sviluppatori HTML).

Generare un certificato autofirmato e una coppia di chiavi

 Dal prompt dei comandi, immettete il comando seguente (l'eseguibile di ADT si trova nella directory bin di Flex SDK):
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

In questo esempio viene utilizzato il numero minimo di attributi impostabile per un certificato. Il tipo di chiave deve essere 1024-RSA o 2048-RSA (vedete Firma di applicazioni AIR).

Creare il pacchetto AIR

 Dal prompt dei comandi immettete il comando seguente (su una sola riga):
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.swf

Verrà chiesta la password del file dell'archivio di chiavi. Digitate la password e premete Invio. Per motivi di sicurezza, i caratteri della password non vengono visualizzati.

L'argomento HelloWorld.air si trova nel file AIR prodotto da ADT. HelloWorld-app.xml è il file descrittore dell'applicazione. Gli argomenti successivi sono i file utilizzati dall'applicazione. In questo esempio vengono utilizzati solo tre file, ma potete includere qualsiasi numero di file e directory.

In seguito alla creazione del pacchetto AIR, potete installare ed eseguire l'applicazione facendo doppio clic sul file del pacchetto. Potete inoltre digitare il nome del file AIR come comando in una finestra di comando o della shell.

Per ulteriori informazioni, vedete Creazione del pacchetto di un file di installazione AIR desktop.