Nel precedente articolo,
abbiamo visto come sviluppare un'applicazione mobile, per diverse piattaforme, grazie all'AIR runtime.
Nel corso di questo articolo svilupperemo un'applicazione di
esempio per dispositivi iPhone e iPad.
Con lo stesso codice sorgente sarà comunque possibile produrre le versioni
destinate ad altri sistemi operativi quali Android e BlackBerry Tablet.
Da Giugno è stato introdotto nella versione 4.5 di Flex SDK e
Flash Builder il supporto per il sistema operativo iOS di Apple.
Ciò permette agli sviluppatori di sviluppare applicazioni compatibili con i dispositivi
iPhone e iPad.
L'ambiente per lo sviluppo sarà come sempre Flash Builder
nella versione 4.5, è possibile scaricare una versione dimostrativa dal
sito ufficiale di Adobe.
Lo sviluppo
L'applicazione che realizzeremo implementerà le funzionalità
base per la gestione di una lista di promemoria, mostrerà
all'utente la lista di tutti promemoria memorizzati, consentirà
l'inserimento di un nuovo promemoria e la cancellazione di uno o di tutti i
promemoria presenti. Utilizzeremo un database SQLite
come backend dei dati in locale utilizzando la
memoria del dispositivo.
SQLite è una libreria che implementa un DBMS SQL (tabelle,
query, report ecc..) costituito da un unico file. Ciò comporta una notevole
flessibilità di utilizzo, facilità di backup e di distribuzione. Tali
caratteristiche hanno portato all'adozione di SQLite in diverse piattaforme di
sviluppo, tra cui l'AIR runtime di Adobe.
L'SDK di Flex fornisce tutti gli strumenti necessari alla
creazione del database SQLite e alla sua interrogazione.
Avviamo Flash Builder 4.5 e creiamo un nuovo progetto di
tipo Flex Mobile Project.
Assegniamo il nome al nostro progetto, IphoneMemoApp
e lasciamo selezionata la versione del Flex SDK predefinita.
Utilizzando Flex SDK nella versione 4.5.1 sarà necessario disporre sul
proprio terminale almeno della versione 2.6 del runtime AIR.
Nello step successivo selezioniamo come target platform Apple iOS e
scegliamo un template di tipo View-Based.
Come si può vedere al centro della schermata, Flash Builder permette
la selezione di due tipologie di Application Template:
- il template view based utilizza il componente
ViewNavigatorApplicationche fornisce una
navigazione basata su una serie di viste che cambiano a seconda
dell'interazione dell'utente; - il template tabed utilizza il componente
TabbedViewNavigatorApplicationche gestisce una lista di
ViewNavigatorselezionabili mediante una toolbar presente all'interno del
componente.
È inoltre possibile non selezionare alcuna struttura
predefinta selezionando il template denominato Blank.
Restando sulla stessa schermata, selezionando la scheda Permission notiamo che non è necessario
effettuare il setting dei permessi per la nostra applicazione, come nel caso di
applicazione Android. Durante il normale utilizzo dell'applicazione sarà il
sistema operativo iOS a richiedere all'utente il permesso di accedere alle
risorse del dispositivo.
Selezionando infine la scheda Platform settings è possibile decidere se utilizzare l'applicazione
solo su iPad, solo su iPhone o su entrambi. Nel nostro caso selezioniamo
l'opzione all dal menù a tendina per rendere l'applicazione utilizzabile su entrambi i dispositivi.
Dopo aver terminato il wizard, notiamo che sono stati creati due file MXML all'interno della cartella src.
Il file da modificare è IphoneMemoAppHomeView.mxml che implementa l'unica vista utilizzata per
il nostro progetto di esempio.
Sviluppare l'interfaccia utente
Come primo passo, sviluppiamo il codice MXML necessario ad implementare l'interfaccia grafica dell'applicazione.
All'interno del componente View, utilizzato come componente base per la realizzazione della vista, posizioniamo due campi di testo e tre bottoni. I campi di testo serviranno all'inserimento del titolo e del contenuto del nostro promemoria e i bottoni consentiranno di memorizzare un nuovo promemoria, di cancellare un promemoria selezionato all'interno della lista oppure cancellare tutti i promemoria precedentemente memorizzati.
È presente inoltre un componente di tipo List per la visualizzazione dell'elenco dei promemoria. All'interno della lista è utilizzato un componente itemRenderer necessario al rendering dei singoli elementi della lista.
<s:Label x="61" y="24" fontSize="24" text="Titolo"/>
<s:TextInput id="title_memo" x="127" y="14" width="290" height="40" fontSize="20"/>
<s:Label x="6" y="80" fontSize="24" text="Contenuto"/>
<s:TextInput id="body_memo" x="127" y="71" width="290" height="40" fontSize="20"/>
<s:Button x="439" y="7" width="80" height="50" label="+" click="addMemo()" fontSize="30"/>
<s:Button x="439" y="65" width="178" height="50" label="Rimuovi Tutti" click="deleteAllMemo()" fontSize="18"/>
<s:Button x="537" y="7" width="80" height="50" label="-" click="deleteMemo()" fontSize="18"/>
<s:List id="memoList" top="129" bottom="0" left="0" right="0"
dataProvider="{memoArray}" >
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer labelField="title" messageFunction="messageFunc">
<fx:Script>
<![CDATA[
private function messageFunc(item: Object): String {
return item.body;
}
]]>
</fx:Script>
</s:IconItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>Notiamo dal codice, nella proprietà click dei bottoni, sono richiamati alcuni metodi necessari all'esecuzione delle operazioni di lettura e scrittura sul database.
Dopo aver realizzato l'interfaccia dell'applicazione, implementiamo il codice necessario alla comunicazione con il database. I metodi per la creazione del database e per le operazioni di interrogazione e di scrittura saranno riportati all'interno del tag <fx:Script> nello stesso file IphoneMemoAppHomeView.mxml.
import flash.data.SQLStatement;
import flash.data.SQLConnection;
import mx.collections.ArrayCollection;
// Oggetto che effettua la connessione SQL al database
private var sqlc:SQLConnection = new SQLConnection();
// Oggetto necessario all'esecuzione del codice SQL
private var sqls:SQLStatement = new SQLStatement();
// ArrayCollection utilizzato per contenere la lista di oggetti Memo da visualizzare sull'interfaccia
// La collection è definita Bindable in modo tale che ad ogni sua modifica l'interfaccia risulti aggiornata
[Bindable]
private var memoArray:ArrayCollection = new ArrayCollection();
// Metodo di inizializzazione dell'applicazione
private function init():void{
// Inizializzo l'oggetto File relativo al database
var db:File = File.applicationStorageDirectory.resolvePath("memo.db");
sqlc.openAsync(db);
// Aggiungo due ascoltatori per l'apertura del database e la gestione dei risultati delle interrogazioni
sqlc.addEventListener(SQLEvent.OPEN, open_db);
sqls.addEventListener(SQLEvent.RESULT, result);
}
// Metodo per la creazione del database alla prima apertura dell'applicazione
private function open_db(e:SQLEvent):void{
// Collego l'oggetto SQLStatment all'oggetto SQLConnection precedentemente inizializzato
sqls.sqlConnection = sqlc;
sqls.text = "CREATE TABLE IF NOT EXISTS memo_table ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, body TEXT);";
sqls.execute();
// Chimata a funzione per aggiornare lo stato della lista di memo
refresh();
}
// Metodo per l'aggiornamento della lista di memo
// E' utilizzato un timer per l'esecuzione del codice SQL poichè non possono essere eseguiti due statement contemporaneamente
private function refresh(e:TimerEvent = null):void{
var timer:Timer = new Timer(10,1);
timer.addEventListener(TimerEvent.TIMER, refresh);
if ( !sqls.executing ){
sqls.text = "SELECT * FROM memo_table"
sqls.execute();
}else{
timer.start();
}
}
// Metodo per l'elaborazione dei risultati delle interrogazioni
private function result(e:SQLEvent):void{
var data:Array = sqls.getResult().data;
memoArray = new ArrayCollection(data);
}
// Metodo per aggiungere un elemento memo alla lista
private function addMemo():void{
sqls.text = "INSERT INTO memo_table (title, body) VALUES('"+title_memo.text+"','"+body_memo.text+"');";
sqls.execute();
refresh();
}
// Metodo per eliminare tutti i memo dalla lista
private function deleteAllMemo():void{
sqls.text = "DELETE FROM memo_table";
sqls.execute();
refresh();
}
// Metodo per eliminare un elemento memo dalla lista
private function deleteMemo():void{
if(memoList.selectedIndex!=-1){
sqls.text = "DELETE FROM memo_table WHERE id="+memoArray[memoList.selectedIndex].id;
sqls.execute();
refresh();
}
}
La funzione init() dovrà essere richiamata dall'evento di creationComplete del componente View e, nel caso in cui
l'applicazione venisse eseguita per la prima volta, creerà il file contente il
database SQLite. La funzione, inoltre, inizializzerà gli ascoltatori per le
operazioni di apertura del database e per le intercettazione della risposta
alle interrogazioni. Gli altri metodi presenti all'interno dello script, si
occupano di recuperare la lista dei promemoria e delle operazioni di
eliminazione di uno o più elementi.
Ecco la nostra applicazione
Dopo aver compilato il codice
all'interno di Flash Builder e lanciato l'emulatore del dispositivo iPhone 4,
la nostra applicazione si presenterà come riportato in figura 4.
Conclusioni
Occorre precisare che la soluzione proposta nell'esempio,
implementare la logica di accesso ai dati all'interno del componente View,
sebbene sia semplice e funzionante, è da evitare in progetti reali.
Tale soluzione rende la logica di presentazione altamente accoppiata
alla logica applicativa e non consente il riutilizzo né dell'interfaccia grafica
né del codice per l'accesso ai dati. La soluzione più comune è quella
di implementare il design pattern DAO (Data Access Object) e/o di utilizzare un
framework ORM (object-relational mapping) per la gestione dei dati.
