Share
In un tutorial precedente abbiamo introdotto il framework Adobe Air che illustrava come creare una semplice applicazione. Ricorda che Adobe Air è un framework che consente agli sviluppatori web, solitamente coinvolti nella programmazione html / js / flash, di creare applicazioni desktop. In questo tutorial illustreremo come creare un'applicazione Adobe Air con Flex, un insieme di tecnologie open source per lo sviluppo di applicazioni Internet ricche.
Flex è un framework che consente di generare file SWF. Potresti chiedere: qual è la differenza rispetto a Flash? Oltre alle differenze dietro le quinte, la principale differenza rispetto a Flash è la presenza di un linguaggio di markup chiamato MXML. La figura seguente illustra il processo di generazione di un file SWF.
Mxml è un linguaggio basato su xml, che sembra più amichevole per i progettisti di Actionscript, ed è simile in concetto all'HTML (con tag e proprietà). Al momento della compilazione, il codice Mxml viene transcodificato in Actionscript, che viene quindi incluso nel file SWF finale. In questa prospettiva puoi considerare Mxml come un'astrazione di Actionscript, molto più semplice da gestire. Flex SDK nasce come toolkit di sviluppo per generare file swf (gli stessi file generati con Flash). Dopo alcune modifiche apportate da Adobe Flex è ora possibile generare anche applicazioni Adobe Air.
Flex SDK è open source e può essere scaricato da qui. È contenuto in un file zip che, quando espanso, appare così.
I file più importanti, che useremo in questo tutorial, si trovano nel bidone/ directory. Più in particolare useremo:
Accentsconagua
AMXMLC (il compilatore)ADL (il debugger / launcher)ADT (lo strumento di sviluppo) L'SDK deve essere configurato per essere eseguito da ogni cartella del tuo computer. La configurazione è molto simile a quella del framework Adobe Air, spiegata nel
tutorial precedente. Lo segnalerò qui per comodità. Su MacOSX segui questo script.
(/ Applicazioni / Utility / Terminale)
CD per essere sicuro di essere nella tua cartella home .profilo o .bash_profile. Se non esiste, crearlo. export PATH = $ PATH: / usr / bin Questo: export PATH = $ PATH: / flexsdk / bin
gli spazi lo avvolgono con una doppia citazione (ad esempio "/ my pathtosdk / air")
linea: / Applicazioni / flex_sdk_3 / bin
source.profile Su Windows questa è la procedura per configurare l'SDK.
SENTIERO dall'elenco in basso e aggiungere il percorso alla cartella sdk alla fine, come in figura. 
Per testare la configurazione apriamo la shell e proviamo a digitare il seguente comando:
amxmlc
Se il risultato è come il seguente l'SDK è installato correttamente.
Creiamo una cartella che conterrà i file del nostro progetto. Come spiegato nel tutorial precedente, un'applicazione Adobe Air deve includere un file di descrizione, che descrive le funzionalità dell'applicazione. Creiamo un file chiamato MyApplication-descr.xml con il seguente contenuto.
La prima riga è solo la dichiarazione del formato del file; la specifica reale inizia dalla seconda riga fino alla fine del file id incorpora l'identificativo dell'applicazione. Includerò il dominio del mio sito Web per assicurarmi che sia unico. Il versione tag indica il numero della versione. Ricordati di cambiarlo di conseguenza quando rilasci nuove versioni della tua applicazione. Il tag nome del file, il cui nome può essere fuorviante, contiene il nome dell'applicazione, che apparirà nella finestra principale dell'applicazione, nei menu, ecc.. Soddisfare specifica il primo file che deve essere caricato dall'applicazione Air all'avvio. Questo file è comunemente chiamato file di root o punto d'entrata. Abbiamo impostato il visibile proprietà true, per visualizzare
l'applicazione come viene caricata. Il systemChrome indica l'aspetto della finestra che ospita la tua applicazione. Se lo si imposta su standard, l'applicazione avrà una finestra identica a quella del sistema operativo che si sta utilizzando. Se lo si imposta nessuna Flettere
userà il proprio chrome che, su MacOsX, appare come il seguente.
Su Windows (XP / Vista) è molto simile. La differenza principale è la posizione dei pulsanti ridimensiona / chiudi.
In questo tutorial costruiremo un'applicazione con un chrome standard. Il trasparente proprietà indica se la finestra principale dell'applicazione è trasparente, mentre le righe 11 e 12 specificano la larghezza e l'altezza iniziali della finestra quando vengono visualizzate sul desktop.
Ora inizieremo a costruire il codice dell'applicazione, che verrà compilato nel file SWF.
Il WindowedApplication tag contiene tutta la tua applicazione, in modo simile al tag per pagine web. La proprietà titolo definisce la stringa che apparirà nella parte superiore dell'applicazione. Flex contiene un enorme elenco di componenti grafici. L'elenco completo dei componenti è disponibile qui. Ora inseriamo un pulsante nella nostra finestra.
Come puoi vedere, in un modo abbastanza simile a html, apri un tag (Pulsante) e specificare le caratteristiche del componente tramite attributi. In questo caso definiamo il testo da visualizzare sul pulsante tramite la proprietà label (riga 3). Ora applicheremo alcune azioni al pulsante.
Come puoi vedere, possiamo incorporare codice ActionScript, simile a JavaScript, che consente di definire quella che viene comunemente chiamata la "logica" del nostro programma (righe 3-11). Alla riga cinque importiamo il Mettere in guardia
componente, che è una sorta di finestra popup. Definiamo quindi una funzione (riga 7). L'azione associata è quella di mostrare una finestra di avviso contenente il messaggio "Ciao" (riga 8). Per allegare il codice al clic del pulsante, semplicemente riempiamo il clic attributo del pulsante con il nome della funzione (riga 12).
Per compilare l'applicazione dobbiamo passare alla cartella del progetto e quindi eseguire il seguente comando:
amxmlc MyApplication.mxml
La shell dovrebbe restituire un messaggio come questo:
Il messaggio contiene un avvertimento che, a differenza di un errore, non richiede una correzione. Il compilatore suggerisce semplicemente di controllare il codice e "migliorarlo". Per eseguire correttamente l'applicazione e per lo scopo di questo tutorial, non è necessario risolverlo. Ora siamo pronti a testare la nostra applicazione. Dalla stessa directory digitiamo il seguente comando:
adl MyApplication-descr.xml
(Si noti che passiamo il file xml del descrittore e non il mxml con il codice effettivo). Dovremmo vedere apparire la seguente finestra.
Se facciamo clic sul pulsante, l'avviso viene visualizzato correttamente.
È probabile che tu non sia soddisfatto del colore / layout predefinito di Flex SDK. Puoi personalizzare la tua applicazione Air tramite CSS, come fai con le tue pagine html. Ovviamente ci sono differenze rispetto allo standard W3C CSS, ma l'idea e la sintassi sono quasi le stesse. Per esempio, cambiamo in bianco l'etichetta di tutti i pulsanti nella nostra applicazione. Inseriamo uno snippet di CSS nel nostro file mxml come nella figura
sotto (righe 3-7).
Per avere un'idea delle funzionalità di styling di Flex, guarda questo link.
L'ultimo passaggio per creare la nostra prima applicazione è il pacchetto di un file distribuibile, da installare su altre macchine. Per prima cosa abbiamo bisogno di un certificato. Per maggiori dettagli sulla necessità di un certificato si prega di consultare il
precedente tutorial (passaggio 7). Riporteremo qui solo il comando per creare un certificato autofirmato necessario per costruire il pacchetto distribuibile.
adt -certificate -cn SelfSigned 1024-RSA mycertificate.p12 mypassword
L'applicazione finale verrà distribuita come un file .air che può essere compilato utilizzando il seguente comando.
adt -package -storetype pkcs12 -keystore mycertificate.p12 MyApplication.air MyApplication-descr.xml MyApplication.swf
Il keystore parametro indica il file contenente il certificato generato sopra.
Successivamente è necessario specificare il nome del file .air che vogliamo generare, la descrizione del file .air
applicazione (contenuta in MyApplication-descr.xml) e il file di root generato in precedenza (MyApplication.swf). Questo comando ti chiederà la password che hai specificato durante la creazione del certificato. Ora puoi ridistribuire il file MyApplication.air risultante ai tuoi utenti. Ricorda loro che hanno bisogno di installare l'Air Installer.
