Tuesday, September 27, 2011

Creating a contact book using Flex, AIR and SQLite database: Part 3

In this part of the Flex AIR contact book tutorial, we will finish up the functionality for the application.

We still have the Save and Delete buttons which are not working, and when we select an item in the List - nothing happens. So, the first thing we need to do is add a listener for the 'change' event in the List, and direct it to a function called onChange().

<s:List id="contactList" width="290" height="300" dataProvider="{listData}" labelFunction="getFullName" change="onChange();"/>

In this function, we need to enable the Save and Delete buttons and update the input text fields with the data from the database. Because we have the data for each item stored in the listData ArrayCollection, we can use that data for our needs. We can access listData easily - we just have to refer to the selectedItem property of the contactList and we will get the data from the current selected item in the list.

private function onChange():void {
b_save.enabled = true;
b_delete.enabled = true;
t_fname.text = contactList.selectedItem.fname;
t_lname.text = contactList.selectedItem.lname;
t_phone.text = contactList.selectedItem.phone;
t_email.text = contactList.selectedItem.email;
}

Now we need to add functionality for the Delete and Save buttons. Let's do the delete one first, because it is the easiest thing that can be done when working with SQL databases. We just need to specify the id of the item we want to delete. We can get that from the selectedItem property of the list too. Also don't forget to empty all the input fields.

private function onDelete():void {
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "DELETE FROM contacts WHERE id=" + contactList.selectedItem.id;
stat.execute( -1, new Responder(selectItems));
t_fname.text = t_lname.text = t_phone.text = t_email.text = "";
}

Add a listener for the click event for the delete button, pass it to the existing onDelete function:

<s:Button id="b_delete" label="Delete item" enabled="false" click="onDelete();" />

Now, the Save button. Use the click event listener to call the onSave function:

<s:Button id="b_save" label="Save item" enabled="false" click="onSave();" />

In the onSave() function, what you need to do is use the UPDATE sql command to edit an existing item in the database. Using parameters, pass the text field values to the command and specify the id using selectedItem of the list again. Then, empty all the text fields:

private function onSave():void {
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "UPDATE contacts SET fname=@fname, lname=@lname, phone=@phone, email=@email WHERE id=" + contactList.selectedItem.id;
stat.parameters["@fname"] = t_fname.text;
stat.parameters["@lname"] = t_lname.text;
stat.parameters["@phone"] = t_phone.text;
stat.parameters["@email"] = t_email.text;
stat.execute( -1, new Responder(selectItems));
t_fname.text = t_lname.text = t_phone.text = t_email.text = "";
}

And you have a fully working little contact book application made in Flex in AIR! Here is the full code:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
   width="600" height="350"
   creationComplete="init();"
   title="Flex contact book"
   >
   
