Creazione della prima applicazione AIR basata su HTML con AIR SDK

Per una rapida illustrazione pratica del funzionamento di Adobe® AIR®, attenetevi alle istruzioni seguenti per creare un'applicazione "Hello World" semplice basata su HTML e generarne il pacchetto.

Per iniziare, è necessario che sia installato il runtime e impostato AIR SDK. In questa esercitazione utilizzerete ADL (AIR Debug Launcher) e ADT (AIR Developer Tool) . ADL e ADT sono programmi di utilità della riga di comando presenti nella directory bin di AIR SDK. Vedete Installazione di AIR SDK . In questa esercitazione si presume che abbiate già familiarità con i programmi eseguiti dalla riga di comando e siate in grado di impostare le variabili di ambiente path necessarie per il sistema operativo.

Nota: se siete utenti di Adobe® Dreamweaver®, leggete Creazione della prima applicazione AIR basata su HTML con Dreamweaver .
Nota: le applicazioni AIR basate su HTML possono essere sviluppate solo per i profili desktop e extendedDesktop. il profilo mobile non è supportato.

Creare i file di progetto

Ogni progetto AIR basato su HTML contiene i due file seguenti: un file descrittore dell'applicazione che specifica i metadati dell'applicazione e una pagina HTML di primo livello. Oltre a questi file obbligatori, questo progetto include un file di codice JavaScript, AIRAliases.js , nel quale sono definite comode variabili alias per le classi delle API di AIR.

  1. Create una directory denominata HelloWorld in cui inserire i file di progetto.

  2. Create un file XML denominato HelloWorld-app.xml .

  3. Create un file HTML denominato HelloWorld.html .

  4. Copiate AIRAliases.js dalla cartella frameworks di AIR SDK nella directory di progetto.

Creare il file descrittore dell'applicazione AIR

Per iniziare la compilazione dell'applicazione AIR, create un file descrittore dell'applicazione 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. Aprire il file HelloWorld-app.xml per la modifica.

  2. Aggiungete l'elemento principale <application> con l'attributo per lo spazio dei nomi 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>examples.html.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). 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>0.1</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 altri riferimenti all'applicazione nel sistema operativo.

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

    <content>HelloWorld.html</content> Identifica il file HTML 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 completato dovrebbe avere l'aspetto seguente: 

    <?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/2.7"> 
    <id>examples.html.HelloWorld</id> 
    <versionNumber>0.1</versionNumber> 
    <filename>HelloWorld</filename> 
    <initialWindow> 
        <content>HelloWorld.html</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 .

Creare la pagina HTML dell'applicazione

A questo punto dovete creare una pagina HTML semplice da utilizzare come file principale per l'applicazione AIR.

  1. Aprite il file HelloWorld.html per la modifica. Aggiungete il seguente codice HTML: 

    <html> 
<head> 
    <title>Hello World</title> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

  2. Nella sezione <head> dell'HTML importate il file AIRAliases.js : 

    <script src="AIRAliases.js" type="text/javascript"></script>

    In AIR viene definita una proprietà denominata runtime sull'oggetto della finestra HTML. La proprietà runtime consente di accedere alle classi AIR incorporate utilizzando il nome del pacchetto completo della classe. Per creare un oggetto File di AIR, ad esempio, potreste aggiungere l'istruzione seguente in JavaScript: 

    var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

    Il file AIRAliases.js definisce alias comodi per le API AIR più utili. Mediante AIRAliases.js potreste accorciare il riferimento alla classe File come indicato di seguito: 

    var textFile = new air.File("app:/textfile.txt");

  3. Sotto il tag script AIRAliases aggiungete un altro tag script contenente una funzione JavaScript per gestire l'evento onLoad : 

    <script type="text/javascript"> 
function appLoad(){ 
    air.trace("Hello World"); 
} 
</script>

    La funzione appLoad() chiama semplicemente la funzione air.trace() . Il messaggio di trace viene visualizzato nella console dei comandi quando eseguite l'applicazione mediante ADL. Le istruzioni trace possono essere molto utili per il debug.

  4. Salvate il file.

Il file HelloWorld.html dovrebbe avere ora l'aspetto seguente: 

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

Provare l'applicazione

Per eseguire e testare l'applicazione dalla riga di comando, utilizzate l'utilità ADL (AIR Debug Launcher). L'eseguibile di ADL si trova nella directory bin di AIR SDK. Se non avete già configurato AIR SDK, vedete Installazione di AIR SDK .

  1. Aprire una console o shell di comando. Passate alla directory creata per il progetto.

  2. Eseguite il comando seguente: 

    adl HelloWorld-app.xml

    Si apre una finestra di AIR in cui è visualizzata l'applicazione. Nella finestra della console viene inoltre visualizzato il messaggio risultante dalla chiamata a air.trace() .

    Per ulteriori informazioni, vedete File descrittori delle applicazioni AIR .

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 per la firma di codice da un'autorità di certificati commerciale, ad esempio VeriSign o Thawte. 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 AIR SDK): 
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

Con ADT viene generato un file dell'archivio di chiavi denominato sampleCert.pfx che contiene un certificato e la relativa chiave privata.

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 file di installazione 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.html AIRAliases.js

Verrà chiesta la password del file dell'archivio di chiavi.

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 due file, ma potete includere il numero di file e directory desiderato. ADT verifica che il file del contenuto principale, HelloWorld.html, sia incluso nel pacchetto, ma se dimenticate di includere AIRAliases.js, l'applicazione non potrà funzionare.

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.

Passaggi successivi

In AIR il codice HTML e JavaScript si comporta in genere come in un normale browser Web. In effetti in AIR viene utilizzato lo stesso motore di rendering WebKit utilizzato dal browser Web Safari. Sono tuttavia presenti differenze importanti che vale la pena di comprendere prima di sviluppare applicazioni HTML in AIR. Per ulteriori informazioni su queste differenze e su altri argomenti importanti, vedete Programming HTML and JavaScript in AIR .