Home » AIR, ActionScript 3.0, Adobe, Flex 3

ADOBE AIR e SQL

17 September 2008 No Comment

In questo articolo analizzeremo le funzionalità di Adobe AIR per la gestione di database SQLite.

Realizzeremo una piccola anagrafica clienti utilizzando Adobe AIR in ambiente Flex 3, sfruttando ActionScript 3.0 e SQL al fine di:
1) creare un database che conterrà una tabella “Clienti” con i seguenti campi:
a. ID
b. NOME_CLIENTE,
c. COGNOME_CLIENTE
2) creare un piccolo form per l’inserimento nel db di un nuovo cliente (nome e cognome)
3) effettuare 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 db 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à il seguente:

01_frontend

Il codice del file main.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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");
}

NOTA: 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
}

NOTA: 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 seguente:

02_creazionetabelle





INSERIMENTO DATI

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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();
}

NOTA: 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 seguente:

03_inserimentoclienti





VISUALIZZAZIONE DATI

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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:

1
2
3
4
5
6
private function errorHandler(event:SQLErrorEvent):void { 
   var err:String = "ID Errore:" + event.error.errorID + "nDettagli:" +
                     event.error.message;
 
   Alert.show(err,"Errore"); 
}

Download Source Code

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.