Con Flash Builder 4.5 e Flex, Adobe offre agli sviluppatori un'unica
piattaforma di sviluppo di applicazioni mobile per Android, iOS e BlackBerry Tablet OS.
Ciò è possibile grazie alla tecnologia Adobe AIR che permette
l'esecuzione delle applicazioni sui differenti dispositivi.
Ai numerosi componenti già utilizzabili per le applicazioni web e desktop, con la
release 4.5 del framework Flex sono disponibili 21 nuovi componenti ottimizzati
per l'utilizzo in applicazioni mobili. I nuovi componenti sono stati progettati
per sfruttare al meglio le potenzialità degli schermi multitouch e per essere
utilizzabili sui display di piccole dimensioni adottati da smartphone e tablet.
Il framework Flex 4.5 include anche importanti funzionalità tipiche delle applicazioni mobile
come gli effetti cinetici, elastici e di rimbalzo. Sono state migliorate la
fluidità dello scorrimento delle viste e le funzionalità che consentono il
ridimensionamento automatico dell'applicazione in base alla dimensione e alla risoluzione
del display del dispositivo.
Anche l'ambiente di sviluppo, Flash Builder 4.5, fornisce agli sviluppatori strumenti espressamente
dedicati alla realizzazione di applicazioni per dispositivi mobile: un nuovo
tipo di progetto, l'anteprima sui diversi dispositivi, il setting dei livelli
di autorizzazione dell'applicazione sulle diverse piattaforme e la possibilità
di effettuare il debug delle applicazioni direttamente sul terminale fisico o
sul dispositivo emulato dall'ambiente di sviluppo.
Realizziamo ora un'applicazione di esempio che, grazie
al sensore GPS, sarà in grado di rilevare la posizione geografica corrente del
dispositivo e, dopo avere effettuato una chiamata ai web service pubblici messi
a disposizione da last.fm, visualizzeremo un elenco di eventi musicali che si svolgeranno nella zona.
Lo sviluppo
Per realizzare l'applicazione utilizzeremo Adobe Flash Builder 4.5 la cui versione di prova è scaricabile
gratuitamente all'indirizzo qui.
Selezioniamo quindi dal menu: File->New->Flex Mobile Project e chiamiamo il nuovo progetto MobileMusicEventApp
(Figura 1).
Selezioniamo Next per procedere con il wizard e, nella schermata successiva, selezioniamo nella
parte alta della schermata la piattaforma per cui vogliamo sviluppare la nostra applicazione.
Nell'esempio, per semplicità, selezioneremo solo la piattaforma Google Android.
Al centro della schermata sarà possibile scegliere il layout grafico da utilizzare
per la nostra applicazione. Nel nostro caso utilizzeremo un template View-Based.
Se clicchiamo sul tab Permissions potremo selezionare i permessi di accesso alle risorse del dispositivo per la nostra
applicazione. Per l'esempio selezioneremo l'accesso a Internet necessario
per le chiamate ai servizi di last.fm e la possibilità di utilizzare la
localizzazione GPS del dispositivo.
Selezioniamo Finish per terminare la creazione del progetto di base e iniziamo lo sviluppo dell'applicazione.
All'interno del progetto troveremo due file MXML denominati MobileMusicEventApp.mxml e MobileMusicEventAppHomeView.mxml. Quest'ultimo è posizionato all'interno del package view. In quest'ultimo file dovrà
essere collocato il codice seguente che implementa la chiamata al servizio remoto e la visualizzazione delle informazioni ricevute.
// funzione che inizializza l'applicazione
private function init():void{
var params:Object = new Object();
params.method = "geo.getevents";
params.lat = "41.890522";
params.long = "12.494202";
params.distance = "5";
params.limit = "30";
params.api_key = "b25b959554ed76058ac220b7b2e0a026"
calLastFmWebService(params);
}
// funzione che effettua la chiamata al Servizio REST di Last.FM
private function calLastFmWebService(params:Object):void {
service = new HTTPService();
service.url = "http://ws.audioscrobbler.com/2.0/";
service.method = "GET";
service.resultFormat = "e4x";
service.addEventListener(ResultEvent.RESULT, httpResult);
service.addEventListener(FaultEvent.FAULT, httpFault);
service.send(params);
}
Per la chiamata al servizio remoto è stato utilizzato il componente HTTPService che
permette la comunicazione delle applicazioni Flex con i servizi remoti. Il
componente HTTPService può essere istanziato mediante tag mxml
<s:HTTPService> oppure direttamente dal codice Actionscript che è
possibile scrivere all'interno del blocco <fx:script> dei file mxml. Nell'esempio
è stata utilizzata quest'ultima modalità che permette maggiore flessibilità e
controllo anche se comporta la scrittura di qualche riga di codice in più.
L'emulatore presente all'interno di Flash Builder presenterà l'interfaccia
dell'applicazione come dovrebbe essere visualizzata sul terminale reale.
Utilizzo del sensore GPS
La chiamata al servizio di last.fm prevede la possibilità di
ricevere in input una serie di parametri tra cui le coordinate geografiche (latitudine e longitudine) da cui
partire per effettuare la ricerca degli eventi presenti in zona. Come è possibile vedere all'interno della
funzione init è stato necessario
indicare la latitudine e la longitudine da cui effettuare la ricerca. Affinchè
l'applicazione, anche se realizzata a scopo di esempio, sia minimamente utilizzabile
occorre rilevare le coordinate a partire dalla posizione in cui si trova il
dispositivo. Per fare ciò occorre modificare il codice precedente aggiungendo le
funzioni per l'interazione con il sensore GPS presente sul dispositivo mediante
il componente Geolocation di Flex.
// funzione che effettua la richiesta dei dati del sensore GPS
private function getGPSLocation():void {
if(Geolocation.isSupported){
geoLocation = new Geolocation();
if(geoLocation.muted){
info.text="Accendere ricevitore GPS";
}
geoLocation.setRequestedUpdateInterval(3000);
geoLocation.addEventListener(GeolocationEvent.UPDATE, locationResult);
} else {
info.text = "GPS non disponibile";
}
}
// funzione che intercetta i dati sulla posizione GPS
// e chiama il servizio di Last.FM per ottenere i dati geolocalizzati
private function locationResult(event:GeolocationEvent):void {
var params:Object = new Object();
params.method = "geo.getevents";
params.lat = event.latitude.toString();
params.long = event.longitude.toString();
params.distance = "5";
params.api_key = "b25b959554ed76058ac220b7b2e0a026"
calLastFmWebService(params);
}
Nella nuova versione del codice la chiamata al servizio di last.fm
non viene effettuata più nella funzione init ma nella funzione locationResult,
che intercetta i dati provenienti dal sensore GPS. Nella
funzione init verrà solo richiamata
la funzione getGPSLocation necessaria alla rilevazione dei dati GPS sul dispositivo.
Un ultimo ritocco all'applicazione
Nella lista di eventi presentata dall'applicazione è
visualizzato soltanto il titolo dell'evento senza nessun ulteriore dato
(artista, indirizzo, ora, ecc...). Tutte le informazioni necessarie a raggiungere
l'evento sono comunque presenti all'interno
del file xml ricevuto in risposta dal servizio di last.fm e per questo possono
essere aggiunte successivamente nella lista.
Basta modificare il componente List ed il componente ItemRenderer, definito al suo interno,
nel seguente modo:
Dopo l'ultima modifica, l'applicazione mostrerà
tutte le informazioni necessarie a raggiungere l'evento.
In conclusione
Creiamo ora il pacchetto per la distribuzione dell'applicazione. A tal scopo, dopo aver premuto il tasto destro
del mouse sul nostro progetto e scelto la voce export dal menù, siamo in grado di creare il nostro package apk.
Ovviamente sarà necessario disporre di un file di certificato (*.p12, *.pfx) e della
relativa password per firmare la nostra applicazione.
Un certificato di esempio può essere creato con l'utility ADT
(che si trova all'interno del sdk di Flex) mediante il seguente comando
eseguibile dal prompt dei comandi:
adt -certificate -validityPeriod 25 -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword
Ulteriori informazioni sono disponibili nella sezione help del sito Adobe.
