ADOBE AIR e SQL - tutorial di implementazione rapida

Immagini

di Fabio Biondi- info@fabiobiondi.com

In questo articolo analizzeremo le funzionalità di Adobe AIR per la gestione di database SQLite.
L’RSS In questo articolo vedremo come realizzare piccola applicazione per gestire l’anagrafica clienti utilizzando Adobe AIR in ambiente Flex 3, sfruttando ActionScript 3.0 e SQL. Il progetto prevede diverse fasi realizzative:

1) Creazione di un database che conterrà una tabella “Clienti” con i seguenti campi:
   a. ID
   b. NOME_CLIENTE
   c. COGNOME_CLIENTE

2) Realizzazione di un piccolo form per l’inserimento nel db di un nuovo cliente (nome e cognome)

3) Impostazione di una query per la visualizzazione in un datagrid di tutti i clienti inseriti

L’INTERFACCIA UTENTE
L’interfaccia utente, creata in Flex 3 e MXML, conterrà quindi due campi di input per l’inserimento nel database di un nuovo cliente (nome e cognome) e un componente DataGrid per la visualizzazione dei dati inseriti (acquisiti anch’essi tramite una query SQL effettuata sul databse creato). Attraverso l’evento creationComplete(), definito nel file MXML, faremo in modo che ad ogni avvio dell’applicazione il database sia creato o aperto chiamando la funzione openDatabase(). Il risultato finale dell’applicazione sarà come da immagine 1.

Il codice del file main.mxml:

<?xml version=”1.0” encoding=”utf-8”?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” 
	layout=”vertical”
	width=”700” height=”450”
	creationComplete=”openDatabase()”>
 
	<mx:Script source=”asSQL/sqlConnection.as” />
 
    <!--
		FORM INSERIMENTO NUOVI CLIENTI nel db
	-->
    <mx:HBox width=”100%”  horizontalAlign=”center”>
	     <mx:Label text=”Nome Cliente”/>
		 <mx:TextInput id=”nomeTxt” width=”100” text=”Nome”/>
		 <mx:TextInput id=”cognomeTxt” width=”100” text=”Cognome”/>
		 <mx:Button label=”Inserisci” click=”insertRecord()”/>
	</mx:HBox>
 
    <mx:HRule width=”100%”/>
	<mx:Label text=”Record Tabella Clienti”/>
 
	<!--
	DATAGRID con l’ELENCO CLIENTI inseriti nel db:
	I nomi delle colonne dovranno coincidere con quelli dei campi del db, 
	affinchè le colonne del datagrid siano popolate automaticamente
	-->
	<mx:DataGrid id=”grid” width=”100%” height=”100%”>
		<mx:columns>
		     <mx:DataGridColumn dataField=”ID” />
		 	 <mx:DataGridColumn dataField=”NOME_CLIENTE” />
		 	 <mx:DataGridColumn dataField=”COGNOME_CLIENTE” />
		</mx:columns>
	</mx:DataGrid>
 
</mx:WindowedApplication>

CREAZIONE e APERTURA DATABASE

Il file asSQL/sqlConnection.as:

Innanzitutto importiamo le classi necessarie. Inseriamo quindi la funzione openDatabase(), che creerà il database al primo avvio dell’applicazione. Dalla successiva apertura, il database verrà invece semplicemente aperto e reso disponibile in modo che vi si possa interagire attraverso query SQL.
Il codice che proponiamo sarà commentato passo-passo:

import flash.filesystem.File;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
import flash.data.SQLConnection;
import flash.data.SQLStatement;
import flash.data.SQLResult;
import mx.controls.Alert; 
 
public var conn:SQLConnection;
 
private function openDatabase():void{
 
  	 // Creiamo una nuova connessione SQL
     conn = new SQLConnection(); 
     conn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
 
	// Reference al file del database .db (sarà posizionato sul desktop) 
    var dbFile:File = File.desktopDirectory.resolvePath(“Tutorial_UM_AIR_SQL.db”); 
 
 
    // ==> Se il file del DB esiste ed è quindi già stato creato:
    if(dbFile.exists) 
    {
 
       // Listener per l’APERTURA del database 
       conn.addEventListener(SQLEvent.OPEN, openHandler);
 
       // Apertura Database 
	   conn.open(dbFile);  
 
    } 
      else
      // ==> Se il file del DB ancora non esiste: 
    {
 
      // Listener per la CREAZIONE del database
      conn.addEventListener(SQLEvent.OPEN, createHandler);
 
      // Creazione Database, utilizzando nuovamente il metodo open(), 
// il quale crea automaticamente un nuovo db nel caso in cui 
// non trovasse il file all’url specificato
      conn.open(dbFile);
 
      // Creazione della Tabella “Clienti”
      createClientsTable();
 
    }
 
}
 
 
// Se l’apertura del db avviene con successo, verrà invocata la funzione  
// showAllRecords() e tutti i clienti presenti nel db saranno visualizzati nel datagrid 
private function openHandler(event:SQLEvent):void { 
	showAllRecords()
}
 
// Evento invocato dopo la creazione del db (solo al primo avvio dell’applicazione) 
private function createHandler(event:SQLEvent):void { 
    Alert.show(“Il DataBase è stato creato”, “createHandler”);
}

Verrà creato sul proprio desktop un file chiamato Tutorial_UM_AIR_SQL.db che conterrà l’intero database. Potete manipolare e visualizzare il contenuto dei database SQLITE grazie ad un piccolo software open source, SQLITE Database Browser, scaricabile gratuitamente all’url http://sqlitebrowser.sourceforge.net/. In seguito vedremo alcuni esempi di utilizzo.

