Share
Questo tutorial ti introdurrà ad Adobe Air, un framework per creare ricche applicazioni Internet. Questa prima introduzione mostrerà come creare una semplice applicazione usando le tecnologie Html / Js.
Adobe Air è un framework che consente di creare applicazioni desktop.
Le applicazioni Adobe Air si basano su due tecnologie: Html / Js e Flash.
Gli sviluppatori possono scegliere di creare applicazioni desktop tramite Html / Js, Flash o Flex. Dopo una breve panoramica dell'architettura, costruiremo una semplice applicazione usando Html / Js.
Un'applicazione Air viene eseguita mediante un componente runtime, che esegue il codice contenuto nel file Air. Come potete vedere nella figura, Adobe fornisce il componente runtime per i tre sistemi operativi mayor, Mac OS X, Windows (XP / Vista) e Linux (nota: la versione Linux è ancora in beta). La figura potrebbe portare a pensare che i due approcci siano esclusivi, sia che sviluppiate in HTML / JS o Flash. Dal momento che il runtime di Air consente il "bridging" tra i motori Javascript e ActionScript, puoi chiamare il codice javascript da un swf, manipolare HTML / DOM tramite ActionScript, ecc..
Adobe Air runtime non è semplicemente un'integrazione di tecnologie HTML / JS e Flash. Il runtime fornisce un set di API che consente alle applicazioni Air di interagire con funzionalità del sistema operativo come:
Adobe Air include anche SQLite, un motore di database per archiviare e recuperare localmente i dati.
Per ripetere i passaggi descritti di seguito è necessario installare il runtime e il sdk (Software Development Kit), che consente di creare applicazioni ad aria.
Il runtime può essere scaricato da http://www.adobe.com/go/getair. Basta eseguire l'installazione e seguire le istruzioni.
L'SDK può essere scaricato da: http://www.adobe.com/go/getairsdk
Decomprimi l'SDK e posiziona le cartelle nella posizione che preferisci (gli utenti macosx dovranno montare un'immagine .dmg). Ricorda la posizione dell'SDK, a cui faremo riferimento come SDKPATH.
La directory dell'SDK dovrebbe apparire così:
L'SDK deve essere configurato, altrimenti il SO non troverà i comandi da eseguire.
Infatti, se apri una shell di un tipo adl, il tuo sistema operativo pronuncerà qualcosa come "comando non trovato". Funzionerà solo se si passa alla directory bin della cartella SDK. Dal momento che vogliamo essere in grado di eseguire comandi di build e test da ogni cartella, dobbiamo configurare l'SDK. È importante digitare correttamente il percorso assoluto della directory bin nella cartella SDK.
Su un Mac OS X segui questa procedura:
Accentsconagua
CD per essere sicuro di essere nella tua cartella home .profilo. Se non esiste, crearlo export PATH = $ PATH: / usr / bin export PATH = $ PATH: / airsdk / bin fonte .profile Su Windows segui questi passaggi:
SENTIERO dall'elenco in basso e aggiungere il percorso alla cartella sdk alla fine, come in figura. 
Per verificare se la configurazione è andata a buon fine apriamo una shell e digitiamoADT comando.
Il risultato dovrebbe essere il seguente:
Questa risposta significa tecnicamente che abbiamo fornito un numero errato di parametri al comando, ma anche questo
significa che l'SDK è stato installato e configurato correttamente.
Creiamo ora la nostra cartella del progetto. Lo chiamiamo myTest e creiamo due file: myTest.html e myTest.xml.
Il file xml è il file di configurazione, che abilita la configurazione dell'applicazione aria. Aprilo con il tuo editor preferito e inserisci il seguente codice.
La prima riga è un'intestazione standard per i file xml. La seconda riga inizia la definizione della nostra applicazione. Il id è l'identificativo univoco della tua applicazione. In questo caso l'ho preceduto con il mio nome di dominio. Il nome del file è il nome dell'eseguibile che genereremo. Nome è il nome dell'applicazione, come visualizzato dall'utente. Il descrizione è uno snippet che viene mostrato durante l'installazione per descrivere l'applicazione. Versione indica il numero di versione della tua app, 0,1 nel nostro caso.
Dopo aver specificato i metadati relativi all'applicazione, passiamo alla definizione della grafica, inclusa nel file
La riga 10 specifica il file root, ovvero il file da caricare nell'applicazione Air all'avvio. In questo caso il myTest.html che mostreremo in seguito. Titolo è la stringa che verrà visualizzata nella parte superiore della finestra. Il systemChrome specifica se l'applicazione ha il chrome standard (quello del sistema operativo di hosting) o nessuno. Chrome è un set di strumenti standard che consente di manipolare una finestra in un ambiente desktop, ovvero la barra del titolo, i pulsanti di chiusura / ridimensionamento, i bordi e l'area da impugnare per ridimensionare.
Il sfondo di un'applicazione Air può essere impostata su trasparente, ma questa opzione è valida solo se il chrome è impostato su none. Visible consente di decidere se l'applicazione deve essere visualizzata al momento del lancio. Ciò è utile quando l'avvio richiede del tempo e non si desidera visualizzare la grafica agli utenti.
Il significato dei tag minimizable, maximizable e ridimensionabile dovrebbe essere intuitivo e non dovrebbe avere bisogno di spiegazioni.
Ora diamo un'occhiata a myTest.html che contiene effettivamente la nostra applicazione.
Come puoi vedere è una pagina html standard, con una testa e un corpo. La testa contiene un titolo e il corpo ha un div semplice con testo allineato al centro.
Prima di imballare l'applicazione come file .air, la testeremo per verificare se produce il risultato atteso.
Lo strumento che useremo id adl, che consente di eseguire le nostre applicazioni Air senza installazione.
Apriamo una shell e andiamo alla directory che contiene i nostri file myTest (sia html che xml).
Quindi digitare il seguente comando:
adl myTest.xml
Questo esegue l'applicazione con il chrome del sistema operativo corrente. Su un MacO dovrebbe assomigliare a questo.
Su Windows XP l'applicazione apparirà in questo modo:
Potresti dubitare che questa applicazione funzioni solo con html. Proviamo javascript.
Cambiamo il myTest.html file come segue.
Rispetto alla versione precedente abbiamo aggiunto un tag script che contiene la definizione di una semplice funzione javascript, myFunction (),spuntando un avviso (righe 4-8). Abbiamo aggiunto un pulsante al corpo (riga 12). L'azione associata al clic del pulsante è il popme () funzione. Salviamo il file ed eseguiamolo, usando lo stesso comando dalla shell, adl myTest.xml
Se clicchiamo sul pulsante dovremmo vedere qualcosa di simile al seguente:
Una volta che l'applicazione è pronta per l'implementazione, possiamo creare il file .air, che è il pacchetto di distribuzione per le applicazioni Adobe Air.
Questo file, che si basa sulla compressione zip, contiene tutto il materiale necessario per installare applicazioni ad aria.
Un'applicazione Air deve essere firmata con un certificato. Per le applicazioni ampiamente distribuite è preferibile ottenere un certificato da un'autorità come thawte.
Il nostro scopo è solo test, quindi un certificato autofirmato è sufficiente. La creazione di un certificato può essere effettuata tramite il ADT comando. Aprire una shell, spostarsi nella cartella del progetto e digitare questo comando:
adt -certificate -cn mycertificate 1024-RSA mycertificatefile.p12 mysecretpass
adt -certificate -cn è semplicemente la sintassi richiesta dal comando. La seguente tabella spiega i valori forniti al comando.
| Valore del parametro | Spiegazione |
| mycertificate | Il nome del certificato |
| 1024 RSA | La chiave di crittografia del certificato |
| mycertificatefile.p12 | Il file in cui è archiviato il certificato |
| mysecretpass | La password che protegge il tuo certificato |
Se controlli la cartella del progetto troverai un nuovo file chiamato mycertificate.p12 che è il certificato autofirmato che abbiamo creato correttamente.
La cartella del progetto dovrebbe ora contenere tre file come nella figura seguente.
Ora abbiamo tutto ciò di cui abbiamo bisogno per creare il nostro file .air. Dobbiamo eseguire un comando shell piuttosto lungo. Non farti prendere dal panico. Ti spiego ogni singola parola. Per prima cosa vediamo.
adt -package -storetype pkcs12 -keystore mycertificate.p12 AIRHelloWorld.air AIRHelloWorld.xml AIRHelloWorld.html
Come sopra adt -package è la sintassi del comando, StoreType indica il formato del keystore. Questo è un parametro piuttosto tecnico. Per essere brevi, dato che abbiamo generato un certificato in base al formato pkcs12, dobbiamo comunicarlo al compilatore. Quindi specifichiamo il file del certificato, tramite il -keystore parametro. Infine, forniamo il nome del file .air risultante, il file xml contenente le impostazioni dell'applicazione e il file del punto di ingresso .html. Quando emettiamo questo comando, ti verrà chiesta la password inserita durante la creazione del certificato ("mysecretpass") nel nostro caso.
Ora abbiamo un file .air, che è il formato di distribuzione della nostra applicazione. Se facciamo doppio clic su di esso, inizierà il processo di installazione.
L'installazione passa attraverso due semplici passaggi come mostrato di seguito.
Si noti che, dal momento che abbiamo firmato autonomamente il certificato, l'identità pubblicata dell'applicazione se SCONOSCIUTO.
Durante la seconda fase è possibile specificare dove installare l'applicazione e se avviarla al termine dell'installazione.
In questo tutorial abbiamo introdotto il framework Adobe Air e abbiamo creato la nostra prima applicazione Adobe Air utilizzando Html / Js.
Nei prossimi episodi vedremo come creare la stessa applicazione con Flex e Flash CS3.
