Sviluppare un’applicazione per iPhone con Flash Builder

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.

Figura 1 – Nuovo progetto in Flash Builder

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.

Figura 2 – Configurare il progetto in Flash Builder

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 ViewNavigatorApplication che fornisce una navigazione basata su una serie di viste che cambiano a seconda dell’interazione dell’utente;
• il template tabed utilizza il componente TabbedViewNavigatorApplication che gestisce una lista di ViewNavigator selezionabili 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.

Figura 3 – L’applicazione finale in Flash Builder

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.