<fx:Script>
<![CDATA[
import flash.data.SQLConnection;
import flash.events.SQLEvent;
import flash.data.SQLMode;
import flash.filesystem.File;
import flash.net.Responder;
import flash.data.SQLStatement;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import flash.data.SQLResult;

private var connection:SQLConnection;
[Bindable]
private var listData:ArrayCollection;

private function init():void{
var dbFile:File = File.applicationStorageDirectory.resolvePath("database.db");
connection = new SQLConnection();
connection.addEventListener(SQLEvent.OPEN, onOpen);
connection.openAsync(dbFile, SQLMode.CREATE);
}

private function onOpen(evt:SQLEvent):void{
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "CREATE TABLE IF NOT EXISTS contacts (id INTEGER PRIMARY KEY AUTOINCREMENT, fname TEXT, lname TEXT, phone TEXT, email TEXT)";
stat.execute(-1, new Responder(selectItems));
}

private function selectItems(evt:SQLResult):void{
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "SELECT id, fname, lname, phone, email FROM contacts ORDER BY id";
stat.execute( -1, new Responder(onSelected));
b_save.enabled = false;
b_delete.enabled = false;
}

private function onSelected(evt:SQLResult):void {
listData = new ArrayCollection(evt.data);
}

private function createNew():void{
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "INSERT INTO contacts (fname, lname, phone, email) VALUES (@fname, @lname, @phone, @email)";
stat.parameters["@fname"] = t_fname.text;
stat.parameters["@lname"] = t_lname.text;
stat.parameters["@phone"] = t_phone.text;
stat.parameters["@email"] = t_email.text;
stat.execute(-1, new Responder(selectItems));
}

private function getFullName(evt:Object):String{
return evt.fname + " " + evt.lname;
}

private function onChange():void {
b_save.enabled = true;
b_delete.enabled = true;
t_fname.text = contactList.selectedItem.fname;
t_lname.text = contactList.selectedItem.lname;
t_phone.text = contactList.selectedItem.phone;
t_email.text = contactList.selectedItem.email;
}

private function onDelete():void {
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "DELETE FROM contacts WHERE id=" + contactList.selectedItem.id;
stat.execute( -1, new Responder(selectItems));
t_fname.text = t_lname.text = t_phone.text = t_email.text = "";
}

private function onSave():void {
var stat:SQLStatement = new SQLStatement();
stat.sqlConnection = connection;
stat.text = "UPDATE contacts SET fname=@fname, lname=@lname, phone=@phone, email=@email WHERE id=" + contactList.selectedItem.id;
stat.parameters["@fname"] = t_fname.text;
stat.parameters["@lname"] = t_lname.text;
stat.parameters["@phone"] = t_phone.text;
stat.parameters["@email"] = t_email.text;
stat.execute( -1, new Responder(selectItems));
t_fname.text = t_lname.text = t_phone.text = t_email.text = "";
}

]]>
</fx:Script>

<s:HGroup width="500">
<s:List id="contactList" width="290" height="300" dataProvider="{listData}" labelFunction="getFullName" change="onChange();"/>
<mx:Form>
<mx:FormItem><s:Button id="b_new" label="Create new item" click="createNew();" /></mx:FormItem>
<mx:FormItem label="First name"><s:TextInput id="t_fname"/></mx:FormItem>
<mx:FormItem label="Last name"><s:TextInput id="t_lname"/></mx:FormItem>
<mx:FormItem label="Phone"><s:TextInput id="t_phone" restrict="0-9 " /></mx:FormItem>
<mx:FormItem label="Email"><s:TextInput id="t_email"/></mx:FormItem>
<mx:FormItem><s:Button id="b_save" label="Save item" enabled="false" click="onSave();" /><s:Button id="b_delete" label="Delete item" enabled="false" click="onDelete();" /></mx:FormItem>
</mx:Form>
</s:HGroup>

</s:WindowedApplication>

This, however, is not the end of this tutorial series. So be sure to read the next part as well!

Thanks for reading!

Related:

Creating a contact book using Flex, AIR and SQLite database: Part 1
Creating a contact book using Flex, AIR and SQLite database: Part 2
Creating a contact book using Flex, AIR and SQLite database: Part 4
Creating a contact book using Flex, AIR and SQLite database: Part 5
Creating a contact book using Flex, AIR and SQLite database: Part 6
Creating a contact book using Flex, AIR and SQLite database: Part 7
Creating a contact book using Flex, AIR and SQLite database: Part 8
Creating a contact book using Flex, AIR and SQLite database: Part 9
Creating a contact book using Flex, AIR and SQLite database: Part 10
Creating a contact book using Flex, AIR and SQLite database: Part 11
Creating a contact book using Flex, AIR and SQLite database: Part 12
Creating a contact book using Flex, AIR and SQLite database: Part 13
Creating a contact book using Flex, AIR and SQLite database: Part 14
Creating a contact book using Flex, AIR and SQLite database: Part 15
Creating a contact book using Flex, AIR and SQLite database: Part 16

No comments:

Post a Comment