Prima applicazione adobe AIR
Scritto da loige
Dopo un periodo di pausa estiva eccomi di nuovo qui a scrivere qualcosa sulla programmazione. Quest’oggi ho voluto fare qualche piccola prova con il nuovo promettente prodotto di casa Adobe: AIR ( Adobe Integrated Runtimes ), ovvero un framework per lo sviluppo di applicazioni desktop e web che segue l’ormai famosa struttura di flex, altro geniale prodotto di casa Adobe.
AIR è un prodotto ancora in piena fase di sviluppo, quindi potete trovare numerose informazioni al riguardo e scaricarne il runtime sul sito Adobe Labs. Inoltre è possibile sfruttare Flex Builder o Flash come IDE per sviluppare applicazioni AIR. per questa prova io ho utilizzato la versione beta di Flex Builder 3.
Ma prima di prendere in mano il codice eccovi una lista di link utili:
Da questi link possiamo ottenere tutto il necessario per sviluppare la nostra prima applicazione: un semplice orologio digitale.
Apriamo Flex Builder e creiamo un nuovo progetto AIR. Come noterete subito verranno creati diversi files, tra cui un file xml di configurazione e un file mxml contenente il modulo principale della nostra applicazione.
Apriamo questo file e cominciamo ad impostare la nostra interfaccia grafica. Il tutto è davvero molto semplice se utilizzate l’editor WYSIWYG messo a disposizione da flex. Non soffermiamoci troppo su questo aspetto che potrete facilmente sperimentare da soli, la cosa importante è che inseriate una label con ID “lbl_clock”.
Per maggiore precisione vi aggiungo il codice mxml del mio form, anche perché da qui vedremo come proseguire nello sviluppo della nostra applicazione
<?xml version=“1.0″ encoding=“utf-8″?>
<mx:WindowedApplication
xmlns:mx=“http://www.adobe.com/2006/mxml”
layout=“absolute”
width=“200″
height=“100″
borderStyle=“solid”
backgroundGradientAlphas=“[1.0, 1.0]”
backgroundGradientColors=“[#0E8CB0, #0C4657]”
initialize=“main()”>
<mx:Label
text=“00:00:00″
width=“178″
height=“46″
fontFamily=“Arial”
fontSize=“30″
textAlign=“center”
color=“#E5ECE5″
enabled=“true”
id=“lbl_clock”
horizontalCenter=“0″
verticalCenter=“0″/>
<mx:Script
source=“main.as” />
</mx:WindowedApplication>
In base a come avete disegnato il form il vostro codice potrebbe essere sensibilmente diverso ma ci sono alcuni elementi importanti che dovete assolutamente avere per far funzionare correttamente l’applicazione. Innanzitutto notiamo initialize=”main()”. Questa stringa sta ad indicare che nel momento in cui la nostra applicazione verrà inizializzata sarà chiamato il metodo main() (tra poco lo scriveremo). E’ possibile inserire questa stringa manualmente dal codice oppure inserirla dal pannello delle proprietà del form andando a selezionare l’elenco di tutti gli eventi e scrivendo “load()” accanto a “initialize”.
E’ inoltre molto importante definire qual’è lo script che conterrà le nostre funzioni. Per farlo basta inserire nel codice il tag <mx:script> . Noi lo abbiamo fatto nelle ultime righe: <mx:Script source=”main.as” />.
Com’è facile intuire adesso dovremo inserire nel nostro progetto il file main.as. Questo sarà un file actionscript 3 il quale conterrà tutte le funzioni che serviranno al nostro programma per funzionare correttamente. Ecco ciò che dovremmo scrivere al suo interno:
// ActionScript file
//importo le classi necessarie a creare un timer
import flash.events.TimerEvent;
import flash.utils.Timer;
//dichiaro un timer che verrà utilizzato per eseguire funzioni ad intervalli regolari
private var timeh:Timer;
//funzione principale, avviata all’inizio dell’applicazione
private function main():void
{
//creo un timer che scandisce un evento ogni secondo (1000 millisecondi) e si ripete all’infinito.
this.timeh = new Timer(1000,0);
//associamo la funzione setTime al timer e lo avviamo col metodo start()
this.timeh.addEventListener(TimerEvent.TIMER,setTime);
this.timeh.start();
}
private function setTime(evt:TimerEvent):void
{
//variabile che contiene un oggetto in grado di descrivere la data e l’orario corrente
var cTime:Date = new Date();
//aggiorna la label della nostra applicazione con l’orario corrente servendosi della funzione formatTime
this.lbl_clock.text = formatTime(cTime.getHours().toString()) +
“:” + formatTime(cTime.getMinutes().toString()) +
“:” + formatTime(cTime.getSeconds().toString());
}
//funzione di supporto utile ad inserire uno zero se una particolare parte di orario risulta composta da un solo carattere
// ad esempio puo’ essere usata per trasformare un "5" in "05" o un "6" in "06" e così via.
private function formatTime(part:String):String
{
if(part.length == 1)
return “0″+part;
return part;
}
Grazie ai commenti non dovrebbe essere particolarmente difficile capire come funziona questo codice. Ad ogni modo se avete dei dubbi potete andare a consultare la documentazione actionscript3 per flex e leggere i dettagli sulle classi Timer e Date.
Scarica l’esempio completo
Allego un 
file zip contente i sorgenti completi e un pacchetto di installazione per provare subito la nostra applicazione. Questa versione inoltre contiene qualche piccola “feature” in più, studiatela attentamente
Osservazioni
La nostra applicazione puo’ essere ancora personalizzata e di gran lunga migliorata, quindi può essere un buon punto di partenza per approfondire sempre più i numerosi aspetti e le potenzialità di Adobe AIR, quindi che dire di più? BUON DIVERTIMENTO! 