CREAZIONE TABELLA CLIENTI
Creiamo quindi la tabella “Clienti” attraverso una query SQL, i cui campi saranno:

1) ID: INT- chiave primaria
2) NOME_CLIENTE: TEXT
3) COGNOME_CLIENTE: TEXT

private function createClientsTable():void{
 
    // Query per la creazione delle tabella:
    // @field	 ID 
    // @field	 NOME_CLIENTE 
    // @field	 COGNOME_CLIENTE
    // NOTA: i nomi dei campi della tabella dovranno necessariamente coincidere
    // con quelli utilizzati nel codice MXML nelle colonne del datagrid
 
    var sqlText:String = “CREATE TABLE Clienti(ID INTEGER PRIMARY KEY, “ + 
                         					“NOME_CLIENTE TEXT,” + 
                         					“COGNOME_CLIENTE TEXT)”
                         					;
 
    // Eseguiamo la query
    var createTableStatement:SQLStatement = new SQLStatement();
    createTableStatement.sqlConnection = conn;
    createTableStatement.addEventListener(SQLEvent.RESULT, createTableResult);
    createTableStatement.addEventListener(SQLErrorEvent.ERROR, errorHandler);
    createTableStatement.text = sqlText;
    createTableStatement.execute(); 
}
 
 
// Evento invocato dopo la creazione della Tabella
private function createTableResult(event:SQLEvent):void { 
   // Eventuali messaggi e operazioni da effettuare dopo 
   // la creazione della tabella
}

Sfruttando il software SQLITE Database Browser potete aprire il file .db e verificare che la struttura della tabella appena creata sia corretta, come rappresentato nell’immagine 2

INSERIMENTO DATI
Creiamo quindi la funzione insertRecord() per consentire l’inserimento di un nuovo utente (nome e cognome) attraverso il form MXML:

private function insertRecord():void
{
// Query per l’inserimento di un nuovo utente.
// Passiamo come parametri nomeCliente e cognomeCliente
var sqlText:String = “INSERT INTO Clienti(NOME_CLIENTE, COGNOME_CLIENTE) “ +
“VALUES(:nomeCliente, :cognomeCliente)” ;

var insertStatement:SQLStatement = new SQLStatement();
insertStatement.sqlConnection = conn;
insertStatement.addEventListener(SQLEvent.RESULT, insertResult);
insertStatement.addEventListener(SQLErrorEvent.ERROR, errorHandler);
insertStatement.text = sqlText;

// Acquisiamo i valori da inserire nella query dai campi di
// input del form, abbinandoli ai parametri passati nella query
insertStatement.parameters[“:nomeCliente”] = nomeTxt.text;
insertStatement.parameters[“:cognomeCliente”] = cognomeTxt.text;

// Eseguiamo la query
insertStatement.execute();
}

// Ad ogni INSERT invochiamo la funzione showAllRecords() per verificare
// l’avvenuto inserimento, visualizzando nel datagrid tutti i clienti presenti nel db
private function insertResult(event:SQLEvent):void {

// Eliminiamo il contenuti dai campi di input
nomeTxt.text = “”;
cognomeTxt.text = “”;

// Effettuiamo una query sul DB per recuperare i dati e popolare il DataGrid
showAllRecords();
}

Grazie a SQLITE Database Browser sarà possibile verificare in ogni momento il contenuto dei dati inseriti nel database. Dopo ogni inserimento sarà tuttavia necessario chiudere e riaprire il file .db per visualizzare i nuovi dati inseriti, come raffigurato nell’immagine 3

VISUALIZZAZIONE DATI
Attraverso la funzione showAllRecords()recuperiamo tutti i clienti inseriti nella tabella “Clienti” e popoliamo il datagrid con il risultato ottenuto:

private function showAllRecords():void{
   var sqlText:String = “SELECT * FROM Clienti”;
   var selectAllSQL:SQLStatement = new SQLStatement();
   selectAllSQL.sqlConnection = conn;
   selectAllSQL.addEventListener(SQLEvent.RESULT, selectAllRecordsResult);
   selectAllSQL.addEventListener(SQLErrorEvent.ERROR, errorHandler);
   selectAllSQL.text = sqlText;
   selectAllSQL.execute();
}
 
// Evento invocato dopo la query SELECT
private function selectAllRecordsResult(event:SQLEvent):void{
 
	// Popoliamo il datagrid con il risultato della SELECT
   var result:SQLResult = event.currentTarget.getResult();
   grid.dataProvider = result.data;
   }
Per la gestione degli errori utilizzeremo una funzione generica valida per tutti gli eventi:
 
 
private function errorHandler(event:SQLErrorEvent):void { 
   var err:String = “ID Errore:” + event.error.errorID + “\nDettagli:” +
                     event.error.message;
 
   Alert.show(err,”Errore”); 
}

______________________________________________________________

Fabio Biondi
info@fabiobiondi.com
Adobe Flash/Flex Developer dal 2002, realizza siti web dinamici e rich internet application. Ottenuta nel 2004 la certificazione Flash Developer, dal 2007 è Adobe Flash Certified Instructor. Inoltre sviluppa e coordina progetti che fanno uso delle più recenti tecnologie Adobe complementari a Flash, come Flex, FlashLite, Air e Flash Media Server. Membro fondatore dell’Adobe UserGroup (AUG) Actionscript.it, ora fa parte dell’AUG Augitaly.com. Attualmente lavora presso la Web agency Fishouse di Castelfranco Veneto (TV).