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
ViewNavigatorApplication
navigazione basata su una serie di viste che cambiano a seconda
dell'interazione dell'utente; - il template tabed
TabbedViewNavigatorApplication
ViewNavigator
componente.
È inoltre possibile non selezionare alcuna struttura
predefinta selezionando il template denominato Blank
Restando sulla stessa schermata, selezionando la scheda Permission
effettuare il setting dei permessi per la nostra applicazione, come nel caso di
applicazione Android
sistema operativo iOS
risorse del dispositivo.
Selezionando infine la scheda Platform settings
solo su iPad
iPhone
l'opzione all
Dopo aver terminato il wizard, notiamo che sono stati creati due file MXML all'interno della cartella src
Il file da modificare è IphoneMemoAppHomeView.mxml
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
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.
La funzione init() creationComplete View
Ecco la nostra applicazione
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.
